前端模块化

前言

随着前端的发展，前端也像后端一样渐渐地也往模块化方向发展，常见的模块化的规范有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'