zoukankan      html  css  js  c++  java
  • 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编译打包了

  • 相关阅读:
    IMWebConf 2017 官网彩蛋解谜
    解决SVG animation 在IE中不起作用
    百度大搜和度秘面经
    浅谈JavaScript原型与原型链
    听说2017你想写前端?
    如何制作icon-font小图标
    HTML5 CSS3 诱人的实例 :模仿优酷视频截图功能
    javaweb action无法跳转、表单无法跳转的解决方法
    hadoop备战:yarn框架的搭建(mapreduce2)
    liferay 指定默认首页
  • 原文地址:https://www.cnblogs.com/dshvv/p/8391379.html
Copyright © 2011-2022 走看看