设为首页收藏本站

LUPA开源社区

 找回密码
 注册
文章 帖子 博客
LUPA开源社区 首页 业界资讯 技术文摘 查看内容

当AMD遇上FIS

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

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


被遗忘的技术细节

  现在 require 入口调用,会自动把其同步依赖加载进来。但是,等等,貌似怪怪的,因为 require 入口的调用其语义就是异步调用,怎么变成同步的语义了?


  按语义来应该针对 require(‘deps’) 引用做同步处理,但是这种用法并不在 amd 规范中定义,amd 规范定义的同步调用用法,只出现在模块定义内部。所以没办法,把模块定义外的 require 用法当成同步来用吧(模块定义内部的 require 异步语义保持不变)。当然一定要当作异步来用也是可以的,只要在 require 调用的前面加段注释 fis async。这样编译期就会把找到依赖标记成异步依赖。


  由于 FIS 对于静态文件是支持打包合并、加 md5 戳和部署到 cdn 的,也就是对于 js 的引用,我们是要忽略他的 release 后的路径的。如果纯同步依赖,似乎没问题,但是异步依赖怎么办呢?我在 require 里面的 module id 当然还是得用源码路径ID方便调试定位。


那么怎么转换路径呢?

  原来 mod.js 方案是读取 map.json 生成一个异步所需的 resoucemap 表,通过 require.resourceMap({xxx}) 设置给 mod.js,这样在异步加载模块的时候,可以对应找到实际的存放地址。


  amd 方案里面也是采用同样的方式,只是利用的是 amd 规范中的 paths 设置,根据 map.json 自动生成程序中所需要的异步依赖的路径转换规则,这样的话,fis 不是一定只能用 mod.js 才能做模块化开发,以后换成其他所有的 amd loader,比如还有 ecom 出的 esl.js;

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
require.config({"paths":{
    "modules/libs/zrender/lib/excanvas": "/pkg/zrender",
    "modules/libs/zrender/tool/util": "/pkg/zrender",
    "modules/libs/zrender/config": "/pkg/zrender",
    "modules/libs/zrender/tool/log": "/pkg/zrender",
    "modules/libs/zrender/tool/guid": "/pkg/zrender",
    "modules/libs/zrender/tool/env": "/pkg/zrender",
    "modules/libs/zrender/tool/event": "/pkg/zrender",
    "modules/libs/zrender/Handler": "/pkg/zrender",
    "modules/libs/zrender/tool/matrix": "/pkg/zrender",
    "modules/libs/zrender/shape/mixin/Transformable": "/pkg/zrender",
    "modules/libs/zrender/tool/color": "/pkg/zrender",
    "modules/libs/zrender/shape/Base": "/pkg/zrender",
    "modules/libs/zrender/shape/Path": "/pkg/zrender",
    "modules/libs/zrender/tool/area": "/pkg/zrender",
    "modules/libs/zrender/shape/Text": "/pkg/zrender",
    "modules/libs/zrender/shape/Rectangle": "/pkg/zrender",
    "modules/libs/zrender/loadingEffect/Base": "/pkg/zrender",
    "modules/libs/zrender/shape/Image": "/pkg/zrender",
    "modules/libs/zrender/Painter": "/pkg/zrender",
    "modules/libs/zrender/shape/Group": "/pkg/zrender",
    "modules/libs/zrender/Storage": "/pkg/zrender",
    "modules/libs/zrender/animation/easing": "/pkg/zrender",
    "modules/libs/zrender/animation/Clip": "/pkg/zrender",
    "modules/libs/zrender/animation/Animation": "/pkg/zrender",
    "modules/libs/zrender/zrender": "/pkg/zrender",
    "modules/libs/zrender/shape/Circle": "/pkg/echarts",
    "modules/libs/zrender/tool/math": "/pkg/echarts",
    "modules/libs/zrender/shape/Ring": "/pkg/echarts",
    ...
});


  另外,amd 依赖解析插件 除了解析依赖,实际还会做一个小优化,就是会把 factory 中的各种依赖,提前放置在 define 的第二个参数里面。这样的好处是, amd loader 再也不要用正则查找 factory 函数体的 require 了,直接读第二个参数就能把所有依赖拿到。


总结

  既然 fis 在编译 amd 模块的时候,优化了这么多,依赖处理啊, ID 生成啊之类的。那么我们还需要一个如此庞大的 require.js 吗? 当然不需要,FIS 组结合编译的处理,提供一个最小 amd loader 叫 mod-amd.js 仅仅 200 多行, 但是他暂时不支持 amd plugin loader,因为没有足够的理由要去支持它,像模板加载,样式加载,fis 中有更优的处理方案。


  好吧,回头正视原来提出的那些问题。


  • 每个入口及其依赖打成了一个包,多个页面间公用的依赖被打包到了多处,页面切换公用依赖的缓存完全没有被利用起来。

    采用 fis pack 打包配置,很好的解决这个问题。

  • 每个入口地址我都得手动替换新地址,麻烦!

    在 fis 里面编译的时候加上 -p 就足够。

  • 有些 amd 模块写法,需要 requirejs 在运行期需要将 function 转成字符分析依赖,性能会不会有问题?

    编译期,自动将依赖前置。

转自 http://blog.jobbole.com/80132/


酷毙

雷人

鲜花

鸡蛋

漂亮
  • 快毕业了,没工作经验,
    找份工作好难啊?
    赶紧去人才芯片公司磨练吧!!

最新评论

关于LUPA|人才芯片工程|人才招聘|LUPA认证|LUPA教育|LUPA开源社区 ( 浙B2-20090187 浙公网安备 33010602006705号   

返回顶部