这里书写一个个人理解以及整理的东西,关于模块化以及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. 并发编程(四)Thread类详解

    一.引言 Thread类中存在着许多操作线程的方法,学习Thread类是非常有必要的,前面我们也嘘唏了创建线程的几种方式,若线程的创建不是以继承Thread类的方式创建的,那我们又改如何使用Threa ...

  2. Spark 模型选择和调参

    Spark - ML Tuning 官方文档:https://spark.apache.org/docs/2.2.0/ml-tuning.html 这一章节主要讲述如何通过使用MLlib的工具来调试模 ...

  3. spring aop 源码分析(三) @Scope注解创建代理对象

    一.源码环境的搭建: @Component @Scope(scopeName = ConfigurableBeanFactory.SCOPE_SINGLETON,proxyMode = ScopedP ...

  4. git的详细使用,项目创建到同步远程仓库,版本回退,忽略文件,分支创建,分支合并,分支名称修改,冲突解决,项目迁移

    注意:此处省略git的安装 1..git的工作流程示意图: 2.本地仓库的初始化: 2.1 创建一个文件夹,如我创建的是:D:\gitdemo\shop 2.2 进入shop目录,鼠标右键,打开git ...

  5. Ubuntu部署和体验Nexus3

    关于Nexus 如下图,在局域网部署了Nexus之后,可以缓存中央仓库的jar,开发者开发的二方库发布到Nexus上,局域网内的其他人也可以从Nexus下载这些二方库使用: 环境信息 本次实战是在Li ...

  6. 在C++中使用libuv时对回调的处理

    新的解决方法 https://www.cnblogs.com/ink19/p/13768425.html libuv简介 libuv是一个可以跨平台的C语言库,它提供了基于事件的异步IO支持[1].提 ...

  7. Java知识系统回顾整理01基础05控制流程02 switch

    一.switch switch 语句相当于 if else的另一种表达方式 switch可以使用byte,short,int,char,String,enum 注: 每个表达式结束,都应该有一个bre ...

  8. 6个LED的控制

    控制任务和要求 让6个LED按要求工作 电路设计 程序设计 1 int Led1 = 1; //各LED与实验板的联接引脚 2 int Led2 = 2; 3 int Led3 = 3; 4 int ...

  9. Android使用Mono c#分段列表视图

    下载source code - 21.7 KB 你想知道如何把多个ListView控件放到一个布局中,但是让它们在显示时表现正确吗 多个列表项?你对它们正确滚动有问题吗?这个例子将向你展示如何组合单独 ...

  10. 如何在yii2直接执行SQL

    执行SQL $connection=Yii::app()->db;   // 假设你已经建立了一个 "db" 连接 $sql = "SELECT * FROM tb ...