模块化主要是用来抽离公共代码,隔离作用域,避免变量冲突等。
IIFE
自执行函数的简称,使用自执行函数来编写模块化
特点:在一个单独的函数作用域中执行代码,避免变量冲突。
(function(){
return {
data:[]
}
})()
AMD
使用requireJS
来编写模块化,这个是一个插件
特点:依赖必须提前声明好。
define('./index.js',function(code){
// code 就是index.js 返回的内容
})
CMD
使用seaJS
来编写模块化,这个是一个插件
特点:支持动态引入依赖文件。
define(function(require, exports, module) {
var indexCode = require('./index.js');
});
CommonJS
nodejs中自带的模块化
var fs = require('fs');
UMD
兼容AMD,CommonJS 模块化语法,这个是一个插件
webpack(require.ensure):webpack 2.x 版本中的代码分割。
Modules
ES6 引入的模块化,支持import 来引入另一个 js
import a from 'a';
Es6的import和commonJS的require在浏览器是不能用的
现在用的几个模块化有
- 服务器nodejs就是用自带的CommonJS写法
- 浏览器的使用CommonJS和Modules,但需要Label编译,实际是把这两个编译成AMD的写法使用
还有写法上的模块化
我一开始的代码是整个js文件就只有一个方法,从头执行到尾,后来维护特别的困难
一点是变量都在同个函数作用域里,导致很多的变量,不能同名所以起名乱七八糟的
一点是特别难修,因为看着头疼,改上面一行下面就可能会报错
所以代码写得好看很重要
一般来说经常写的代码有
》》请求数据后加工数据,然后添加到页面上,很多时候是一个函数写完的
优化:
数据res拿到后,传给数据加工函数,数据加工函数传给页面绘制函数,一拆三,维护性,阅读性提升好几倍
》》还有提交数据也是如此
把数据获取判断加工转格式什么的分成一个函数,然后传给判断的函数,比如手机号判断,非空判断,判断无误后传给ajax函数