SlideShare a Scribd company logo
1 of 6
Download to read offline
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的数据。
<!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的单词长度一致
* @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
$ 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
例如:

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
Presenter Notes

More Related Content

Similar to Slide 20120322

Node.js开发体验
Node.js开发体验Node.js开发体验
Node.js开发体验QLeelulu
 
Erlang Practice
Erlang PracticeErlang Practice
Erlang Practicelitaocheng
 
PHPUnit + Xdebug 单元测试技术
PHPUnit + Xdebug 单元测试技术PHPUnit + Xdebug 单元测试技术
PHPUnit + Xdebug 单元测试技术hoopchina
 
Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoloadjay li
 
异步编程与浏览器执行模型
异步编程与浏览器执行模型异步编程与浏览器执行模型
异步编程与浏览器执行模型keelii
 
千呼萬喚始出來的Java SE 7
千呼萬喚始出來的Java SE 7千呼萬喚始出來的Java SE 7
千呼萬喚始出來的Java SE 7javatwo2011
 
Spring 2.x 中文
Spring 2.x 中文Spring 2.x 中文
Spring 2.x 中文Guo Albert
 
Hadoop Map Reduce 程式設計
Hadoop Map Reduce 程式設計Hadoop Map Reduce 程式設計
Hadoop Map Reduce 程式設計Wei-Yu Chen
 
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型Jackson Tian
 
钟志 第八期Web标准化交流会
钟志 第八期Web标准化交流会钟志 第八期Web标准化交流会
钟志 第八期Web标准化交流会Zhi Zhong
 
前端MVC之backbone
前端MVC之backbone前端MVC之backbone
前端MVC之backboneJerry Xie
 
Lucene 全文检索实践
Lucene 全文检索实践Lucene 全文检索实践
Lucene 全文检索实践yiditushe
 
用JAX-RS和Jersey完成RESTful Web Services
用JAX-RS和Jersey完成RESTful Web Services用JAX-RS和Jersey完成RESTful Web Services
用JAX-RS和Jersey完成RESTful Web Servicesjavatwo2011
 
Asp.net mvc 培训
Asp.net mvc 培训Asp.net mvc 培训
Asp.net mvc 培训lotusprince
 
Coding guideline
Coding guidelineCoding guideline
Coding guideline斯理 衛
 
Migrations 與 Schema 操作
Migrations 與 Schema 操作Migrations 與 Schema 操作
Migrations 與 Schema 操作Shengyou Fan
 
Cfengine培训文档 刘天斯
Cfengine培训文档 刘天斯Cfengine培训文档 刘天斯
Cfengine培训文档 刘天斯liuts
 

Similar to Slide 20120322 (20)

Node.js开发体验
Node.js开发体验Node.js开发体验
Node.js开发体验
 
Erlang Practice
Erlang PracticeErlang Practice
Erlang Practice
 
PHPUnit + Xdebug 单元测试技术
PHPUnit + Xdebug 单元测试技术PHPUnit + Xdebug 单元测试技术
PHPUnit + Xdebug 单元测试技术
 
Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoload
 
异步编程与浏览器执行模型
异步编程与浏览器执行模型异步编程与浏览器执行模型
异步编程与浏览器执行模型
 
千呼萬喚始出來的Java SE 7
千呼萬喚始出來的Java SE 7千呼萬喚始出來的Java SE 7
千呼萬喚始出來的Java SE 7
 
Vue.js
Vue.jsVue.js
Vue.js
 
Spring 2.x 中文
Spring 2.x 中文Spring 2.x 中文
Spring 2.x 中文
 
Hadoop Map Reduce 程式設計
Hadoop Map Reduce 程式設計Hadoop Map Reduce 程式設計
Hadoop Map Reduce 程式設計
 
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
 
钟志 第八期Web标准化交流会
钟志 第八期Web标准化交流会钟志 第八期Web标准化交流会
钟志 第八期Web标准化交流会
 
前端MVC之backbone
前端MVC之backbone前端MVC之backbone
前端MVC之backbone
 
Lucene 全文检索实践
Lucene 全文检索实践Lucene 全文检索实践
Lucene 全文检索实践
 
用JAX-RS和Jersey完成RESTful Web Services
用JAX-RS和Jersey完成RESTful Web Services用JAX-RS和Jersey完成RESTful Web Services
用JAX-RS和Jersey完成RESTful Web Services
 
Asp.net mvc 培训
Asp.net mvc 培训Asp.net mvc 培训
Asp.net mvc 培训
 
Coding guideline
Coding guidelineCoding guideline
Coding guideline
 
Migrations 與 Schema 操作
Migrations 與 Schema 操作Migrations 與 Schema 操作
Migrations 與 Schema 操作
 
Jsp
JspJsp
Jsp
 
Cfengine培训文档 刘天斯
Cfengine培训文档 刘天斯Cfengine培训文档 刘天斯
Cfengine培训文档 刘天斯
 
Php
PhpPhp
Php
 

Recently uploaded

SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxNCU MCL
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptxNCU MCL
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxNCU MCL
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_patternJamie (Taka) Wang
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】黑客 接单【TG/微信qoqoqdqd】
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptxNCU MCL
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptxNCU MCL
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven designJamie (Taka) Wang
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptxNCU MCL
 
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLPJamie (Taka) Wang
 

Recently uploaded (15)

SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
 
Entities in DCPS (DDS)
Entities in DCPS (DDS)Entities in DCPS (DDS)
Entities in DCPS (DDS)
 
20161027 - edge part2
20161027 - edge part220161027 - edge part2
20161027 - edge part2
 
20170104 - transaction_pattern
20170104 - transaction_pattern20170104 - transaction_pattern
20170104 - transaction_pattern
 
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
 
20151111 - IoT Sync Up
20151111 - IoT Sync Up20151111 - IoT Sync Up
20151111 - IoT Sync Up
 
20200226 - AI Overview
20200226 - AI Overview20200226 - AI Overview
20200226 - AI Overview
 
20161220 - domain-driven design
20161220 - domain-driven design20161220 - domain-driven design
20161220 - domain-driven design
 
20200323 - AI Intro
20200323 - AI Intro20200323 - AI Intro
20200323 - AI Intro
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
 
20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP20211119 - demystified artificial intelligence with NLP
20211119 - demystified artificial intelligence with NLP
 

Slide 20120322

  • 1. 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