前端模块化发展

前端模块化的发展

 CommonJS的模块化实现

 但是应用到项目中需要node技术支持解析

 ES6的模块化实现

模块化

概述

Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其 他都可以加载别人已经写好的模块。 但是，Javascript不是一种模块化编程语言，它不支持"类"（class），包（package）等概念，更遑论"模 块"（module）了

最早，我们是这么写代码的：

function foo () {
    // ... 
}

function bar () {
    // ... 
}

这样很容易导致全局命名冲突。那定义一个对象，不放到全局中不就好了吗，这就是 Namespace 模式。

var MYAPP =  {
  foo: function () {},
  bar: function () {}
}

MYAPP.foo()

这样全局变量虽然少了，但本质了是个对象，是可以操作修改的，这样很不安全。

函数是 JavaScript 唯一的 LocalScope，函数外部是修改不了函数内部代码的。所以相对来说是安全的。这就是 IIFE 模式。

// 利用闭包
var Module = (function () {
  var _private = 'safe now'
  var foo = function () {
    console.log(_private) 
  }
  
  // 暴露接口
  return {
    foo: foo 
  }
})()

开发中往往会依赖第三方库，这时候就要引入依赖。例如依赖于 jQuery 时，就要将 jQuery 引入。

var Module = (function ($) {
  // 使用 jQuery
  var _$body = $("body")
  var foo = function () {
    console.log(_$body)
  }
  
  return {
    foo: foo
  }
  // 引入 jQuery
})(jQuery)

Module.foo()

这就是模块模式，也是现代模块实现的基石。

模块化可以降低单个文件的复杂度，降低偶合度，使文件更好维护。当文件分离后可以按需加载，提高了复用性。并且每个模块都是一个独立的作用域，避免了命名冲突。

但是这样就引发了一个问题：文件分离导致需要发送更多的 HTTP 请求，并且使模块与模块之间的依赖变得模糊。

模块化规范就可以通过依赖关系来合并文件，现在有主流的 CommonJS、AMD、CMD、ES6 四种规范。

CommonJS模块化

CommonJS使用 exports 和require 来导出、导入模块

const sum = function(a,b){
 return parseInt(a) + parseInt(b)
}
const subtract = function(a,b){
 return parseInt(a) - parseInt(b)
}
//导出
module.exports = {
 sum: sum
}
//简写
module.exports = {
 sum
}


//引入模块，注意：当前路径必须写 ./
const m = require('./四则运算.js')
const result1 = m.sum(1, 2)
console.log(result1)

ES6模块化

使用 export 和 import 来导出、导入模块

因为ES6的模块化无法在Node.js中执行，需要用Babel编辑成ES5后再 执行

第一种

export function getList() {
 console.log('获取数据列表')
}
export function save() {
 console.log('保存数据')
}

//只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from "./userApi.js"
getList()
save()

第二种

export default {
 getList() {
 console.log('获取数据列表2')
 },
 save() {
 console.log('保存数据2')
 }
}
import user from "./userApi2.js"
user.getList()
user.save()

CMD和AMD模块规范

详情