诞生背景
其他都是第三方库，只有es才是官方正宗的，如果es早就制定的话，也不至于现在的这么百花齐放（混乱）的局面了

核心规范
一个文件就是一个模块
export是暴露出模块的公开方法
import是导入

实例代码

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div class="wrapp">

        <input type="text"></br>

        <input type="text"></br>

        <button>求和</button></br>

        <div class="sumWrap"></div>

    </div>

    <script src="lib/jquery-3.2.1.min.js"></script>

    <script src="bundle.js"></script>

</body>

</html>

app.js

/**

 *模块:

 *功能:入口

 */

import {add} from './tools';

$('button').click(function () {

    var num1=$('input:eq(0)').val();

    var num2=$('input:eq(1)').val();

    var sum=add(num1,num2);

    $('.sumWrap').text(sum)

})

tools.js

/**

 *模块:tools

 *功能:工具

 */

//除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。

import * as log from './log';

var add=function (x,y) {

    var sum= Number(x)+Number(y);

    log.info('tools>add执行结果为：'+sum);

    console.log(log)

    return sum;

}

export {add};

log.js

/**

 *模块:log模块

 *功能:打印

 */

var info=function (str) {

    console.log(str)

};

var warn=function (err) {

    console.warn(str)

};

var err=function (str) {

    console.error(str)

};

export {info,err};

效果预览

作者说明
因为es只是出了规范，具体的是实现还是靠浏览器，目前为止没有一个浏览器支持es6模块开发规范的。所以我用了webpack编译打包了

4-es6的模块化编程的更多相关文章

  1. es6的模块化编程

    es6的模块化编程 基本用法 es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能. 一个模块就是一个独 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十六 ║Vue基础：ES6初体验 & 模块化编程

    缘起 昨天说到了<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十五 ║ Vue前篇:JS对象&字面量&this>,通过总体来看,好像大家对这一块不是很 ...

  3. 简述JavaScript模块化编程（二）

    前置阅读:简述JavaScript模块化(一) 在前面一文中,我们对前端模块化所经历的三个阶段进行了了解: CommonJs,由于是同步的,所以主要应用于服务器端,以Node.js为代表. AMD,异 ...

  4. 第五篇，理解JS模块化编程思想

    模块化编程 ·模块化编程是一种处理复杂系统分解成更好的可管理模块的方式,它可以把系统代码划分为职责单一高度解耦切可替代的模块. ·系统中某一部分的变化将如何影响其他部分就会变得显而易见,系统的可维护性 ...

  5. 从273二手车的M站点初探js模块化编程

    前言 这几天在看273M站点时被他们的页面交互方式所吸引,他们的首页是采用三次加载+分页的方式.也就说分为大分页和小分页两种交互.大分页就是通过分页按钮来操作,小分页是通过下拉(向下滑动)时异步加载数 ...

  6. Javascript模块化编程（三）：require.js的用法

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

  7. Javascript模块化编程（二）：AMD规范

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

  8. Javascript模块化编程（一）：模块的写法

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

  9. 【模块化编程】理解requireJS-实现一个简单的模块加载器

    在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ..... ...

  10. Javascript模块化编程（二）：AMD规范（转）

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

随机推荐

  1. gomobile build

    You need to set the NDK path in gomobile init using the -ndk flag - if you follow these instructions ...

  2. XML基础知识-->Spring配置

    XML的特殊字符 XML中共有5个特殊的字符,分别是:&<>“’.如果配置文件中的注入值包括这些特殊字符,就需要进行特别处理.有两种解决方法:其一,采用本例中的<![CDAT ...

  3. iOS开发之--去除按钮的点击效果

    Button.adjustsImageWhenHighlighted = NO; 去除按钮的点击效果,用这句代码就可以了!

  4. Tomcat服务器的安装与配置

    安装 输入网址进入Tomcat的官网            在左边导航栏选择对应下载的版本            下载安装包形式             下载并解压到我们欲放入的目录中 配置      ...

  5. SQL 语句快速参考

    来自 W3CSchool 的 SQL 快速参考 SQL 语句 语法 AND / OR SELECT column_name(s)FROM table_nameWHERE conditionAND|OR ...

  6. 构建API

    前言 过程,如图: 第一步创建一个帮助类,类里面提供了加密.组装Url等方法,代码如下: using System; using System.Collections.Generic; using S ...

  7. linux系统安装jdk及配置环境变量

    OpenJdk8安装: sudo add-apt-repository ppa:openjdk-r/ppa sudo apt-get update sudo apt-get install openj ...

  8. HDU 5877 2016大连网络赛 Weak Pair(树状数组，线段树，动态开点，启发式合并，可持久化线段树)

    Weak Pair Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others) Tota ...

  9. poj3585 Accumulation Degree【树形DP】【最大流】

    Accumulation Degree Time Limit: 5000MS   Memory Limit: 65536K Total Submissions:3151   Accepted: 783 ...

  10. Servlet------>jsp自定义标签2（让标签体不显示）

    自定义标签能做什么: 1.移除java代码 2.控制jsp页面某一部分是否执行 3.控制整个jsp是否执行 3.jsp内容重复输出 4.修改jsp内容输出 2.控制jsp页面某一部分是否执行 tag1 ...