[关闭]
@JunQiu 2018-09-18T11:22:16.000000Z 字数 2018 阅读 1124

静态加载和动态加载、CommonJS/es6module机制、js_循环依赖、shell_oh-myzsh、iterm[mac]

summary_2018/07 tools language_js designIdea


1、日常工作
1.1、静态加载和动态加载
1.2、shell辅助工具:oh-myzsh+iterm
1.3、CommonJS/es6module机制
1.4、javaScript:循环依赖

2、技术学习
2.1、静态加载和动态加载
2.2、shell辅助工具:oh-myzsh+iterm
  1. // iterm 终端分屏
  2. ctrl+D(+shift
  3. // 方向键切换到指定位置的分屏
  4. + opt +
  1. // 遇到一些小问题
  2. vim insert 不能使用,可以使用i代替
  3. // 在控制台打开本地目录 open .
2.3、 ES6 模块机制
  1. ## ES6模块机制与CommonJS、AMD的差异
  2. 主要有以下两个差异:
  3. 1ES6 模块输出的是值的引用,输出接口动态绑定,而 CommonJS 输出的是值的拷贝
  4. 2ES6 模块编译时执行,而CommonJS模块总是在运行时加载
  5. 具体来理解(以CommonJS为例):
  6. ### 不同点
  7. 1CommonJS输出的是值的拷贝:
  8. // a.js
  9. var b = require('./b');
  10. console.log(b.foo);
  11. setTimeout(() => {
  12. console.log(b.foo);
  13. console.log(require('./b').foo);
  14. }, 1000);
  15. // b.js
  16. let foo = 1;
  17. setTimeout(() => {
  18. foo = 2;
  19. }, 500);
  20. module.exports = {
  21. foo: foo,
  22. };
  23. // 执行:node a.js,执行结果:
  24. // 1
  25. // 1
  26. // 1
  27. ## 如果想要在CommonJS中动态获取模块中的值,那么就需要借助于函数延时执行的特性
  28. ## 可以看出:
  29. // CommonJS 模块中require引入模块的位置不同会对输出结果产生影响,并且会生成值的拷贝(以拷贝时运行的值为准,一旦拷贝不会发生改变)
  30. // CommonJS 模块重复引入的模块并不会重复执行,使用第一次拷贝的值
  31. 2ES6 输出值的引用
  32. ES6 模块中就不再是生成输出对象的拷贝,而是模块值的引用。
  33. 3ES6 静态编译,CommonJS 运行时加载
  34. ES6 模块编译时执行会导致有以下两个特点:
  35. -> import 命令会被JavaScript引擎静态分析,优先于模块内的其他内容执行。
  36. -> export 命令会有变量声明提前的效果。
  37. 4import命令会被 JavaScript 引擎静态分析
  38. // 报错,不能用于任何表达式
  39. if (x === 2) {
  40. import MyModual from './myModual';
  41. }
  42. require是运行时加载模块,import命令无法取代require的动态加载功能。有一个提案,建议引入import()函数,完成动态加载,import()返回一个 Promise 对象.
  43. ### 相同点
  44. 1、当你重复引入某个相同的模块时,模块只会执行一次
2.4、javaScript:循环依赖
  1. ## CommonJS的做法是,一旦出现某个模块被"循环加载",就只输出已经执行的部分,还未执行的部分不会输出。
  2. Tipsrequire命令第一次加载该脚本,就会执行整个脚本,然后在内存生成一个对象。
  3. {
  4. id: '...',
  5. exports: { ... },
  6. loaded: true,
  7. ...
  8. }
  9. 以后需要用到这个模块的时候,就会到exports属性上面取值。即使再次执行require命令,也不会再次执行该模块,而是到缓存之中取值(原始数据类型会被缓存),但是也可以通过闭包函数保持对模块内部的原始数据类型的引用。
  10. ## ES6模块的运行机制与CommonJS不一样,它遇到模块加载命令import时,不会去执行模块,而是只生成一个引用。等到真的需要用到时,再到模块里面去取值。
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注