兼容所有浏览器的 DOM 载入事件

Chrome DOM HTML JavaScript jQuery 事件 Firefox Safari IE

本文就页面载入问题讨论DOMContentLoadedloadreadyState等DOM事件的浏览器兼容性, 并给出怎样绑定DOM载入事件以兼容所有的浏览器。 接着介绍jQuery对该问题的实现源码,以及jQuery中$(document).ready()$(window).load()方法的区别。

在讨论页面载入事件之前,首先需要区分的两个概念:DOM就绪和渲染结束。

  • DOM就绪是指浏览器已经接收到整个HTML并且DOM解析完成;
  • 渲染结束是指浏览器已经接收到HTML中引用的所有样式文件、图片文件、以及Iframe等资源并渲染结束。

overflow 与布局上下文(BFC)

CSS HTML float overflow BFC

HTML 采用流式布局方式,CSS 的float在这种环境下非常重要。 float 常与 overflow 配合使用都是因为 overflow 会创建新的 BFC,进而影响布局。 本文从三个方面介绍 overflow 对浮动的影响:清除环绕,包裹浮动元素,以及独立布局环境。 在此之前先来了解一下什么是 BFC:

BFC(Block Formatting Context,布局上下文) 是 CSS 渲染过程中进行布局的盒子,所有浮动子元素都在盒子内进行布局。 也就是说 BFC 内的浮动元素不会影响到 BFC 外部,BFC 外部的环境也不会影响 BFC 内的布局。 MDN 共列出 8 类可以生成 BFC 的元素,包括浮动和绝对定位元素、行内块,以及 overflow 不为 visible 的元素。 可见,设置 overflow:hidden 可以开启一个 BFC

BFC 很多时候翻译为块级格式化上下文,其实笔者认为布局上下文更为贴切。 本质上讲一个 BFC 就是一个矩形块的独立布局环境。

从MVC数据同步到AngularJS双向绑定

AngularJS MVC Unix WPF 事件 数据绑定 MVVM

MVC恐怕是Web开发中最流行的术语,它是一种设计模式,也是软件架构风格。 MVC也成为一整个系列的设计模式,衍生品包括PAC、HMVC、MVP、MTV、MVVM等。 本文从经典MVC模式谈起,讨论MVC下数据同步策略的设计, 进一步引申出MVVM设计模式,并讨论其数据绑定的优缺点。

MVC

MVC(Model-View-Controller)一词最初在1979年由Trygve Reenskaug提出(Smalltalk-79), 此后Krasner和Pope在Smalltalk-80中再次进行了描述。 最初Krasner和Pope描述的MVC设计是这样工作的:

mvc

弱类型只是一种信仰

C++ Java JavaScript 接口 弱类型 类型转换

最近完成了brick.js-1.1.2版本,添加了对预处理器插件的支持。 写越多的JavaScript,越能体会弱类型面向对象语言的优雅。 然而类型系统的争辩并不是一场理性的战争,弱类型只是一种信仰。

强类型与弱类型

类型系统(type system)是程序设计语言中,为变量、表达式、函数等程序结构设置类型的规则。提出类型系统的初衷是为了减少程序Bug,基本思想是用接口来描述模块边界,使得程序员或编译器更方便地检查模块之间是否兼容。

现在看到的绝大多数编程语言都是有类型的编程语言(typed programming language)。 但根据是否允许隐式类型转换,这些语言可以分为强类型语言和弱类型语言(Strong and weak typing)。

C语言属于弱类型语言,因为void*可转换为任何类型的指针。面向对象语言往往是强类型的, 它们通过接口和共同父类来识别兼容的类型,很少需要类型转换。

在旷日持久的强弱类型的争辩中,支持强类型的一方似乎占据了上风。 C11花费大量力气维护完美的类型系统,把所有破坏类型系统的行为都严格标识出来: const_cast, dynamic_cast, reinterpret_cast, static_cast (见最小化类型转换-Effective C++)。

然而在V8引擎和Node.js出现不久,JavaScript软件包却在Github和NPM迅速兴起。 弱类型带来的不仅仅是快乐,还有更加迅速的开发周期。

跟踪 Github 项目的持续集成状态

持续集成 Github NPM Mocha 测试

不知从什么时候开始,Github项目的README中到处都能看到绿色的小徽章。 通过这些徽章可以获知项目的最新版本号、构建状态、测试覆盖率, 以及依赖软件包的过期情况。请看这个Brick.JS项目的首页:

brick.js

项目标题Brick.JS下是一排徽章,它们分别表示着: 该项目在npm的最新版本是2.0.2,构建和测试状态是通过(还可能是failing), 测试程序的覆盖率为92%,该项目的依赖软件包都处于最新状态。 每次Push一些提交到Github仓库,测试和构建都会自动执行,这些徽章都会更新。

一个简易的 CommonJS 实现

JavaScript CommonJS 模块化

CommonJS规范定义了如何编写JavaScript模块,以及模块间如何相互依赖。 支持模块化的JavaScript开发过程,浏览器端已有RequireJS和Sea.JS等具体实现。 最近Brick.JS也实现了 CommonJS规范来实现客户端JavaScript的模块化。 该实现与Node.js风格兼容,这意味着在不考虑内置package的情况下, 实现了客户端与服务器共用代码。

Brick.JS 是一个基于Node.js的HMVC风格的Web应用开发框架,意图最大化代码复用和项目特性的伸缩性。

本文简要介绍Brick.JS中CommonJS的实现过程。 CommonJS实现起来并不困难,主要精力需要用在错误处理、网络和鲁棒性上。 在此之前先来看一个CommonJS的例子:

// file: foo/client.js
exports.author = 'harttle.land';
exports.log = console.log.bind(console);

// file: bar/client.js
var foo = require('foo');
foo.log(foo.author);        // harttle.land

这两个文件的依赖方式符合CommonJS规范,既可以在Node.js下运行, 现在Brick.JS要让它们在浏览器端运行!请看下文。

导航: 上一页 下一页

🔝