javascript的AMD规法--esl与requirejs浅介。
AMD规范,全称是Asynchronous Module Definition,即异步模块加载机制。从它的规范描述页面看,AMD很短也很简单,但它却完整描述了模块的定义,依赖关系,引用关系以及加载机制。它推荐开发人员将 JavaScript 代码封装进一个个模块,对全局对象的依赖变成了对其他模块的依赖,无须再声明一大堆的全局变量。通过延迟和按需加载来解决各个模块的依赖关系。模块化的 JavaScript 代码好处很明显,各个功能组件的松耦合性可以极大的提升代码的复用性、可维护性。这种非阻塞式的并发式快速加载 JavaScript 代码,使 Web 页面上其他不依赖 JavaScript 代码的 UI 元素,如图片、CSS 以及其他 DOM 节点得以先加载完毕,Web 页面加载速度更快,用户也得到更好的体验。
其中RequireJS 是一个非常小巧的 JavaScript 模块载入框架,是 AMD 规范最好的实现者之一。esl则是针对一些特定业务开发的符合AMD规范的加载器,是百度ecom前端团队的作品,文后有github链接,下面是二者的一些区别:
- 体积更小 (Smaller)
- 性能更高 (Higher performance)
- 更健壮 (More Robustness)
- 不支持在
非浏览器端
使用 (Browser only) - 依赖模块
用时定义
(Lazy define)
笔者前端并不熟悉,上面资料也多是搜集各种资料看到的,不过对这些知识点有些概念后可以知道类似下面页面是啥意思:
上面的页面就是先调用了esl加载器,然后载入了jquery。
另外esl载入是另一个站点,不清楚是不是cdn方式,下面说一下cdn:
CDN的全称是Content Delivery Network,即内容分发网络。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络"边缘",使用户可以就近取得所需的内容,解决 Internet网络拥挤的状况,提高用户访问网站的响应速度。看完上面一大串的定义,可以把CDN简单的描述为:内容分发,解决网络拥挤和提供网站相应速度。例如:引用网络脚本库(如:jQuery)和网络图片资源等。许多网站都从Google的CDN中引用相应的Javascript库。上面的应该是在cdn引入了esl然后esl加载了本地站点的jquery。另见下图:
这里请求的网址是ss1.bdstatic.com:网站备案/许可证号 京ICP证030173号-23 网站名称 百度网页检索静态内容服务 网站首页网址 www.bdstatic.com 审核时间 2012-06-01 主办单位名称 北京百度网讯科技有限公司 主办单位性质 企业..................应该是提供各种静态资源的站点,而且查到百度是有cdn平台的,而且还向外出售相关服务。
参考资料:
http://requirejs.cn/
https://github.com/ecomfe/esl
http://www.ibm.com/developerworks/cn/web/1209_shiwei_requirejs/