前端开发模块化思想

模块化解决的问题

1. 全局变量的灾难.
2. 函数命名冲突
3. 依赖关系不好管理

模块化发展过程中的 7 种方式

• 一个文件、一个函数都可以被称为模块。

1. 单例模式（命名空间）

  var fnObj={//减少 Global 上的变量数目，安全性低（对象可以被操作）
    foo:function(){...},
    bar:function(){...}
  }
fnObj.foo();

2. 闭包:保护里边的变量不被外界干扰

var Module=(function(){
  var aaa=111;
  var foo=function(){
    return aaa；
  }
  return foo//暴露接口
})()
Module.aaa//undefined
Module.foo()//111;

3. 引入第三方依赖文件，例如jq（第三方模块过多的话难以维护，请求过多，加载顺序问题等。。）

var Module = (function($){
    var _$body = $("body");     // 使用jq
    var foo = function(){
        console.log(_$body);    // 特权方法
    }
    return {
        foo: foo
    }
})(jQuery)

Module.foo();

4. common.js (node的模块化方式)

// math.js
单个导出
exports.add = function(a, b){
    return a + b;
}

//批量导出
var add=function(){...}
var reduce=function(){...}
module.exports={
  add,
  reduce,
}

// main.js
var math = require('math')      // ./math in node
console.log(math.add(1, 2));    // 3

5. AMD/CMD 浏览器环境模块化方案（基本淘汰）

AMD----requireJS
CMD----SeaJS

6. webpack模块管理 大势所趋(大而全，用于比较大的项目)

// webpack.config.js
module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    }{,
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader'
        }]
    }}
}

7. ES6 MODULE（使用babel将es6 转化成 es5 ）

// math.js
export default math = {//导出模块
    PI: 3.14,
    foo: function(){}
}

// app.js
import math from "./math";//引入模块
math.PI

详解commonJS(后端NODE的趋势)

 //sum.js导出sum
 exports.sum = function(){...做加操作..};
 
 //calculate.js引入sum     并导出add
 var math = require('sum');
  exports.add = function(n){
    return math.sum(val,n);
 };

• require 用来加载代码，而 exports 和 module.exports 则用来导出代码
• exports 和 module.exports区别

module.exports 初始值为一个空对象 {}
exports 是指向的 module.exports 的引用
require() 返回的是 module.exports 而不是 exports

exports.png

如果a页面有代码，b页面需要调用a页面的代码，在b页面  var b=require(./a) 通过绝对路径找到a文件。require()这个方法会让路径找到的代码执行一遍。在b页面中如果console.log(b)，b相当于接收了这个方法的返回值。--> 每一个js文件生成的闭包都是 :
      (function (exports,require,module,__dirname,__filename) {
          //模块化 返回对象 暴露接口
          //__dirname __filename 是通过外界传进来的，所以可以在文件中访问

          exports = module.exports = {};
          return module.exports;
          //如果导出的是引用数据类型 用module.exports =Function
      })();
//   返回值是 return module.exports就是一个空对象.如果不想返回一个空对象，需要在a页面中把module.exports改了。

exports = module.exports = somethings

等价于

module.exports = somethings
exports = module.exports

原理很简单，即 module.exports 指向新的对象时，exports 断开了与 module.exports 的引用，那么通过 exports = module.exports 让 exports 重新指向 module.exports 即可。

详解ES6 MODULE(前端模块化的趋势，其他的迟早淘汰)

https://www.jianshu.com/p/d49c4427a442#module

NPM是世界中最流行的js模块管理平台

• 官网：https://www.npmjs.com/
• 使用：

1. 初始化项目:npm init
2. 下载模块:npm install
3. npm与package.json : https://www.jianshu.com/p/b33646395dd2

模块化工具webpack

参阅：https://www.jianshu.com/p/5352110fe626

前端模块化与组件化

• 在程序代码可以通过模块化进行解耦后，组件化开发便能借此进一步推进项目程序的工程化进度。而组件化开发更是模块化开发的高级体现。同一内容块可以抽象化为一个组件，并在生产中重复使用，配合虚拟滚动视图，更好的发挥浏览器的性能。
• 在Vue.js和React这两个框架中，模块化和组件化结合的思想有着很好的体现。
• 区别：

1. 组件化更多关注的是UI部分，你看到的一个管理界面的弹出框，头部，内容区，确认按钮和页脚都可以是个组件，这些组件可以组成一个弹出框组件，跟其他组件组合又是一个新的组件。
2. 模块化侧重于功能或者数据的封装，一组相关的组件可以定义成一个模块，一个暴露了通用验证方法的对象可以定义成一个模块，一个全局的json配置文件也可以定义成一个模块。

组件化和模块化.jpg

eg.jpg

ps: 前端项目开发过程： https://github.com/fouber/blog/issues/10