前端模块化

前端模块化

一、为什么要使用模块化

• 简单写js代码带来的问题
  • 全局变量同名问题，使用匿名函数可解决变量同名问题，但是闭包又引起代码不可复用问题
• 匿名函数引起代码不可复用问题

(function(){
  var flag=true
})()
console.log(flag);//报错

//flag是个局部变量。要使用flag 需要return
var func=((function(){
  var flag=true
  return {flag}
})())
//使用
console.log(func.flag);//true

二、匿名函数模块化

/************a.js 导出*************/
var mouldA=(function(){
    var name ="a模块";
    var flag=true;
    function sum(num1,num2) {
        return num1+num2
    }
    return {
        flag,
        sum
    };
})();

/************b.js 导出*************/
var mouduleB=(function(){
    var name="b模块";
    var flag=false;
    return {flag};
})();

/************m.js 导入*************/
//要引入a.js,和b.js
(function () {
    //1.使用a.js的flag和b.js的flag
    console.log('mouldA'+mouldA.flag);
    console.log('moduleB:'+mouduleB.flag)
    //2.使用a.js的sum函数
    console.log( mouldA.sum(40,50));//90
})();

三、es6模块化

• 在ES6中每一个模块即是一个文件，在文件中定义的变量，函数，对象在外部是无法获取的。

• 导出：export/export default

• 导入：import

3.1.export

• 导出一个变量

/************test.js 导出*************/
export let myname='HJJ'
/************index.js导入*************/
import {myname} from "./test.js";
console.log(myname);//HJJ

• 导出多个变量

/************test.js 导出*************/
let myname='HJJ';
let myAge=18;
export{
	myname,
    myAge
}
/************index.js导入*************/
import {myname,myAge} from "./test
console.log(myname,myAge);//"HJJ" 18

• 不想暴露模块当中的变量名字，可以通过as来进行操作:

/************test.js 导出*************/
let myname='HJJ';
let myAge=18;
export{
	myname as name,
    myAge as age
}
/************index.js导入*************/
import {name,age} from "./test
console.log(name,age);//"HJJ" 18

//也可以直接导入整个模块
/************index.js导入*************/
import * as info from "./test
console.log(info.name,info.age);//"HJJ" 18

3.2.export default

• 默认导出
• 一个模块只能有一个默认导出，导入的名称可以和导出的名称不一致。

/************test.js 导出**************/
export default function(){
    return "默认导出一个方法"
}
/************index.js 导入************/
import myFn from "./test.js";//注意这里默认导出不需要用{}..加{}报错
console.log(myFn());//默认导出一个方法

• 可以将所有需要导出的变量放入一个对象中，然后通过default export进行导出

/************test.js 导出**************/
export default {
    myFn(){
        return "默认导出一个方法"
    },
    myName:"HHH"
}
/************index.js导入************/
import myObj from "./test.js";
console.log(myObj.myFn(),myObj.myName);//默认导出一个方法 HHH

• 混合使用

/************test.js 导出**************/
export default function(){
    return "默认导出一个方法"
}
export var myName="HHH";
/************index.js导入************/
import myFn,{myName} from "./test.js";
console.log(myFn(),myName);//默认导出一个方法 HHH

注：export default 不能直接跟表达式，会报错

/************test.js 导出**************/
export default let name='HHHH'//错误写法
//正确写法
var name='HHH'
export default name
/************index.js导入************/
import name from "./test.js"

3.3.重命名export和import

• 如果导入的多个文件中，变量名字相同，即会产生命名冲突的问题，为了解决该问题，ES6为提供了重命名的方法，当你在导入名称时可以这样做：

/**********test1.js 导出*************/
export let myName="我来自test1.js";
/**********test2.js 导出******************/
export let myName="我来自test2.js";
/************index.js导入************/
import {myName as name1} from "./test1.js";
import {myName as name2} from "./test2.js";
console.log(name1);//我来自test1.js
console.log(name2);//我来自test1.js

参考转自：

es6中的模块化

四、CommonJS

• Commonjs写法-----要webpack才能解析, webpack正常运行依赖于node环境，在node环境中可以写
• 导出module.export
• 导入require

/**********test.js 导出*************/
let myName='HJJ';
let myAge=18;

module.exports={
    myName，
    myAge
}
/************index.js导入************/
//commonJS写法导入
 let {myname,myAge} =require('./test.js')//对象的解构
 console.log(myName,myAge);//HHH 18

//等价于==============>
// let myInfo =require('./test.js');
// let flag=myInfo.myname;
// let sum=myInfo.myAge;