①引入sea.js的库 <script type="text/javascript" src='sea/sea.js'></script> ②如何变成模块?define //sea下的参数,是不允许修改的。参数的名固定 // // model1.js define(function(require, exports, module) { // 通过 exports : 对外提供借口的对象; // require : 模块之间的接口依赖; // 这样就可以引入 其他模块内的 exports导出的对象; // 而模块3中,使用exports,来导出对应的模块。导出的是一个对象。 var A = require('./model3.js'); function show () { alert(A.a); // 100 } exports.show = show; }); // model2.js define(function (require, exports, modlue) { var a = 100; exports.a = a; // 导出模块 }) ③如何调用模块?exports seajs.use // 这里默认根目录是根据 sea.js的目录做为的。这里就引入不进来了。 // http://127.0.0.1/osye/sea/sea/js/model1.js" // seajs.use("js/model1.js"); // 记得 ./ 从当前目录开始应用 // 以当前页面为根目录。 // use 的方法,就是使用sea的 方法 // 有2个参数,第一个是:模块的地址,第二个是加载好的回调函数。 // 回调函数里面有参数,比如名叫 ex , 就是 模块内部定义的exports // 很容易的结局了冲突的问题。不同的模块也可以有相同的同名函数。 // 这两个 ex 是不同的对象。 seajs.use("./js/model1.js","./js/model2.js" function (ex1, ex2) { ex1.show(); // 第一个模块 ex2.show(); // 第二个模块 }); seajs.use("./js/model2.js", function (ex) { ex.show(); }); ④如何依赖模块?require var A = require('./model3.js'); 大体上4个步骤,引入sea.js脚本。然后define模块, 在定义的模块内可以嵌套其他模块,通过exports 和 require 来导出和引入。 产生模块化开发的由来是因为node的出现,用js来代替其他语言做服务器开发。 因此就产生了commonJs的组织,专门规定服务器端开发规范的。 服务器和浏览器的js有很多不同。模块化开发有很多问题。 浏览器开发规范: AMD规范:requireJS, CMD规范:seaJS, 升级了commonJS grunt 安装流程先安装nodejs和npm(包管理工具) sodu npm install -g grunt-cli sodu npm install grunt --save-dev grunt –version grunt要配置package.json grunt 合并的时候,define 多出2个参数。专门解决合并操作的。 第一个:当前模块的ID ['./main.js'] 第二个:依赖模块的数组 ['./js/model1.js', './js/model2.js' ...] node install module.exports = function(grunt) { // 配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat : { // 任务的名字 webqq : { // 合并文件 files : { 'test/main.js' : ['a.js','b.js','c.js','d.js'] } } }, uglify : { webqq : { files : { 'test/main.min.js' : ['test/main.js'] } } } }); // 加载, 依赖 grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); // 运行插件 grunt.registerTask('default', ['concat','uglify']); }; 这样可以满足合并之后,依旧可以使用。 安装这个2个插件。 Seajs + gruntjs开发 grunt-cmd-transport grunt-cmd-concat 配一下grunt的参数可以,提取依赖,压缩合并模块。 配置信息 alias : 别名配置 paths : 路径配置 vars : 变量配置 map : 映射配置 preload : 预加载项 debug : 调试模式 base : 基础路径 charset : 文件编码 module (1)id : 模块唯一标识 alert(modlue.id); //modlue是第三个参数,id的结果是文件目录。 // http://127.0.0.1/js/model3.js (2)uri : 模块绝对路径 alert(modlue.uri); // http://127.0.0.1/js/model3.js (3)dependencies : 当前模块依赖 数组,require的。 (4)exports : 当前模块对外接口 alert(module.exports == exports); //true 这里可以用module.exports = { .... } 向外导出对象。提供接口,或者属性。 (5)require.async 异步加载模块 require.async('./model3.js'); // 异步加载 插件 github看一下 text style combo flush debug log health spm build 技巧 (1)use 如何引入多模块 seajs.use("./js/model1.js","./js/model2.js" function (ex1, ex2) { ex1.show(); // 第一个模块 ex2.show(); // 第二个模块 }); (2)Sea.js加ID有利提取 <script type="text/javascript" src='sea/sea.js' id='seaJsId'></script> (3)如何改造文件为CMD模块 //普通的模块,define 写一个接口, 用exports 导出一个对象就好了。 define(function(require, exports, module) { var a = require('./model3.js'); function show () { alert(a.a); } exports.moduleA = { show : show, a :a } }); (4)调试接口cache seajs.cache 在浏览器输入 Object {http://127.0.0.1/js/model1.js: c, http://127.0.0.1/js/model2.js: c, http://127.0.0.1/js/model3.js: c} http://127.0.0.1/js/model1.js: c http://127.0.0.1/js/model2.js: c http://127.0.0.1/js/model3.js: c __proto__: Object ... }