Pole Mock是Pole的一个重要组成部分,它主要包含两个模块:PoleTag(html标签)
和JavaScript API
。
命令行执行安装pole-mock
:
npm install pole-mock --save-dev
在项目中应用Pole Mock,必须创建pole-mock-config.json
配置描述文件,配置项如下:
指定Web应用使用的模版引擎,默认为'mustache',取值范围:'mustache'、'arttemplate'、'underscore'。
目前支持的模版引擎包括:Mustache、ArtTemplate、Underscore Template。
指定模版,键值对形式,值是模版文件的相对路径,模版文件后缀只能为tpl
或tmpl
。
配置时可以不写后缀,框架会自动添加,格式如下:
"templates": {
"message": "templates/message",
"grid": "templates/grid"
}
Pole Mock提供两个接口操作模版pole.tpl()
和pole.render()
,下面会详细介绍。
指定mock url,后缀只能为json
或js
,js
是为满足JSONP的需求。
配置时可以不写后缀,框架会自动添加,格式如下:
"actions": {
// 普通一个mock url
"message": "mock_datas/message",
// 带参数
"grid-data-init": "mock_datas/grid-data-{0}",
// mock url与正式环境url的映射
"grid-data": {
"mock": "mock_datas/infinite-data-{0}.js",
"url": "http://www.sencha.com/forum/remote_topics/index.php?page={0}&start={1}&limit=100&sort=threadid&dir=DESC"
}
}
以上参数的url,都可以使用pole.url()
格式化,使用方法参见下面文档。
只有配置了正式url的action最终才会被收录到pole-release.js
中,有关pole-release.js
参见下面文档。
在html中引入pole-mock.js
,如下:
<script type="text/javascript" src="assets/node_modules/pole-mock/pole-mock.js"
data-config="pole-mock-config" data-main="assets/scripts/index-main"></script>
指定Pole Mock配置文件。
指定主脚本文件,在Pole Mock完成初始化之后执行。
pole-mock.js
仅用在静态环境中使用,完成pole compile
后,pole-mock.js
将会被pole-releaser.js
替代。
很多业务都需要动态构建首屏,那么在静态环境html中使用Pole Tag,就能实现在静态环境中测试动态构建首屏的需求。
最终静态html(包括页面中的Pole标签)将会被pole compile
编译成目标语言动态页面文件。
格式:
<!--PoleTemplateTag name="message" action="message" /EndTag-->
指定模版名,模版名在pole-mock-config.json
的templates
配置项中查找,如果未找到,则忽略渲染此Tag。
指定模版初始化mock数据,action在pole-mock-config.json
的actions
配置项中查找。
指定格式化action使用到的参数,多个参数使用逗号隔开,例如:actionArgs="1,2"
。
碎片标签在静态环境中会被忽略,但在执行pole compile
时,碎片标签将会被替换成指定的碎片内容,参见:Pole Compiler文档。
格式:
<!--PoleFragmentTag name="index-script" /-->
<script type="text/javascript" src="assets/node_modules/pole-mock/pole-mock.js"
data-config="pole-mock-config" data-main="assets/scripts/index-main"></script>
<!--/EndTag-->
指定碎片名称,如果不写后缀,默认为'fr'。
Pole在静态环境中使用pole-mock.js
,在正式环境中使用打包之后的pole-release.js
替代。
如果Web应用依赖Require.js
或Sea.js
这样的模块化JS库,就需要使用initMock()
函数初始化Pole Mock,如下:
require.config({
paths: {
pole: 'assets/node_modules/pole-mock/pole-mock',
mustache: 'assets/node_modules/mustache/mustache'
}
});
require(['pole', 'mustache'], function(pole, Mustache) {
window.Mustache = Mustache;
pole.initMock('pole-mock-config', function() {
require(['assets/scripts/require-main']);
});
});
获取url,如果在静态环境中,返回的是mock-url,如果是正式环境依赖pole-release.js
,则返回正式url。
参数:
- name action名称
- ...args url中格式化参数
调用方法:
$.ajax({
dataType: 'jsonp',
url: pole.url('grid-data', page, (page - 1) * pageSize),
crossDomain: true,
jsonp: 'callback',
jsonpCallback: 'jsonpCallback',<
6272
/span>
complete: function() {
loading = false;
}
});
获取模版对象,pole-mock会将模版默认使用模版引擎接口封装,它的返回值是如下:
- Mustache,返回
Mustache.parse()
的返回值 - ArtTemplate,返回
template.compile()
的返回值 - Underscore Tempalte,返回
_.template()
的返回值
参数:
- name 模版名称
渲染模版,得到模版应用数据构建之后的返回值。
参数:
- name 模版名称
- 渲染数据
调用方法:
$tbody.append(pole.render('grid', data));
pole-release.js
是在执行pole compile
之后生成的一个打包文件,在正式环境中替代pole-mock.js
。
pole-release包含三部分内容:
pole-core.js
核心库,pole-mock.js
也会包含这个库;- 正式环境中映射的
actions
,在mock-config中配置; - 模版文件;