诞生背景
其他都是第三方库,只有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编译打包了