模块封装代码
1. 用模块封装代码
模块:自动运行在严格模式下并且没有办法退出运行的JavaScript代码
注:1)在模块顶部创建的变量不会自动被添加到全局共享作用域;这个变量仅在模块的顶级作用域中存在,
模块必须导出外部代码可以访问的元素,如:变量或函数是(模块可以从其他模块导入绑定)
2)模块间的特性与作用域关系不大,但很重要
1.模块顶部,this的值是undefined;
2.模块不支持html风格的代码注释(早期浏览器残余下来的js特性);
脚本?模块?
脚本 == 任何非模块的js代码
2. 导出的基本语法?
export关键字作用:将代码暴露给其他模块
{
可以将export放在任何变量、函数或类声明的前面(从模块导出)
}
// 导出数据(变量)
export var color= "red"
export let name = "dachengz"
export const farmNum = 77
// 导出函数 此方式属于导出声明
export function sum(num1, num2){
return num1 + num2;
}
// 导出类
export class Rectangle {
constructor(length, width) {
this.length = length
this.width = width
}
}
// 函数是模块私有的
function subtract(num3, num4){
return num3 - num4
}
// 定义一个函数- 外部无法访问(属于模块的私有方法)
function multiple(a,b) {
return a * b
}
// ...将它导出 此方式属于导出引用
export multiple
3. 导入的基本语法
import 语句两个部分分别是: 要导入的标识符和标识符应当从哪个模块导入
import { A, B} from './example.js'
{} : 从给定模块导入的绑定(binding)
关键字from : 表示从哪个模块导入给定的绑定(该模块由表示模块路径的字符串指定)被称作模块的说明符
1.导入单个绑定
import {sum} from './example.js'
console.log(sum(1,2)) // 3
sum =1 // 抛出一个错误 不能给导入的绑定重新赋值
注意:为了兼容多个浏览器和Node.js环境, 一定要在字符串之前包含 / 、./ 、或 ../ 来表示要导入的文件
2. 导入多个绑定
导入3个绑定
import {sum, multiple, farmNum} from './example.js'
console.log(sum(1,farmNum)) // 78
console.log(multiple(1,2)) // 2
3.导入整个模块
特殊情况下,可导入整个模块作为一个单一的对象。然后所有的导出都可以作为对象的属性使用
// 导入一切 命名空间导入
import * as example from './example.js'
console.log(example.sum(1,example.farmNum)) // 78
console.log(example.multiple(1,2)) // 2
从example.js中导出的所有绑定被加载到一个被称作example的对象中;
注意: 模块语法的限制
{
export、import它们必须在其它语句和函数之外使用。
}
4.导入绑定的一个微妙怪异之处
es6中Import语句为变量、函数和类创建的是只读绑定,而不是像正常变量一样简单地引用原始绑定
标识符只有在被导出的模块中可以修改,即便是导入绑定的模块也无法更改绑定的值
export var name = 'dcz'
export function setName(newName) {
name = newName
}
当导入这两个绑定后,setName()函数可以改变name的值
import {name, setName} from './example.js'
console.log(name) // dcz
setName('hehe')
console.log(name) // hehe
name = 'dcz' // 抛出错误
调用setName('Grep') 时会回到导出setName()的模块中去执行,并将name设置为'Grep'。
注意:此处的更改会自动在导入的name绑定上体现出来。因为,name是导出的name 标识符的本地名称。
5.导出和导入时重命名
起因:从其他模块导入类、函数、变量等时,不想使用原始名称。我们可以再导出过程和导入过程中改变元素的名称
例如使用不同的名称导出一个函数,使用as关键字来指定函数在模块外被叫做什么名字
导出时:
/*example.js中如下代码*/
function format(a,b) {
return a + b
}
export { format as sum}
注意:format()是本地函数;sum()是我们导出时使用的名字。
如果其他模块要导入这个函数是,必须使用sum这个名字: import { sum } from '../example.js'
再举例子2:utils工具类下一个单独文件url.js;统一管理在index.js中
export default {
getQueryStringByName(name){
// todo ....
},
route2Page(vm, destRoutePath, queryParams, replace) {
// todo...
},
routeBypassNPage(vm, n) {
// todo
}
}
此时,默认导出的是一个对象;而在index.js中配置
export { default as url } from './url' // 默认导出名字就是url
之所以这么写,为了我们后续在导入时,直接引入utils即可(其实是默认读取index.js文件而已),
导入时:
import {} from 'utils' // 同理 import {} from 'utils/index.js'
import { url } from 'utils' 即我们可以再后续使用url中的函数
例如:url.getQueryStringByName(...) url.route2Page(...), ...等
注意:我们也可以在导入时,重新指定导入名字,使用as关键字
import { url as urlUtil } from 'utils' // 后续操作是一样的 urlUtil.getQueryStringByName(...) ...,
6.模块的默认值
模块的默认值指的是通过default关键字指定的单个变量、函数、或类
(注意:只能为每个模块设置一个默认的导出值)多次使用default关键字是一个语法错误
上述描述中已经涉及到默认导出,default
接下来,我们再具体看看其他的demo
export default function (num1, num2){
return num1 + num2
}
模块导出一个函数作为它的默认值
同理,可以再export default之后添加默认导出值的标识符
function sum(a1,a2){ return a1 * a2}
export default sum
6.导入默认值
// 导入默认值
import sum from './example.js'
console.log(sum(2,2)) // 4
export let color = 'blue'
export default function(num1,num2){
return num1 + num2
}
// 可用import 导入color 和默认函数
import sum, {color} from './example.js' // 使用逗号将默认的本地名称与大括号包裹的非默认值分开
注意:在import语句中,默认值必须排在非默认值之前
console.log(sum(1,2)) // 3
console.log(color) // 'blue'
重新导出一个绑定怎么做?
无绑定的导入又是什么?(应用于创建polyfill和shim)
我们思考下应用场景。。。