当AMD遇上FIS

2014-11-24 13:59| 发布者: joejoe0332| 查看: 3957| 评论: 0|原作者: jobbole.com|来自: jobbole.com

摘要: 也许说 AMD 不知道这是啥，但说 requirejs 就都懂了。没错 AMD 就是一种模块定义的接口（API），用来定义模块间依赖以及自身暴露什么内容的一种规范。而 requirejs 就是一种实现了这些接口的 AMD Loader。 ...

原文出处：百度FEX

前言

　　也许说 AMD 不知道这是啥，但说 requirejs 就都懂了。没错 AMD 就是一种模块定义的接口（API），用来定义模块间依赖以及自身暴露什么内容的一种规范。而 requirejs 就是一种实现了这些接口的 AMD Loader。

　　说到 requirejs 相信不少人都已经对它爱不释手了，它真是给我们的开发带来了不少便利性。只要我们每个模块都简单的遵守这个规则

// app.js
define(function (require, exports, module) {
    var a = require('a');
    var b = require('b');
 
    exports.action = function () {};
});

　　然后，简单一段

// 程序入口
require(['/app'], function(app) {
    app.action();
});

　　就把指定的所有依赖都自动加载进来了。

　　于是，我们慢慢的会把一个大功能模块，拆得非常小，让每一个模块都只干最少的事，而且我们很享受这样的拆分，因为这样带给我们非常棒的可维护性。

问题

　　当我们把代码拆得非常小之后，直接用 requirejs 去加载的时候，很容就会出现这种情况。

　　性能好不好，可想而知。于是乎，我们需要把这些依赖打包起来。如何打包？当然是 r.js 他提供一种指定入口文件将所有的依赖打包成一个文件的工具。常用的做法是，配置一个列表给每个入口程序都打成一个文件, 然后手动把所有的入口文件地址换成打包后的。

　　这样基本上能满足需求，但是仍然还有些问题？

每个入口及其依赖打成了一个包，多个页面间公用的依赖被打包到了多处，页面切换公用依赖的缓存完全没有被利用起来。
每个入口地址我都得手动替换新地址，麻烦！
有些 amd 模块写法，需要 requirejs 在运行期需要将 function 转成字符分析依赖，性能会不会有问题？

优化方案

　　如果你使用 FIS, 这些问题就都迎刃而解，而且还能带来其他更多的好处。你可以先试用一下这个 fis amd demo。然后，让我让我来细说 fis 针对 amd 模块做了哪些优化以及在 fis中使用将带来哪些好处。

全新的编译插件

　　使用过 fis mod.js 方案的同学应该知道。原来对 js 模块依赖的解析只是简单粗暴的分析了两种用法。

即：

require('xxxx')
require.async('xxxx', cb);

　　将依赖生成 map.json, 然后，模块定义就是让用户去遵循 commonjs 规范，FIS 在编译期会自动封装成 amd module，其实就是包了一层define

define(moduleId, funciton(require, exports, module) {
    // 源 JS 内容。
    var a = require('a');
    var b = require('b');
 
    exports.action = function() {};
});

　　在页面渲染的时候，程序会根据 map.json 中依赖的申明，提前把同步依赖加载进来。

　　其实这样已经满足各种开发需求了，而且非常高效实用。但是随着外界开源组件的兴起以及 bower 的推广，目前已有大量的第三方组件涌现，而且他们都有一个特点，就是采用的 amd 规范。问题就是，这些组件拿过来放在 fis 中，没法直接用，必须得手动修改才能使用。

　　于是，全新的 amd 依赖解析插件诞生了。

　　它会分析所有 AMD 规范中定义的各种写法。

　　有了它，模块间的依赖实际上在编译期就已经知道了，并把的依赖关系生成到了 map.json, 这样只要借助工具，就可以提前把所需模块的全部依赖提前加载进来，而不需要让 requirejs 在前端用 js 去动态加载。

　　怎么让 requirejs 不重复加载？只要提前加载进来的模块，都带上 module id, 然后 require 入口引用的 module id 与之一致，requirejs 是不会重复加载的。这个自动补充 module id 的工作在这个插件中自动完成了，默认是自动把该文件在工程下面的路径去掉 .js 后缀的值作为 module id。

　　有了这些依赖信息，我们还可以利用 combo 或者 pack 打包将依赖合成一个文件输出，这样就减少了多个请求带来的网络开销，以后可以愉快拆分模块代码了。

12 3 / 3 页下一页在本页阅读全文