seaJs的模块定义和模块加载浅析


Posted in Javascript onJune 06, 2014

SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块和css模块样式。SeaJS非常小巧,小巧在于压缩和gzip后体积只有4K,而且接口和方法也非常少,SeaJS 就两个核心:模块定义和 模块的加载及依赖关系。SeaJS非常强大,SeaJS可以加载任意 JavaScript 模块和css模块样式,SeaJS会保证你在使用一个模块时,已经将所依赖的其他模块载入到脚本运行环境中。玉伯的说法,SeaJS可以让你享受写代码的乐趣,不用去管那些加载的问题。你是否厌倦了如此多的js和css引用,我数了一下我们公司网站的个人主页首页上有39个css和js引用,带来的影响可想而知:

1.不利于维护,前端后端都一样
2.http请求过多,当然这个可以通过合并解决,但是如果没有后端直接合并,人工成本非常大,就算后端合并,维护的时候,这么长的一个字符串,眼睛肯定看花

用SeaJS就能非常好的解决这些问题。

模块的定义define

定义一个模块比较简单,例如定义一个sayHello模块,建一个sayHello.js文档:

define(function(require,exports,module){
 exports.sayHello = function(eleID,text) {
  document.getElementById(eleID).innerHTML=text;
 };
});

这里先看一下exports参数,exports参数是用来向外提供模块的 API.也就是通过这个exports其他的模块就能访问sayHello方法。

模块的加载use

例如我们页面上有一个id为“out”的元素,要输出“Hello SeaJS!”,
那么我们可以先引入sea.js
然后使用sayHello模块:

seajs.use("sayHello/sayHello",function(say){
 say.sayHello("out","Hello SeaJS!");
});

这里的use就是使用模块的方法:

第一个参数就是模块表示,他是相对于sea.js的相对路径来表示,sayHello.js后面的“.js”后缀可以省略,当然这个模块标识还有很多方法,具体查看官方说明:http://seajs.com/docs/zh-cn/module-identifier.html
第一个参数是一个callback函数。say.sayHello()就是调用sayHello模块的exports.sayHello方法,当然这callback函数中有个say参数。

模块的依赖关系

模块的依赖其实在模块定义的时候就应该存在了。比如说把上面的sayHello模块改写一下,假设我们已经有了一个通用的DOM模块,比如一些获取元素,设置样式等方法,例如这么一个DOM模块,如下编写DOM.js

define(function(require, exports, module) {
    var DOM = {
        /**
* 通过元素的id属性获取DOM对象,参数为字符串,或多个字符串
* @id getById
* @method getById
* @param {String} id the id attribute
* @return {HTMLElement | Object} The HTMLElement with the id, or null if none found.
*/
        getById: function() {
            var els = [];
            for (var i = 0; i < arguments.length; i++) {
                var el = arguments[i];
                if (typeof el == "string") {
                    el = document.getElementById(el);
                }
                if (arguments.length == 1) {
                    return el;
                }
                els.push(el);
            }
            return els;
        },
        /**
* get 获取对象,可以传入对象或字符串,如果传入字符串者以document.getElementById()的方式获取对象
* @id get
* @param {String} el html element
* @return {Object} HTMLElement object.
*/
        get: function(el) {
            if (el & amp; amp; amp; & amp; amp; amp; (el.tagName || el.item)) {
                return el;
            }
            return this.getById(el);
        }
    };
    return DOM;
});

那么sayHello模块可以这样编写,为了不影响原来的demo页面,所以我定一个新的sayHelloA模块,我们可以这样编写sayHelloA.js:
define(function(require, exports, module) {
    var DOM = require("DOM/DOM");
    require("sayHelloA/sayHello.css");
    exports.sayHello = function(eleID, text) {
        DOM.get(eleID).innerHTML = text;
    };
});

require 函数就是用来建立模块的依赖关系,比如上面sayHelloA模块,就是依赖于DOM模块,因为用到了DOM模块的get方法。
注意这里的var DOM=require("DOM/DOM"),这句是将应用进来的DOM模块赋值给DOM;require("sayHelloA/sayHello.css")是直接应用sayHello.css css模块或者说文件。这样页面上会引用这个css文件。

最近这几天一直捣腾SeaJS,越捣腾越喜欢,感谢玉伯!感谢SeaJS!当然你可能觉得这么简单的几个实例没必要这么做。确实如果js文件少的小项目感觉不错模块化的优势,但是,更多的在js文件多或着中型以上项目这个模块化的优势就体现出来了。

Javascript 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
Nov 26 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
js实现交通灯效果
Jan 13 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
Jun 06 #Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 #Javascript
使用GruntJS构建Web程序之合并压缩篇
Jun 06 #Javascript
Javascript动态引用CSS文件的2种方法介绍
Jun 06 #Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 #Javascript
Node.js中对通用模块的封装方法
Jun 06 #Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 #Javascript
You might like
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
PHP发送短信代码分享
2015/08/11 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
jquery ui dialog实现弹窗特效的思路及代码
2013/08/03 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
JS实现table表格固定表头且表头随横向滚动而滚动
2017/10/26 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
vue实现表格过滤功能
2019/09/27 Javascript
vue多个元素的样式选择器问题
2019/11/29 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
python的类方法和静态方法
2014/12/13 Python
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
Python中List.count()方法的使用教程
2015/05/20 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
HTML5中Canvas与SVG的画图原理比较
2013/01/16 HTML / CSS
亚马逊中国官方网站:amazon.cn
2017/05/25 全球购物
银行求职信个人范文
2013/12/16 职场文书
书法培训心得体会
2014/01/05 职场文书
空气环保标语
2014/06/12 职场文书
助人为乐道德模范事迹材料
2014/08/16 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2015年校长新年寄语
2014/12/08 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
超详细Python解释器新手安装教程
2021/05/10 Python
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers