Function 时代
JSP项目中,直接在网页上添加一个script,jQuery写交互逻辑
优点:简单快速搭建demo
缺点:混乱,污染全局
例子一:
jQuery:
$(function(){
// do something
});
或者
$(document).ready(function(){
//do something
})
例子二:
JS:
document.ready(function () {
alert('im document.ready');
});
window.onload = function () {
alert('im window.onload');
};
闭包时代
用立即执行函数包裹作用域,
优点:可以防止全局污染;
缺点:变量常驻内存会消耗内存
例子一:
(function(){
//Coding…
})()
例子二:
outObj 作为参数传递过去,不用每个语句都去找outObj,提高了效率
(function(outObj){
var a = 1;
var obj ={ b:2};
window.obj = obj;
return obj;
})( outObj)
例子三:常驻内存
function f1(){
var n =9;
nAdd=function(){
n=n+1;
}
function f2(){
console.log(n);
}
return f2;
}
var result=f1();
result(); //9
nAdd();
result();//10
注意点:全局变量不用了记得置为null,方便垃圾回收
模块化时代
CommonJS, AMD, CMD, UMD, ES6 规范(CMD已经淘汰)
CommonJS 规范
基本知识:
- require : 导入模块
- module.exports 或exports :导出模块
特点:
同步加载,依赖通过每个require一个个导入
例:
文件名: foo.js
// 依赖
var $ = require('jquery');
// 方法
function myFunc(){};
// 暴露公共方法(一个)
module.exports = myFunc;
注意点:
- exports 是对 module.exports 的引用
- 一个文件不能写多个module.exports ,如果写多个,对外暴露的接口是最后一个module.exports
- 模块如果没有指定使用module.exports 或者exports 对外暴露接口时,在其他文件就引用该模块,得到的是一个空对象{}
案列:
example1.js 文件
// 定义有依赖的模块
//CommonJS
var example2Obj = require('./example2');
example2Obj.sayHello();
module.exports = example2Obj;
example2.js 文件
//没有依赖的js
CommonJS
var me = {
sayHello:function(){
console.log('我是example2 in CommonJS!');
}
};
module.exports = me;
main.js
//CommonJS / AMD
var example1Obj = require('./assets/example1');
console.log("example1 in main",example1Obj)
AMD 规范
基本知识:
- define 或者 require():导入模块
- return:导出模块
实际上也是一个闭包
define([module1,module2],function(){
return {};
});
特点:异步加载,不阻塞页面的加载,通过define导入多个模块,
案例:
example1.js 文件
//AMD
define([
'./example2'
],function(example2Obj){
example2Obj.sayHello();
return example2Obj;
});
example2.js 文件
//AMD
define([
],function(){
var we = {};
return {
sayHello:function(){
console.log('我是example2 in AMD!');
}
};
});
main.js同CommonJS
UMD 规范
结合AMD + CommonJS的写法
(demo不生效,不举例了,有实验成功的童鞋分享下)
(function (root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['b'], factory);
} else if (typeof module === 'object' && module.exports) {
// CommonJS
module.exports = factory(require('b'));
} else {
// Browser globals
root.returnExports = factory(root.b);
}
}(this, function (b) {
//use b in some fashion.
return {};
}));
ES6 规范
基本知识:
- import 导入
- export 或者 export default 导出
注意点:一个文件即模块中只能存在一个export default语句,export可以多个
案例:
example1.js 文件
//ES6
//名字任意
import ex2 from "./example2"
let ex1 = "ex1 ES6!!"
export {ex1,ex2}
example2.js 文件
//ES6
const str = "First ES6";
let obj = {
func:() => {
console.log("I am in ES6")
}
}
//只能一个default
export default{
str,
obj
}
main.js
//ES6
import {ex1,ex2} from './assets/example1'
console.log("ex1:",ex1,"ex2:",ex2)
demo源代码见:https://github.com/Dushusir/js-module-demo
演示环境:vue + webpack
- 安装node
npm install -g vue-cli
vue init webpack myDemo
- cd myDemo
- npm run dev
- 去除eslint检查,防止对 “;” 报错:config/index.js中
module.exports = {
dev: {
//其他设置
useEslint: false,
参考:https://webpack.toobug.net/zh-cn/chapter2/commonjs.html ,感谢!