zoukankan      html  css  js  c++  java
  • 模块化补充

    补充

    访问安全的处理

    模块化的好处处理在于能够分模块解耦编写代码外。还能够保护私有变量。类似于private的效果。 在没有这些模块之前,是如何处理这些问题呢。 利用闭包

    // utils引入
    (function(){
        var print = function(msg){
            console.log('调用了'+msg)
        };
        var add = function(){
            print('加法')
        };
        var utils = { add };
        window.utils = utils
    })()

    commonJs和esModule的不同

    CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
    CommonJS 模块是运行时加载,ES6 模块是编译时输出接口。 参考:ES6模块与CommonJS的区别

    commonJs

    // utils.js
    let count = 1;
    setInterval(()=>{
        ++count;
    },1000)
    module.exports = { count };
    
    // main.js
    const utils = require('./utils');
    setInterval(()=>{
        console.log(utils.count) // 一直打印1
    },1000)

    esModule

    // utils.js
    export let count = 1;
    let count = 1;
    setInterval(()=>{
        ++count;
    },1000)
    
    // main.js
    import count from './utils';
    setInterval(()=>{
        console.log(count) // 打印1、2、3...
    },1000)

    关键字讲解

    module.exports、 export.utils = {}、export default、export const utils = {}

    原生浏览器支持

    type=module

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script type="module">
            import {add} from './utils.js';
            const res = add(1,2);
            console.log(res)
        </script>
    </body>
    </html>
    export const add = (num1, num2)=> {
        return num1+num2;
    }

    ts中的内部和外部模块

    namespace和module

    预加载

    prefetch 这玩意会影响 cmd的验证,因为他会帮你下载所有文件

  • 相关阅读:
    构建之法阅读笔记05
    构建之法阅读笔记04
    构建之法阅读笔记03
    构建之法阅读笔记02
    构建之法阅读笔记01
    管理系统的简单解析---web
    Java中的异常处理
    多态
    重写与重载
    抽象类与接口
  • 原文地址:https://www.cnblogs.com/dshvv/p/13585932.html
Copyright © 2011-2022 走看看