• 模块封装的几种操作


    模块

    定义: 模块是自动运行在严格模式下并且没有办法退出的JavaScript代码。
    
    模块可以是函数、数据、类,需要指定导出的模块名,才能被其他模块访问。
    
    <!--数据模块-->
    const obj = { a: 1 }
    <!--函数模块-->
    const sum = (a, b) => {
        return a + b;
    }
    <!--类模块-->
    class My extends vue.Components{
        
    }
    

    模块导出

    添加export  导出模块
    
    <!--数据模块-->
    export const obj = { a: 1 }
    <!--函数模块-->
    export const sum = (a, b) => {
        return a + b;
    }
    <!--类模块-->
    export class My extends vue.Components{
        
    }
    

    模块导入

    使用import关键字,导入分两种情况,一种是导入指定的模块,另外一种是导入全部模块。
    
    1)导入指定的模块
    <!---->
    import {obj, My} from 'XX.js'
    
    console.log(obj, My);
    
    2) 导入全部
    <!---->
    import * as all from 'XXX.js'
    
    console.log(all.obj, all.sum(1, 2), all.My);
    

    默认模块的使用

    如果给我们的模块加上default关键字,那么该js文件默认只导出该模块,你还需要把大括号去掉。
    
    <!--默认模块定义-->
    function sum = (a, b) => {
        return a + b;
    }
    export default sum
    
    <!--导入默认模块-->
    import sum from 'xx.js'
    

    模块的使用限制

    不能在语句和函数之内使用export关键字,只能在模块顶部使用
    
    <script>
        import sum from 'xx.js'
        
        // fangfa
    </script>
    

    修改模块导入和导出名

    function sum = (a, b) => {
        return a + b;
    }
    
    1)导出时修改
        export { sum as add }
        
        import {add} from ''
    
    2) 导入时修改
        export sum 
        
        import { sum as add } from ''
    

    无绑定导入

    当你的模块没有可导出模块,全都是定义的全局变量的时候,你可以使用无绑定导入。
    
    <!--模块-->
    let a = 0;
    const PI = 3.14;
    
    <!--无绑定导入-->
    import '';
    console.log(a, PI);
    

    浏览器加载模块

    有用过webpack打包js模块的同学可能有经验,使用webpack打包了多个js文件,然后放到HTML使用script加载时,如果加载顺序不对,就会出现找不到模块的错误。
    
    这是因为模块之间是有依赖关系的,就像你使用jQuery的时候,必须先加载jQuery的代码,才能使用jQuery提供的方法。
    
    加载模块的方法,总是先加载模块1,再加载模块2,因为module类型默认使用defer属性。
    
    <script type='module' src='module1.js'></script>
    <script type='module' src='module2.js'></script>
    

    本文参考掘金社区文章

    地址链接 https://mp.weixin.qq.com/s?__biz=MzI4MDYyNjQ1OA==&mid=2247483967&idx=1&sn=22e5e28ef80207500e96968346190a00&chksm=ebb4d64adcc35f5c36226b788c7eec5011f1df2d26659de6b3f943f8338377825cf27c49f346#rd

  • 相关阅读:
    寒假day08
    操作系统(一)操作系统的目标和作用
    数据结构排序算法稳定性总结——写给自己看
    网络请求生命周期
    PHP 不同类型之间的松散和严格比较
    php配置可被设定范围
    laravel5.7 前后端分离开发 实现基于API请求的token认证
    laravel 自动加载 自定义的文件/辅助函数
    laravel5.7 migrate 时报错 Specified key was too long error 解决方案
    PHP 命名空间
  • 原文地址:https://www.cnblogs.com/lynnekanuo/p/7581631.html
Copyright © 2020-2023  润新知