seajs 入门

最近想搞搞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的语法:

 

  <script src="~/viewsjs/sea.js"></script>
     <script>
         seajs.config({
             base: "@Url.Content("~/ViewsJs/")",
             alias: {
                 "jquery": "jquery/jquery/1.10.1/jquery.js"
             }
         });
 </script>

放在页面里, 主要是为了方便确定base路径.  base和alias什么用途, 咱还没理解透, 也就不解析了.

 

3) 写测试模块.  既然是模块化, 先要做个模块吧:

ClientsSelectorUnit.js

 define('ClientsSelectorUnit', [], function (require, exports, module) {
     var $el = null;

     function test(){};

     exports.init = function (containerId) {
         $el = $(containerId);
         test();
         alert("ClientsSelectorUnit.js loaded! " + containerId);
      };

  });

注意 $el , test() 的使用方式不会污染全局对象.

这个文件和我sea.js放一个地方了, 放哪都可以, 引用时注意一下路径.   这里暴露了个init方法.

 

4) 调用模块

 <script>
     seajs.use("ClientsSelectorUnit", function (unit) {
         unit.init("divClientsSelector");
     });
 </script>

 这是个简单的入门测试, 所以调用是写在页面里了, 估计写在js文件里也可以的.

主要是 use 方法的第一个参数指向要调用的模块的文件名, 而后面的 function 里的参数是做为模块的一个引用名, 在函数体里面可以方便的引用模块中通过 exports 暴露出的方法.

 

我们总算成功引用了一个js模块了.  在第3)步中, 定义模块的时候, 有三个参数: require , exports , module . 其中的exports 我们用到了, require应该是可以用来引用其它模块, 从而完成模块依赖管理的, 而module参数暂时没搞懂是干嘛的.  

 

到这里算是小入门了吧, 先这样了.  

 

 

来自为知笔记(Wiz)