javascript模块化开发(二)

模块化开发(一)

ES6模块化 详解

ES6 的模块自动采用严格模式,不管你有没有在模块头部加上"use strict"。
顶层的this指向undefined,即不应该在顶层代码使用this。

严格模式主要有以下限制:

  1. 变量必须声明后再使用
  2. 函数的参数不能有同名属性,否则报错
  3. 不能使用with语句
  4. 不能对只读属性赋值,否则报错
  5. 不能使用前缀 0 表示八进制数,否则报错
  6. 不能删除不可删除的属性,否则报错
  7. 不能删除变量delete prop,会报错,只能删除属性delete global[prop]
  8. eval不会在它的外层作用域引入变量
  9. evalarguments不能被重新赋值
  10. arguments不会自动反映函数参数的变化
  11. 不能使用arguments.callee
  12. 不能使用arguments.caller
  13. 禁止this指向全局对象
  14. 不能使用fn.callerfn.arguments获取函数调用的堆栈
  15. 增加了保留字(比如protectedstaticinterface
    上面这些限制,模块都必须遵守。

export命令

  • export除了输出变量,还可以输出函数或类(class),还可以通过 as 更改输出名。
let age = 18;
let obj ={name:  "Owen"};
let multiply = (x, y) => x * y;
export {
    age,
    obj as monicker, //改变量名
    multiply
}
  • 导出的对象必须是对外的接口
let num =2;
export num ; //error 因为实际输出的是一个值,须放在对象中 {num}

exprot 2  //error  输出的是值 而不是一个对外接口 => 须改成 export let num =2;

  • 不能放到局部作用域中导出, 因为导出的对象是动态绑定的
 let foo = (r) => r++;
 let fn = () => export default foo; //error

export default

  • 全局只能有一个 export default
  • export default 后面不能有 变量声明的关键字
  • 使用 export default ,import 就不需要使用 {},只需要自定义一个变量即可
export default var a=1; //error
export default obj ={name:'Owen'};
//or
let num = 1;
let obj1 = {name:"Owen"};
export default {num, obj1}

import

  • 配合 from 导入模块, 通过 as 修改导入接口, 接口不能重新赋值,但对象可以修改内部属性或方法。
import {age, monicker as obj, multiply} from './preson.js';
  age = 0 ; //error
  obj.feature = "handsome Owen";
  console.log(age, obj。name, multiply(1,2))
  import * as preson from "./preson.js" //引入所有接口
  • import 具有提升的效果,会提升到作用域顶部执行,同一个模块多次引入只执行一次,并且不能再局部作用域中引入。

multiply(2,2); //4
import {age, monicker as obj, multiply} from './preson.js';

if (true){
import {age, monicker as obj, multiply} from './preson.js'; //error

}

import()

  • 因为require是运行时加载模块,import命令无法取代require的动态加载功能。因此,有一个提案,引入import()函数,完成动态加载。
  • import()函数可以用在任何地方,不仅仅是模块,非模块的脚本也可以使用。
  • require类似,不同之处在于 import()是同步加载 require()是异步加载
const path =import('path');
  • 我们可以利用 import() 进行按需加载,动态加载,按条件加载:

      ```javascript
      import('./a.js')
          .then(r => {
              r.fn();
          })
          .catch(error => {
              /* Error handling */
          })
      if( x == 1){
          const path =import('path');
      }
      ```
    
  • 如果想同时加载多个模块,可以采用下面的写法

  Promise.all([
  import('./a.js'),
  import('./b.js'),
  import('./c.js'),
]) .then(([a,b,c]) => {
   // ...
 }).catch(error => {
                /* Error handling */
            })

(0)

相关推荐

  • 手写一个webpack,看看AST怎么用

    Vue中文社区 以下文章来源于进击的大前端 ,作者蒋鹏飞 Dennis 进击的大前端前端工程师,2020年开始写博客.一年时间成为掘金"优秀作者",思否2020年度"To ...

  • JS ES6中export和import详解

    JS ES6中export和import详解

  • Webpack笔记

    webpack 导入以及导出方式 node 使用var 名称 = require('模块标识符')导入 使用module.exports 和exports 来暴露成员 ES6 import 模块名称 ...

  • 如何在Python中操作日期和时间

    编写Python程序,处理日期和时间经常会遇到,幸好Python本身集成了很多日期.时间相关的模块,让这件繁琐的工作变的方便.本文介绍Python中功能强大的datetime模块. datetime模 ...

  • 00-3 Python核心知识点

    第一章 程序设计与Python语言3 一.Python语言的基本语法 1. Python程序元素 (1) 缩进 · 1个TAB键或4个空格 · 表示代码的层次关系 ·  是Python语言中表示程序框 ...

  • 这回让我们把 Python 玩出花来

    直接上代码先看效果: import com; import winex; import py3; var pyCode = /** def testPy(com,winex): # 在 Python ...

  • ASP.NET MVC模块化开发——动态挂载外部项目

    最近在开发一个MVC框架,开发过程中考虑到以后开发依托于框架的项目,为了框架的维护更新升级,代码肯定要和具体的业务工程分割开来,所以需要解决业务工程挂载在框架工程的问题,MVC与传统的ASP.NET不 ...

  • JavaScript入门-对象(二)

    JavaScript对象(二) 本篇,主要讲了面向对象.this的指向问题,模拟继承过程 面向对象编程 什么面向对象编程? 编程,编程就是人们用计算机能懂的语言,告诉计算机自己想做的事情. 面向对象的 ...

  • (二)MyBatis从入门到入土——开发一个Mybatis项目

    这是mybatis系列第2篇.没看前文的建议先去[Java冢狐]公众号中查看前文,方便理解和掌握这篇文章主要接着前文介绍了如何创建并使用Mybatis. 实战演练 上一篇文章中我们大体介绍了MyBat ...

  • “物联网开发实战”学习笔记-(二)手机控制智能电灯

    如果搭建好硬件平台后,这一次我们的任务主要是调试好智能电灯,并且连接到腾讯云的物联网平台. 腾讯云物联网平台 腾讯物联网平台的优势: 腾讯云链接: link. 到物联网平台的原因这是因为物联网平台提供 ...

  • 用JavaScript打造AI应用-从Nodejs SDK 看DuerOS的技能开发

    为什么要掌握JavaScript呢? 使用JavaScript能能否开发AI应用么? 答案是肯定的. 全栈语言JavaScript 就全栈编程语言而言,与python 并驾齐驱的要算是JavaScri ...

  • 搜罗全网!ArcGIS二次开发Python(arcpy)指南(三):三大文件对象操作

    点击上方蓝字,关注我带你飞!前言:地图文档对象.数据框对象.还有最为重要的图层对象.每种对象都有着各自的属性和方法,都有着不同的妙用... 上一章非常详细介绍了 ArcPy 模块.Python 窗口. ...

  • 大家|牟宗三:哲学智慧的开发(二)

    ▍编者按: 关于"哲学智慧的开发",牟宗三先生在前文"有取之知与无取之知"的基础上,谈到了"哲学的气质"需具备几种心境:一是利落的" ...

  • 风水调理可以开发财运(二)

    家中财位在哪里 要用风水调理催财旺财,必须找准财星的方位.财星的方位是一个作用点,只有在财星的作用点上放上风水物品,才能达到催财旺财的目的. 财位在那里?许多人不清楚.由于风水的门派不同,对于财位的理 ...

  • 教育直播源码:在线教育知识付费课程软件二次开发

    在疫情当中,所有的线下机构都受到了不同程度的冲击,线下的教育机构也不例外.疫情开始正值寒假,寒假的培训班和补习班都开不起来,只能转线上,线上教育直播一时之间成为线下讲师的首选. 教育直播功能: 1.知 ...