最近想搞搞JS模块化, 读到了园子里的一篇好文: http://www.cnblogs.com/lvdabao/p/js-modules-develop.html
看里面讲seajs不错, 于是想学一下,
到官网一看, 5分钟入门, 真是好感度倍增, 万万没想到人家那教程, 是写给玩过nodejs, requirejs之类的高人看的, 咱这智商,50分钟都不够啊.
好容易找资料弄出个最最简单的东西, 记录一下:
1) 下载seajs. 不知道各个版本都有什么区别, 总之下载最新的 sea.js 应该OK.
2) 引用和配置. 在公共或模块页面里引用, 配置一下, 下面是asp.net mvc的语法:
1 <script src="~/viewsjs/sea.js"></script> 2 <script> 3 seajs.config({ 4 base: "@Url.Content("~/ViewsJs/")", 5 alias: { 6 "jquery": "jquery/jquery/1.10.1/jquery.js" 7 } 8 }); 9 </script>
放在页面里, 主要是为了方便确定base路径. base和alias什么用途, 咱还没理解透, 也就不解析了.
3) 写测试模块. 既然是模块化, 先要做个模块吧:
ClientsSelectorUnit.js
1 define('ClientsSelectorUnit', [], function (require, exports, module) { 2 var $el = null; 3 4 function test(){}; 5 6 exports.init = function (containerId) { 7 $el = $(containerId); 8 test(); 9 alert("ClientsSelectorUnit.js loaded! " + containerId); 10 }; 11 12 });
注意 $el , test() 的使用方式不会污染全局对象.
这个文件和我sea.js放一个地方了, 放哪都可以, 引用时注意一下路径. 这里暴露了个init方法.
4) 调用模块
1 <script> 2 seajs.use("ClientsSelectorUnit", function (unit) { 3 unit.init("divClientsSelector"); 4 }); 5 </script>
这是个简单的入门测试, 所以调用是写在页面里了, 估计写在js文件里也可以的.
主要是 use 方法的第一个参数指向要调用的模块的文件名, 而后面的 function 里的参数是做为模块的一个引用名, 在函数体里面可以方便的引用模块中通过 exports 暴露出的方法.
我们总算成功引用了一个js模块了. 在第3)步中, 定义模块的时候, 有三个参数: require , exports , module . 其中的exports 我们用到了, require应该是可以用来引用其它模块, 从而完成模块依赖管理的, 而module参数暂时没搞懂是干嘛的.
到这里算是小入门了吧, 先这样了.