sea.js模块化编程
* 为什么要模块化?
- 解决文件依赖
- 解决命名冲突
* JS中模块的定义
通常,我们可以这样定义一个模块。
利用闭包特性定义一个模块,对全局暴露一个变量,外部不能访问模块内部定义的变量和方法。
立即执行函数,闭包
var myModule = (function(){
var var1 = 1;
var var2 = 2;
function fn1(){
}
function fn2(){
}
return {
fn1: fn1,
fn2: fn2
};
})();
node.js中的模块化
node中模块的引入是同步的,遵循CommonJS规范。
sea.js
遵循CMD (通用模块定义) ,对于依赖的模块,就近依赖,延迟执行。
sea.js写法
define(function(require,exports,module){
var a = require('./a')
a.todo()
//***省略100行
var b = require('./b') //依赖就近书写
b.todo()
//.....
})
define定义模块
define函数用来定义模块
define(factory) factory为模块的构造方法
define(function(require,exports,module){
// 模块代码
});
define(id?,deps?,factiory)
id表示模块标识,数组deps是模块依赖,两个参数都可以省略,可以通过构建工具自动生成。
修改jquery为CMD模块
define.cmd Object 一个空对象,可用来判定当前页面是否有 CMD 模块加载器:
对于非seajs模块化的类库,我们可以手动定义它,通过define的cmd规范定义就可以正常使用了
if (typeof define === 'function' && define.cmd) {
define(function (require, exports, module) {
module.exports = jQuery;
})
暴露接口
exports
module.exports
return
一定不能为exports赋值对象,因为exports仅仅是module.exports的一个引用
define(function(require,exports){
// 第一种
exports.foo = 'bar';
exports.do = function(){}
//第二种
return {
foo : 'bar',
do : function(){}
};
//第三种
module.exports = {
foo : 'bar',
do : function(){};
}
});
启动
<script type="text/javascript" src="sea.js"></script>
<script>
seajs.use('main/main') //这个文件会第一个被sea.js加载
</script>
sea.js模块化编程的更多相关文章
- 从273二手车的M站点初探js模块化编程
前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...
- require.js实现js模块化编程(一)
1.认识require.js: 官方文档:http://requirejs.org/RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的Requ ...
- require.js实现js模块化编程(二):RequireJS Optimizer
require.js实现js模块化编程(二):RequireJS Optimizer 这一节,我们主要学习一下require.js所提供的一个优化工具r.js的用法. 1.认识RequireJS Op ...
- 初步理解require.js模块化编程
初步理解require.js模块化编程 一.Javascript模块化编程 目前,通行的Javascript模块规范共有两种:CommonJS和AMD. 1.commonjs 2009年,美国程序员R ...
- [转]js模块化编程之彻底弄懂CommonJS和AMD/CMD!
原文: https://www.cnblogs.com/chenguangliang/p/5856701.html ------------------------------------------ ...
- JS模块化编程之加载器原理
世面上有好多JavaScript的加载器,比如 sea.js, require.js, yui loader, labJs...., 加载器的使用范围是一些比较大的项目, 个人感觉如果是小项目的话可以 ...
- js模块化编程总结
大家都知道,js中的变量(variable)有其作用范围,比如:函数里用var定义的变量在函数外是看不到的,而定义在函数外面的变量(不能有没有var修饰)均是全局变量,在js程序的任何位置都可以访问. ...
- js模块化编程之彻底弄懂CommonJS和AMD/CMD!
先回答我:为什么模块很重要? 答:因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块.但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写 ...
- 好文推荐系列-------(5)js模块化编程
本文主要来源于阮一峰的<Javascript模块化编程>系列文章整合,原文地址:http://www.ruanyifeng.com/blog/2012/10/javascript_modu ...
随机推荐
- Atitit.软件开发的三层结构isv金字塔模型
Atitit.软件开发的三层结构isv金字塔模型 第一层,Implements 层,着重与功能的实现.. 第二次,spec层,理论层,设计规范,接口,等.流程.方法论 顶层,val层,价值观层,原则, ...
- BZOJ 1391: [Ceoi2008]order [最小割]
1391: [Ceoi2008]order Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 1509 Solved: 460[Submit][Statu ...
- 需要UWP Vendor一名
工作地点北京,海淀,微软大厦2号楼,小冰项目组.
- 搞了我一下午竟然是web.config少写了一个点
Safari手机版居然有个这么愚蠢的bug,浪费了我整个下午,使尽浑身解数,国内国外网站搜索解决方案,每一行代码读了又想想了又读如此不知道多少遍,想破脑袋也想不通到底哪里出了问题,结果竟然是web.c ...
- Entity Framework 6 Recipes 2nd Edition(13-5)译 -> 使POCO的修改追踪更高
问题 你正在使用POCO,你想提高修改跟踪的性能,同时使内存消耗更少.另外,你想通过EF的CodeFirst方式来实现. 解决方案 假设你有一个关于Account(帐户)和相关的Payments(支付 ...
- node.js学习总结(一)
1.1.1 安装 Node.js 有三种方式安装 Node.js:一是通过安装包安装,二是通过源码编译安装,三是在 Linux 下可以通过 yum|apt-get 安装,在 Mac 下可以通过 Hom ...
- Java中IO流,输入输出流概述与总结
总结的很粗糙,以后时间富裕了好好修改一下. 1:Java语言定义了许多类专门负责各种方式的输入或者输出,这些类都被放在java.io包中.其中, 所有输入流类都是抽象类InputStream(字节输入 ...
- ASP.NET AntiXSS的使用
下载类库: http://wpl.codeplex.com 添加程序集引用 在web.config文件中将AntiXSS类库注册为应用程序的编码器 在<system.web& ...
- ASP.NET Core中的project.json何去何从?
Shawn Wildermuth (https://wildermuth.com/2016/05/12/The-Future-of-project-json-in-ASP-NET-Core) If y ...
- 【原创经验分享】JQuery(Ajax)调用WCF服务
最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚 ...
- 解决文件依赖
- 解决命名冲突
立即执行函数,闭包var myModule = (function(){var var1 = 1;var var2 = 2;function fn1(){}function fn2(){}return {fn1: fn1,fn2: fn2};})();
define(function(require,exports,module){var a = require('./a')a.todo()//***省略100行var b = require('./b') //依赖就近书写b.todo()//.....})
define(function(require,exports,module){// 模块代码});
if (typeof define === 'function' && define.cmd) {define(function (require, exports, module) {module.exports = jQuery;})
一定不能为exports赋值对象,因为exports仅仅是module.exports的一个引用
define(function(require,exports){// 第一种exports.foo = 'bar';exports.do = function(){}//第二种return {foo : 'bar',do : function(){}};//第三种module.exports = {foo : 'bar',do : function(){};}});
启动
<script type="text/javascript" src="sea.js"></script><script>seajs.use('main/main') //这个文件会第一个被sea.js加载</script>
前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...
1.认识require.js: 官方文档:http://requirejs.org/RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的Requ ...
require.js实现js模块化编程(二):RequireJS Optimizer 这一节,我们主要学习一下require.js所提供的一个优化工具r.js的用法. 1.认识RequireJS Op ...
初步理解require.js模块化编程 一.Javascript模块化编程 目前,通行的Javascript模块规范共有两种:CommonJS和AMD. 1.commonjs 2009年,美国程序员R ...
原文: https://www.cnblogs.com/chenguangliang/p/5856701.html ------------------------------------------ ...
世面上有好多JavaScript的加载器,比如 sea.js, require.js, yui loader, labJs...., 加载器的使用范围是一些比较大的项目, 个人感觉如果是小项目的话可以 ...
大家都知道,js中的变量(variable)有其作用范围,比如:函数里用var定义的变量在函数外是看不到的,而定义在函数外面的变量(不能有没有var修饰)均是全局变量,在js程序的任何位置都可以访问. ...
先回答我:为什么模块很重要? 答:因为有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块.但是,这样做有一个前提,那就是大家必须以同样的方式编写模块,否则你有你的写法,我有我的写 ...
本文主要来源于阮一峰的<Javascript模块化编程>系列文章整合,原文地址:http://www.ruanyifeng.com/blog/2012/10/javascript_modu ...
Atitit.软件开发的三层结构isv金字塔模型 第一层,Implements 层,着重与功能的实现.. 第二次,spec层,理论层,设计规范,接口,等.流程.方法论 顶层,val层,价值观层,原则, ...
1391: [Ceoi2008]order Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 1509 Solved: 460[Submit][Statu ...
工作地点北京,海淀,微软大厦2号楼,小冰项目组.
Safari手机版居然有个这么愚蠢的bug,浪费了我整个下午,使尽浑身解数,国内国外网站搜索解决方案,每一行代码读了又想想了又读如此不知道多少遍,想破脑袋也想不通到底哪里出了问题,结果竟然是web.c ...
问题 你正在使用POCO,你想提高修改跟踪的性能,同时使内存消耗更少.另外,你想通过EF的CodeFirst方式来实现. 解决方案 假设你有一个关于Account(帐户)和相关的Payments(支付 ...
1.1.1 安装 Node.js 有三种方式安装 Node.js:一是通过安装包安装,二是通过源码编译安装,三是在 Linux 下可以通过 yum|apt-get 安装,在 Mac 下可以通过 Hom ...
总结的很粗糙,以后时间富裕了好好修改一下. 1:Java语言定义了许多类专门负责各种方式的输入或者输出,这些类都被放在java.io包中.其中, 所有输入流类都是抽象类InputStream(字节输入 ...
下载类库: http://wpl.codeplex.com 添加程序集引用 在web.config文件中将AntiXSS类库注册为应用程序的编码器 在<system.web& ...
Shawn Wildermuth (https://wildermuth.com/2016/05/12/The-Future-of-project-json-in-ASP-NET-Core) If y ...
最近在学习这个WCF,由于刚开始学 不久,发现网上的一些WCF教程都比较简单,感觉功能跟WebService没什么特别大的区别,但是看网上的介绍,就说WCF比WebService牛逼多少多少,反正我刚 ...