曾小乱

sea.js 设计思路和模块化

曾小乱 | 2016年10月29日 | 427 views

要编写复杂软件又不至于一塌糊涂的唯一方法，就是用定义清晰的接口把若干简单模块组合起来，这样一来，多数问题只出现在局部，那么我们还有希望对局部进行改写或优化，不会牵一发而动全身。

-《 UNIX 编程艺术》

目录

  1. sea.js 源码解析
  2. CMD 规范
  3. AMD 规范
  4. CommonJS 规范
  5. 其它模块化的方式

一个简单的模块化例子

See the Pen simple-module by zeng (@zengxiaoluan) on CodePen.

一个代码小片段

1
2
3
4
5
6
7
8
9
10
11
12
13
;(function(root, factory) {
 
  if (typeof define === 'function' && define.amd) {
    define(factory);
  } else if (typeof exports === 'object') {
    module.exports = factory();
  } else {
    root.NProgress = factory();
  }
 
})(this, function() {
  // ...
})

seajs 登场

learn_seajs

一个 seajs 的例子

什么是 CMD 规范？

Common Module Definition / draft

一个奇怪的例子

– 也是这次分享的契机

依赖的收集

1.正则表达式

1
2
3
4
// Parse dependencies according to the module factory code
if (!isArray(deps) && isFunction(factory)) {
  deps = typeof parseDependencies === "undefined" ? [] : parseDependencies(factory.toString())
}

具体正则的写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var REQUIRE_RE = /"(?:\\"|[^"])*"|'(?:\\'|[^'])*'|\/\*[\S\s]*?\*\/|\/(?:\\\/|[^\/\r\n])+\/(?=[^\/])|\/\/.*|\.\s*require|(?:^|[^$])\brequire\s*\(\s*(["'])(.+?)\1\s*\)/g
var SLASH_RE = /\\\\/g
 
function parseDependencies(code) {
  var ret = []
 
  code.replace(SLASH_RE, "")
      .replace(REQUIRE_RE, function(m, m1, m2) {
        if (m2) {
          ret.push(m2)
        }
      })
 
  return ret
}

2. 词法分析

Get dependences of using require in module by simple syntax parser

如何准确的执行回调函数？

重点知识
重点

A very long demo time.

图片来自：https://juejin.im/post/5b7248385188256136399064

其它模块的方式

CommonJS

CommonJS is a growing collection of standards, including

  1. Modules
  2. Binary strings and buffers
  3. Charset encodings
  4. Binary, buffered, and textual input and output (io) streams
  5. System process arguments, environment, and streams
  6. File system interface
  7. Socket streams
  8. Unit test assertions, running, and reporting
  9. Web server gateway interface, JSGI
  10. Local and remote packages and package management

LABjs

Loading And Blocking JavaScript: On-demand parallel loader for JavaScript with execution order dependencies

RequireJS(AMD)

A file and module loader for JavaScript

https://requirejs.org/docs/why.html

es6, import/export

1
2
3
4
5
<script type="module">
  import {addTextToBody} from './utils.mjs';
 
  addTextToBody('Modules are pretty cool.');
</script>
1
2
3
4
5
6
// utils.mjs
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

原生浏览器的支持

快乐 2019，早点回家过年。
快乐 2019，早点回家过年。

后记

以前使用 sea.js 时因为懒于看源码，发生了不少啼笑皆非、耗费时间、让人尴尬的问题。现在才明白，所谓的规范其实是一种套路，告诉我们按照规则走，才能保证代码不出错，早点下班。

完成 sea.js 源码分享也是完成一个心结了。

Further reading

https://juejin.im/post/5b7248385188256136399064

https://zhuanlan.zhihu.com/p/25040637

http://tinyambition.com/HelloSea.js/how-seajs-works.html

ECMAScript modules in browsers

JavaScript 模块化七日谈

JavaScript Modules: From IIFEs to CommonJS to ES6 Modules

Why I’ve stopped exporting defaults from my JavaScript modules

前端模块化开发那点历史

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。