javascript模块化（简）

这里书写一个个人理解以及整理的东西，关于模块化以及ES6语法推荐大家阅读阮一峰老师的ES6入门教程 地址：https://es6.ruanyifeng.com/

比较散，请见谅

以前的js是没有模块化这个概念，随着ES6的引入，使我们的代码能够优雅。

模块不是对象，所以本质上还是需要什么加载什么

1、这里有一个city.js

// 这里定义一个数据
const  cityList = [
    {name: '北京'},
    {name: ‘上海’}
]

// 这里使用扩展
module.exports = { cityList }

然后在需要引入的地方，如mais.js

// es6使用import来引入

import { cityList } form 'city.js'

// 借此，数据就可以使用了
console.log(cityList)

2、当然不止是数据可以引出，方法也如此，同样的位置

const getList = () => {
    // 筛选出name为北京的项
    return cityList.filter(item => item.name === '北京')
}

module.exports = { cityList, getList } // 抛出

在其他位置使用，如home.js

 import { getList } from 'city.js' 2 3 // 使用 4 getList() 

很有趣的，在不同的位置引入，只取所需。

 

作者： 一个热爱改BUG的猴子