視頻資源來自：b站coderwhy王紅元老師——最全最新Vue、Vuejs教程，從入門到精通
文件僅為個人觀看視頻后的學習心得筆記，用于個人查看和記錄保存。文中定有疏漏錯誤之處，懇請指正。
本節目錄：
為什么需要模塊化
前端模塊化
為什么需要模塊化
JavaScript原始功能
js文件太多，可能造成變量沖突。
加載的順序不同，可能造成覆蓋
匿名函數的解決方案
使用閉包，把函數括起來
(function () {
var name = '小紅';
var flag = false;
console.log(name);
}
function sum(aa,bb) {
return aa+bb
}
)()
使用模塊作為出口
//main.js
;(function () {
//1.想使用flag
if(moduleA.flag){
console.log('小明是天才');
}
//2.使用sum函數
console.log(moduleA.sum(20,30));
}
)()
//aaa.js
var moduleA=(function () { //模塊化！不同的模塊這個名字必須不同，不然就沖突了
//導出的對象
var obj= {}
var name = '小紅';
var flag = true;
function sum(a,b){
return a+b
}
//要導出的東西寫在這。沒導出別人就用不了
obj.flag = flag;
obj.sum = sum;
return obj
}
)()
常見的模塊化規范：CommonJS、AMD、CMD、ES6的Modules
CommonJS（了解）
模塊化兩個核心：導出、導入
//ES6對象的增強寫法，導出 exports ！
module.exports = {
flag:flag,
sum:sum
}
//解析對象 require！！
//方法1
var aaa = require('./aaa.js')
var flag=aaa.flag;
//方法2
var {flag,sum} = require('./aaa.js')
ES6的export指令
<!--type="module"表示模塊，之后不會有命名沖突-->
<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
導入的{}中定義的變量
let name = '小明'
var age = 18
var flag = true
function sum(num1,num2) {
return num1+num2
}
if(flag){
console.log(sum(20,30))
}
//復雜寫法失敗了，暫時只用簡便寫法
export {
flag,sum
}
import {flag,sum} from "./aaa.js"
if(flag)
{
console.log(sum(10,20))
}
另一種導出方式：直接導入export定義的變量
export var num1=1000;
export var height=1.88;
import {num1,height} from "./aaa.js"
console.log(num1+' '+height)
導出函數/類：export的function
export function mul(num1,num2) {
return num1*num2
}
export class Person {
run(){
console.log("run")
}
}
import {mul,Person} from "./aaa.js";
console.log(mul(10,20))
const p=new Person();
p.run()
自己命名導入的數據叫什么：export default
<font color=#d5a347 >默認導出，全模塊最多只能有一個</font>
const address='北京市'
export default address
import addr from "./aaa.js";
console.log(addr)
統一全部導入
<font color=#909534 size=2>*：通配符</font>
import * as aa from "./aaa.js"
console.log(aa.flag)
總目錄：
邂逅Vuejs
Vue基礎語法
組件化開發
前端模塊化
webpack詳解
Vue CLI詳解
vue-router
Promise的使用
Vuex詳解
網絡模塊封裝
項目實戰
