模块化
什么是模块?
一个具有处理逻辑的js文件,把相关的方法或对象进行导出,经过导入就可以使用.
模块化有什么作用?
- 避免命名冲突(减少命名空间污染)
- 更好的分离, 按需加载
- 更高复用性
- 高可维护性
- 分治（你会发现当逻辑复杂的时候，可以分得更加细的模块，而且多人同时开发，可见分治是模块化最大的优点。）
为什么要用模块化?
那么webpack提出来的,万物都是模块化.比如一个项目越做越大,项目也变得越来越难维护,JavaScript模块化,把每个单独的可复用性的业务逻辑抽离出来成为一个个模块,需要用到的时候直接导入,进行使用,一处编写处处使用,以后业务需要更新,只需要改模块的逻辑即可.我们项目肯定会封装一个异步请求的js文件,使用的时候代码非常精简,舒服.
在ES6之前,javascript是不是没有模块体系,javascript社区制定的CommonJS,AMD，CMD.都是不是我们真正需要的,直到ES6提出来的模块化—ES6模块
<font color="red" size=3>主角放在前面 👇👇👇</font>
主角ES6 模块
在 ES6 前， 实现模块化使用的是 RequireJS (基于 AMD 规范的模块化库)或者 seaJS（基于 CMD 规范的模块化库）。直到ES6模块出来了,他们就被取代了, 新王登基。
严格模式:模块化自动是严格模式,总之我们老老实实写,不会报错了啦.
**export(导出): **规定模块的对外导出的接口
import(导入): 规定模块的对外导入的接口
实践一下怎么使用
导出:
//写一个逻辑代码,这是js文件===模块
function atoe(params) {
console.log("这是模块中的逻辑代码",params);
}
export { //导出
atoe, //方式一:将函数暴露出去
atoe as newAtoe //方式二: 将newAtoe暴露出去,然而newAtoe引用了atoe,达到了重命名的效果
//所以这里总共导出了 atoe 和 newAtoe到外面.
}
导入:
//组件中使用,我以vue为例子.其他也一样的.
//这是要使用的时候导入,
<template>
<div>
<button @click="runAtoe('msg')">HelloWorld</button>
</div>
</template>
<script>
//导入方式一:这种叫做按需导入方法,物尽其用.赞成👍
import {atoe, newAtoe} from '../js/atoeModule'
export default {
methods: {
runAtoe(params){
atoe(params);
newAtoe(params);
}
},
}
</script>
<script>
//导入方式二:整体导入,这种不管三七二十一,全部导过来,然后这里把他们都放在了allFn这个对象里面,然后通过对象获取他们,也没有说这种不行就是low
import * as allFn from '../js/atoeModule'
export default {
methods: {
runAtoe(params){
allFn.atoe(params);
allFn.newAtoe(params);
}
},
}
</script>
注意这两种做法没有性能差别,因为ES6模块是静态加载,只是一个引用,不会在内存中造成负担.
刚刚上面介绍的是非常合情理的导入导出.但是为了照顾哪些心急的人,往往也需要添加一些东西,来满足他们的需求
export default: 默认导出,它能带来的好处就是<font color="red" size=3>一次导出(只能导出一次)</font>,导出的时候只要路径对了,不管你取什么名字,都可以使用.
导出:
//写一个逻辑代码
function atoe(params) {
console.log("这是模块中的第一个逻辑代码",params);
}
function atoe2(params) {
console.log("这是模块中的第二个逻辑代码",params);
}
export default{ //默认导出
atoe,
atoe2
//所以这里默认暴露出去 atoe atoe2
}
导入:
<script>
//这个allFn你想用什么名字都是可以的,just you like it.
//注意点: 因为它导出来得是对象,所以不用花括号{},注意一下.
import allFn from '../js/atoeModule'
export default {
methods: {
runAtoe(params){
allFn.atoe(params);
allFn.atoe2(params);
}
},
}
</script>
<font size=4 color="###">总结:ES6模块化就这么点东西,但是这里导入导出太多方法了,请记住一点:用了一种就要一直用,不忘初心,懂吧,不然到后面你会怀疑你垃圾代码原来是自己写得.</font>
CommonJS(用于服务器)
node是用CommonJS规范的,然后node是后台语言,所以这个规范是用于服务器的.
导出:exports或者module.exports暴露需要被外部访问的属性和方法。<font size=4 color="red">记得别和ES6模块搞混了,export这是多个S, export default 也不一样.</font>
导入:require("url");
var module = {
exports: {}
};
(function (module, exports) {
exports.atoe = function (n) { return n };
}(module, module.exports))
var atoe = module.exports.atoe;
atoe(1) //1 这是CommonJS的原理
为什么CommonJS仅仅适用于服务器不适用浏览器?
场景:当我们需要加载一个模块的时候,这时候 CommonJS规范适用了 var atoe = require("atoe"); 如果在服务器完全ok的,因为atoe这个模块肯定在服务器,即拿即用.就是用的时候加载也ok,它就是运行的时候atoe才是确定的值,无所谓啊.然后当我们浏览器用的这个模块的时候还要去请求,好了拿到了,堵塞代码了,怎么可能会用这种规范.但是可以做其他处理,我觉得没有必要深究下去了.
import 是编译时就完成模块加载,效率比CommonJS,没有说CommonJS垃圾,只是说CommonJS只是用于服务器端.
AMD (Asynchronous Module Definition)用于浏览器
中文意思异步模块定义,有没有发现异步的东西好像都能扯上浏览器身上.
AMD 是RequireJS[模块加载器]的一种规范,然后加载的时候不会堵塞浏览器的渲染，AMD 推崇依赖前置。
有趣的是webpack也是打包工具,但是它的规范是CommonJS
CMD(Common Module Definition )
CMD是Seajs [web端模块加载器]推广的产物，嗯，他对我未来的方向毫无帮助，我不打算去了解太深入，CMD 推崇依赖就近 。
我们的重点是ES6的模块化
模块化的发展史
历史故事总是有趣的
一、原始写法函数
function Atoe(){
console.log("这是最low的模块写法")
}
其实当这个在现在偶尔还是会在页面出现的，因为简单易用的逻辑通过函数写出来，进行复用还是可取的，但是对于大的模块化是不可能的。
缺点：1.污染全局命名空间。
2.容易引起命名冲突或数据不安全。
3.而且模块成员之间看不出直接关系。
二、对象写法
let Atoe = {
name : "Atoe",
can : function(){
console.log(`${this.name}can code`);
}
}
解决问题：1.减少了全局变量。
2.解决命名冲突。
缺点就是：1.对象外部可以修改内部的一切东西，不安全。
三、立即执行函数写法
((function (win) {
let name = "Atoe";
function atoe() {
console.log("这是自调用函数里面的atoe函数");
}
win.me = { //win 接收到window参数，然后通过给windo添加一个me属性，将函数里面的东西暴露出去，见下图
name:name,
atoe:atoe
}
})(window))
console.log( window.me.name); //Atoe
window.me.atoe(); //这是自调用函数里面的atoe函数
// 大名鼎鼎的jQuery都是用立即执行函数，好像是一个天衣无缝的解决方案。
解决问题：外部无法修改里面的东西。
但是这个历史上面的，没有一个是真正严格意义上的模块化，真正的属于前端，而且适用于前端的，就是ES6模块
