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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
JS判定是否原生方法
Jul 22 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
jquery中键盘事件小结
Feb 24 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 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&amp;mysql(二)
2006/10/09 PHP
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
php 全局变量范围分析
2009/08/07 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
PHP 匿名函数与注意事项详细介绍
2016/11/26 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
extjs 学习笔记(一) 一些基础知识
2009/10/13 Javascript
Javascript 网页水印(非图片水印)实现代码
2010/03/01 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
Angularjs 基础入门
2014/12/26 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
python爬取网页内容转换为PDF文件
2020/07/28 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
买房子个人收入证明
2014/01/16 职场文书
2014年大学生自我评价
2014/01/19 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
初中学生评语大全
2014/04/24 职场文书
管理建议书范文
2014/05/13 职场文书
公司应聘自荐书
2014/06/14 职场文书
诚信考试标语
2014/06/24 职场文书
绿色小区申报材料
2014/08/22 职场文书
学生抄作业检讨书(2篇)
2014/10/17 职场文书
2015新年寄语大全
2014/12/08 职场文书
日元符号 ¥
2022/02/17 杂记
idea下配置tomcat避坑详解
2022/04/12 Servers