【javascript】前端模块化的一些坑点

一、前言。

我们在使用后端语言python、java、php时，经常会遇到模块加载。

比如在python中加载另外一个通常有如下形式。

import modname

from modname import fa, fb, fc 

比如在php中，我们导入模块，有如下4种方法。

require\require_once   include\include_once

二、在前端编程中，我们也引入了模块的概念。

下面主要搞清楚以下几个的区别：export、export default、module.exports、import、require。

2.1、首先，我们要弄清楚一个概念就是CommonJS模块规范，与ES6中的模块规范完全不一样。我们常用node，是采用CommonJS规范。

var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

以上，就是CommonJS规范。我们引入上面模块的方式如下。

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

console.log(example.x); // 5
console.log(example.addX(1)); // 6

也就是说，module.exports、require这种形式，是在node中常用的。

2.2、下面我们来看ES6中的规范。

// profile.js
const firstName = 'Michael';
const lastName = 'Jackson';
const year = 1958;


export {firstName, lastName, year};

我们通过import {firstName, lastName, year} from 'profile'，来引入三个模块。
如果，代码改成如下，会变成啥样呢。

// profile.js
let profile = {};
profile.firstName = 'Michael';
profile.lastName = 'Jackson';
profile.year = 1958;
export default profile;

在另外的文件中，引入，就得如下 import profile from 'profile';然后调用就是console.log(profile.year);

也即是，当模块很多时，我们如果不想一个个明显的表达出来，可以使用default代替。此时，这个文件，就当做了整个模块。

我们在做项目中，因为现在很多框架是借用了node工具，然后又要兼容ES6。

在这个过度期间，有很多混用的情况，当我们调试时，如果发现出现相关bug，应该首先想到上面的内涵。

具体参考：http://www.cnblogs.com/fayin/p/6831071.html。