es6

模塊規(guī)范(module)

Ruby 的 require、Python 的 import、 CSS 有 @import

CommonJS規(guī)范

Node 應(yīng)用由模塊組成,采用 CommonJS 模塊規(guī)范。

每個(gè)文件就是一個(gè)模塊,有自己的作用域。在一個(gè)文件里面定義的變量、函數(shù)、類,都是私有的,對(duì)其他文件不可見(jiàn)。

如果想在多個(gè)文件分享變量,必須定義為global對(duì)象的屬性。

global.warning = true;

CommonJS規(guī)范規(guī)定,每個(gè)模塊內(nèi)部,module變量代表當(dāng)前模塊。這個(gè)變量是一個(gè)對(duì)象,它的exports屬性(即module.exports)是對(duì)外的接口。加載某個(gè)模塊,其實(shí)是加載該模塊的module.exports屬性。

require 模塊

node 遵循 CommonJS 規(guī)范,requirejs 遵循 AMD ,seajs 遵循 CMD ,雖各有不同,但風(fēng)格統(tǒng)一。


// -------- node -----------
module.exports = {
  a : function() {},
  b : 'xxx'
};

// ----------- AMD or CMD ----------------
define(function(require, exports, module){
  module.exports = {
    a : function() {},
    b : 'xxx'
  };
});

//引入
// ------------ node ---------
var m = require('./a');
m.a();

// ------------ AMD or CMD -------------
define(function(require, exports, module){
   var m = require('./a');
   m.a();
});
ES6 模塊

在 export 之后,還可以被修改

//導(dǎo)出 a.js
export default function() {}
export function a () {}

var b = 'xxx';
export ; // 這是ES6的寫(xiě)法,實(shí)際上就是{b:b}

//引入
import $ from 'jquery';
import * as _ from '_';
import {a,b,c} from './a';
import {default as alias, a as a_a, b, c} from './a';

暴露模塊使用 module.exports 和 exports.

加載模塊使用 require().

AMD規(guī)范(Asynchronous Module Definition)

瀏覽器端的模塊,不能采用”同步加載”(synchronous),只能采用”異步加載”(asynchronous)

AMD 采用異步方式加載模塊,模塊的加載不影響它后面語(yǔ)句的運(yùn)行。所有依賴這個(gè)模塊的語(yǔ)句,都定義在一個(gè)回調(diào)函數(shù)中,等到加載完成之后,這個(gè)回調(diào)函數(shù)才會(huì)運(yùn)行。

define(id?, dependencies?, factory)

ES6 的模塊自動(dòng)采用嚴(yán)格模式,不管你有沒(méi)有在模塊頭部加上"use strict"

  1. export 命令
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在系統(tǒng)學(xué)習(xí)ES6語(yǔ)法過(guò)程中,才真正地理解到前端模塊化編程的思想,所以決定寫(xiě)下這篇文章,讓更多的人體會(huì)到前端模塊化。...
    silly鴻閱讀 2,581評(píng)論 0 2
  • 隨著前端js代碼復(fù)雜度的提高,JavaScript模塊化這個(gè)概念便被提出來(lái),前端社區(qū)也不斷地實(shí)現(xiàn)前端模塊化,直到e...
    _八神光_閱讀 751評(píng)論 0 3
  • 模塊通常是指編程語(yǔ)言所提供的代碼組織機(jī)制,利用此機(jī)制可將程序拆解為獨(dú)立且通用的代碼單元。所謂模塊化主要是解決代碼分...
    MapleLeafFall閱讀 1,259評(píng)論 0 0
  • JS中的模塊規(guī)范(CommonJS,AMD,CMD),如果你聽(tīng)過(guò)js模塊化這個(gè)東西,那么你就應(yīng)該聽(tīng)過(guò)或Common...
    小蝦米前端閱讀 4,481評(píng)論 0 12
  • 模塊化是指在解決某一個(gè)復(fù)雜問(wèn)題或者一系列雜糅問(wèn)題時(shí),依照一種分類的思維把問(wèn)題進(jìn)行系統(tǒng)性的分解以之處理。模塊化...
    我家的貓子在哪里閱讀 579評(píng)論 0 0

友情鏈接更多精彩內(nèi)容