javascript模块化（简）

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

比较散，请见谅

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

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

1、这里有一个city.js

1 // 这里定义一个数据
2 const  cityList = [
3     {name: '北京'},
4     {name: ‘上海’}
5 ]
6 
7 // 这里使用扩展
8 module.exports = { cityList }

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

// es6使用import来引入

import { cityList } form 'city.js'

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

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

1 const getList = () => {
2     // 筛选出name为北京的项
3     return cityList.filter(item => item.name === '北京')
4 }
5 
6 module.exports = { cityList, getList } // 抛出

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

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

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

 

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

标签：city,javascript,cityList,模块化,getList,js,import,name
来源： https://www.cnblogs.com/lsAxy/p/12674996.html