编程语言
首页 > 编程语言> > javascript模块化(简)

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