fis3实战(1) - 集成requirejs + layer

fis3

FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）、模块化开发、自动化工具、开发规范、代码部署等问题（完全照抄官网的描述），但是不难看出，有点类似目前主流的前端构建工具比如grunt、glup等等，但是fis3的功能很明显要更强大、更智能、更简单。直接链接 : http://fis.baidu.com/fis3/index.html

requirejs 是遵循amd规范的前端模块化框架. 直接链接 : http://www.requirejs.org/
layer 是一个基于jQuery的功能强大的弹层组件.直接链接 : http://layer.layui.com/

前端项目如果采用requirejs进行模块化管理的话，需要在fis-conf.js做如下的配置
工程结构如图所示：
工程结构目录

  • components 下载的仓库里的组件(由fis-components维护或改造后自定义)
  • node_modules 存放fis的node插件
  • page 存放前端页面需要模块化的js、css等资源
  • static 存放前端页面不能模块化的资源
  • widget 存放前端页面模块化的组件或者模板等
1. 配置组件化支持

这个有点类似java中maven的组件仓库的概念，在项目根目录的component.json文件中配置要使用的组件信息(版本号等)，比如要安装jquery和bootstrap类库，然后再根目录执行命令即可在components目录中安装成功并生成提供amd/cmd/浏览器等使用的版本

1
fis3 install jquery bootstrap

具体请参考链接 : https://github.com/fis-components/components

2. 配置 requireJS

requirejs是amd规范的模块化框架，所以fis3提供了相应的模块化插件以支持amd模块化的开发，执行如下命令进行安装

1
npm install fis3-hook-amd

具体请参考链接 : https://github.com/fex-team/fis3-hook-amd
安装完成后，页面引入requirejs即可。

1
<script src="static/require.js" type="text/javascript" charset="utf-8"/>

3. 使用 layer 组件

layer组件本身支持模块化，所以不能把它配置到需要fis预编译的模块化的目录里(如widget、page等目录)，应该跟requirejs一样放在普通的目录里，但官方api在初始化layer的时候会报jquery的未定义错误，看了源码发现跟window.$对象有关，为了layer的原生类库和扩展类库都能正常使用，所以我根据上图的目录结构我按照如下方式改造了官方的配置（目前未找到其他方式解决，可能是layer在fis的一个坑）：

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
<script src="static/require.js" type="text/javascript" charset="utf-8"/>
<script type="text/javascript">
	// 主函数
require(['jquery'], function($) {
	// 按照如下方式做转换，否则会报'找不到jQuery对象'的错误
	window.jQuery = window.$ = $;
	require(['page/main/main', 'layer'], function(g, layer) {
	// layer全局配置 
	layer.config({
		path: 'static/layer/', //layer.js所在的目录，这里配置为相对目录
		extend: 'extend/layer.ext.js'  
		//由于layer不在模块化目录内，所以扩展的类库也会正常输出
	}, function() { // 确保正常使用扩展,扩展方法操作应在回调内执行
		// 官方例子1: __使用扩展的layer__
	layer.prompt({
		title: '输入任何口令，并确认',
		formType: 1 //prompt风格，支持0-2
	}, function(pass) {
		layer.prompt({
			title: '随便写点啥，并确认',
		formType: 2
		}, function(text) {
			// 官方例子2: __使用原生的layer__
			layer.msg('演示完毕！您的口令：' + pass + '写了：' + text);
		});
	});
	});
		g.init();
	});
});
</script>

================================================================
post by 午夜圣斗士 QQ | 邮箱 | Github

目录

  1. 1. 1. 配置组件化支持
  2. 2. 2. 配置 requireJS
  3. 3. 3. 使用 layer 组件