模块化开发(一)

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 */
})

javascript模块化开发(二)的更多相关文章

  1. Javascript模块化开发-轻巧自制

    Javascript模块化开发-轻巧自制 一.前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端.模块化是必不可少的,这样不仅能够提高代码的可维护性.可扩展 ...

  2. Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。

    随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...

  3. Javascript 模块化开发上线解决方案

    最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...

  4. JavaScript模块化开发整理

    在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...

  5. JavaScript模块化开发的那些事

    模块化开发在编程开发中是一个非常重要的概念,一个优秀的模块化项目的后期维护成本可以大大降低.本文主要介绍了JavaScript模块化开发的那些事,文中通过一个小故事比较直观地阐述了模块化开发的过程. ...

  6. JavaScript模块化开发&&模块规范

    在做项目的过程中通常会有一些可复用的通用性功能,之前的做法是把这个功能抽取出来独立为一个函数统一放到commonFunctions.js里面(捂脸),实现类似于snippets的代码片段收集. fun ...

  7. (转)详解JavaScript模块化开发

    https://segmentfault.com/a/1190000000733959 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来j ...

  8. javascript 模块化开发(一)

    什么是模块化 将一组模块(及其依赖项)以正确的顺序拼接到一个文件(或一组文件)中的过程. 传统的模块化做法. 模块是实现特定功能的一组属性和方法的封装. 将模块写成一个对象,所有的模块成员都放到这个对 ...

  9. 详解JavaScript模块化开发

    什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...

随机推荐

  1. Centos7.x部署SeaFile私有网盘

    1.安装依赖环境 yum -y install wge gcc-c++ .......... 2.关闭Firewalld防火墙和SElinux systemctl stop firewalld sys ...

  2. IEEE754 32位浮点数表示范围

    6.1浮点数的数值范围 根据上面的探讨,浮点数可以表示-∞到+∞,这只是一种特殊情况,显然不是我们想要的数值范围. 以32位单精度浮点数为例,阶码E由8位表示,取值范围为0-255,去除0和255这两 ...

  3. 磁盘修复 mount: wrong fs type running e2fsck

    当服务器或PC机器的硬盘在使用一段时间后,会出现无法使用正常进行使用: 1. 当将文件系统挂载到指定的目录的时候,会出现mount 失败,如下图: [root@template ~]# mount / ...

  4. 关于js的for in循环,慎用

    参考:http://www.cftea.com/c/2014/08/6290.asp作者:vkvi 如题我看到也有点诧异,测试了真的有这个问题,上代码 Array.prototype.a = func ...

  5. 白话 MVC、MVP、MVVP

    白话 MVC.MVP.MVVP 注意这里单纯的通过例子来讲解 MVC MVP MVVP 这三种架构模式的起源和作用,不牵扯某种特定的语言.具体到各种语言各种软件系统上体现有所不同,但是原理都是这样的. ...

  6. zhy2_rehat6_mysql04 - MHA_故障演示与切换.txt

    export LANG=en_US 环境:------------------------------------------ 机器 VPN ip linux 账号/密码manager1 172.28 ...

  7. C# List、Array、Dictionary之间相互转换

    Array转换为List List转换为Array Array转Dictionary Dictionary转Array List转Dictionary Dictionary转List IQueryab ...

  8. 斐波那契数列(Java)

    一.什么是斐波那契数列 斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为& ...

  9. 【bzoj4671】异或图(容斥+斯特林反演+线性基)

    传送门 题意: 给出\(s,s\leq 60\)张图,每张图都有\(n,n\leq 10\)个点. 现在问有多少个图的子集,满足这些图的边"异或"起来后,这张图为连通图. 思路: ...

  10. 【使用篇二】SpringBoot定时任务Scheduled(14)

    在日常项目运行中,我们总会有需求在某一时间段周期性的执行某个动作.比如每天在某个时间段导出报表,或者每隔多久统计一次现在在线的用户量.在springboot中可以有很多方案去帮我们完成定时器的工作,有 ...