可以根据应用的需求吧代码分成不同的模块,每个模块里可以导出它需要让其他模块使用的东西,在其他模块里面可以导入这些模块,导出的东西。

在浏览器中使用模块需要借助 导出

1
2
export var name = 'wjh';
export var age = 8;

导入

1
2
3
//import {name,age} from './school.js';
import * as school from './school.js';
console.log(school.name,school.age);

在页面中引用

1
2
3
4
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module" src="index.js"></script>

重命名

导出时重命名

1
2
3
4
function say(){
console.log('say');
}
export {say as say2};

导入时重命名

1
import {say2 as say3} from './school.js'

11.3 默认导出

每个模块都可以有一个默认要导出的东西

1
2
3
export default function say(){
console.log('say')
}

导入

1
import say from './school.js'

11.4 深度克隆

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var parent = {
age: 5,
hobby: [1, 2, 3],
home: {city: '北京'},
};

var child = extendDeep(parent);
child.age = 6;
child.hobby.push('4');
child.home.city = '广东';
console.log('child ', child); //[1, 2, 3, 4]
console.log('parent ', parent);
function extend(parent) {
let child;
if (Object.prototype.toString.call(parent) == '[object Object]') {
child = {};
for (let key in parent) {
child[key] = extend(parent[key])
}
} else if (Object.prototype.toString.call(parent) == '[object Array]') {
child = parent.map(item => extend(item));
} else {
return parent;
}
return child;
}

function extendDeep(parent, child) {
child = child || {};
for (var key in parent) {
if (typeof parent[key] === "object") {
child[key] = (Object.prototype.toString.call(parent[key]) === "[object Array]") ? [] : {};
extendDeep(parent[key], child[key]);
} else {
child[key] = parent[key];
}
}
return child;
}