FIS应用实例-require.js+CMD模块

前面文章讲了FIS的源码实现细节,这篇文章偏实战一些,给出FISrequire.js结合的简单例子。

FIS编译流程

如果已熟悉了FIS的编译设计,可以跳过这一节,直接进入下一小结。FIS的编译主要有三步:

命令解析-->资源编译-->资源部署

  1. 资源编译:FIS将文件资源抽象成File实例,该实例上有文件资源类型、id、内容、部署路径等的属性。对于文件的编译,实际上都是对File实例进行操作,比如修改资源的部署路径等(内存里操作)。
  2. 资源部署:根据File实例的属性,进行实际的部署动作(磁盘写操作)。

FIS的这套编译体系,使得基于FIS的扩展相对比较容易。在扩展的同时,还可以确保编译的高性能。针对资源编译环节的扩展,除非是设计不合理,不然一般情况下不会导致性能的急剧降低。

getting started

啰嗦的讲了一大通,下面来点半干货。喜欢require.js,但又喜欢用CMD编写模块的朋友有福了,下面会简单介绍如何整合require.jsFIS

demo已经放在github,下载请猛戳

首先看下项目结构。modules目录里的是模块化的资源,lib目录里的是非模块化资源。其中:

  1. index.html依赖require.js来实现模块化管理
  2. index.js模块依赖util.js模块
  3. index.js、util.js均采用CMD规范

也就是说,本例子主要实现的,就是CMD到AMD的转换。

.
├── fis-conf.js
├── index.html
├── lib
│   └── require.min.js
└── modules
    ├── index.js
    └── util.js

资源概览

首先,我们看下index.html,引用了require.min.js,并加载了modules/index模块,跟着执行回调,没了。

<!DOCTYPE html>
<html>
<head>
    <title>CMD to AMD</title>
</head>
<body>

<script type="text/javascript" src="lib/require.min.js"></script>
<script type="text/javascript">
    require(['modules/index'], function(mod){
        mod('capser');
    });
</script>
</body>
</html>

接下来,我们看下index.js。也很简单,加载依赖的模块modules/util,接着暴露出本身模块,其实就是调用Utill模块的方法deubg。

var Util = require('modules/util');

module.exports = function(nick) {

    Util.debug(nick);
};

再看看uti.js,不赘述。

module.exports = {
    debug: function(msg){
        alert('Message is: ' + msg);
    }
};

如果换成熟悉的AMD,index.js应该是这样子的。那么思路就很清晰了。对CMD模块进行define包裹,同时将模块的依赖添加进去。

defind(["modules/util"], function(Util){

    return function(msg){
        Util.debug(msg)
    };
});

作为一枚贴近前端实践的集成解决方案,FIS早已看穿一切。下面进入实战编码环节。

实战:修改fis-conf.js

首先,打开fis-conf.js,加入如下配置。配置大致意思是:

  1. postprocessor环节,针对js文件,调用fis-postprocessor-jswrapper进行处理。
  2. postprocessor插件的配置看settings.postprocessortypeAMD,表示对模块进行AMD包裹。
fis.config.merge({
    modules: {
        postprocessor: {
            js: ['jswrapper']
        }
    },
    settings: {
        postprocessor : {
            jswrapper : {
                type: 'amd',
                wrapAll: false
            }
        }
    }
});

接着,添加roadmap.path配置。直接看注释,如果对配置不熟悉,可参考官方文档

fis.config.merge({
    roadmap: {        
        path: [
            {
                reg : /^\/(modules\/.+)\.(js)$/i,    // modules目录下的所有js文件
                isMod : true,  // isMod为true,表示资源是模块资源,需要进行模块化包裹
                id : '$1',  // 这里这里!!将资源的id替换成 reg 第一个子表达式匹配到的字符串,比如 /modules/index.js,id则为 modules/index
                release : '$&'  // 发布路径,跟当前路径是一样的,看正则。。
            }            
        ]
    },
    modules: {
        postprocessor: {
            js: ['jswrapper']
        }
    },
    settings: {
        postprocessor : {
            jswrapper : {
                type: 'amd',
                wrapAll: false
            }
        }
    }
});

写在后面

本文简单介绍CMD到AMD的转换,距离实战还有很多事情要做,比如require.js的配置支持,打包部署等,这里也就抛个思路,感兴趣的童鞋可以进一步扩展。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏我是攻城师

多线程基础知识了解一下

作为一名优秀的攻城师,了解多线程的知识非常有必要,尤其在人工智能和机器学习的热潮下,如何提高程序或者算法的运行效率是非常有价值的一件事情。

1304
来自专栏技术翻译

Kafka和Redis的系统设计

我最近致力于基于Apache Kafka的水平可扩展和高性能数据摄取系统。目标是在文件到达的几分钟内读取,转换,加载,验证,丰富和存储风险源。系统收到银行上游风...

1360
来自专栏老安的博客

zabbix 自动发现tomcat的war包并实现监控

1152
来自专栏Albert陈凯

漫谈并发编程:Future模型(Java、Clojure、Scala多语言角度分析)

http://dantezhao.com/2017/04/23/concurrency-and-parallelism-future/ 0x00 前言 其实F...

35911
来自专栏221-B

逆向从 Instruments 中获取 GPU 数据

背景: RTMP SDK需要获取硬编硬解时候的GPU数据,第一时间想起了TraceParser, 但是TraceParser不支持GPU Driver模板. ...

1521
来自专栏流柯技术学院

接口测试之webservice

Web service是一个平台独立的,低耦合的,自包含的、基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述、发布、发...

1563
来自专栏BestSDK

一个“爆款”成功的API,都离不开这8条设计准则

我已经看过很多API设计相关的文章和优秀的REST API设计教程。他们通常讨论的是适当的编码技巧和如何在给定的语言中暴露接口。尽管那些是很有用也是很需要的,但...

3627
来自专栏FreeBuf

PHP代码审计实战思路浅析

对于面向过程写法的程序来说,最快的审计方法可能时直接丢seay审计系统里,但对于基于mvc模式的程序来说,你直接丢seay审计系统的话,那不是给自己找麻烦吗?

943
来自专栏代码GG之家

只需一个命令,快速定位android的启动耗时

有兴趣合作,帮忙制作公众号的一些宣传图册的伙伴,可以加我微信,商谈具体事宜。 回顾: Android 启动过程框架 这节我们讲一个命令,用来定位android...

1906
来自专栏mini188

F.I.S初探(前端工程化)

一、初识FIS 在做项目中遇到了静态资源浏览器缓存更新的问题,于是在网络上寻找解决方案。之前虽然没有解决过这个问题,但方法无非就是为其设定新URI使得浏览器强制...

18410

扫码关注云+社区