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 相关文章推荐
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
js实现键盘自动打字效果
Dec 23 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
js实现点击按钮复制文本功能
Jul 20 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
Nov 29 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 Javascript
使用Typescript和ES模块发布Node模块的方法
May 25 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项目开发中最常用的自定义函数整理
2010/12/02 PHP
UCenter 批量添加用户的php代码
2012/07/17 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
Javascript 遍历对象中的子对象
2009/07/03 Javascript
用于节点操作的API,颠覆原生操作HTML DOM节点的API
2010/12/11 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
jQuery队列操作方法实例
2014/06/11 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
javascript判断css3动画结束 css3动画结束的回调函数
2015/03/10 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
vuejs2.0实现一个简单的分页示例
2017/02/22 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
Vue中对拿到的数据进行A-Z排序的实例
2018/09/25 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
[42:32]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
深入理解Django的中间件middleware
2018/03/14 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
Python发送手机动态验证码代码实例
2020/02/28 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
浅析图片上传及canvas压缩的流程
2020/06/10 HTML / CSS
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
什么是三层交换,说说和路由的区别在那里
2014/09/01 面试题
《四季》教学反思
2014/04/08 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记