评论（[[comments.sum]]）
书架-HCuan
书架-HCuan
通常会将代码组织在多个 js 文件中，进行维护, 但是这种维护方式，依然不能避免一些灾难性的问题:
ES6 以前 可以使用匿名函数（
var Module = (function(){return dataObj}) ()）来解决多文件重名问题, 返回的 dataObj 里面封装了各种需要暴露到外面的属性和方法。这就是模块最基础的封装
模块化有两个核心: 导入，导出
前端模块化开发已经有了很多既有的规范，以及对应的实现方案：
CommonJS, AMD、CMD, 也有 ES6 的 Modules
// 导出
var name = 'test'
var age = 12
module.exports = {
name: name,
age: age,
}
// 导入, ES6解构语法
var {name, age} = require('fileName.js')
var age2 = require('fileName.js').age
ES6 的模块化使用两个关键字实现： export import
<!-- 主文件 main.html -->
<script src="./module-a.js" type="module"></script>
<script src="./module-b.js" type="module"></script>
标签中类型为
module导入的 js 文件，具有自己的作用域，其他 js 文件没有导入，不能直接访问
// module-a.js
var name = 'test'
// 导出一个 变量
export {name}
export let age = 18
function print(str){
sonsole.log(str)
}
export default print
一个模块中包含某个的功能，当不希望给这个功能命名，而且让导入者可以自己来命名时，使用 export default。export default 在同个模块中，不允许同时存在多个。
// module-b.js
// 导入一个变量，使用解构语法
import {name, age} form "./module-a.js"
// 导入默认的一个功能
import print_s form "./module-a.js"
// 全部导出并别名为 mA, mA是一个对象里面包含了导入的所有方法属性
import * as mA "./module-a.js"
相关推荐：
来自系列：Vue 笔记评论（[[comments.sum]]）
[[item.name]] [[item.email]] [[item.date_time]]
[[itemSon.name]] [[itemSon.email]] [[itemSon.date_time]]
回复 @[[itemSon.reply_user.name]]：
加载更多([[item.son.length-2]])...