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)

巴特西

seajs 入门

最新文章

热门文章