一、 js的模块化
什么是模块化:
模块化的概念最早是后台,随着ajax技术的兴起,js在编程中所占的地位越来越高,同时js的文件也相应的越来越多。为了方便文件的管理和更新,提出了js文件的模块 化,将同一类型的功能组合在一起
二、 模块化的演变过程:
1. 普通的方法的书写格式。
问题:多个人开发可能会造成变量污染,为了解决这个问题引出2
2. 使用对象的作用域来解决变量污染问题
问题:如果在这个对象中有一些属性不希望被外界访问到,
不能实现这个效果,为了解决这个问题,引出3
3. 使用函数的方式来私有化变量
问题:每次使用的时候都需要重新创建对象,为了解决这个问题引出了4
4. 使用函数的自执行模式来代替 new 操作
问题:没有问题,但是要考虑到扩展性,引出了5
5.使用一个自执行函数在原来的对象上扩展方法
注意点:将来自执行的时候要进行传参,这个参数需要做一个处理(window.calc || {})
6如果将来要用到第三方模块,我们需要将模块名写在自执行函数的参数上。
三、 第三方模块化管理工具:
1. seajs:
什么seajs:第三方模块化管理工具
学习网址:seajs.org
特点:
1) seajs 遵循CMD 规范
2) node.js一般书写模块化代码
3) 依赖的自动加载、配置的简洁清晰
作用步骤:
1) 要定义一个单独的模块:
关键字: define
define(function(require,exports,module){ //定义的代码块 })
2) 要在模块中返回一些方法/属性/对象
关键字:exports/module.exports
3) 如果要引用一个第三方模块:
关键字:require
var add = require('./add.js');
注意点:将来通过require关键字引用了其它模块化以后,会返回引用模块化的一个对象:exports/module.exports
4) 使用seajs 定义好的模块
关键字:seajs
seajs.use('./calc/calc.js',function(obj){ //注意:回调函数中的obj对象指向中是当前引用的模块calc.js模块中的exports/module.exports //使用加法 console.log(obj.add.add(,)); //使用减法 console.log(obj.sub.sub(,)); })
注意:回调函数中的参数就是当前引用模块的exports对象
2. seajs遵循的规范:CMD规范
CMD规范的作用:规范明确了模块的基本书写格式和基本交互规则
a.cmd规定在define中可以传入方法,对象,字符串
b.cmd规定require用于接收第三方包提供的接口
require在使用的时候要注意以下几点:
1.0拼写正确
2.0不要修改
3.0使用直接量
c.cmd规定exports用来向外提供模块接口
d.cmd规定module.exports用于向外提供模块的接口
遵守CMD规范的模块都有一个特点:按需要加载特点(懒加载)
3.require 的使用
简单使用:基本与seajs一样
require 使用的AMD规范。
CMD与AMD基本相同,最大区别是CMD是懒加载,AMD是预加载
补充:
(1)requirejs与seajs使用基本相同
有两点要注意:1)seajs使用模块时用方法Seajs.use,而requirejs直接用require关键字
2)seajs只使用一个模块时可以只传一入字符串,但是require必须是一个数组
(2)懒加载与预加载
预加载模式:当第一次访问时将所有的文件加载出来
优点:第一次访问完成以后,再次访问的速度会很快
缺点:第一次加载页面要等待很久
懒加载模式:使用的时候才会加载对应的文件
优点:第一次访问速度相对快点
缺点:再访问其它新的模块是速度会变慢