浅谈 JavaScript 模块化编程
来源:互联网 发布:淘宝手机店铺设置封面 编辑:程序博客网 时间:2024/06/07 18:00
简单的模块
function add(a, b) { return a + b;}function divide(a, b) { return a / b;}
var math = { add: function(a, b) { return a + b; }, divide: function(a, b) { return a / b; }}
var math = (function() { var _flag = 0; return { add: function(a, b) { return a + b; }, divide: function(a, b) { return a / b; } };})();
var math = (function(module) { module.subtract = function(a, b) { return a - b; }})(math);
var math = (function($) { // 这里的$指的就是Math})(math);
AMD
与 CMD
AMD(Asynchronous Module Definition)
/* math module */exports.add = function(a, b) { return a + b;};
var math = require('math');
var math = require('math');math.add(1, 3);
// require([module], callback)require(['math'], function(math) { math.add(1, 3);});
define(id?, dependencies?, factory);
define('foo', ['math'], function(math) { return { increase: function(x) { return math.add(x, 1); } };});
define(function(require, exports, module) { var math = require('math'); exports.increase = function(x) { return math(x, 1); };});
{ baseUrl: './foo/bar'}
{ path: { 'foo': './bar' }}
require.config({ shim: { 'jquery': { exports: '$' }, 'foo': { deps: [ 'bar', 'jquery' ], exports: 'foo' } }});
CMD(Common Module Definition)
define({ 'foo': 'bar' });define('My name is classicemi.');
if (typeof define === 'function' && define.cmd) { // 使用CMD模块加载器编写代码}
define(function(require, exports, module) { require.async('math', function(math) { math.add(1, 2); });});
define(function(require, exports, module) { // 对外提供foo属性 exports.foo = 'bar'; // 对外提供add方法 exports.add = function(a, b) { return a + b; }});
define(function(require, exports, module) { return { foo: 'bar', add: function(a, b) { return a + b; } }});
define(function(require, exports, module) { exports = { foo: 'bar', add: function(a, b) { return a + b; } }});
define(function(require, exports, module) { module.exports = { foo: 'bar', add: function(a, b) { return a + b; } }});
define('math', [], function(require, exports, module) { // module.id 的值为 math});
define(function(require, exports, module) { console.log(module.uri); // http://xxx.com/path/});
Require.js 和 Sea.js
define(['foo', 'bar'], function(foo, bar) { foo.add(1, 2); bar.subtract(3, 4);});
define(function(require, exports, module) { var foo = require('foo'); foo.add(1, 2); ... var bar = require('bar'); bar.subtract(3, 4);});
define(function(require, exports, module) { ... require.async('math', function(math) { math.add(1, 2); }); ...});
参考文献
CommonJS官网
阮一峰博客
AMD Github
CMD Github
Sea.js
Require.js
0 0
- 浅谈 JavaScript 模块化编程
- 浅谈 JavaScript 模块化编程
- 浅谈模块化的JavaScript
- 浅谈javascript的模块化
- javascript模块化编程III
- Javascript 模块化编程
- Javascript模块化编程
- Javascript模块化编程
- javascript模块化编程
- javascript模块化编程
- Javascript模块化编程
- JavaScript 模块化编程 一
- Javascript 模块化编程
- Javascript模块化编程
- javascript模块化编程学习
- Javascript模块化编程详解
- Javascript 模块化编程
- 【Javascript】模块化编程笔记
- cursor: not-allowed; bootstrap禁用链接disabled
- Row_number () over (partition by col1 order by col2)的用法
- 设计模式-访问者(Visitor)模式
- 每天一个Linux命令(30):df
- 微信中的坑
- 浅谈 JavaScript 模块化编程
- [SMOJ1771]区间素数
- 命名法
- DOM4J学习
- C++重载,覆盖,隐藏
- hadoop Partiton中的字符串Hash函数改进
- dom4j根据xml节点name值来遍历节点数据
- hadoop中的一次集群任务执行超时问题查找过程
- 关于男女分厕所导致服务行业长盛不衰的论证