java web 前端开发框架和流程

深藏阁楼爱情的钟 2022-07-14 09:58 332阅读 0赞

# 1  通常 Java Web 开发框架 #

![image2014-12-8_201_3A39_3A9.png_version_1_modificationDate_1417973843000_api_v2][]

举个例子，对于广告系统的来说， 我们先不管一些job，[CACHE![arrow-10x10.png][]][CACHE_arrow-10x10.png]，config  ... 这些优化，些框架和分层可以是这样的，

![image2014-12-8_202_3A14_3A41.png_version_1_modificationDate_1417975975000_api_v2][]

MVC的技术选型：

*  V: FreeMarker    vs    JSP / Velocity
 *  C: SpringMVC     vs    Struts / Webwork
 *  M: [SPRING![arrow-10x10.png][]][CACHE_arrow-10x10.png]/JPA/Hibernate    vs    iBatis

# 2  前端V的架构 #

前端开发刚兴起的阶段，前端开发人员的工作经常穿插在后端开发过程中担任辅助作用的，随着业务越来越复杂，前端必须有自己的开发框架和流程，使得后端专注于服务类的开发，前端专注于与用户交互类的开发。

WEB前端从概念上划分为三个层次：结构、表现、和行为。三层相对独立，互不影响。在物理上层面上分别对应HTML、CSS、JS三种不同的的文件格式。

*  HTML：负责定义网页的结构，内容
 *  CSS：负责内容的展现方式
 *  JS：负责网页关于动态的行为反应

![image2014-12-8_2014_3A34_3A19.png_version_1_modificationDate_1418020352000_api_v2][]

好的层次划分对前端的开发也很关键。显示内容问题的唯一来源应该是html文件定义的，内容展示问题的唯一来源应该是CSS文件定义的，行为问题的唯一来源应该是javascript文件定义的，各司其职相互独立。但是他们是相关的，因为行为和样式无法与结构分离，必须写在同一个文件里。这种情况下，首先还是你要把行为和样式从html标签中分开，然后在html文件中引入。

实际的开发结构是这样的：

![E5_B1_8F_E5_B9_95_E5_BF_AB_E7_85_A7_202014-12-08_20_E4_B8_8B_E5_8D_883.03.15.png_version_1_modificationDate_1418022166000_api_v2][]

前端开发的核心是HTML + CSS + JavaScript。本质上它们构成一个MVC框架，即HTML作为信息模型（Model），CSS控制样式（View），JavaScript负责调度数据和实现某种展现逻辑（Controller）。

## 1）结构层 ##

在java领域，表现层技术主要有三种：jsp、freemarker、velocity。

### (1)  jsp(Java Server Pages) ###

它是在传统的网页HTML文件(.htm，.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，它实现Html语法中的java扩展（以 <%, %>形式）。从而形成JSP文件，后缀名为(.jsp)。因为java具有跨平台特点， 用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。JSP与Servlet一样，是在服务器端执行的，最终都要变.class文件，通常返回给客户端的就是一个HTML文本，因此客户端只要有浏览器就能浏览。

优点：

*  可以写java代码 
 *  支持jsp标签（jsp tag） 
 *  支持表达式语言（el） 
 *  官方标准，用户群广，丰富的第三方jsp标签库 
 *  性能良好，jsp编译成class文件执行，有很好的性能表现

缺点：

*  编写java代码，如使用不当容易破坏mvc结构。

### (2) Freemarker ###

它生成静态页面，首先需要使用自己定义的模板页面，这个模板页面可以是最最普通的html，也可以是嵌套freemarker中的 取值表达式， 标签或者自定义标签等等，然后后台读取这个模板页面，解析其中的标签完成相对应的操作， 然后采用键值对的方式传递参数替换模板中的的取值表达式，做完之后 根据配置的路径生成一个新的html页面， 以达到静态化访问的目的。

模板+数据模型=输出，模板只负责数据在页面中的表现，不涉及任何的逻辑代码，而所有的逻辑都是由数据模型来处理的。用户最终看到的输出是模板和数据模型合并后创建的。

FreeMarker与Web容器无关，即在Web运行时，它并不知道Servlet或者其他。

优点：

*  可以彻底的分离表现层和业务逻辑，使用JSP 开发过程中在页面中大量的存在业务逻辑的代码，使得页面内容凌乱，在后期大量的修改维护过程中就变得非常困难。FreeMarker根本不支持Java代码。
 *  可以提高开发效率，JSP在第一次执行的时候需要转换成Servlet类，开发阶段进行功能调适时，需要频繁的修改JSP，每次修改都要编译和转换 。FreeMarker模板技术不存在编译和转换的问题，开发过程中，后端不必在等待界面设计开发人员完成页面原形后，再来开发程序。
 *  对jsp标签支持良好 
 *  内置大量常用功能，比如html过滤，日期金额格式化等等
 *  使用表达式语言 (EL)

缺点：

*  不是官方标准 
 *  用户群体和第三方标签库没比jsp丰富

使用FreeMarker后，作为界面开发人员，只专心创建HTML文件、图像以及Web页面的其他可视化方面，不用理会数据；而程序开发人员则专注于系统实现，负责为页面准备要显示的数据。

还有一些像velocity这样较早出现的用于代替jsp的模板语言 ... ...

## 2) 表现层CSS ##

结构搭建之后，就是为他们添加样式表属性。它实现的是页面内容和现实样式分离，所有的CSS都是非必需的，就算无法应用CSS或CSS冲突，网页也能够正常访问。

为了管理的方便，可以将不同样式进行拆分，比如可以拆分为全局样式，结构布局样式，色彩样式，文字样式和重置样式。css在开发时代码采用了规范的形式，比如有注释，缩进等，这样，这些文件的大小比较大，为了减少网络流量，提高网页的下载速度，一般发布时需要对javascript和css进行压缩处理，我们将样式文件进行合并压缩，目的是减少与服务器交互的时间和次数。如[http://www.jb51.net/tools/cssyasuo.shtml][http_www.jb51.net_tools_cssyasuo.shtml]可以在线进行压缩。

样式混合使用选择：

*  有关整个网站统一的样式代码，放置在独立的样式文件中.css
 *  某些样式不同的页面，除了链接外部样式文件，还需要自定义的样式
 *  某张网页中，部分内容如果需要一种不同，采用内行样式

![E5_B1_8F_E5_B9_95_E5_BF_AB_E7_85_A7_202014-12-08_20_E4_B8_8A_E5_8D_8811.37.51.png_version_1_modificationDate_1418009796000_api_v2][]

## 3) 行为层 javaScript  ##

常见的也是最有名的javascript 框架，其实准确来说应该是库：

（[http://www.ibm.com/developerworks/cn/web/1404\_wangfx\_jsframeworks/][http_www.ibm.com_developerworks_cn_web_1404_wangfx_jsframeworks]）

*  ### jQuery ###

jQuery 是目前用的最多的前端 [JAVASCRIPT![arrow-10x10.png][]][CACHE_arrow-10x10.png] 类库，它是比较轻量级的类库，对 DOM 的操作也比较方便到位，支持的效果和控件也很多。同时，基于 jQuery 有很多扩展项目，包括 jQuery UI(jQuery 支持的一些控件和效果框架)、jQuery Mobile(移动端的 jQuery 框架)、QUnit(JavaScript 的测试框架)。这些补充使得 jQuery 框架更加完整，而且这些扩展与目前的框架基本都是兼容的，可以交叉使用，使得前端开发更加丰富。

*  ### Ext ###

相比 jQuery，Ext JS 更重量级，有几个兆的文件，使得 Ext 在开发中成为的弊端和累赘。但是，另一方面，在 Ext JS 庞大的文件背后是 Ext JS 强大的功能。Ext JS 的控件和功能可以说强大和华丽到的程度。图表、菜单、特效，Ext JS 的控件库非常丰富，同时它的交互也非常强大，独立靠 Ext JS 几乎就可以取代控制层完成于客户的交互。强大的功能，丰富的控件库，华丽的效果也使得 Ext JS 成为内网开发利器。

*  ### YUI ###

YUI 也有自己的 JavaScript 类库，DOM 操作和效果处理也还比较方便，功能和控件也很齐全，但是相比 jQuery 和 Ext JS 显得比较中庸一些。随着 Yahoo的没落，YUI 也渐渐的被淡化。

目前前端框架主要采用 JavaScript+CSS 模式。基于上面的几种javascript库，我们可以基于JQuery框架搭建起一个java web前端系统的框架。如丛林的前端就是COS-UI+jQuery搭建起来的，再利用插件ztree实现品类树在前端的展示。

### jquery对javascript的封装 ###

JQuery能大大简化Javascript程序的编写，主要表现：

*  **定位元素**

*  **改变元素的内容**

*  **显示隐藏元素**

*  **修改元素样式**

*  **Ajax**

<table style="width:1598.66662597656px; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:20px!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:14px!important; min-height:inherit!important; background:none!important"> 
 <tbody style="border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important"> 
  <tr style="border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important"> 
   <td style="width:1583.66662597656px; border:0px!important; overflow:visible!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; padding:0px 0px 0px 15px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:14px!important; min-height:inherit!important; background:none!important"> 
    <div title="Hint: double-click to select code" style="margin:15px 0px 0px!important; padding:0px 0px 15px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; outline:0px!important; overflow:visible!important; position:relative!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; white-space:pre-wrap!important; background:none!important"> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; white-space:nowrap!important"> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">JS</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; white-space:nowrap!important"> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">自己创建对象，自己处理浏览器兼容等乱七八糟的问题，略去不表</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; white-space:nowrap!important"> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">jQuery</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; white-space:nowrap!important"> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">$.get(</code> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; color:rgb(0,51,102)!important; background:none!important">"abc.php?a=1&amp;b=2"</code> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">, recall);</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; white-space:nowrap!important"> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">postvalue =&nbsp;</code> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; color:rgb(0,51,102)!important; background:none!important">"a=b&amp;c=d&amp;abc=123"</code> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">;</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; white-space:nowrap!important"> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">$.<a href="http://wiki.sankuai.com/pages/viewpage.action?pageId=117783218#" title="Click to Continue > by Ominent Shopper Helper" style="color:rgb(59,115,175); border:none!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-weight:bold!important; min-height:0px!important; display:inline-block!important; min-width:0px!important; text-transform:uppercase!important; background:transparent!important" rel="nofollow">POST<img src="/images/20220714/4d21276af6e44001ba18afbaf4c100c5.png" alt="" style="margin:0px 0px 0px 3px!important; padding:0px!important; border:none!important; display:inline-block!important; float:none!important; height:10px!important; min-height:0px!important; min-width:0px!important; vertical-align:super!important; width:10px!important; background:transparent!important"></a>(</code> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; color:rgb(0,51,102)!important; background:none!important">"abc.php"</code> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">, postvalue, recall);</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; white-space:nowrap!important"> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important"><a href="http://wiki.sankuai.com/pages/viewpage.action?pageId=117783218#" title="Click to Continue > by Ominent Shopper Helper" style="color:rgb(59,115,175); border:none!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-weight:bold!important; min-height:0px!important; display:inline-block!important; min-width:0px!important; text-transform:uppercase!important; background:transparent!important" rel="nofollow">FUNCTION<img src="/images/20220714/4d21276af6e44001ba18afbaf4c100c5.png" alt="" style="margin:0px 0px 0px 3px!important; padding:0px!important; border:none!important; display:inline-block!important; float:none!important; height:10px!important; min-height:0px!important; min-width:0px!important; vertical-align:super!important; width:10px!important; background:transparent!important"></a>&nbsp;recall(RESULT) { </code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; white-space:nowrap!important"> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important"><a href="http://wiki.sankuai.com/pages/viewpage.action?pageId=117783218#" title="Click to Continue > by Ominent Shopper Helper" style="color:rgb(59,115,175); border:none!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-weight:bold!important; min-height:0px!important; display:inline-block!important; min-width:0px!important; text-transform:uppercase!important; background:transparent!important" rel="nofollow">ALERT<img src="/images/20220714/4d21276af6e44001ba18afbaf4c100c5.png" alt="" style="margin:0px 0px 0px 3px!important; padding:0px!important; border:none!important; display:inline-block!important; float:none!important; height:10px!important; min-height:0px!important; min-width:0px!important; vertical-align:super!important; width:10px!important; background:transparent!important"></a>(result);</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; white-space:nowrap!important"> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; color:rgb(0,130,0)!important; background:none!important">//如果返回的是json，则如下处理</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; white-space:nowrap!important"> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; color:rgb(0,130,0)!important; background:none!important">//result = eval('(' + result + ')');</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; white-space:nowrap!important"> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; color:rgb(0,130,0)!important; background:none!important">//<a href="http://wiki.sankuai.com/pages/viewpage.action?pageId=117783218#" title="Click to Continue > by Ominent Shopper Helper" style="color:rgb(59,115,175); border:none!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-weight:bold!important; min-height:0px!important; display:inline-block!important; min-width:0px!important; text-transform:uppercase!important; background:transparent!important" rel="nofollow">ALERT<img src="/images/20220714/4d21276af6e44001ba18afbaf4c100c5.png" alt="" style="margin:0px 0px 0px 3px!important; padding:0px!important; border:none!important; display:inline-block!important; float:none!important; height:10px!important; min-height:0px!important; min-width:0px!important; vertical-align:super!important; width:10px!important; background:transparent!important"></a>(result);</code> 
     </div> 
     <div style="margin:0px!important; padding:0px 1em 0px 0px!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; outline:0px!important; overflow:visible!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; white-space:nowrap!important"> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; min-height:inherit!important; background:none!important">}</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

*  **获得焦点**
 *  **为表单赋值**
 *  **获得表单的值**
 *  **设置元素不可用**

#  3)  浏览器的渲染 #

# ** 4**）web前端开发流程 #

前端开发流程：

![image2014-12-8_2015_3A57_3A22.png_version_1_modificationDate_1418025336000_api_v2][]

前端RD在开发团队位置（其上游和下游）：

![image2014-12-8_2016_3A14_3A30.png_version_1_modificationDate_1418026363000_api_v2][]

# 5）前端注意的问题 #

[image2014-12-8_201_3A39_3A9.png_version_1_modificationDate_1417973843000_api_v2]: /images/20220714/3748acbce9a641f2bac003039e6f33b9.png
[arrow-10x10.png]: /images/20220714/4d21276af6e44001ba18afbaf4c100c5.png
[CACHE_arrow-10x10.png]: http://wiki.sankuai.com/pages/viewpage.action?pageId=117783218#
[image2014-12-8_202_3A14_3A41.png_version_1_modificationDate_1417975975000_api_v2]: /images/20220714/3d2092a31db04974b86ff7ab262190f3.png
[image2014-12-8_2014_3A34_3A19.png_version_1_modificationDate_1418020352000_api_v2]: /images/20220714/8a25cd9575e74e08ac093e670eee80ed.png
[E5_B1_8F_E5_B9_95_E5_BF_AB_E7_85_A7_202014-12-08_20_E4_B8_8B_E5_8D_883.03.15.png_version_1_modificationDate_1418022166000_api_v2]: /images/20220714/8eb05098054c4ed0bf38d39b4bbf12ad.png
[http_www.jb51.net_tools_cssyasuo.shtml]: http://www.jb51.net/tools/cssyasuo.shtml
[E5_B1_8F_E5_B9_95_E5_BF_AB_E7_85_A7_202014-12-08_20_E4_B8_8A_E5_8D_8811.37.51.png_version_1_modificationDate_1418009796000_api_v2]: /images/20220714/c8d46c6a6b6b497b8357832b6c6af88e.png
[http_www.ibm.com_developerworks_cn_web_1404_wangfx_jsframeworks]: http://www.ibm.com/developerworks/cn/web/1404_wangfx_jsframeworks/
[image2014-12-8_2015_3A57_3A22.png_version_1_modificationDate_1418025336000_api_v2]: /images/20220714/da27fa3781b4468d93b0a095967d79d0.png
[image2014-12-8_2016_3A14_3A30.png_version_1_modificationDate_1418026363000_api_v2]: /images/20220714/218324990dd648c399280b270de5570e.png