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的验证,因为他会帮你下载所有文件

  • 相关阅读:
    Z遮罩层完全覆盖页面
    页面加载完成时
    文字超出不换行,用省略号表示
    去掉最后一个元素的边线
    电话点击即可拨打
    制作对话的三角形
    active在iphone上不起作用
    jquery选择后代以及toggle,toggleClass用法
    button点击变换颜色时出现一个蓝色边框
    表格边框的实现
  • 原文地址:https://www.cnblogs.com/dshvv/p/13585932.html
Copyright © 2011-2022 走看看