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 相关文章推荐
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
Sep 25 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
vue项目中使用百度地图的方法
Jun 08 Javascript
小程序实现图片预览裁剪插件
Nov 22 Javascript
原生js 实现表单验证功能
Feb 08 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
如何开发一个虚拟域名系统
2006/10/09 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
Symfony2联合查询实现方法
2016/03/18 PHP
详解thinkphp5+swoole实现异步邮件群发(SMTP方式)
2017/10/13 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
nodejs批量修改文件编码格式
2015/01/22 NodeJs
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
JavaScript判断数字是否为质数的方法汇总
2016/06/02 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python使用pymysql小技巧
2017/06/04 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
Python 监测文件是否更新的方法
2019/06/10 Python
Python2.7:使用Pyhook模块监听鼠标键盘事件-获取坐标实例
2020/03/14 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
如何快速理解python的垃圾回收机制
2020/09/01 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
大韩航空官方网站:Korean Air
2017/10/25 全球购物
售后专员岗位职责
2013/12/08 职场文书
家长会演讲稿
2014/04/26 职场文书
村庄绿化方案
2014/05/07 职场文书
12岁生日演讲稿
2014/05/14 职场文书
HR求职自荐信范文
2014/06/21 职场文书
食品质检员岗位职责
2015/04/08 职场文书