SlideShare ist ein Scribd-Unternehmen logo
1 von 33
模板开发初探
正在做的有意义的事
服务化 后端技术营造的基石 开放接口 减弱第三方开发的强依赖 前端主动开发可能
页面组件化 全新的页面搭建机制 和v4框架有着很高的契合度 独角兽 Style优化的尝试 模板层的按需加载 流程优化 ……
简单了解下vm模板
第一个Hello world
绑定开发服务器: 10.20.131.8 baike-ui.china.alibaba.com 9001 新建一个test.vm
可以自己模拟异步接口假数据??
一个模板片段
Vm模板特点 html语言+一些特殊的语法标识符 基本保持了html的原汁原味 更偏向于前端 暂时模板变量引用可能会无所适从?
3个概念 layout 页面框架 control 可重用的代码片段 screen 个性化页面
layout篇
一个产品线的页面框架 应该只有几个!! 等等……
模板层的页面框架layout Layout的特性: ①公用的产品页面框架,会引入产品公用的control,如header、footer ②它和产品级的js、css基本保持一致 ③screen解析先于layout,这一特性使layout可以取到screen中变量 ④可重用,能代表产品线演化的风格 ……
模板中layout现状 Layout的数量:好的产品线,有30~40个,多的甚至有上百个…… 和曾经的js、css一样,v1,v2,v3…v44? 只有产品级js、css,而产品级layout概念很弱 Layout正在被滥用,渐渐丢失它原来承载的含义 Layout的混乱甚于单个页面的混乱 需要前端参与去改变
合理使用layout的几个技巧 Layout必须与产品级的js、css对应,功能保持一致 每新增一个layout,必须在这个layout中遵循注释规范 禁止在layout中增加页面级个性化需求 现有layout满足不了开发需求,请按规范整理出layout,否则setLayoutTemplate(null) 有些小范围公用的东西,有个适合的方案control 所有layout调用,推荐使用setLayoutTemplate(“xx.vm”)的指明调用
管理页面框架的调用关系 Layout与产品级的js、css三位一体 ,[object Object],[object Object]
一个子产品公用的头部
独角兽带来的契机 ——模板层的按需加载
自动合并的特性帮我们更好的完成了这一前端的理念
screen篇
业务逻辑复杂? 前端不能回避的问题 只要有序,复杂并不可怕 前端了解业务逻辑的机会 掌握了业务逻辑,前端还有什么做不了的?
前端是模板中页面框架的把控者
权限? 环境? 约定? 质量? 资源?
前端是应用开发的主力
做更多有含金量的事情
Q&A
模板开发初探

Weitere ähnliche Inhalte

Ähnlich wie 模板开发初探

广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化taobao.com
 
前端杂谈
前端杂谈前端杂谈
前端杂谈salinet
 
Windows 8 apps dev.整理及分享
Windows 8 apps dev.整理及分享Windows 8 apps dev.整理及分享
Windows 8 apps dev.整理及分享Liyao Chen
 
WoT Frotend 的設計與實作
WoT Frotend 的設計與實作WoT Frotend 的設計與實作
WoT Frotend 的設計與實作julie huang
 
MobileWebAppFramework_V5_design
MobileWebAppFramework_V5_designMobileWebAppFramework_V5_design
MobileWebAppFramework_V5_designJackson Tian
 
Web Intro
Web IntroWeb Intro
Web Introtzulin
 
Real World ASP.NET MVC
Real World ASP.NET MVCReal World ASP.NET MVC
Real World ASP.NET MVCjeffz
 
Html5form
Html5formHtml5form
Html5formjay li
 
Infoship业务集成平台简介
Infoship业务集成平台简介Infoship业务集成平台简介
Infoship业务集成平台简介yuan qixun
 
应用开发一般工作流程和注意
应用开发一般工作流程和注意应用开发一般工作流程和注意
应用开发一般工作流程和注意cucued
 
Vcon90 Final
Vcon90 FinalVcon90 Final
Vcon90 Finalxobo
 
introduction of web 2.0
introduction of web 2.0introduction of web 2.0
introduction of web 2.0soboring
 
Top100summit automan x之框架介绍 王超
Top100summit automan x之框架介绍 王超Top100summit automan x之框架介绍 王超
Top100summit automan x之框架介绍 王超drewz lin
 
基于Silverlight的RIA架构及百度应用
基于Silverlight的RIA架构及百度应用基于Silverlight的RIA架构及百度应用
基于Silverlight的RIA架构及百度应用Cat Chen
 
常用Js框架比较
常用Js框架比较常用Js框架比较
常用Js框架比较Adam Lu
 
HTML5 历史、现状及未来
HTML5 历史、现状及未来HTML5 历史、现状及未来
HTML5 历史、现状及未来Yongbin Tian
 
twMVC#04 | ASP.NET MVC - Code Templates實戰開發
twMVC#04 | ASP.NET MVC - Code Templates實戰開發twMVC#04 | ASP.NET MVC - Code Templates實戰開發
twMVC#04 | ASP.NET MVC - Code Templates實戰開發twMVC
 
ASP.NET MVC Code Templates實戰開發 -twMVC#4
 ASP.NET MVC Code Templates實戰開發 -twMVC#4 ASP.NET MVC Code Templates實戰開發 -twMVC#4
ASP.NET MVC Code Templates實戰開發 -twMVC#4twMVC
 
Ruby on rails部署
Ruby on rails部署Ruby on rails部署
Ruby on rails部署Deng Peng
 
Web development overview
Web development overviewWeb development overview
Web development overviewWei Sun
 

Ähnlich wie 模板开发初探 (20)

广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化广告投放代码和创意代码持续优化
广告投放代码和创意代码持续优化
 
前端杂谈
前端杂谈前端杂谈
前端杂谈
 
Windows 8 apps dev.整理及分享
Windows 8 apps dev.整理及分享Windows 8 apps dev.整理及分享
Windows 8 apps dev.整理及分享
 
WoT Frotend 的設計與實作
WoT Frotend 的設計與實作WoT Frotend 的設計與實作
WoT Frotend 的設計與實作
 
MobileWebAppFramework_V5_design
MobileWebAppFramework_V5_designMobileWebAppFramework_V5_design
MobileWebAppFramework_V5_design
 
Web Intro
Web IntroWeb Intro
Web Intro
 
Real World ASP.NET MVC
Real World ASP.NET MVCReal World ASP.NET MVC
Real World ASP.NET MVC
 
Html5form
Html5formHtml5form
Html5form
 
Infoship业务集成平台简介
Infoship业务集成平台简介Infoship业务集成平台简介
Infoship业务集成平台简介
 
应用开发一般工作流程和注意
应用开发一般工作流程和注意应用开发一般工作流程和注意
应用开发一般工作流程和注意
 
Vcon90 Final
Vcon90 FinalVcon90 Final
Vcon90 Final
 
introduction of web 2.0
introduction of web 2.0introduction of web 2.0
introduction of web 2.0
 
Top100summit automan x之框架介绍 王超
Top100summit automan x之框架介绍 王超Top100summit automan x之框架介绍 王超
Top100summit automan x之框架介绍 王超
 
基于Silverlight的RIA架构及百度应用
基于Silverlight的RIA架构及百度应用基于Silverlight的RIA架构及百度应用
基于Silverlight的RIA架构及百度应用
 
常用Js框架比较
常用Js框架比较常用Js框架比较
常用Js框架比较
 
HTML5 历史、现状及未来
HTML5 历史、现状及未来HTML5 历史、现状及未来
HTML5 历史、现状及未来
 
twMVC#04 | ASP.NET MVC - Code Templates實戰開發
twMVC#04 | ASP.NET MVC - Code Templates實戰開發twMVC#04 | ASP.NET MVC - Code Templates實戰開發
twMVC#04 | ASP.NET MVC - Code Templates實戰開發
 
ASP.NET MVC Code Templates實戰開發 -twMVC#4
 ASP.NET MVC Code Templates實戰開發 -twMVC#4 ASP.NET MVC Code Templates實戰開發 -twMVC#4
ASP.NET MVC Code Templates實戰開發 -twMVC#4
 
Ruby on rails部署
Ruby on rails部署Ruby on rails部署
Ruby on rails部署
 
Web development overview
Web development overviewWeb development overview
Web development overview
 

Mehr von fangdeng

jQuery底层架构
jQuery底层架构jQuery底层架构
jQuery底层架构fangdeng
 
Building an event driven web
Building an event driven webBuilding an event driven web
Building an event driven webfangdeng
 
浅尝jQuery
浅尝jQuery浅尝jQuery
浅尝jQueryfangdeng
 
Html基础培训
Html基础培训Html基础培训
Html基础培训fangdeng
 
前端开发之Js
前端开发之Js前端开发之Js
前端开发之Jsfangdeng
 
Javascript代码注释及文档生成
Javascript代码注释及文档生成Javascript代码注释及文档生成
Javascript代码注释及文档生成fangdeng
 
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架fangdeng
 
前端单元测试初体验
前端单元测试初体验前端单元测试初体验
前端单元测试初体验fangdeng
 
Java script测试之js unit ut
Java script测试之js unit utJava script测试之js unit ut
Java script测试之js unit utfangdeng
 
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖fangdeng
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考fangdeng
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考fangdeng
 
Postoffer前端架构设计
Postoffer前端架构设计Postoffer前端架构设计
Postoffer前端架构设计fangdeng
 
Varnish简介
Varnish简介Varnish简介
Varnish简介fangdeng
 
Let's talk about date in javascript
Let's talk about  date  in javascriptLet's talk about  date  in javascript
Let's talk about date in javascriptfangdeng
 
Test driven-frontend-develop
Test driven-frontend-developTest driven-frontend-develop
Test driven-frontend-developfangdeng
 
方凳良品1期
方凳良品1期方凳良品1期
方凳良品1期fangdeng
 
方凳良品2期
方凳良品2期方凳良品2期
方凳良品2期fangdeng
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式fangdeng
 

Mehr von fangdeng (20)

jQuery底层架构
jQuery底层架构jQuery底层架构
jQuery底层架构
 
Building an event driven web
Building an event driven webBuilding an event driven web
Building an event driven web
 
浅尝jQuery
浅尝jQuery浅尝jQuery
浅尝jQuery
 
Html基础培训
Html基础培训Html基础培训
Html基础培训
 
前端开发之Js
前端开发之Js前端开发之Js
前端开发之Js
 
Javascript代码注释及文档生成
Javascript代码注释及文档生成Javascript代码注释及文档生成
Javascript代码注释及文档生成
 
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
 
前端单元测试初体验
前端单元测试初体验前端单元测试初体验
前端单元测试初体验
 
Java script测试之js unit ut
Java script测试之js unit utJava script测试之js unit ut
Java script测试之js unit ut
 
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考
 
Postoffer前端架构设计
Postoffer前端架构设计Postoffer前端架构设计
Postoffer前端架构设计
 
Varnish简介
Varnish简介Varnish简介
Varnish简介
 
Websocket
WebsocketWebsocket
Websocket
 
Let's talk about date in javascript
Let's talk about  date  in javascriptLet's talk about  date  in javascript
Let's talk about date in javascript
 
Test driven-frontend-develop
Test driven-frontend-developTest driven-frontend-develop
Test driven-frontend-develop
 
方凳良品1期
方凳良品1期方凳良品1期
方凳良品1期
 
方凳良品2期
方凳良品2期方凳良品2期
方凳良品2期
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
 

模板开发初探