模块化(module)
一,模块化介绍
1.历史上,JavaScript
一直没有模块(module
)体系,ES6
在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS
和 AMD
规范,成为浏览器和服务器通用的模块解决方案。
2.模块化的作用就是将一个大程序拆分成互相依赖的小文件。
3.ES6
的模块自动采用严格模式,不管你有没有在模块头部加上"use strict"
;
4.ES6
模块化基本由两个命令完成:export
和 import
二,模块的导出 export
1.export
规定模块对外接口,下面两种写法皆可
// detalis.js
{export var name='max';export var age =27;
}
//details.js
{var name='max';var age =27;export {name,age}
}
2.错误的写法
{var a = 1;export a; // 报错var a = 1;export {a}; // 正确
}
3.默认导出export default
,一个模块只能有一个默认导出,对于默认导出,导入的名称可以和导出的名称不一致
export default function a(){return "默认导出一个方法"
}
import myFn from "./test.js";//注意这里默认导出不需要用{}。
4.整体导出*
可以用*
实现整体导出
{export * as ex from 'kkk.js'
}
5.export
语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。
三,模块的导入 import
1.import
用于导入模块的功能,后面的from
可以接受路径也可以接受模块名,如果是模块名则必须有相关配置文件指示模块名路径。
2.对于不是使用default
导出的,我们必须使用原名导出,对于使用default
导出的,不能使用{}
包裹起来导出。
{import { name, age } from './details.js' // 相对路径import Vue from 'vue' // 模块名
}
对于使用export default
导出的
{import name from './details.js' // 不用使用括号
}
3.对于不是使用default
导出的,我们必须使用原名导出,但是我们可以用 as
为引入的模块更名
{ import { name as n } from './details.js'
}
4.import
语句是静态分析的,在编译时就会执行,会被提到文件头部。
四,import()
函数
1.import
命令:import
命令会被 JavaScript
引擎静态分析,先于模块内的其他语句执行,放在代码块或者条件语句中会报错。
2.import()
函数:import()
函数是在运行时执行,也就是说,什么时候运行到这一句,就会加载指定的模块。
3.import()
函数接受的参数是需要导入模块的路径,返回一个Promise
对象,因此可以进行Promise
的所以操作。Promise
对象返回的参数就是导出的模块
import('modules.js').then(module=>{...})
4.基于运行时加载,我们可以完成下面的操作
(1)按需加载
if(needModule){import('modules.js').then({a,b}=>{...})
}
(2)条件加载
if(needa){import('modules.js').then(a=>{...})
}else{import('modules.js').then(others=>{...})
}
(3)动态的模块路径
const fn =(location)=>location
import(fn()).then(others=>{...})
模块化(module)相关推荐
- vuex结合php,Vuex模块化(module)实例详解
本文主要和大家介绍Vuex 模块化(module),小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家. 一.为什么需要模块化 前面我们讲到的例子都在一个状态树里进行,当一个项目比较 ...
- 微信小程序笔记六模块化 —— module.exports
微信小程序中所有 js 文件作用域皆为独立的,每一个 js 文件即为一个模块.模块与模块之间的引用通过 module.exports 或 exports 对外暴露接口. 注意: exports 是 m ...
- java 模块化_Java 9 新特性 - 模块化 - Java 技术驿站-Java 技术驿站
Java 9 最大的特性就是模块化 ( Module ) 了.本章,我们就对这个 模块化 进行一些简单的讲解,包括 Java 9 模块化的概念.如何实现.如何使用等 对于 Java 9 来说,模块化 ...
- 深入基础(一)模块化
简介 学习基础,JQuery 原生JS有一定基础,有自己一定技术认知(ps:原型链依然迷糊中.闭包6不起来!哎!) 当然最好有语言基础,C#,java,PHP等等.. 最初学习这个东西的原因很简单,在 ...
- vue解构赋值_前端开发es6知识 模块化、解构赋值、字符串模板
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍1.块级作用域 let const 2.箭 ...
- let的解构赋值_前端开发es6知识 模块化、解构赋值、字符串模板
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...
- 前端模块化编程(import,export)
目录 基本介绍 CommonJS模块化 module.exports导出 require导入 ES6模块化 按需导入导出 导出方式 导入方式 默认导出 默认导出方式 默认导入的方式 注意事项 基本介绍 ...
- [js基础篇]模块化小结
模块化Module 文章目录 模块化简介 什么是模块化 为什么需要模块化 非模块化的问题 模块化的优点 模块化的发展历程 原始写法 对象写法 立即执行函数(IIFE模式) IIFE的增强(引入依赖) ...
- AngularJS-Basic(一)
MVC:作为DataModel的$scope 依赖注入DI 模块化Module Service Filter Two way DateBinding Directive Unit Testing&am ...
- 4 angular 重构 项目_vuejs angularjs 框架的一些比较(vue项目重构四)
使用Angularjs和Vue.js对比 首先需要说明的是:现在默认angularjs指angular1.0+版本,angular默认指2.0以上版本.本文的名词也默认指定angular的1.0+版本 ...
最新文章
- Android手机启动流程与TEE OS
- 21.5. 流量控制
- UILabel 使用 标签,圆角,富文本
- 敢不敢模拟超过 5 万的并发用户?
- 转自知乎-我见过最通俗易懂的KMP算法详解
- Echarts4+EchartsGL 3D迁徙图(附源码)
- 一个java程序_从另一个java程序运行java程序
- stringbuilder_string和stringBuilder的区别
- css中的 font 与 font-size
- restorator打开后win10不能打开任何程序,右键桌面没有打开选项
- 前端电子时钟字体引入
- 树莓派舵机 c语言,树莓派控制SG90舵机
- CSDI2018广州关于《Nginx》的分享(附文字速录与PPT)
- 移动流量转赠给好友_中国移动怎么才能转赠手机流量
- 2022全球新能源与智能汽车供应链创新大会|爱普搜同期项目对接会
- UIWebView、UITextView 和UILable 设置行间距
- 组织机构树型数据库结构
- InnoDB存储引擎:引擎概况
- Macwk 挂了?替代的Mac软件下载网站来了
- java.lang.IllegalArgumentException(求解决)
热门文章
- echarts 流程图
- eWebEditor 水印版
- 前端 如何检测到当前的网页已经退出_js如何实现在监测页面关闭和刷新事件
- Java系列之:Collections实现斗地主游戏
- ISE的使用(文字版)
- Linux整合LNMP(Centos7.4+Nginx+PHP+MariaDB)
- (附源码)Springboot小程序交通违法举报系统 毕业设计 242045
- RS:VoNR,让用户体验到高质量语音业务
- 基于python的CFC滤波器实现(附源代码)
- teracopy_文件复印机之战:Windows,TeraCopy和SuperCopier