4-es6的模块化编程

Posted 甲乙丙丁少

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了4-es6的模块化编程相关的知识，希望对你有一定的参考价值。

诞生背景
其他都是第三方库，只有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的模块化编程的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

Atom编辑器入门到精通 Atom使用进阶

python之模块和包

使用 Pygments 检测代码片段的编程语言

如何有条件地将 C 代码片段编译到我的 Perl 模块？