模块化

---

单对象模式，也叫做命名空间模式

//mommon/BetterFunction.js
var MyFunctions = {
    isOdd: function (n) {
        return n % 2 !== 0;
    },
    sort(arr, compare) {
        //....
    }
}

var arr = [
    {name:'张三',age:18,weight:60},
    {name:'李四',age:25,weight:80},
    {name:'王五',age:14,weight:65},
    {name:'小六',age:17,weight:60}
]

MyFunctions.sort(arr,function(a,b){
    return a.age - b.age
})
   
console.log(arr)

引入

 <script src="../../common/BetterFunction.js"></script>

node 模块

注意：node 环境用不了es6模块 可以下依赖包 或者 ....................

方法1

暴露模块

//async.js
module.exports = {
     name:'曹昆',
     isOdd(n){
          return n % 2 !== 0;
     }
}

导入模块

//main.js
const async = require('./async.js')
console.log(async.isOdd(1))

方法2

按需导出

var MyFunctions = {
     name:'曹昆',
     isOdd(n){
          return n % 2 !== 0;
     }
}

module.exports = {
     MyFunctions
}

按需导入 用对象的解构赋值 获取 {MyFunctions}

const {MyFunctions} = require('./async.js')

console.log(MyFunctions.isOdd(1)

es6模块

方法1

暴露模块

//test.js
module.exports = {
     name:'曹昆',
     isOdd(n){
          return n % 2 !== 0;
     }
}

导入模块

import testName from './test';
console.log(testName)

方法2

默认导出

//test.js
export default = {
    name: '曹昆'
}

导入

import testName from './test'
console.log(testName)

方法3

按需导出

【test.js】

export function fnName1 (){
    return '按需导出 - 1';
}

export function fnName2 (){
    return '按需导出 - 2'
}

按需导入 用对象的解构赋值 获取 {fnName1, fnName2}

【index.js】
import {fnName1, fnName2} from './test'
console.log(fnName1())
// => 按需导出 - 1
console.log(fnName2())
// => 按需导出 - 2

方法4

默认导出 + 按需导出

【test.js】

// 默认导出
export default {
    name: '曹昆'
}

// 按需导出
export function fnName1 (){
    return '按需导出 - 1';
}
export function fnName2 (){
    return '按需导出 - 2'
}

导入

【index.js】

// testName: 接收默认导出
// {fnName1, fnName2} 解构接收按需导出的
import testName,{fnName1, fnName2} from './test';

console.log(testName);
// => {name: "曹昆"}
console.log(fnName1());
// => 按需导出 - 1
console.log(fnName2());
// => 按需导出 - 2

方法5

现在有三个文件，分别是 ck.js、test.js、index.js

现在 ck.js 导出一个模块，test.js 导入，并且再次把这个模块导出出来，index.js 再导出；

【ck.js】
export function user() {
    return {
        name: '曹昆'
    }
}

【test.js】
// 导入 ck.js 文件的内容 并导出
export { user } from './ck'


【index.js】
import {user} from './test';
console.log(user)
// => function user(){ ... }