这里书写一个个人理解以及整理的东西,关于模块化以及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. el-table行点击事件row-click与列按钮事件冲突

    需求简述 表格用el-table实现,操作列的编辑按钮点击事件正常实现.现要为行加一点击事件,即row-click.加上后,发现点击操作列的编辑按钮时,会触发按钮本身事件,同时会触发行点击事件.第一版 ...

  2. 刷题[RoarCTF 2019]Easy Java

    前置知识 WEB-INF/web.xml泄露 java web工程目录结构 Servlet访问URL映射配置 由于客户端是通过URL地址访问Web服务器中的资源,所以Servlet程序若想被外界访问, ...

  3. xss利用——BeEF#stage4(其余功能介绍)

    目录 信息收集 => 社会工程 =>网络扫描 => 结合metasploit => tunneling => xss => 维持权限 功能介绍 #1 - 信息收集 ...

  4. 2019.8.13 sdfzoier

    lxy: lixf acwing上的118,126 zhangtingyu zhaosirui wujialin

  5. jdk环境配置(Windows)

    电脑>属性>高级系统设置>环境变量 1 创建JAVA_HOME,值是你的刚刚jdk的安装目录,比如 C:\Program Files (x86)\Java\jdk1.8.0_101 ...

  6. myBatis 日记

    一级缓存默认开启, 有效范围是在当前sqlsession, 同一个SqlSession对象执行相同的sql并参数也要相同,缓存才有效. 在同一个会话里面,多次执行相同的SQL 语句,会直接从内存取到缓 ...

  7. eureka源码--服务的注册、服务续约、服务发现、服务下线、服务剔除、定时任务以及自定义注册中心的思路

    微服务注册后,在注册中心的注册表结构是一个map: ConcurrentHashMap<String, Map<String, Lease<InstanceInfo>>& ...

  8. Git入门教程,详解Git文件的四大状态

    大家好,欢迎来到周一git专题. git clone 在上一篇文章当中我们聊了怎么在github当中创建一个属于自己的项目(repository),简称repo.除了建立自己的repo之外,我们更多的 ...

  9. Linux学习笔记-vi(一)

    vim编辑命令 vim命令的三种模式: 1.命令模式: vi file.txt  进入vi模式,默认为命令模式,命令模式移动光标. 2.插入模式 i (insert):在光标前插入内容 a(appen ...

  10. 【网络协议】TCP/IP:数据链路层

    物理层负责把计算机中的0.1数字信号转换为具体传输媒介的物理信号(电压的高低.电波的强弱.光的闪灭) 数据链路层协议定义了(通过通信介质互连的设备间的)数据传输规范 (常见的通信介质有同轴电缆.双绞线 ...