本文共 6765 字,大约阅读时间需要 22 分钟。
目录
•命名冲突
添加命名空间YUI 、EXTJS---可以从一定程度上解决命名冲突,但是增加了开发人员记忆冗长api的难度。
•文件依赖
团队变大后,维护大量的文件依赖关系非常困难,公共模块的维护、升级很不方便。
全局函数的形式
封装函数的方式
封装函数的方式
封装函数的方式
封装函数的方式
在什么场景下使用模块化开发 业务复杂 重用逻辑非常多 扩展性要求较高
CommonJS---nodejs
AMD---RequireJS 国外相对流行
CMD---SeaJS 国内相对流行
SeaJS---阿里巴巴前端架构师玉伯
js文件的依赖管理、异步加载,方便前端的模块化开发。
官方网站:http://seajs.org/
RequireJS- AMD规范的创始人
与SeaJS 基本实现类似的功能
中文官网:http://www.requirejs.cn/
javascript define(function(require, exports, module) { exports.add = function(a, b) { return a + b; }; });
Seajs体验
// 定义一个模块,遵循Seajs的写法define(function(require, exports, module) { // 此处是模块的私有空间 // 定义模块的私有成员 // 载入01-convertor模块 var convertor = require('./01-convertor.js'); function add(a, b) { return convertor.convertToNumber(a) + convertor.convertToNumber(b); } function subtract(a, b) { return convertor.convertToNumber(a) - convertor.convertToNumber(b); } function multiply(a, b) { return convertor.convertToNumber(a) * convertor.convertToNumber(b); } function divide(a, b) { return convertor.convertToNumber(a) / convertor.convertToNumber(b); } // 暴露模块的公共成员 exports.add = add; exports.subtract = subtract; exports.multiply = multiply; exports.divide = divide;});
/** * 转换模块,导出成员:convertToNumber */define(function(require, exports, module) { // 公开一些转换逻辑 exports.convertToNumber = function(input) { return parseFloat(input); }});
Seajs体验
// 定义一个模块,遵循Seajs的写法define(function(require, exports, module) { // function add(a, b) { // return parseFloat(a) + parseFloat(b); // } // function subtract(a, b) { // return parseFloat(a) - parseFloat(b); // } // function multiply(a, b) { // return parseFloat(a) * parseFloat(b); // } // function divide(a, b) { // return parseFloat(a) / parseFloat(b); // } // // 暴露模块的公共成员 // exports.add = add; // exports.subtract = subtract; // exports.multiply = multiply; // exports.divide = divide; // console.log(module.exports === exports); // // function Person(name, age, gender) { // this.name = name; // this.age = age; // this.gender = gender; // } // Person.prototype.sayHi = function() { // console.log('hi! I\'m a Coder, my name is ' + this.name); // }; // // exports.Person = Person; // module.exports = Person; // 最终导出的以 module.exports // module.exports = { name: 'world' }; // // 此时module.exports 指向的是一个新的地址 // exports.name = 'hello'; // // exports是module.exports的快捷方式,指向的任然是原本的地址 // module.exports优先级第二 module.exports = { name: 'hello' }; console.log(module); // return 的优先级最高 return { name: 'world' };});
require.async('path',function(module) {});
Seajs体验
define(function(require, exports, module) { // console.log('module1 ---- start'); // // require 必须执行完成过后(./module2.js加载完成)才可以拿到返回值 // var module2 = require('./03-module2.js'); // 阻塞代码执行 // // JS中的阻塞会有卡顿的情况出现 // console.log('module1 ---- end'); // console.log('module1 ---- start'); require.async('./03-module2.js', function(module2) { }); // 此处不会阻塞代码执行 console.log('module1 ---- end');});
define(function() { console.log('module2 exec');});
javascript // 适配CMD if (typeof define === "function" && !define.amd) { // 当前有define函数,并且不是AMD的情况 // jquery在新版本中如果使用AMD或CMD方式,不会去往全局挂载jquery对象 define(function() { return jQuery.noConflict(true); }); }
Seajs使用第三方依赖
'use strict';define(function(require, exports, module) { // 想用jquery怎么办 var $ = require('./jquery.js'); console.log($); $(document.body).css('backgroundColor', 'red');});
'use strict';define(function(require, exports, module) { console.log(11111);});
使用模块化的方式定义一个分页组件
define(function(require, exports, module) { var Pagination = require('./modules/pagination.js'); var pager = new Pagination(1, 20, 7); pager.render('.pagination'); pager.render('.pagination1');});
define(function(require, exports, module) {// format = 'http://www.baidu.com/page/@/' function Pagination(current, total, show, format) { this.current = current; this.total = total; this.show = show; // 1. 根据显示数量算出正常情况当前页的左右各有几个 var region = Math.floor(show / 2); // 2. 计算出当前界面上的起始值 var begin = current - region; // 可能小于 1 begin = begin < 1 ? 1 : begin; var end = begin + show; // end必须小于total if (end > total) { end = total + 1; begin = end - show; begin = begin < 1 ? 1 : begin; } this.begin = begin; this.end = end; }; /** * 渲染当前这个组件到界面上 */ Pagination.prototype.render = function(containers) { // 获取分页展示容器 // p.render('.pgfds'); if (typeof containers === 'string') { containers = document.querySelectorAll(containers); } if (containers.length === undefined) { // dom对象 containers = [containers]; } for (var c = 0; c < containers.length; c++) { var container = containers[c]; // 先append上一页 var prevElement = document.createElement('li'); prevElement.innerHTML = ''; if (this.current == 1) { prevElement.classList.add('disabled'); } container.appendChild(prevElement); for (var i = this.begin; i < this.end; i++) { var liElement = document.createElement('li'); liElement.innerHTML = '' + i + ''; if (i == this.current) { // 此时是当前页 liElement.classList.add('active'); } container.appendChild(liElement); } var nextElement = document.createElement('li'); nextElement.innerHTML = ''; if (this.current == this.total) { nextElement.classList.add('disabled'); } container.appendChild(nextElement); } }; module.exports = Pagination;});
转载地址:http://snxmi.baihongyu.com/