More Related Content Similar to Slide 20120322 Similar to Slide 20120322 (20) Slide 201203221. Slide-20120322
leeight (leeight@gmail.com)
2011/03/20
介绍一下这段时间对er外围工具的一些改进
一致的目录结构和代码风格
执行 Fer --gen_app -name "jn.demo.ShowCase" ,就会生成如下的目录结构:
src/jn/demo/module.js
src/jn/demo/module.less
src/jn/demo/show_case.js
src/jn/demo/show_case.html
src/jn/demo/show_case.less
src/jn/demo/show_case.app.html
src/jn/demo/mockup.js
执行 ant deps 即可预览效果
Action级别的调试
不再需要复杂的main.html或者类似其它的页面,自动生成的代码可以支持调试Action的代码
RD/FE友好的调试页面
不再区分 main.html 和 main.mockup.html ,一个页面就可以了,通过在URL总添加参数 enable_debug=1 来决定
是否启用 mockup的数据。
2. <!doctype>
<html>
<head>
...
<script type="text/javascript">>
// CSS Codes
goog.include('css/base.css');
...
// Action Codes
goog.require('jn.landmark.promotion.AdList');
...
// Mockups
goog.mockups('jn.mockup');
goog.mockups('jn.landmark.mockup');
</script>
</head>
</html>
MOCKUP数据的自动剔除
MOCKUP数据的自动剔除
通过自定义的 goog.mockups 来引入mockup数据,在编译期,这些数据会被自动删掉,安全,方便,无害。
goog.include()
goog.mockups()
goog.require()
goog.provide()
/**
* 为什么是mockups不是mockup呢,因为想让require, provide, include, mockups的单词长度一致
3. * @param {string} rule Rule to include, in the form goog.package.part.
*/
goog.mockups = function
function(rule) {
if (!COMPILED) {
if
if(/enable_debug=|.app.html/.test(document.location.href)){
// XXX 这里我们不直接写goog.require(rule)
// 因为compiler.jar会检查goog.require调用的地方,如果参数不是字符串常量的话,会给出
// 警告,这里为了规避这个检查,我们写成goog['require'],效果是一样的
goog['require'](rule);
}
}
}
增强的Fserver
1. 支持less
2. 支持 combine_tpl=1 和 combine_css=1 来减少资源的请求数量,提高调试的速度
3. 支持了IE下面的样式调试
例如:
http://jntest.baidu.com:8088/src/entry/landmark.html?enable_debug=1&combine_tpl=1&combine_css=1
ant less
新增一个ant target,将系统中的 *.less 编译为 *.compiled.css
4. $ ant less
Buildfile: /home/leeight/work/svn/app/ecom/adcoup_2-0-0_BRANCH/webapp/build.xml
less:
[script] DEBUG:node tools/node_modules/less/bin/lessc --include-path=src/css/less src/css/less/mixins.le
[script] DEBUG:node tools/node_modules/less/bin/lessc --include-path=src/css/less src/css/jn-progress.le
[script] DEBUG:node tools/node_modules/less/bin/lessc --include-path=src/css/less src/jn/demo/less/hello
...
部署和资源管理
编译期间,通过 html_rewriter , javascript_rewriter , css_rewriter ,分析并重写整个应用所依赖的资源,最
终生成一个独立的Application,可以 放到任何目录中去使用。而且最终部署的Application目录结构是一致的,例
如:
application/
index.html
application-${md5}.js
application-${md5}.css
tpl.html
assets/
application/
LineGraph_OK_v3-${md5}.js
image/
....
js/
tangram-base-1.3.7.1-${md5}.js
hm-${md5}.js
text/
history-${md5}.html
history.html
5. 例如:
ant app.deploy -Dentry_point=src/entry/dashboard.html -Doutput_dir_name=dashboard
FLAGS
通过 FLAGS_xxx 来控制某些特性是否启用,如果不启用的话,相关的代码会被自动删除。安全,减少体积。
// 编译之前
if (!preventDefault) {
if (FLAGS_enable_hm) {
er.hm.push(['_setReferrerOverride', referer]);
}
er.controller.forward(this
this.currentPath,
this
this.parseQuery(this
this.currentQuery), this
this.referer);
if (FLAGS_enable_hm) {
er.hm.push(['_trackPageview', this
this.currentPath +
(this
this.currentQuery ? '?' + this
this.currentQuery : '')]);
}
}
// 编译之后
b || er.controller.forward(this
this.currentPath, this
this.parseQuery(this
this.currentQuery), this
this.referer), this
this.refer