前端模块化的发展
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模块规范
详情
标签:function,发展,log,模块化,前端,模块,console,foo From: https://blog.51cto.com/u_11334685/5740478