雨夜带刀's Blog

模块加载器的进化–并行加载

easy.js的模块加载器的详解(如果你没有阅读过,最好是先去阅读下,这样才能更好的理解这篇博文)中我详细的介绍过有关 easy.js 的加载器的实现。其加载和执行的顺序都要严格依赖队列一个一个的加载和执行,这种加载和执行方式就是串行。此文将介绍模块加载器并行加载的实现。

在讲解并行加载的实现原理之前,首先有必要对 JavaScript 文件的加载的执行有一个初步的了解。

JavaScript 在页面渲染时可能会对 DOM 元素进行修改,并且多个文件之间还会有依赖的关系,因此必须严格按照顺序依次执行,正是由于此种特性就势必对之后的页面资源的加载造成阻塞。但是请注意,这里说到的是按顺序执行

由于 JavaScript 阻塞的特性,也影响到浏览器对 JavaScript 文件的加载,在老版本浏览器中,加载完就执行,执行完再加载,这正是上面说到的串行加载。为了提升性能,在现代浏览器中,如新版本的 Firefox 和 Chrome,将加载改成了并行。并行加载允许一次性同时加载多个文件,在 HTTP1.1 中,多个文件并行加载只需要发起一个 TCP 连接数。试想下,一条流水线依次生产十个产品肯定要比十条流水线同时生产一个产品要慢得多。虽然在现代浏览器中可以实现并行加载 JavaScript,但是其执行顺序还是要按照顺序来执行的。

之前的 easy.js 的模块加载器的确是按照老版本浏览器串行加载和执行的思路来实现的,而最新版的模块加载器就是按照现代浏览器的并行加载,串行执行的思路来实现的。

使用Promise模式来简化JavaScript的异步回调

网页的交互越来越复杂,JavaScript 的异步操作也随之越来越多。如常见的 ajax 请求,需要在请求完成时响应操作,请求通常是异步的,请求的过程中用户还能进行其他的操作,不会对页面进行阻塞,这种异步的交互效果对用户来说是挺有友好的。但是对于开发者来说,要大量处理这种操作,就很不友好了。异步请求完成的操作必须预先定义在回调函数中,等到请求完成就必须调用这个函数。这种非线性的异步编程方式会让开发者很不适应,同时也带来了诸多的不便,增加了代码的耦合度和复杂性,代码的组织上也会很不优雅,大大降低了代码的可维护性。情况再复杂点,如果一个操作要等到多个异步 ajax 请求的完成才能进行,就会出现回调函数嵌套的情况,如果需要嵌套好几层,那你就只能自求多福了。

easy.js的模块加载器的详解

模块加载器的实现方法应该比较多,主要还是看哪种实现起来更简单,更易扩展。对于遵循不同规范的模块加载器,实现原理又千差万别。不管是用哪种实现方法,最终都是要满足模块加载器的那些最基本的功能。那么模块加载器的最基本的功能基本就可以概括成下面这几点。

  • 定义模块
  • 处理依赖
  • 加载模块

定义模块

define( "hello", function(){
 return "hello world";
});

javascript动画剖析

最近将去年写过的easyAnim进行了重构和优化以整合到我的javascript框架中,回过头来发现以前写的代码确实还有很多可以改进的地方,这也证明自己还是有点进步的。趁有点时间,将javascript动画运行的机制和实现的思路整理了一下,算是做个小总结,也希望对有兴趣的人有点帮助。篇幅稍长,看之前请自备瓜子啤酒。

当然这里说的javascript动画是指利用javascript来计算DOM元素的CSS属性值来实现的动画,HTML5和CSS3的发展让WEB中的动画有了更多的可能,但这些看起来比较高级的东西还需要浏览器给力点才行。

解析CSS属性值

理论上,只要CSS的属性值包含了数值,就可以进行动画,事实上,包含了数值的CSS属性值有很多很多,拿最常见的属性来说:

div{ left:100px; }

上面的位置值就包含了数值“100”,要想实现该元素从100px的位置到600px的位置,只要不断的修改该元素的位置值,达到一定的速度就实现了动画,据国外的统计,每25毫秒切换一次画面,就可以实现“动”的效果。

CSS属性值都是字符串,为了方便进行计算,需先将字符串转换成数值,并且很多属性值都包含了单位,所以最好解析成下面这种格式:

'100px' ==> { val : 100, unit : 'px' }

attribute和property的区别

DOM元素的attribute和property很容易混倄在一起,分不清楚,两者是不同的东西,但是两者又联系紧密。很多新手朋友,也包括以前的我,经常会搞不清楚。

attribute翻译成中文术语为“特性”,property翻译成中文术语为“属性”,从中文的字面意思来看,确实是有点区别了,先来说说attribute。

attribute是一个特性节点,每个DOM元素都有一个对应的attributes属性来存放所有的attribute节点,attributes是一个类数组的容器,说得准确点就是NameNodeMap,总之就是一个类似数组但又和数组不太一样的容器。attributes的每个数字索引以名值对(name=”value”)的形式存放了一个attribute节点。

hello

上面的div元素的HTML代码中有class、id还有自定义的gameid,这些特性都存放在attributes中,类似下面的形式:

[ class="box", id="box", gameid="880" ]
头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。
第 4 页,共 8 页« 最新...23456...最旧 »