精华内容
下载资源
问答
  • 前端模块化

    2020-04-08 12:28:01
    为什么要前端模块化2.前端模块化的实现方法1.CommonJS实现导出导入2.ES6的实现统一导出定义时导出缺省导出全部导入 1.为什么要前端模块化 前端模块化解决JS文件之间命名冲突,相互影响等问题。提高引用文件之间的...

    1.为什么要前端模块化

    前端模块化解决JS文件之间命名冲突,相互影响等问题。提高引用文件之间的相互独立性。

    2.前端模块化的实现方法

    1.CommonJS实现

    CommonJS的语法解析需要通过nodejs等环境支持
    通过关键字 export require实现

    导出

    function sum(num1, num2) {
       return num1 + num2
    }
    var flag = true
    module.exports = {
      flag: flag,
      sum: sum
    }
    

    导入

    var {flag, sum} = require('./aaa.js')
    

    2.ES6的实现

    注意:在引用时添加module ,否则无法解析ES6模块化语法

    <script src="test1.js" type="module"></script>
    

    但,,,单以本地文件启动时谷歌不允许这样访问
    有许多种解决方法:这里列举一种,通过VS中的插件live Server
    插件
    安装以后通过Live Server打开本地的Html文件,打开方式变成IP加端口
    Url
    问题解决,但是有一个图标资源加载错误,有强迫症可以在目录下放一个Ico文件
    自动请求图标
    下面进入正题:

    统一导出

    // 1.统一导出,对象字面量增强写法:
    export {
      flag, sum
    }
    
    import {flag, sum} from "./aaa.js";
    

    定义时导出

    导入时名字要和导出相同

    export var num1 = 1000;
    
    import {num1} from "./aaa.js";
    

    缺省导出

    (注意缺省导出只能有一个,导入时可以自己定义名字)

     const address = '北京市'
     export default address
    
    import myaddress from "./aaa.js";
    

    全部导入

    as可以实现在导入时进行改名

    import * as aaa from './aaa.js'
    
    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 11,314
精华内容 4,525
关键字:

前端模块化