javascript代码实例教程-RequireJS

发布时间:2019-02-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-RequireJS脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

amD

异步模块定义(AMD)的整体目的是提供模块化的JavaScript解决方案

requireJS官网: https://requirejs.org

关键概念

模块定义

define(     module_id /* optional */ ,     ["foo", "bar"] /* dePEndencies,optional */,     function (foo, bar) {}  )
["foo","bar"]是module依赖的其他模块,当这两个模块加载之后,被传给function作为传入参数。function必须返回一个对象,否则不能作为module,因为module一定是一个拥有特殊功能,并且久经考验的对象。

模块依赖加载

require(     ["foo", "bar"] , function(foo,bar) {        foo.DOSomething();      }  )

require一般用来加载模块执行模块的功能。

模块被加载后,不是直接存储在window对象上,而是在require,requreJS等方法对象上的某个属性中,比如defined, registry等。

兼容性

IE 6+ ..........COMpatible ?
Firefox2+ ..... compatible ?
Safari3.2+ .... compatible ?
Chrome3+ ...... compatible ?
opera10+ ...... compatible ?

在浏览器中的原理

module_id就是JavaScript文件的名字,通过baseUrl判断模块的位置之后,在head中创建script元素,修改src ,从而实现js模块的加载。

因为是新创建的script元素,浏览器并不会停止HTML页面渲染,因此,页面上的script比通过这种方式加载的JS代码先执行。

模块化的好处

使用require之前,为了止命名冲突,通常会有一个全局的命名空间,因此,模块文件的格式经常是:

namespace.module= (function(){return module;})();

使用require之后,模块文件的格式就变成类似下面的结构:

define("module_id", [depended modules], (function(depended modules){return module;})(); // 或者下面这种,下面这一种比较普遍,前一种一般只适合在具体项目中使用。如果属于比较公用的模块,应该使用这种方式: (function(root){return module;})(this);

也就是脱离了特定的命名空间的限制,模块真正的做到独立。这样,不论是在哪个项目中,只要使用了requireJS就可以加载module,并随意命名。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-RequireJS全部内容,希望文章能够帮你解决javascript代码实例教程-RequireJS所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。