版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/eguid_1/article/details/52083016
我们在接触js的时候,一般都是通过各种function来定义一些方法,让它们帮我们做一些事情,一个js可以包含很多个js,而这些function都是单独存在。
在开发的时候我们会将几个function组合成一个功能,我们称这个功能的几个function为一个模块。
现在AMD规范定义了这种模块对象,我们称之为直接对象,用于封装这个模块种所有变量和方法。
举个例子:
<span style="font-size:18px;">var model1=(function() { var oldtext = {}; var _setText = function(id, text) { var node = document.getElementById(id); oldtext[id] = node.innerHTML; node.innerHTML = text; }; var _restoreText = function(id) { document.getElementById(id).innerHTML = oldtext[id]; }; return { setText: _setText, restore: _restoreText } });</span>
这里我们定义了一个JS的直接对象,这个对象里面封装了一个数组变量和两个方法,return用于对外提供调用入口,现在我们可以直接通过model1().setText(id,text)或者model1().restore(id)的方式调用该对象里提供的方法。
当然现在我们可以按照AMD规范来这样写:
<span style="font-size:18px;">define (function() { var oldtext = {}; var _setText = function(id, text) { var node = document.getElementById(id); oldtext[id] = node.innerHTML; node.innerHTML = text; }; var _restoreText = function(id) { document.getElementById(id).innerHTML = oldtext[id]; }; return { setText: _setText, restore: _restoreText } });</span>
没错,只把直接变量基础上把接收变量改为define就是一个符合AMD规范的异步模块了。
define函数:
<span style="font-size:18px;">define([module-name?], [array-of-dependencies?], [module-factory-or-object]);</span>
module-name: 模块标识,可以省略。
array-of-dependencies: 所依赖的模块,可以省略。
module-factory-or-object: 模块的实现,或者一个JavaScript对象。
define([ 'dojo/dom' ], function(dom) { var oldText = {}; return { setText: function(id, text) { var node = dom.byId(id); oldText[id] = node.innerHTML; node.innerHTML = text; }, restoreText: function(id) { var node = dom.byId(id); node.innerHTML = oldText[id]; delete oldText[id]; } }; });
既然我们定义了一个模块,自然要使用这个模块,如何使用?异步加载机制!
有许多js库都是支持异步加载js的,比如比较流行的requrieJS,当然他们的用法都是一致的。
<span style="font-size:18px;">var dojoConfig = { async: true, packages: [{name: "js",location: location.pathname.replace(/\/[^/]*$/, '') + '/js' }] };</span>
<span style="font-size:18px;">require(["js/public/swapText"], function(swapText) { swapText.setText(index, msg); });</span>
后面会继续探讨dojo框架技术。。。。
本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。
我来说两句