ES6的子產品化與CommonJS子產品化

ES6子產品化

代表：Vue

文法：

導入：import xxx from、import {xxx} from

導出：export、export default

特點：

this指向undefined

編譯時輸出接口

可以單獨加載其中的某個接口（方法）

靜态分析，動态引用。輸出的是值的引用

• import指令用于輸入其他子產品提供的功能;export指令用于規定子產品的對外接口。
• export 可以有多個，export default 僅有一個

//a.js 子產品a檔案 導出多個方法
export function getCookie(key) {
    ...
}

export function setCookie(key) {
    ...
}

b.js 引入子產品并使用
import { getCookie, setCookie } from './a';


//a.js default關鍵字隻導出一個方法或對象
export default {
  info(content) {
    ...
  },
  error(content) {
    ...
  },
};           

/* es6規範 預設暴露
  export{} / export default
  import from
*/

function React(){
  console.log("模拟React方法暴露")
}
React.Component = function(){
  console.log("模拟React上的component方法暴露");
}

const Component = React.Component;
const name = 'dyh分别暴露'
export { Component,name }

export default React;

//es6 子產品化 引入
// import React,{Component} from 'react' 模拟
import React,{Component,name} from '../../utils/react'
import { say } from '../../utils/tools';
React();
React.Component();
Component()
console.log(name,11)           

CommonJS子產品化

代表：node.js

導入：require()

導出：module.exports、exports

this 指向目前子產品

運作時加載。CommonJS腳本代碼在require的時候，就會全部執行。一旦出現某個模闆被“循環加載”，就隻能輸出已經執行的部分，還未執行的部分不會輸出。

加載的是整個子產品，即将所有的接口全部加載進來。

輸出的是一個值的拷貝

c.js c子產品
const c = ['我是c'];
c.log('c');
export default c;

b.js b子產品
Array.prototype.log = function (p) {
    console.log('test>>'+p);
}
const b = ['我是b'];
export default b;

a.js a子產品
import bb from './b'; //如果在c子產品之前沒有使用b子產品，c子產品中是無法是用原型上擴充的方法的，抛出錯誤
import cc from './c';
const aa = ['我是a'];
aa.log('a');
bb.log('b');           

/* commonjs規範 暴露
  exports / module.exports 推薦後者
  require()
*/
module.exports = {
  name:'dyh',
  age:100,
  say(){
    console.log('commonjs規範導出1')
  }
}

// commponentjs 子產品化 require 使用
let obj = require('../../utils/tools')
console.log(obj,obj.name)
obj.say()
say()