sea.js 设计思路和模块化

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

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

-《 UNIX 编程艺术》

一个简单的模块化例子

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

一个代码小片段

;(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() {
  // ...
})

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 的例子

See the Pen <a href="https://codepen.io/zengxiaoluan/pen/ebKXVb/">simple-seajs-sample</a> by zeng (<a href="https://codepen.io/zengxiaoluan">@zengxiaoluan</a>) on <a href="https://codepen.io">CodePen</a>.

什么是 CMD 规范？

Common Module Definition / draft

一个奇怪的例子

– 也是这次分享的契机

依赖的收集

1.正则表达式

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

1

2

3

4

// Parse dependencies according to the module factory code

if (!isArray(deps) && isFunction(factory)) {

deps = typeof parseDependencies === "undefined" ? [] : parseDependencies(factory.toString())

}

具体正则的写法：

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
}

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

Modules
Binary strings and buffers
Charset encodings
Binary, buffered, and textual input and output (io) streams
System process arguments, environment, and streams
File system interface
Socket streams
Unit test assertions, running, and reporting
Web server gateway interface, JSGI
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

<script type="module">
  import {addTextToBody} from './utils.mjs';

  addTextToBody('Modules are pretty cool.');
</script>

1

2

3

4

5

import {addTextToBody} from './utils.mjs';

addTextToBody('Modules are pretty cool.');

</script>

// utils.mjs
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

1

2

3

4

5

6

// utils.mjs

export function addTextToBody(text) {

const div = document.createElement('div');

div.textContent = text;

document.body.appendChild(div);

}

原生浏览器的支持

后记

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

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

发表评论取消回复

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

sea.js 设计思路和模块化

目录

一个简单的模块化例子

一个代码小片段

seajs 登场

一个 seajs 的例子

什么是 CMD 规范？

一个奇怪的例子

依赖的收集

1.正则表达式

2. 词法分析

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

A very long demo time.

其它模块的方式

CommonJS

LABjs

RequireJS(AMD)

es6, import/export

后记

Further reading

发表评论取消回复

目录

一个简单的模块化例子

一个代码小片段

seajs 登场

一个 seajs 的例子

什么是 CMD 规范？

一个奇怪的例子

依赖的收集

1.正则表达式

2. 词法分析

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

A very long demo time.

其它模块的方式

CommonJS

LABjs

RequireJS(AMD)

es6, import/export

后记

Further reading

发表评论 取消回复

发表评论取消回复