这里书写一个个人理解以及整理的东西,关于模块化以及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的猴子

javascript模块化(简)的更多相关文章

  1. JavaScript 模块化简析

    关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS .CMD AMD 这些名词,以及 RequireJS.SeaJS 等陌 ...

  2. JavaScript模块化-require.js,r.js和打包发布

    在JavaScript模块化和闭包和JavaScript-Module-Pattern-In-Depth这两篇文章中,提到了模块化的基本思想,但是在实际项目中模块化和项目人员的分工,组建化开发,打包发 ...

  3. JavaScript模块化演变 CommonJs,AMD, CMD, UMD(一)

    原文链接:https://www.jianshu.com/p/33d53cce8237 原文系列2链接:https://www.jianshu.com/p/ad427d8879cb 前端完全手册: h ...

  4. Javascript模块化编程(三):require.js的用法

    Javascript模块化编程(三):require.js的用法 原文地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 作者: 阮一峰 ...

  5. Javascript模块化编程(二):AMD规范

    Javascript模块化编程(二):AMD规范   作者: 阮一峰 原文地址:http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_d ...

  6. Javascript模块化编程(一):模块的写法

    Javascript模块化编程(一):模块的写法 作者: 阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html ...

  7. Javascript模块化编程(二):AMD规范(转)

    这个系列的第一部分介绍了Javascript模块的基本写法,今天介绍如何规范地使用模块. (接上文) 七.模块的规范 先想一想,为什么模块很重要? 因为有了模块,我们就可以更方便地使用别人的代码,想要 ...

  8. Javascript模块化编程(一):模块的写法(转)

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂. 网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者 ...

  9. Javascript模块化规范

    Javascript模块化规范 一.前端js模块化由来与演变 CommonJS 原来叫 ServerJS,推出 Modules/1.0 规范后,在 Node.js 等环境下取得了很不错的实践.09年下 ...

  10. Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。

    随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...

随机推荐

  1. Spring Boot学习(三)解析 Spring Boot 项目

    一.解析 pom.xml 文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=& ...

  2. eureka集群的搭建

    本次将会创建三个注册中心和一个客户端进行集群,架构图如下: 修改本机hosts文件,创建三个域名: 代码结构如图: 由于三个注册中心结构都是一样的,区别在于配置文件: #注册中心(eureka-ser ...

  3. 使用JWT登录生成token

    package com.example.demo.util; import com.auth0.jwt.JWT; import com.auth0.jwt.JWTVerifier; import co ...

  4. 2020.09 问题总结(Oracle-->MySQL、Maven、JSP-->Thymeleaf、Druid)

    2020.09 问题总结(Oracle-->MySQL.Maven.JSP-->Thymeleaf.Druid) 数据库建表 Oracle 转 MySQL 问题 Oracle MySQL ...

  5. Python练习题 008:打印101-200之间的所有素数

    [Python练习题 008]判断101-200之间有多少个素数,并输出所有素数. ---------------------------------------------------------- ...

  6. Linux 的shell指令

    ------十六进制查看文件 ------  ls 命令 ---- cp  ----- chmod

  7. 如何使用MATLAB对图片的RGB三种颜色进行提取

    参考: https://jingyan.baidu.com/article/456c463b41de5f0a5831448e.html matlab在图像处理方面,具有很强大的应用.下面将分享如何使用 ...

  8. 题解 SP1026 【FAVDICE - Favorite Dice】

    首先,这是一道经典的期望dp题 因为最终状态 $ (所有面都被筛到过) $ 是确定的,所以才用 逆推 ,设状态 $ f[i] $ 表示已经筛到了 $ i $ 个不同的面,有 $ i\over n $ ...

  9. 正式班D5

    2020.10.10星期六 正式班D5 一.上节课复习 1.硬盘分类 ​ 1.机械磁盘 ​ io时间=平均寻道时间+平均延迟时间 ​ buffer:写缓冲区 ​ cache:都缓存 ​ 2.固态硬盘 ...

  10. 小程序将base64的多张图片,传到tp5后台

    zhu要是前端传过来的数据是base64的数据库存储不了base64的数据,因存储量太过于大,因此后台要将base64的数据转换成,34124323534.jpg等格式的,数据库才可将其存储 源码暂时 ...