前端模塊化

前言

隨着前端的發展，前端也像後端同樣漸漸地也往模塊化方向發展，常見的模塊化的規範有commonjs，AMD,CMD.
本文對這幾種模塊規範簡單說明一下。

commonjs

commonjs是由於nodejs的模塊引進的，是服務端的模塊化，寫法是

a.js
module.exports = function(){
    
}

用的時候是

var a = require('./a.js');
a();

在服務器端由於資源加載是實時的，是服務端直接從硬盤上讀取資源,可是瀏覽器須要從服務器上拿資源，因此commonjs這種寫法是不行的，因此有了AMD,CMD

AMD

AMD是requirejs提出來的模塊規範，是先聲明模塊，代碼以下

define(['./a', './b'], function(a, b) {  // 依賴必須一開始就寫好
    a.doSomething()
    // 此處略去 100 行
    b.doSomething()
    ...
})

CMD

CMD是seajs提出來的模塊規範，是以後加載模塊，代碼以下

define(function(require, exports, module) {   var a = require('./a')   a.doSomething()   // 此處略去 100 行   var b = require('./b') // 依賴能夠就近書寫   b.doSomething()   // ... })

區別

對於依賴的模塊，AMD 是提早執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不一樣）。CMD 推崇 as lazy as possible.

webpack和commonjs

webpack可以把commonjs寫出來的代碼編譯成瀏覽器能識別的代碼
先看下源碼

bar.js
export default function bar() {
  console.log("it is from bar..")
}
entry.js
import bar from './bar';
bar();

webpack.config.js
module.exports = {
    entry:'./entry.js',
    output:{
        path:__dirname,
        filename:'bundle.js'
    }
}

通過webpack編譯以後的代碼以下

/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};
/******/
/******/     // The require function
/******/     function __webpack_require__(moduleId) {
/******/
/******/         // Check if module is in cache
/******/         if(installedModules[moduleId]) {
/******/             return installedModules[moduleId].exports;
/******/         }
/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             i: moduleId,
/******/             l: false,
/******/             exports: {}
/******/         };
/******/
/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/         // Flag the module as loaded
/******/         module.l = true;
/******/
/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }
/******/
/******/
/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;
/******/
/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;
/******/
/******/     // define getter function for harmony exports
/******/     __webpack_require__.d = function(exports, name, getter) {
/******/         if(!__webpack_require__.o(exports, name)) {
/******/             Object.defineProperty(exports, name, {
/******/                 configurable: false,
/******/                 enumerable: true,
/******/                 get: getter
/******/             });
/******/         }
/******/     };
/******/
/******/     // getDefaultExport function for compatibility with non-harmony modules
/******/     __webpack_require__.n = function(module) {
/******/         var getter = module && module.__esModule ?
/******/             function getDefault() { return module['default']; } :
/******/             function getModuleExports() { return module; };
/******/         __webpack_require__.d(getter, 'a', getter);
/******/         return getter;
/******/     };
/******/
/******/     // Object.prototype.hasOwnProperty.call
/******/     __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";
/******/
/******/     // Load entry module and return exports
/******/     return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__bar__ = __webpack_require__(1);


Object(__WEBPACK_IMPORTED_MODULE_0__bar__["a" /* default */])();

/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = bar;
function bar() {
  console.log("it is from bar..")
}

/***/ })
/******/ ]);

webpack會把代碼編譯成一整個函數，模塊經過參數傳進去，執行export裏的函數

ES6

ES6的模塊化，直接看代碼吧

a.js
export const ui = require('third/jquery-ui/jquery-ui.js');
export const Tab = require('base/tab/tab.js');
export default {
ui,
Tab 
}
b.js
import {ui as UI,Tab} from 'a.js';
c.js
export const timeToSecond = (value, totalPixel) => value * daySecond / totalPixel;
d.js
import { timeToSecond } from './c.js'