详解JavaScript模块化开发
来源:互联网 发布:常用数据处理软件 编辑:程序博客网 时间:2024/05/24 08:32
什么是模块化开发?
AMD规范
define() 函数
define(id?, dependencies?, factory);
id:指定义中模块的名字,可选;如果没有提供该参数,模块的名字应该默认为模块加载器请求的指定脚本的名字。如果提供了该参数,模块名必须是“顶级”的和绝对的(不允许相对名字)。依赖dependencies:是一个当前模块依赖的,已被模块定义的模块标识的数组字面量。依赖参数是可选的,如果忽略此参数,它应该默认为["require", "exports", "module"]。然而,如果工厂方法的长度属性小于3,加载器会选择以函数的长度属性指定的参数个数调用工厂方法。工厂方法factory,模块初始化要执行的函数或对象。如果为函数,它应该只被执行一次。如果是对象,此对象应该为模块的输出值。
模块名的格式
模块名是用正斜杠分割的有意义单词的字符串单词须为驼峰形式,或者".",".."模块名不允许文件扩展名的形式,如“.js”模块名可以为 "相对的" 或 "顶级的"。如果首字符为“.”或“..”则为相对的模块名顶级的模块名从根命名空间的概念模块解析相对的模块名从 "require" 书写和调用的模块解析
使用 require 和 exports
define("alpha", ["require", "exports", "beta"], function (require, exports, beta) { exports.verb = function() { return beta.verb(); //Or: return require("beta").verb(); } });
CommonJS规范
var i = 1;var max = 30;module.exports = function () { for (i -= 1; i++ < max; ) { console.log(i); } max *= 1.1;};
RequireJS和SeaJS
为什么要用requireJS
(1)实现js文件的异步加载,避免网页失去响应;(2)管理模块之间的依赖性,便于代码的编写和维护。
AMD和CMD
define(factory);
define(function(require, exports, module) { // 模块代码});
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
AMD:提前执行(异步加载:依赖先执行)+延迟执行CMD:延迟执行(运行到需加载,根据顺序执行)
// CMDdefine(function(require, exports, module) {var a = require('./a')a.doSomething()// 此处略去 100 行var b = require('./b') // 依赖可以就近书写b.doSomething()// ... })// AMD 默认推荐的是define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好a.doSomething()// 此处略去 100 行b.doSomething()...})
AMD:API根据使用范围有区别,但使用同一个api接口CMD:每个API的职责单一
seajs.config({'base':'/','alias':{ 'jquery':'jquery.js'//定义jQuery文件}});
define(function(require, exports, module{ //先要载入jQuery的模块 var $ = require('jquery'); //然后将jQuery对象传给插件模块 require('./cookie')($); //开始使用 $.cookie方法});
sea.js如何使用?
- 引入sea.js的库 - 如何变成模块? - define - 3.如何调用模块? -exports -sea.js.use - 4.如何依赖模块? -require <script type="text/javascript"> define(function (require,exports,module) { //exports : 对外的接口 //requires : 依赖的接口 require('./test.js');//如果地址是一个模块的话,那么require的返回值就是模块中的exports })</script>
sea.js 开发实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>鼠标拖拽的模块化开发实践</title><style type="text/css">#div1{ width:200px; height:200px; background:black; position:absolute; display:none;}#div2{ width:30px; height:30px; background:yellow; position:absolute; bottom:0; right:0;}#div3{ width:100px; height:100px; background:blue; position:absolute; right:0; top:0;}</style><script type="text/javascript" src="./sea.js"></script><script type="text/javascript"> //A同事 :seajs.use('./main.js'); </script></head><body><input type="button" value="确定" id="input1" /><div id="div1"> <div id="div2"></div></div><div id="div3"></div></body></html>
A同事
//A同事写的main.js:define(function (require,exports,module) { var oInput = document.getElementById('input1'); var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oDiv3 = document.getElementById('div3'); require('./drag.js').drag(oDiv3); oInput.onclick = function () { oDiv1.style.display = 'block'; require('./scale.js').scale(oDiv1,oDiv2); require.async('./scale.js', function (ex) { ex.scale(oDiv1,oDiv2); }) }});
B同事
//B同事写的drag.js:define(function(require,exports,module){ function drag(obj){ var disX = 0; var disY = 0; obj.|| window.event; disX = ev.clientX - obj.offsetLeft; disY = ev.clientY - obj.offsetTop; document.|| window.event; var L = require('./range.js').range(ev.clientX - disX , document.documentElement.clientWidth - obj.offsetWidth , 0 ); var T = require('./range.js').range(ev.clientY - disY , document.documentElement.clientHeight - obj.offsetHeight , 0 ); obj.style.left = L + 'px'; obj.style.top = T + 'px'; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; return false; }; } exports.drag = drag;//对外提供接口 });
C同事
//C同事写的scale.js:define(function(require,exports,module){ function scale(obj1,obj2){ var disX = 0; var disY = 0; var disW = 0; var disH = 0; obj2.|| window.event; disX = ev.clientX; disY = ev.clientY; disW = obj1.offsetWidth; disH = obj1.offsetHeight; document.|| window.event; var W = require('./range.js').range(ev.clientX - disX + disW , 500 , 100); var H = require('./range.js').range(ev.clientY - disY + disH , 500 , 100); obj1.style.width = W + 'px'; obj1.style.height = H + 'px'; }; document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; }; return false; }; } exports.scale = scale; });
D同事
// D同事的range.js--限定拖拽范围 define(function(require,exports,module){ function range(iNum,iMax,iMin){ if( iNum > iMax ){ return iMax; } else if( iNum < iMin ){ return iMin; } else{ return iNum; } } exports.range = range; });
requirejs开发实例
main.js文件
//别名配置requirejs.config({ paths: { jquery: 'jquery.min' //可以省略.js }});//引入模块,用变量$表示jquery模块requirejs(['jquery'], function ($) { $('body').css('background-color','red');});
define 模块
define(['jquery'], function ($) {//引入jQuery模块 return { add: function(x,y){ return x + y; } };});
main.js引入模块方法
require(['jquery','math'], function ($,math) { console.log(math.add(10,100));//110});
没有依赖
define(function () { return { name: "trigkit4", age: "21" }});
0 0
- 详解JavaScript模块化开发
- 详解JavaScript模块化开发
- 详解JavaScript模块化开发
- 详解JavaScript模块化开发
- 详解JavaScript模块化开发
- 详解JavaScript模块化开发
- 详解JavaScript模块化开发
- Javascript模块化编程详解
- javascript模块化详解
- JavaScript模块化开发探讨
- 模块化的javaScript开发
- JavaScript模块化开发一瞥
- JavaScript模块化开发
- javascript 模块化开发
- JavaScript模块化开发1
- JavaScript模块化开发2
- Javascript 模块化开发
- 前端JAVASCRIPT模块化开发
- oracle 用一个表的数据去更新另外一个表的数据
- Java测试用例简介
- 安装Office2016及Visio2016
- Oracle 9i 冷备份及恢复步骤(亲自试验,超详细!!)
- Java GC日志查看
- 详解JavaScript模块化开发
- jQuery书写遇到的问题
- Angular 1.0 入门指南
- oracle11g创建表空间 sql语法
- hadoop集群调优-hadoop settings and MapReduce
- 老农移石故事的启示分享
- 远程登录
- oracle 9i热备份
- Hive中的用户自定义函数UDF