spring集成web框架
Spring集成其他Web框架
虽然Spring本身也提供了一个功能非常强大的MVC框架，并且和Spring的IoC容器无缝集成，非常便于使用。不过，在实际情况中，我们还不得不考虑众多采用第三方MVC框架的Web应用程序，例如，采用Strtus、WebWork等。如果要将这些应用程序的逻辑组件和持久化组件纳入Spring的IoC容器中进行管理，就必须考虑如何集成这些第三方的MVC框架。Spring强大的集成和扩展能力使得集成第三方MVC框架成为轻而易举的事情。与第三方MVC框架集成时，需要考虑的问题是如何在第三方MVC框架中访问Spring IoC 容器管理的Bean，或者说，如何获取Spring IoC容器的实例。我们还要保证在第三方MVC框架开始处理用户请求之前，Spring的IoC容器必须初始化完毕。
有两种方式可以自动加载Spring的IoC 容器。一种是利用第三方框架的扩展点，实现加载Spring的IoC容器，例如，Struts就提供了Plugin扩展。第二种方式是在web.xml 中定义Listener或Servlet，让Web应用程序一启动就自动加载Spring的IoC容器。这种方式较为通用，对于一些不太常见的第三方MVC 框架，也可以用这种方式来尝试与Spring集成。
如果正在使用基于Servlet 2.3或更高规范的Web服务器，则应当使用Spring提供的ContextLoaderListener来加载IoC容器，因为根据Servlet 2.3规范，所有的Listener都会在Servlet被初始化之前完成初始化。由于我们希望尽可能早地完成Spring IoC容器的初始化，因此，采用ContextLoaderListener加载Spring的IoC 容器是最合适的。
采用ContextLoaderListener加载Spring的IoC容器时，在/WEB-INF/web.xml 中定义如下。
...
org.springframework.web.context.ContextLoaderListener
...
默认地，ContextLoaderListener会在/WEB-INF/目录下查找名为applicationContext. xml文件，作为Spring的XML配置文件加载。如果使用其他文件名，或者有多个XML配置文件，就需要预先在
如果使用的Web服务器还不支持Servlet 2.3规范，则无法使用Listener，也就无法通过ContextLoaderListener来加载Spring的IoC容器。为此，Spring 提供了另一个ContextLoaderServlet，以Servlet的形式来加载Spring的IoC容器。
org.springframework.web.context.ContextLoaderServlet
ContextLoaderServlet 查找Spring的XML配置文件的方式与ContextLoaderListener完全一致，不过，由于必须首先加载ContextLoaderServlet，然后加载其他的Servlet，才能保证Spring的IoC容器在其他Servlet处理用户请求之前初始化完毕。因此，设置
一旦完成了Spring IoC容器的加载，另一个问题是如何在第三方应用程序中获得Spring IoC容器的实例？
事实上，不管采用何种方式加载Spring的 IoC容器，Spring最终都会将IoC容器的实例绑定到ServletContext上。由于ServletContext在一个Web应用程序中是全局唯一的，因此该Web应用程序中所有的Servlet都可以访问到这个唯一的ServletContext，也就可以获得Spring IoC容器的实例。Spring提供了一个辅助类WebApplicationContextUtils，通过调用getWebApplicationContext(ServletContext)方法就可以获得Spring IoC容器的实例。对于参数ServletContext，可以在Servlet中随时调用getServletContext()获得。
一旦获得了Spring IoC容器的实例，就可以获得Spring管理的所有的Bean组件。
下面，我们分别详细介绍如何在Spring中集成Struts、WebWork2、Tiles和JSF。7.6.1 集成Struts
Struts是目前JavaEE Web应用程序中应用最广泛的MVC开源框架，自从2001年发布以来，Struts作为JavaEE领域的第一个MVC框架，极大地简化了基于JSP和 Servlet 的Web开发，提供了统一的MVC编程模型。虽然从现在看来，Struts的设计模型已不算先进，有许多其他MVC框架拥有更好的设计，但 Struts仍具有庞大的社区支持和最多的开发人员，这些都使得Struts仍是JavaEE领域内Web开发的首选框架。
不过，Strtus仅仅是一个用于表示层的MVC框架，它并没有提供一个完整的JavaEE框架的解决方案。如果要将Struts集成到Spring框架中，有两种方案可供选择。下面，我们将详细讲解如何将Struts集成到Spring框架中。
在集成Struts之前，我们假定已经有了一个基于Struts的Web应用程序，这里我们使用的例子是一个简单的处理用户登录的Struts应用，这个Struts应用在浏览器中的效果如图7-54所示。
图7-54
在Eclipse中，我们建立了这个名为Struts的工程，其结构如图7-55所示。
图7-55
在Struts 应用中，每个用户请求通过一个Action类来处理，这和Spring的Controller类似，但是Struts的Action是一个类而非接口，因此，所有的Action 子类都只能从Action派生。由于Struts是一个Web层框架，需要考虑如何获得业务逻辑接口。一个较好的设计是首先设计一个BaseAction，其中定义了获得业务逻辑接口的
方法，其他所有的Action从BaseAction派生即可非常方便地调用业务逻辑接口。public class BaseAction extends Action {
private static final UserService userService = new UserServiceImpl();
public UserService getUserService() {
return userService;
}
}
在BaseAction 中，我们以静态变量持有业务逻辑接口UserService的引用，这是一个不太优雅的设计。如果使用Spring的IoC容器来配置和管理这些逻辑组件，则可以完全实现一个优雅的多层应用程序，Struts只处理Web表示层，业务逻辑层和数据持久层都交由Spring管理，便于维护和扩展。
在Spring中有两种方式来集成 Struts，关于Struts的更多详细用法的讨论已经超出了本书的范围。在本节中，假定读者对Struts已经有了一定的基础。下面我们分别介绍Spring集成Struts的两种方案，两种方案都需要Spring提供的一个名为ContextLoader Plugin的Struts插件来启动IoC容器。由于是Web应用程序，ContextLoaderPlugin启动的是 WebApplicationContext的实例。
第一种方案是通过Spring提供的一个Struts插件来初始化IoC容器，然后从Spring 提供的ActionSupport派生所有的Action，以便能通过getWebApplicationContext()获得ApplicationContext，一旦获得了ApplicationContext引用，就可以获得Spring的IoC容器中所有的Bean。我们建立一个Struts_Spring1工程，首先复制Struts工程的所有文件，然后在Struts配置文件的最后添加Spring的插件声明。
...
然后修改BaseAction，将其超类从Struts的Action改为Spring的ActionSupport。
public class BaseAction extends ActionSupport {
public UserService getUserService() {
return (UserService) getWebApplicationContext()
.getBean("userService");
}
}
现在，BaseAction就可以随时通过Spring的ApplicationContext获得逻辑组件UserService的引用，这样所有的Action（BaseAction）子类都可以直接通过getUserService()获得UserService组件。
最后一步是编写Spring的XML配置文件，默认的文件名是
xmlns:xsi="https://www.360docs.net/doc/2014218774.html,/2001/XMLSchema-instance" xsi:schemaLocation="https://www.360docs.net/doc/2014218774.html,/schema/b eans https://www.360docs.net/doc/2014218774.html,/schema/beans/spring-beans.xsd">
如果Spring的XML配置文件没有使用默认的文件名，就必须在Struts配置文件中声明Plugin时指定文件位置。
...
value="/WEB-INF/my-spring-config.xml"/> 整个Struts_Spring1工程的结构如图7-56所示。 图7-56 编译工程，然后启动Resin服务器，可以看到效果和原始的Struts工程一样，但是，业务逻辑层组件和持久层组件（在本例中，为了简化问题，没有设计持久层组件）已被纳入Spring的IoC容器之中，从而清晰地将表示层和业务层划分开来。 使用这种方式集成Spring和Struts 时，如果合理地抽象出一个类似BaseAction的类作为所有Action的超类，在集成到Spring时，只需将BaseAction的超类从 Struts 的Action类改为Spring提供的ActionSupport，然后在Struts中声明Spring的Plugin，就可以在不修改任何Action的情况下实现和Spring的集成。 第二种集成Struts的方案是将 Struts的所有Action都作为Spring IoC容器中的Bean来管理，就像Spring的Controller一样。然后通过Spring提供的DelegatingRequestProcessor来替代Struts的默认派发器，以便让Spring能截获派发给Action的请求。在这种方式下，业务逻辑组件通过依赖注入的方式在Spring 的IoC容器中就配置完毕了。 我们仍建立一个Struts_Spring2的工程，将Struts工程的所有文件复制过来，其目录结构和Struts_Spring1类似，如图7-57所示。 图7-57 为了能将业务组件UserService注入到每个Action类中，抽象出一个BaseAction是非常重要的，这样可以使代码的修改被限制在BaseAction中，而不会涉及每一个Action 类。修改BaseAction如下。 public class BaseAction extends Action { private UserService userService; public void setUserService(UserService userService) { https://www.360docs.net/doc/2014218774.html,erService = userService; } public UserService getUserService() { return userService; } } 然后修改Struts的配置文件，添加Spring提供的DelegatingRequestProcessor 和Plugin的声明。 ... ... Spring 提供的Struts Plugin仍负责启动Spring容器，而DelegatingRequestProcessor可以让Spring接管请求，从而将请求派发到IoC 容器管理的Action实例。为此，在Spring的XML配置文件中，除了定义业务逻辑组件和其他组件外，还必须声明每一个Action类，其name 属性和Struts配置文件中的path 要完全一致。由于我们在Struts配置文件中定义了两个Action： 因此，在Spring的配置文件中，除UserService组件外，还必须定义两个Action，并且要和Struts配置文件中的Action一一对应。 xmlns:xsi="https://www.360docs.net/doc/2014218774.html,/2001/XMLSchema-instance" xsi:schemaLocation="https://www.360docs.net/doc/2014218774.html,/schema/b eans https://www.360docs.net/doc/2014218774.html,/schema/beans/spring-beans.xsd"> 实际上，如果使用这种方案实现集成，Struts配置文件中Action的type属性将被忽略，因为Spring会根据path属性查找对应name的Action Bean。但是，仍然建议将type 属性标识出来，便于查看URL和Action的关联。 使用这种方案时，由于Action被作为Bean纳入Spring的IoC容器管理，因此，可以获得完全的依赖注入能力。不过，最大的不便是所有的Action必须同时在Struts和Spring的配置文件中各配置一次，这增加了配置文件的维护成本。 在集成Struts时，选择何种方案需要根据实际情况决定。例如，由于RequestProcessor 是Struts的一个扩展点，如果现有的Web应用程序已经扩展了 RequestProcessor，采用第一种方式就比较合适。不过，无论采用哪种方案，基于Struts的整体设计至关重要，如果没有统一的业务逻辑接口，而是将业务逻辑散落在各个Action中，则对代码的修改将涉及所有的Action类。 7.6.2 集成WebWork2 WebWork是一个非常简洁和优雅的Web 框架，WebWork的架构设计非常容易理解，它构建在一个命令模式的XWork框架之上，支持多种视图技术，并且WebWork也有一个丰富的标签库，能非常容易地实现校验。WebWork最大的特色就是使用IoC容器来管理所有的Action，并且拥有拦截器等一系列类似AOP的概念，因此， WebWork的整体设计比Struts更优秀，也更容易扩展。 WebWork目前有两个主要版本： WebWork 1.x和WebWork 2.x，两个版本的差异较大，本节介绍的均以最新的WebWork 2.2为例。可以从WebWork的官方站点http://www. https://www.360docs.net/doc/2014218774.html,/webwork/下载最新的2.2.4版。 在WebWork 2.2版本之前，WebWork有一个自己的IoC容器，尽管仍可以和Spring集成，但是不那么方便。从WebWork 2.2开始，WebWork的设计者就推荐使用Spring的IoC容器来管理WebWork2的Action，这对于使用Spring框架的开发者来说无疑是一个好消息，因为这使得两者的集成更加容易，我们可以像对待Spring的Bean一样，在Spring的IoC容器中直接配置WebWork2的 Action。 WebWork2的开发团队已经提供了一个 Spring和WebWork2的集成方案，正因为如此，在Spring框架中并没有WebWork2相关的支持包。如果读者在集成WebWork2时遇到问题，请首先参考WebWork官方网站（https://www.360docs.net/doc/2014218774.html,/webwork/）的相关文档。 如果读者正在考虑使用WebWork2作为 MVC框架，则理所当然应当集成到Spring框架中。在下面的例子中，我们以最新的WebWork 2.2.4为例，首先创建一个基于WebWork2的Web应用程序，命名为WebWork2，其Eclipse工程结构如图7-58所示。 WebWork2所需的jar文件除了 webwork-2.2.4.jar外，其余必需的jar包可以从解压后的WebWork2的lib/default/目录下找到，将这些jar包（javamail.jar可选）全部复制到/WEB-INF/lib目录下。其中，xwork.jar是编译时必须的，将其添加到Eclipse的 Build Path中。由于WebWork2框架是基于XWork框架之上的，对开发者而言，开发WebWork2的Action甚至不用和Servlet API打交道，这种设计大大提高了Web应用程序的可测试性。 图7-58 我们假定读者对WebWork2已经有了一定的了解。在这个Web应用程序中，我们定义了两个Action，ListBooksAction用于列出所有的书籍，BookDetailAction用于查看书籍的详细信息，为此，我们还定义了一个BookService接口，并在所有Action的超类BaseAction中定义了获取BookService接口的方法getBookService()。 public abstract class BaseAction implements Action { private static BookService bookService = new BookServiceImpl(); public BookService getBookService() { return bookService; } } 然后，在xwork.xml中配置好两个Action，并放到src目录下，这样，编译后该文件就位于/WEB-INF/classes目录下。 PUBLIC "-//OpenSymphony Group//XWork 1.0//EN" "https://www.360docs.net/doc/2014218774.html,/xwork/xwork-1.0.dtd"> 在web.xml中，我们声明WebWork2的ServletDispatcher，并映射所有以.action 结尾的URL。 com.opensymphony.webwork.dispatcher.ServletDispatcher 现在，作为一个独立的WebWork2的应用程序，我们已经可以在浏览器中看到实际效果了。启动Resin服务器，然后输入地址“http://localhost:8080/listBooks.action”，如图7-59所示。 我们还没有将Spring集成进来，并且和7.6.1节的Struts应用程序类似，获取BookService接口设计得不那么优雅。下一步，我们将WebWork2与Spring集成起来，让Spring来管理所有的Action和其他逻辑组件。 图7-59 我们将WebWork2工程复制一份，命名为WebWork2_Spring，然后开始一步一步地将其集成到Spring框架中。 在WebWork2中集成Spring是一件非常容易的事情。在WebWork2中，所有的Action 也是由IoC容器管理的、默认地，WebWork2自身有一个IoC容器，负责管理所有的Action，但是，正如前面提到的，从WebWork 2.2开始，WebWork2设计者推荐使用Spring的IoC容器来管理Action。只要对配置文件稍做修改，就可以让WebWork2直接使用 Spring的IoC容器。 第一步是编写一个webwork.properties的配置文件，放在src目录下，指定WebWork2使用的IoC容器名称。 webwork.objectFactory = spring 该配置文件非常简单，只需要以上一行内容即可。更多的配置选项可以参考WebWork2的文档。编译后，该文件就会被放到/WEB-INF/classes/目录下。 现在，只要Spring的IoC容器启动了，WebWork2就会自动感知并使用Spring的IoC 容器。要启动Spring的IoC容器，使用 ContextLoaderListener最合适不过，在web.xml中添加Spring的ContextLoaderListener声明。 org.springframework.web.context.ContextLoaderListener 下一步是在Spring默认的XML配置文件中定义所有的Bean，包括WebWork2的Action。由于使用 ContextLoaderListener来启动Spring的IoC容器，因此，默认的XML 配置文件名称为 applicationContext.xml，内容如下。 xmlns:xsi="https://www.360docs.net/doc/2014218774.html,/2001/XMLSchema-instance" xsi:schemaLocation="https://www.360docs.net/doc/2014218774.html,/schema/b eans https://www.360docs.net/doc/2014218774.html,/schema/beans/spring-beans.xsd" > 要特别注意的是，WebWork2使用的Action和Struts不同，对于每个用户请求，WebWork2都会创建一个新的Action实例来处理用户请求，因此，必须将Action的scope定义为prototype，使得每次WebWork2向Spring IoC容器请求一个Action 时，Spring都能返回一个新的实例。采用Bean模板也不失为一个好办法，具体配置请参考第3章3.9.2“使用模板装配”一节。 最后一步是修改xwork.xml，将每个Action的class属性从类名改为Spring中对应的id，这样，WebWork2就会根据此id向Spring的IoC容器请求一个新的Action实例。 PUBLIC "-//OpenSymphony Group//XWork 1.0//EN" "https://www.360docs.net/doc/2014218774.html,/xwork/xwork-1.0.dtd"> 完成了以上步骤后，将spring.jar放入/WEB-INF/lib目录下，然后启动Resion服务器，就可以看到如下输出。 [2006/12/06 16:41:43.138] Initializing WebWork-Spring integration... [2006/12/06 16:41:43.154] Setting autowire strategy to name [2006/12/06 16:41:43.154] ... initialized WebWork-Spring integration successfully 打开浏览器测试，其结果与前面WebWork2工程的结果完全相同，不过，所有的Action 和逻辑组件都由Spring的IoC来管理，这使得应用程序的层次更加清晰。WebWork2_Spring工程的整个结构如图7-60所示。 图7-60 默认情况下，在使用Spring的IoC容器时，WebWork2使用byName的自动装配功能来装配WebWork2的Action。可以根据需要将其修改为byType。如果Action较多，更好的配置方法是首先定义一个模板Bean，作为所有Action Bean的模板。 其余的Action Bean通过继承此模板Bean就可以安全地获得scope设定和其他依赖注入的属性。 7.6.3 集成Tiles 前面我们讲到了JavaEE Web组件处理请求的3种方式：转发（Forward）、包含（Include）和错误（Error），Tiles框架将Include方式发挥到了极致。Tiles并不是一个MVC 框架，从本质上说，Tiles是一个模板框架，它将页面分成几个小的部分，然后动态地将它们组合在一起，从而允许更灵活地创建可以重用的页面组件。 虽然Tiles是Struts框架的一部分，但是Tiles从一开始就被设计为能够在Struts 外独立适用。事实上，Tiles可以用于任何Web框架，当然也包括Spring的MVC框架。Spring已经对Tiles做了非常好的集成，在Spring框架中使用Tiles更加方便。下面的例子我们创建了一个Spring_Tiles工程，结构如图7-61所示。 图7-61 将Tiles 所有依赖的jar包放入工程，包括struts.jar、commons-beanutils.jar、commons- collections.jar、commons-digester.jar、commons-logging.jar 和spring.jar。注意， Tiles框架本身被包含在struts.jar中，但是我们并不使用Struts作为MVC框架。然后配置web.xml，除了声明Spring的 DispatcherServlet 外，还要声明Tiles的taglib。 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "https://www.360docs.net/doc/2014218774.html,/dtd/web-app_2_3.dtd"> 我们先来看看如何在Tiles中组合出一个页面。在这个Web应用程序中，我们一共设计了两个页面，一个是登录页面，一个是欢迎页面，每个页面都被分为页眉（header）、主体（body）和页脚（footer）三部分。为了能在Tiles中组合出一个完整的页面，我们分别编写header.jsp作为页眉，footer.jsp作为页脚，在登录页中，主体部分是login.jsp，而在欢迎页中，主体是welcome.jsp，如图7-62所示。 通过将页面拆为几个部分，我们就可以复用页面的公共部分（如header.jsp和footer.jsp），在Tiles中，每个可重用的部分被称为一个可视化组件，通常是一个JSP 文件，然后用一个模板将几个组件组合到一起，就构成了一个完整的页面。例如，template.jsp将页眉、主体和页脚3个组件组合在一起，作为一个完整的页面展示给用户。 <%@ page contentType="text/html; charset=utf-8" %> <%@ taglib prefix="tiles" uri="https://www.360docs.net/doc/2014218774.html,/tags-tiles" %>
组合tile非常直观，用
在template.jsp 中，我们只定义了每个组件的名称，并没有指定具体的jsp文件。在Tiles中，每个页面的布局都被定义在XML配置文件中，我们将Tiles的配置文件命名为tiles-defs.xml，并放到/web/WEB-INF/目录下，在这个配置文件中，我们定义了login和welcome两个完整的页面。
"-//Apache Software Foundation//DTD Tiles Configuration 1.3//EN"
"https://www.360docs.net/doc/2014218774.html,/dtds/tiles-config_1_3.dtd">
每个
述default页面定义的header和 footer分别为header.jsp和footer.jsp，并设
置页面的title属性为“Default Title”，login页面就可以从default继承，并定
义body为login.jsp，然后覆盖了title属性。通过继承，就使得页面定义更加简洁。最后一步是在Spring的XML配置文件中配置Tiles框架，并选择一个合适的ViewResolver，让它能解析Tiles视图。
TilesConfigurer只需要指定Tiles配置文件就可以自动地配置好Tiles，为了让视图
解析器能识别TilesView，使用InternalResourceViewResolver并将TilesView
绑定即可。
LoginController和WelcomeController的编写和前面的完全相同，在LoginController中，返回的视图名称是“login”，而 WelcomeController返回的
视图名称是“welcome”，细心的读者可能已经发现了，视图解析器的任务就是在Tiles配
置文件中查找对应名称的页面，然后根据页面的定义，由TilesView将整个页面渲染出来。两个页面的效果如图7-63和图7-64所示。
图7-63 图7-64
7.6.4 集成JSF
JSF是JavaServer Faces的缩写，JSF是JavaEE中构建Web应用程序的又一个全新的MVC框架。与其他常见的MVC框架相比，JSF提供了一种以组件为中心的方式来开发Web 应用程序。JSF的目标是提供一种类似https://www.360docs.net/doc/2014218774.html,的可视化Web组件，开发人员只需要将已有的JSF组件拖放到页面上，就可以迅速建立一个Web应用程序，而不必从头开始编写UI 界面。因此，JSF的易用性很大程度上取决于一个简单、高效的可视化开发环境。
和传统的MVC框架（如Struts）相比， JSF更像是一个Web版本的Swing应用程序。传统的MVC框架的View是以页面为中心的，而JSF的View则是一系列可复用的UI组件。因此， JSF应用程序的生命周期更为复杂。一般来说，JSF处理用户请求的流程如图7-65所示。
除了恢复视图和渲染响应是必须的之外，其他步骤都可以视情况跳过。例如，在验证失败后，就直接跳到渲染响应，将错误信息展示给用户。
JSF的真正威力在于它的UI界面组件。与 https://www.360docs.net/doc/2014218774.html,类似，JSF的UI组件使开发人员能够使用已创建好的UI组件（如JSF内置的UI组件）来创建Web页面，而非完全从头创建，从而提供了前所未有的开发效率。JSF的UI组件可以是简单到只是显示文本的outputLabel，或者复杂到可以表示来自数据库表的表格。
此外，JSF也使用类似Spring IoC容器的方式来管理Model，即与UI组件绑定的Bean，在JSF中称为Managed-Bean，并且也支持依赖注入。Managed- Bean的生命周期可以是request、session和application，分别对应一次请求、一次会话和整个Web应用程序生存期。
在开发JSF应用之前，我们需要首先准备开发环境。由于JSF也是一个规范，不同的厂商都可以有自己的实现。这里我们采用的是JSF 1.1规范（JSR 127），因为JSF 1.1仅需要Servlet 2.3规范的支持，在大多数Web服务器上都能正常运行，而最新的JSF 1.2则要求Servlet 2.5规范，目前除了少数服务器外，大多数服务器还无法支持。
我们还需要一个JSF 1.1的实现。SUN给出了一个JSF 1.1的参考实现，可以用于开发，以保证我们的JSF应用程序将来可以移植到其他的JSF实现。Apache也提供了一个MyFaces的JSF实现，读者可以参考Apache的官方站点获取详细信息，本书不对此做更多讨论。
下面的例子改自IBM developerWorks站点的一个JSF应用，它允许用户输入自己的姓名和电子邮件地址来订阅新闻。从http: //https://www.360docs.net/doc/2014218774.html,/javaee/javaserverfaces/download. html下载JSF 1.1的参考实现并解压，然后在Eclipse中建立一个Spring_JSF工程，首先实现一个基于JSF 的Web应用程序，将相关jar包放入 /WEB-INF/lib目录，工程结构如图7-66所示。图7-66
编译工程只需要引用jsf-api.jar。几个主要的接口和类如下。
Service接口是唯一的业务逻辑接口，它仅定义了一个subscribe方法。
public interface Service {
void subscribe(SubscriberBean subscriber);
}
其实现类ServiceImpl仅仅简单地打印出用户的订阅信息。
public class ServiceImpl implements Service {
public void subscribe(SubscriberBean subscriber) {
System.out.println("User \"" + subscriber.getName()
+ "\" with email \"" + subscriber.getEmail()
+ "\" subscribed successfully with preferred language "
+ subscriber.getLanguage());
}
}
SubscriberBean 是一个与前端UI绑定的Session范围的Managed-Bean，其作用范
围是Session，在SubscriberBean中还定义了 submit()方法来处理JSF的Action，因此，在SubscriberBean中必须要注入一个Service对象，才能完成实际业务方法的
调用。
public class SubscriberBean {
private String name;
private String email;
private String language;
private Service service = new ServiceImpl();
public void setService(Service service) {
this.service = service;
}
public String getName() { return name; }
public void setName(String name) { https://www.360docs.net/doc/2014218774.html, = name; }
public String getEmail() { return email; }
public void setEmail(String email) { this.email = email; }
public String getLanguage() { return language; }
public void setLanguage(String language) { https://www.360docs.net/doc/2014218774.html,nguage = language; }
public String submit() {
// 处理订阅请求:
service.subscribe(this);
return "success";
}
}
EmailValidator是一个自定义的JSF验证器，读者可以参考JSF相关文档获得有关验
证器的使用方法，这里仅给出实现。
public class EmailValidator implements Validator {
public void validate(FacesContext context, UIComponent component, Object value)
throws ValidatorException {
String email = ((String)value).trim();
if(!email.matches("[a-zA-Z0-9][\\w\\.\\-]*@[a-zA-Z0-9][\\w
\\.\\-] *\\.[a-zA-Z][a-zA-Z\\.]*")) {
throw new ValidatorException(
new FacesMessage("Invalid email address"));
}
}
}
下面我们需要配置JSF，首先，在web.xml中声明JSF相关Listener和FacesServlet。
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"https://www.360docs.net/doc/2014218774.html,/dtd/web-app_2_3.dtd">
com.sun.faces.config.ConfigureListener
FacesServlet 是整个JSF应用程序的前端入口，负责接收所有的用户请求。然后，需要编写一个默认的faces-config.xml配置文件，告诉JSF所有的配置信息，包括自定义的验证器、导航规则、所有的Managed-Bean和这些Bean之间的依赖关系。将faces-config.xml放到/WEB- INF/目录下。
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "https://www.360docs.net/doc/2014218774.html,/dtd/web-facesconfig_1_1.dtd">
下一步是编写两个JSP页面，使用JSF标准的标签库，读者可以发现JSF使用的表达式和Velocity非常类似，不过将“$”改为了“#”。index.jsp负责接受用户输入并验证表单。<%@page contentType="text/html;charset=UTF-8" %>
<%@taglib uri="https://www.360docs.net/doc/2014218774.html,/jsf/core" prefix="f" %>
<%@taglib uri="https://www.360docs.net/doc/2014218774.html,/jsf/html" prefix="h" %>
Subscribe
Your name:
required="true">
Your email:
Preferred Language:
thanks.jsp用于提示用户订阅成功。
<%@page contentType="text/html;charset=UTF-8" %>
<%@taglib uri="https://www.360docs.net/doc/2014218774.html,/jsf/core" prefix="f" %>
<%@taglib uri="https://www.360docs.net/doc/2014218774.html,/jsf/html" prefix="h" %>
Thank you,
A confirm mail has been sent to your mail box
编译工程后，启动Resin服务器，就可以直接在浏览器中输入
http://localhost:8080/ index.faces，其执行效果如图7-66和图7-67所示。
图7-66 图7-67
现在，我们来考虑如何将JSF集成到 Spring框架中。我们注意到，在上面的配置中，Service对象是由JSF定义为全局变量并注入到SubscriberBean中的，我们更希望能从Spring的IoC容器中获得Service对象，然后将其注入到JSF的SubscriberBean 中，这样使得JSF仅作为Web层与用户打交道，真正的中间层逻辑和后端持久层的Bean 都交给Spring管理，使整个应用程序的层次更加清晰。
在Spring中集成JSF非常简单，其关键在于声明Spring提供的一个Delegating VariableResolver，在faces-config.xml中添加下列内容。
org.springframework.web.jsf.DelegatingVariableResolver
...
我们看看JSF是如何实现依赖注入的。在前面的faces-config.xml中，SubscriberBean需要注入一个Service对象，我们是这么注入的。
JSF 根据名称#{service}去查找名称为service的Managed-Bean，然后将其注入到SubscriberBean中。如果我们声明了 Spring的DelegatingVariableResolver，则由DelegatingVariableResolver负责查找这个名称为 service的Bean，DelegatingVariable Resolver就有机会从Spring的IoC容器中获得名称为service的Bean，然后交给JSF，JSF再将其注入到 SubscriberBean中，图7-68很好地说明了DelegatingVariableResolver实现的功能。
然后，删除faces-config.xml中定义的Service Bean，因为这个Bean已被放入Spring容器中管理。在Spring的applicationContext.xml中定义这个Service Bean。
xmlns:xsi="https://www.360docs.net/doc/2014218774.html,/2001/XMLSchema-instance" xsi:schemaLocation="https://www.360docs.net/doc/2014218774.html,/schema/b eans https://www.360docs.net/doc/2014218774.html,/schema/beans/spring-beans.xsd" >
最后一步是在web.xml中通过声明Spring提供的ContextLoaderListener来启动Spring容器，注意：该Listener应当在其他Listener之前定义，以保证Spring容器首先被启动。
org.springframework.web.context.ContextLoaderListener
集成后的整个工程结构如图7-69所示。
无需编译，重新启动Resin服务器后，可以看到和Spring集成的JSF应用的运行效果与前面的JSF应用一致，不同之处在于Service组件从JSF容器移动到Spring容器内了。需要注意的几点是，DelegatingVariableResolver将首先试图查找faces-config.xml中定义的Managed-Bean，找不到才在 Spring的IoC容器中查找。因此，Spring容器中定义的Bean和JSF中定义的Managed-Bean千万不要有相同的名称，以免造成冲突。
图7-69
另一个值得注意的地方是，作为中间逻辑组件和后端持久化组件的Bean非常适合放在Spring的IoC容器中，以便获得AOP、声明式事务等强大的支持。但是，在JSF中作为UI组件Model的 Managed-Bean和UI组件的耦合程度较高，仍适合由JSF管理其生命周期，不推荐放在Spring的IoC容器中。这一点和Struts及 WebWork2的Action 不一样，后两者的Action要么是唯一实例，要么是对应每个请求的新实例，其生命周期远没有JSF的Managed- Bean那么复杂。
有些时候，需要在JSF中手动获取 Spring容器的Bean，读者可能已经想到了，由于Spring的IoC容器是绑定在ServletContext上的，因此可以首先通过FacesContext的getExternalContext()方法获得ExternalContext实例，再通过 ExternalContext的getApplicationMap()方法获得所有Application级别的Object，再通过查找名称为WebApplicationContext.ROOT_ WEB_APPLICATION_CONTEXT_ATTRIBUTE的对象就可以获得Spring的IoC容器的实例，一旦获得了Spring容器的实例，就可以获取所有的Bean实例。
事实上，Spring已经提供了一个辅助类FacesContextUtils来获取ApplicationContext实例。
ApplicationContext ctx = FacesContextUtils.getWebApplicationContext(
FacesContext.getCurrentInstance());
这样，在JSF的代码中，任何时候如果需要获得ApplicationContext的实例，就可以按照上述方法调用。
十大响应式Web前端开发框架
网站设计如果单靠一个一个代码码出来效率就过于低下了，如果利用网上的一些资源，只需简单的几个步骤你就可创建出更具吸引力的设计，包括菜单、背景、动画、眉头、body等设计。响应式Web设计不仅能够适用于任何屏幕尺寸，还为用户带来更完美的体验，本文将分享十款最佳的响应式Web设计开发框架，助你大大提高工作效率。 Gumby Framework
Gumby 2是建立在Sass基础上的。Sass是一款非常强大的CSS 预处理器，允许用户自主快速的开发扩展Gumby，同时提供很多新的工具来自定义和扩展Gumby框架。Gumby 2是一个非常棒的响应式CSS框架。 Get UI Kit Get UI Kit是一款轻量级、模块化的前端框架，用于开发快四且强大的 Web界面。 Foundation
Foundation是一个易用、强大而且灵活的框架，用于构建基于任何设备上的Web应用。提供多种Web上的UI 组件，如表单、按钮、标签等。 Semantic
UI是Web的灵魂！Semantic是为攻城师而制作的可复用的开源前端框架。 提供各种UI组件，使得开发更加直观、易于理解。 52Framework
52 Framework主要用于优化HTML5和CSS3的跨浏览器兼容性的框架， 可在所有主流浏览器上运行。 PureCSS
Pure是一组小的、响应式CSS模块，可用于任意Web项目中。它可作为每个网站或Web应用的起步工具，帮助开发者处理应用程序所需的所有CSS工作，同时不会让每个应用千篇一律。 Responsablecss
浅谈web前端技术
浅谈web前端技术 作者：周凯工作单位：成都信息工程学院 摘要 最近几年 WEB 前端开发已经成为一个很专业的方向，从业大军也与日俱增，仅杭州的D2交流会上就有 500 多人参加，且不乏许多高中同学。这说明前端开发行业在我国的兴起，已经是大势所趋。因此学习和掌握WEB相关技术如HTML 、CSS、JavaScript在日后的学习生活和工作中将大有益处。 关键词：HTMLCSSJavaScript Abstract In recent years the WEB front-end development has become a very professional direction from industry main forces, also grow with each passing day, only the Hangzhou D2 exchange will have more than 500 people attended, and there are many high school students. The software development industry in our country is arisen, already represent the general trend. Therefore the study and mastery of WEB related technologies such as HTML 、CSS 、JavaScript study in future life and work will be helpful。 Keywords:HTML CSS JavaScript web前端开发技术： 前端开发工程师是Web前端开发工程师的简称，是近五年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程，主要包括三个要素：HTML、CSS和JavaScript，这就要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。Web开发技术：World Wide Web（简称Web）是随着Internet的普及使用而发展起来的一门技术，它的发明极大地方便了人们对Internet上资源的组织和访问。Web技术涉及的内容相当广泛，本书涵盖了其中诸多方面，如：HTML标识语言、Java、Applet、CGI、脚本语言、ASP和JSP
Web前端MVC框架的意义分析
Web前端MVC框架的意义分析 摘要：近年来，MVC在软件开发中实现了广泛应用，但是基于前端开发逐渐趋于复杂性的背景下，MVC框架也由此成了人们关注的焦点。另外，由于MVC框架在Web前端应用中具有深远的意义，因而在此背景下深化对其的研究与分析是非常有必要的。本文从传统MVC模式基本概念分析入手，并详细阐述了Web前端MVC的意义，旨在其能推动Web前端开发工作的进一步创新与发展。 关键词：Web前端；MVC；意义 前言：Web前端开发是Web技术发展中的一个重要组成部分，在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点，即以页面为主体来展示界面中的信息。然而随着科学技术的不断进步，Web前端开发形式上变得更为复杂，但是其功能方面也逐渐实现了与用户间的相互交流。以下就是对Web前端MVC框架意义的详细阐述，望其能为现代背景下Web前端开发技术的可持续发展提供有利的文字参考。 一、传统MVC模式基本概念分析 在传统MVC模式中其应用被划分为模型层、视图层、控制层三个层次，而经过大量实践调查表明，不同层次在系统实际运行中承担着不同的职责。模型层在系统运行中的任
务即为数据处理。且数据模型层也可通过数据访问的方式来获取自身所需信息，并优化数据整合，将其应用于业务包装中，为用户提供更为高质的服务体系。视图层在系统运行中的主要任务即为显示数学模型中处理的信息等。但是，由于视图层数据显示存在着针对性特点，因而在利用其进行数据显示时应前面掌握其特性。另外，视图层中功能的发挥需要基于数据模型来完成，因此在一定程度上限制了其应用领域。控制层在系统中的主要职能即为对系统中应用程序的合理控制，并在视图数据显示中出现问题时，对其问题的发生进行合理控制，且在事件控制后作出相应响应提醒相关技术人员。另外，在控制层事件处理中模型层也承担着协助的作用，即在控制层作出相应后，模型层要及时整合数据、信息，并合理更新视图层中所显示的数据[1]。 二、前端MVC框架 就目前的现状来看，前端MVC应用最为广泛的即Backbone.js，Ember.js、Angular.js等几种。这几种前端框架都是基于MVC完成的，但是经过大量的实验表明，每种框架处理问题的方式都存在着一定差异。Backbone.js与其它框架相比其优势在于可更好的解决系统应用中层次问题，进而为用户提供更为可靠的操作平台。其次，Backbone.js 框架应用层中的视图层在模型数据修改后可及时对自身页面显示的数据进行修改，确保视图层与数据模型层数据的一
十大前端开发框架
十大前端开发框架 随着互联网的不断成熟以及我们越来越多的用各种移动端的设备访问互联网，Web设计师和Web开发者的工作也变得越来越复杂。 十年前，一切都还简单得多。那个时候，大部分用户都是坐在桌子前通过一个大大的显示器来浏览我们的网页。960像素是当时比较合理的网页宽度。那些年我们的开发工作主要就是跟十几个桌面浏览器打交道，并通过添加几个浏览器的hack，来兼容诡异的旧版本 IE 浏览器。时至今日，随着过去五六年间手持电子设备的突飞猛进，一切都变了样。我们看到各种尺寸的智能手机和平板层出不穷，电子阅读器，以及电视设备上的浏览器等也不断涌现。这种设备的多样性正在与日俱增。 可以预见，在不远的将来，相对于使用台式机，越来越多的人会使用移动设备来访问互联网。事实上，已经有相当数量的一部分人只通过智能手机上网。这意味着，我们这些Web设计师和开发者需要知道如何在庞大的移动端王国里呈现以及适配我们的产品，这至关重要。在撰写本文的时候，尽管我们还没彻底搞明白如何将桌面端呈现的全部内容在手持设备中呈现同样的效果，但是用于实现这一目标的技术以及工具正在变得越来越好。 在不知道浏览设备屏幕大小的时候，最主要的策略就是使用响应式网页设计。它是一种根据设备浏览窗口的尺寸大小来输出相应页面布局的方法。小型移动设备（如智能手机以及平板电脑）上的大多数浏览器会默认将一个网页缩小到适应自己的屏幕尺寸，然后用户可以通过缩放以及滚动等方法浏览整个网页。这种方法在技术上是可行的，但是从用户体验的角度上讲却比较糟糕。小屏幕上文字太小阅读不方便，太小难以点击，缩放以及滚动的操作多多少少会让人在阅读的时候分心。 响应式网页设计利用同样的HTML文档来适配所有的终端设备，响应式网页设计会根据设备屏幕的大小加载不同的样式，从而在不同的终端设备上呈现最优的网页布局。举个例子，当你在大屏幕桌面浏览器中查看一个网页的时候，网页的内容可能是分为很多列的，并且有常见的导航条。如果你在小屏幕的智能手机上查看同样的页面，你会发现页面的内容呈现在同一列中，并且导航按钮足够大，点击起来很方便。你可以在Media Queries这个上看到很多响应式网页设计的案例。在你的浏览器中随便点开一个设计案例，然后改变浏览器窗口的大小，你会看到网页的布局会根据窗口大小相应变化。 到目前为止，我们可以看出，响应式网页设计可以有效地帮助我们应对日益增长的终端设备多样性。那么在我们设计网页的时候有哪些实际可用的工具以及技术可以用来实现响应式网页设计呢？我们每个人都需要成为web大师才能驾驭这门技术么？或者是利用我们已经掌握的web基本知识就已经足够了？目前有什么工具可以帮到我们么？ 这时候前端开发框架华丽登场。响应式网页设计实现起来并不困难，但是要让它在所有的目标设备上都正常运作会有一点小棘手。框架可以让这一工作变得简单。利用框架，你可以花最少的力气创建响应式且符合标准的，一切都很简单并且具有一致性。使用框架有很多好处，比如说简单快速，以及在不同的设备之间的一致性等等。框架最大的优势就是简单易用，即
几个Web前端开发框架的比较
原文在我的博客中，欢迎大家来访交流https://www.360docs.net/doc/2014218774.html,/blog/697596 强调一下，这篇日志主要还是针对想学前端开发的新朋友写的，不是说我有什么独特见解，而是比较客观的状态，就各种框架的异同和应用场合，需要注意的地方做简单描述，不做具体深入分析，有的地方比较抽象，对于抽象之处大家可以到网上或各大高手博客中深入学习，当然也可以与我继续探讨。 一直以来对Web前端开发兴趣颇深，用过一些框架产品。在JavaEye上看到一些刚接触前端开发朋友的疑问，犹豫这些产品的前景利弊，不知从何入手。想把自己的一点经验分享给大家，如有不到位之处请一起来纠正。 jQuery 1. 绝对的万金油，核心js只有50K，占用带宽小，门户网站、管理系统，用在哪都可以。 2. jQuery是对js底层dom操作封装最薄的一个框架，没有大量的专有对象，多为提供函数进行dom操作。准确的说，它不是偏重于富客户端的框架，而是侧重于对js dom编程。下面几种才是完整的富客户端的框架。 3. 我认为它最大的三个亮点，一是支持CSS3的大量选择符，想定位或选择一个html元素简直轻而易举。二是灵活便捷的Ajax请求和回调操作。三是事件绑定功能，内部封装了很多事件，想统一为一个页面上的一些元素添加事件很方便，这也提高了复用性和可维护性，避免了页面中出现大量的html属性。合理的编码可以使html与js, css分离开，便于维护。 4. 此外它也封装了很多常用的操作，例如节点的添加删除、常用的动画效果、逻辑判断比较等等。避免了直接使用dom api进行繁琐的操作。 5. 本身提供了可扩展的函数，可以自己编写插件与核心jQuery对象进行集成使用。这也是常用的手段，只要你理解js面向对象编程，熟悉jQuery API，就能写出很多定制的插件，复用在各种地方。 6. 至于jQueryUI，与其他框架不一样的地方在于，它很少用js去生成html，而是把现有的html通过jQueryUI的API加工成想要的效果，关于这点是好是坏，我觉得就是见仁见智的问题了，没有必要争论什么。 7. 新生的jQuery EasyUI不错。 8. 如果今后的更新都保持现在这种模式，我认为它的前景很乐观，什么时候javascript完蛋了才轮到它玩完。 ExtJS 1. 一整套带有UI的js库，封装得很多，很厚，核心js就600多K，这么大的东西门户网站当然就别想了，里面的效果当然也不会运用到门户网站，所以它是专门为管理系统而生的。因为局域网不会有带宽问题。 2. 它与jQuery不同，基本上是纯用js来生成html的，页面里只需引入各个ExtJS库和你自己写的js，不会出现很多html内容，body里基本没什么。所以优化就显得重要了，不然会
WEB前端开发最佳实践
WEB前端（HTML5、CSS3、JS技术、jQuery、VUE等主流框架） 开发最佳实践培训班 一、培训简介 HTML5/CSS3是现阶段非常流行，也是很多企业所要求的技术。优点主要在于应用范围广泛广，可以进行跨平台使用。增加了
四、授课专家 张老师北京航空航天大学软件工程硕士, 10多年IT 工作经验，熟悉Html5、Html5游戏开发，Cocos2d-html5，QuarkJS，JQuery，JQueryMobile，CSS，BootStrap，Mui框架，HBuilder，CSS3，Axure，JSON，C#，JavaScript，PHP，PhpCMS等开发技术；熟悉ICONIX，Scrum等项目管理过程并熟练应用，熟悉UML建模，MVC，设计模式，架构思想，熟悉软件测试相关技能，熟悉软件测试管理过程。多年项目管理经验，千人教育培训经验。 郭老师计算机硕士研究生、中培教育高级培训讲师，参与组织并完成了上百个个大中型项目。主要专业特长包括HTML5、移动前端、CSS3、AngularJS、React native、VueJS、BootStrap、Jquery、ZeptoJS、Ajax、JSON、JSONP、Mui框架等相关技术，对Html5应用开发及开发模式有深入研究，熟悉模块化开发，熟悉IT项目管理，熟悉ICONIX、Scrum等软件研发过程改进、详细设计、IT规划。擅长UML建模、MVC、设计模式、架构思想。多年项目管理经验，千人教育培训经验姚老师在电信、电力、金融行业从事 HTML5、Java、Android、PHP开发工作，擅长Web前端、HTML5、Java、Android、PHP。多年软件开发经验，八年IT职业教育经验。2002年开始从事开发工作，具备十余年的开发、管理和培训经验。曾经主持开发《教学管理系统》《酒店管理系统》《车辆跟踪定位系统》《农信社信贷管理系统》等多个大型项目。在Android、iOS、HTML5、游戏开发、JavaME、JavaEE、Linux等领域都有深入研究，现为IT技术自由作家兼HTML5、Android、iOS、JavaME、JavaEE 培训讲师。曾出版过《Android应用开发详解》、《iOS 应用开发详解》《JavaEE Web工程师
2018年最新全套Web前端开发学习教程
2018年最新全套Web前端开发学习教程 前端很火，学习前端的人也多【前端开发月薪多少？>>】。泛艺学苑在这里为大家制作这份2018年最新全套Web前端开发学习教程，让正在学习前端的小伙伴们有一份系统专业的学习资源和学习指导。【前端开发教程下载>>】 一、学习Web前端开发线路图 二、学习Web前端教程篇 第一阶段：基础教程 第一章HTML基础
第一节了解HTML及W3C标准第二节HTML标签 第三节HTML框架 第二章CSS基础 第一节CSS基础语法和选择器第二节CSS盒模型 第三节CSS常用属性 第四节CSS定位 第三章JS基础 第一节JS简介 第二节JS变量和数据类型 第三节JS函数及流程控制 第四节JS常用对象 第四章jQuery的使用 第一节jQuery的基本使用 第二节jQuery选择器 第三节jQuery效果 第四节jQuery操作DOM 第五节jQuery页面效果插件
第六节jQuery动画插件 第二阶段：进阶教程 第五章HTML5 第一节HTML5概述 第二节新增元素及属性1 第三节新增元素及属性2 第四节Canvas、SVG 第五节Web存储 第六节应用缓存及web works 第七节服务器推送事件 第六章CSS3 第一节CSS3基础 第二节CSS3盒模型 第三节CSS3布局 第四节CSS3动画 第五节Web文字及兼容性 第七章bootstrap 第一节响应式概念 第二节C栅格系统
第三节Bootstrap常用模板 第四节Less和SASS 第八章移动Web开发 第一节视口和CSS单位 第二节流式布局 第三节弹性盒模型 第四节移动终端事件处理 第五节常见的移动端布局 第六节跨终端Web适配方案 第七节移动Web开发综合案例 第九章JS进阶 第一节DOM模型 第二节JS浏览器对象 第三节JS面向对象 第四节常用设计模式 第三阶段拔高教程 第十章前端自动化 第一节NPM包管工具 第二节版本管理工具
前端开发框架
前端开发框架 2015-4-28 孔祥虎
目录 第一章背景 (1) 1.1优势 (1) 1.2js框架 (1) 1.2.1angularjs.js (1) 1.2.2me.js (1) 1.3本地程序框架 (1) 1.3.1node-webkit (1) 第二章angular.js (2) 2.1什么是angularjs (2) 2.2端对端的解决方案 (3) 2.3理念 (3) 2.4擅长的领域 (4) 2.5一个简单的例子 (4) 2.5.1需求 (4) 2.5.2代码 (4) 2.5.3工作原理 (6) 2.5.4常用的指令 (7) 第三章me.js (8) 3.1为什么要me (8) 3.2简单的例子 (9) 3.2.1目录结构 (9)
3.2.2引用jQuery、AngularJS、me.js (9) 3.2.3创建主页面index.html (9) 3.2.4创建子页面tpl/a.html (10) 3.2.5创建子页面a的控制器js-ctrl/a.js (11) 3.2.6创建子页面tpl/b.html (11) 3.2.7创建子页面b的控制器js-ctrl/b.js (12) 3.3me对外的接口 (12) 3.3.1ajax (12) 3.3.2config (13) 3.3.3plugin (14) 3.3.4global (14) 3.3.5directive (15) 3.3.6run (15) 3.3.7ready (16) 3.3.8show (16) 3.3.9hide (17) 3.3.10param (17) 3.3.11trigger (17) 3.3.12page (18) 3.3.13define (18) 3.3.14require (18) 3.3.15control (18)
2018web前端开发值得关注的几个趋势
2018web前端开发值得关注的几个趋势 2017悄然过去，2018已经来到。2018年前端有哪些领域，技术值得关注，哪些技术会兴起，哪些技术会没落。 1.PWA PWA(Progressive Web Apps)由谷歌提出，用前沿的技术开发，让网页使用如同App般的体验的一系列方案。明确的一点就是：PWA就是一个网页, 可以通过前沿的技术开发出一个网页应用。 自从谷歌提出PWA后，就持续获得了业界的关注，热度可见一斑。就在今年，谷歌也宣布：PWA将获得与安卓原生应用同等的待遇与权限。这就意味着以后的网页和APP将越发将近，那么关注度将会进一步上升。 2.TypeScript TypeScript由微软开发。它是JavaScript的一个超集，自由和开源的编程语言。在这个语言中，添加了可选的静态类型和基于类的面向对象编程。 angular已经开始使用TypeScript进行开发，react和vue也进一步加深对TypeScript 的支持。不难发现TypeScript的火热程度！ 3.parcel能给webpack带来多大的威胁
webpack大家都知道是JavaScript模块打包工具，简单来说就是把各个模块就行分析，编译，打包等，使产出的文件可以在浏览器中运行。 在2017末就出现了一个黑马：parcel，出乎了大多数人的意料也算是2017的最大惊喜之一。说到parcel的最大优势，貌似就是webpack的最大劣势：配置和性能！parcel号称零配置，多核打包，并且使用文件缓存，在速度上比webpack快了将近10倍！ 4.WebAssembly 由谷歌、微软、Mozilla、苹果等公司合作的一个面向Web的通用二进制和文本格式的项目。2017年，chrome，火狐，IE，Safari四个浏览器统一通过了WebAssembly的方案，这是很少见的情况，我所了解的是第一次出现这样的统一情况，可见四个浏览器厂商对WebAssembly的重视。 5.react,angular,vue三驾马车 2017年，react发展迅猛，vue更是扮演框架黑马的角色，而angular虽然关注度不如以前，但是不容忽视。在2017的调查报告中，趋势基本上是react已经占据主流，不使用框架位居第二，angular1，angular2分列三四。 vue在2017年很火，但在2018年vue的潜力不容小觑。虽然超过react的可能性不是很大，但是位置依然会提升 无论如何，框架这个没有最好，只有最适合。三驾马车也没有说一定要全部都要会！如果js基础好，学习框架会比较容易上手。如果前端的不学js，直接上手框架，会很吃力，很容易懵。 6.人工智能和大数据 人工智能和大数据，不是一门技术，而是一个领域，也是一个流行的趋势，因此一些数据可视化的工具（echart，D3等）和人工智能的库都得以受到关注！ 7.yarn VS npm 相信接触到前端工程化，模块化的开发者都不可避免地使用npm进行功能包的安装依赖。尤其是在node.js的初期，npm就是工程化的一个标配。但是2017年，npm的地位显然是受到了yarn的威胁！今年的调查结果，yarn还超越了npm。yarn的优势在于：快，安全，和一些感人细节！如果照着情况下去，差距会逐渐变大！
web前端开发工程师岗位的职责文档2篇
web前端开发工程师岗位的职责文档2篇 Responsibilities document of web front end developme nt engineer 编订：JinTai College
web前端开发工程师岗位的职责文档2篇 小泰温馨提示：岗位职责是指一个岗位所需要去完成的工作内容以及应当承担的责任范围，明确岗位的目标和责任，规范工作内容、规范操作行为等以此提升工作产能效益最大化。本文档根据岗位职责要求展开说明，具有实践指导意义，便于学习和使用，本文下载后内容可随意修改调整修改及打印。 本文简要目录如下：【下载该文档后使用Word打开，按住键盘Ctrl键且鼠标单击目录内容即可跳转到对应篇章】 1、篇章1：web前端开发工程师岗位的职责文档 2、篇章2：web前端开发工程师工作的主要职责描述文档 篇章1:web前端开发工程师岗位的职责文档 web前端开发工程师需要与后端开发团队紧密配合，确保代码有效对接，优化前端应用性能。以下是小泰整理的web前端开发工程师岗位的职责。 web前端开发工程师岗位的职责1 1、负责产品的前端代码开发、页面重构以及交互设计逻辑处理;
2、根据产品文档开发高性能、高兼容性的前端代码，完成脚本通用类库、框架、UI控件的编写，并形成文档; 3、与用户、美工、编码工程师等协作实现良好的用户交互; 4、评估、优化网站前端性能。 1、2年以上JavaScript脚本开发经验，对OOP有一定的认识; 2、精通HTML5/XHTML、CSS 3、JavaScript、AJAX、JSON、XML等技术; 3、至少熟练掌握一种JS框架，如：Jquery框架，熟悉对象化Javascript编程; 4、有跨浏览器开发经验，理解不同浏览器之间的差异，写出代码具有良好的兼容性; 5、具有优化JavaScript性能的能力; 6、掌握软件设计流程和软件工程规范，具备良好而规范的设计和技术文档编写能力，拥有良好的代码习惯，逻辑结构清晰，命名规范，代码冗余率低;
国内外主流前端开发框架技术对比
一、国内外主流前端开发框架技术对比
框架名称 主要 平台 桌面端 jQuery, LESS 丰富 丰 富 丰富 丰富 基础技术 布局 CSS 控件 特效 风格设 置 手动配 置 一般 一般 简单
Ratchet
移动端
HTML5,css
简单
中 等
桌面端
jQuery
-
-
丰富
丰富 预置/可 视化配 置
移动端
jQuery
丰富
-
丰富
丰富 预置/可 视化配 置
桌面端 Ext JS, Sass
丰富
-
极丰 富
极丰 富 丰富
预置
移动端
HTML5
丰富
-
丰富
-
Boostrap
Bootstrap 是目前桌面端最为流行的开发框架，一经推出，势不可挡。 Boostrap 来自于 Twitter，是一个基于 HTML，CSS，JAVASCRIPT 的时尚的、直观 的、强大的流行前端框架及交互组件集，可用于快速，简单构建你的网站。 Bootstrap 主要针对桌面端市场，Bootstrap3 提出移动优先，不过目前桌面端 依然还是 Bootstrap 的主要目标市场。 Bootstrap 主要基于 jQuery 进行
JavaScript 处理， 支持 LESS 来做 CSS 的扩展。 Bootstrap 框架在布局、 版式、 控件、特效方面都非常让人满意，都预置了丰富的效果，极大方便了用户开发。 在风格设置方面，还需要用户在下载时手动设置，可配置粒度非常细，相应也比 较繁琐，不太直观，需要对 Bootstrap 非常熟悉配置起来才能得心应手。在浏 览器兼容性方面，目前 Firefox, Chrome, Opera, Safari, IE8+等主流浏览器 Bootstrap 都提供支持。 但是在 IE 支持方面略显短板，对 IE6 和 IE7 支持都 不是特别理想。在 Bootstrap3 中甚至放弃了对 IE6、IE7 的支持。在框架扩展 方面，随着 Bootstrap 的广泛使用，扩展插件和组件也非常丰富，涉及显示组 件、兼容性、图表库等各个方面。
Bootstrap 拥有以下特性： ? ? ? ? ? ? ? ? ? ? ? 适应各种技术水平 跨设备，跨浏览器 12 列栅格布局 响应式设计 样式化的文档 不断完善的库 定制的 jQuery 插件：Bootstrap 提供了定制的 jQuery 内置插件。 用 LESS 构建 支持 HTML5 标签和语法 支持 CSS3 免费开源
Ratchet
Ratchet 最初是 Twitter 的一套面向 iOS 原生应用程序的 HTML/CSS 原型。 在 看到这些原型对于开发过程多么重要之后， 团队决定将其作为一个移动应用程序 原型设计工具开源。团队很快就清楚地认识到，Ratchet 不仅非常适合构建移动 应用程序原型，而且还非常适合完备的移动应用程序。Ratchet 并没有试图在平 台或浏览器方面使用 CSS 做任何特别的事。它的目标是保持简洁，那样更容易理 解和实现。
常用的web前端框架
常用的web前端框架 前端开发，又称web前端开发，是从网页制作演变而来的。2005年以后，互联网进入web2.0时代，各种类似桌面软件的web应用的大量涌现，使得网站的前端发生了翻天覆地的变化。 据统计，2016年Web前端工程师职位最低月薪约为8000元，最高月薪达到1,5000+，市场人才需求一直呈现上涨状态，可谓“钱景”广阔。作为网页制作的一个细分行业，Web前端在国内乃至国际上真正开始受到重视的时间不超过10年，而大学课程的缺乏，让这一职业人才缺口很大。 目前web前端开发非常火爆，所以web前端框架也层出不穷，各有千秋，那么多的框架，不知道从哪里下手，那么在这里推荐几款常用的web前端框架,希望对初学者有所帮助。 Bootstrap Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 NEC : 更好的CSS样式解决方案 NEC包括了规范、框架、代码库、插件等内容，致力于为前端开发人员提供高效率高质量的前端页面开发解决方案，提高多人协作效率，也为非专业人员提供快速制作网页的解决方案。 NEJ-Nice Easy Java 简洁，美观，真正的跨平台web前端开发框架。 Foundation 迄今为止最好的响应式前端框架，更快、更轻、更多功能、更灵活、更强大！ Amaze UI
是一个轻量级的前端框架，基于开源社区流行前端框架编写，中国首个开源 HTML5 跨屏前端框架。 jQueryweui 是专为微信公众账号开发而设计的一个简洁而强大的UI库，包含全部WeUI 官方的CSS组件，并且额外提供了大量的拓展组件，丰富的组件库可以极大减少前端开发时间。 Layui - 经典模块化前端框架 jQuery插件库-收集最全最新最好的jQuery插件 写的更少,做的更多 Write less, do more！ FrozenUI - 专注于移动web的UI框架 简单易用，轻量快捷，为移动端服务的前端框架 SUI Mobile 轻量，小巧且精美的UI库，方便迅速搭建手机H5应用 以上是移动WEB UI框架资源，大家可以根据自己的业务需求去选择合适的WEB UI框架。 翡翠教育专注IT教育培训，以创新的教学方式和完善的就业服务享誉业内，已覆盖全国30多个城市,拥有70家教学中心。 如果你想学习UI设计、Web前端、Java大数据、网络营销、PHP等课程，欢迎关注翡翠教育!
网站开发框架和web前端框架的区别
web前端分为网页设计师、网页美工、web前端开发工程师 首先网页设计师是对网页的架构、色彩以及网站的整体页面代码负责网页美工只针对UI这块儿的东西，比如网站是否做的漂亮 web前端开发工程师是负责交互设计的，需要和程序猿进行交互设计的配合。 web前端需要掌握的有脚本技术javascript DIV+CSS现下最流行的页面搭建技术，ajax和jquery以及简单的后端程序等。后端的话可供开发的语言有 asp、php、jsp、.NET 这些后端开发语言的话搭建环境都不一样，具体如果你想学的话看是想从事前端部分还是后端程序部分。后端开发如果有一定的条件的话可以转为软件开发。不过要有一定的语言基础，类似java语言。C#等。关键是看你的兴趣爱好。。 这个到后期不会区分这么细，做前端到后期也会懂一些后端的技术，反之，后端也是。 在我们实际的开发过程中，我们当前这样定位前端、后端开发人员。1）前端开发人员：精通JS，能熟练应用JQuery，懂CSS，能熟练运用这些知识，进行交互效果的开发。 2）后端开发人员：会写Java代码，会写SQL语句，能做简单的数据库设计，会Spring和iBatis，懂一些设计模式等。
现在来看，我们对前后端的要求还是蛮低的，尤其是后端，新员工经过培训之后都是可以参与到后端开发的，没有太高的技术门槛，唯一需要做的就是先变成熟练工种，这个阶段没有涉及到设计模式、架构、效率等一些列问题。 还是先google一下，看看网上对Web前端开发、Web后端开发分别是什么？ Web前端: 顾名思义是来做Web的前端的。我们这里所说的前端泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。Web后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。 本文内容由北大青鸟佳音校区老师于网络整理，学计算机技术就选北大青鸟佳音校区！了解校区详情可进入https://www.360docs.net/doc/2014218774.html,网站，学校地址位于北京市西城区北礼士路100号！
Java Web前端到后台常用框架介绍
Java Web前端到后台常用框架介绍 一、SpringMVC https://www.360docs.net/doc/2014218774.html,/evankaka/article/details/45501811 Spring Web MVC是一种基于Java的实现了Web MVC设计模式的请求驱动类型的轻量级Web框架，即使用了MVC架构模式的思想，将web层进行职责解耦，基于请求驱动指的就是使用请求-响应模型，框架的目的就是帮助我们简化开发，Spring Web MVC也是要简化我们日常Web开发的。 模型（Model ）封装了应用程序的数据和一般他们会组成的POJO。 视图（View）是负责呈现模型数据和一般它生成的HTML输出，客户端的浏览器能够解释。 控制器（Controller ）负责处理用户的请求，并建立适当的模型，并把它传递给视图渲染。 Spring的web模型–视图–控制器（MVC）框架是围绕着处理所有的HTTP请求和响应的DispatcherServlet的设计。 Spring Web MVC处理请求的流程 这里写图片描述
具体执行步骤如下： 1、首先用户发送请求————>前端控制器，前端控制器根据请求信息（如URL）来决定选择哪一个页面控制器进行处理并把请求委托给它，即以前的控制器的控制逻辑部分；图2-1中的1、2步骤； 2、页面控制器接收到请求后，进行功能处理，首先需要收集和绑定请求参数到一个对象，这个对象在Spring Web MVC中叫命令对象，并进行验证，然后将命令对象委托给业务对象进行处理；处理完毕后返回一个ModelAndView（模型数据和逻辑视图名）；图2-1中的 3、 4、5步骤； 3、前端控制器收回控制权，然后根据返回的逻辑视图名，选择相应的视图进行渲染，并把模型数据传入以便视图渲染；图2-1中的步骤6、7； 4、前端控制器再次收回控制权，将响应返回给用户，图2-1中的步骤8；至此整个结束。 二、Spring https://www.360docs.net/doc/2014218774.html,/cainiaowys/article/details/7107925 2.1、IOC容器：https://www.360docs.net/doc/2014218774.html,/linjiqin/archive/2013/11/04/3407126.html IOC容器就是具有依赖注入功能的容器，IOC容器负责实例化、定位、配置应用程序中的对象及建立这些对象间的依赖。应用程序无需直接在代码中new相关的对象，应用程序由IOC容器进行组装。在Spring中BeanFactory是IOC容器的实际代表者。 2.2、AOP：https://www.360docs.net/doc/2014218774.html,/moreevan/article/details/11977115 简单地说，就是将那些与业务无关，却为业务模块所共同调用的逻辑或责任封装起来，便于减少系统的重复代码，降低模块间的耦合度，并有利于未来的可操作性和可维护性。AOP代表的是一个横向的关系 AOP用来封装横切关注点，具体可以在下面的场景中使用: Authentication 权限 Caching 缓存
前端开发框架对比
近几年随着jQuery、Ext 以及CSS3 的发展，以Bootstrap 为代表的前端开发框架如雨后春笋般挤入视野，可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架，极大丰富了开发素材，也方便了大家的开发。这些框架各有特点，本文对这些框架进行初步的介绍与比较，希望能够为大家选择框架提供一点帮助，也为后续详细研究这些框架的抛砖引玉。JavaScript & CSS 目前前端框架主要采用JavaScript+CSS模式，我们先来了解一下这两者。 预准备之JavaScript 目前主流的JavaScript 框架排名中，jQuery和Ext 可算是佼佼者，获得了用户的广泛好评。国内的一些框架很多也是仿照jQuery对JavaScript 进行了包装，不过这些框架的鼻祖YUI 还是坚持用自己的JavaScript 类库。 jQuery是目前用的最多的前端JavaScript 类库，据初步统计，目前jQuery的占有率已经超过46%，它算是比较轻量级的类库，对DOM 的操作也比较方便到位，支持的效果和控件也很多。同时，基于jQuery有很多扩展项目，包括jQuery UI(jQuery支持的一些控件和效果框架)、jQuery Mobile(移动端的jQuery框架)、QUnit(JavaScript 的测试框架)、Sizzle(CSS 的选择引擎)。这些补充使得jQuery框架更加完整，更令人兴奋的是，这些扩展与目前的框架基本都是兼容的，可以交叉使用，使得前端开发更加丰富。 Ext 是Sencha公司推崇的JavaScript 类库，相比jQuery，Ext JS 更重量级，动辄数兆的文件，使得Ext 在外网使用的时候会顾虑很多。但是，另一方面，在Ext JS 庞大的文件背后是Ext JS 强大的功能。Ext JS 的控件和功能可以说强大和华丽到了让人发指的程度。图表、菜单、特效，Ext JS 的控件库非常丰富，同时它的交互也非常强大，独立靠Ext JS 几乎就可以取代控制层完成于客户的交互。强大的功能，丰富的控件库，华丽的效果也使得Ext JS 成为内网开发利器。 框架鼻祖YUI 也有自己的JavaScript 类库，DOM 操作和效果处理也还比较方便，功能和控件也很齐全，但是相比jQuery和Ext JS 显得比较中庸一些。随着Yahoo!的没落，YUI 的呼声也逐渐被新起的框架淹没，想来也让人惋惜。 除了上述的三个JavaScript 类库，还有Dojo、Prototype、Mootools等众多类库，由于本文讨论的框架多采用上述框架，所以其他框架暂不讨论。 预准备之CSS 随着CSS3 的推出，浏览器对样式的支持更加上了一个层次，效果更加出众。各框架也纷纷开发出基于CSS3 的样式，让框架更加丰富。 对于CSS3，更是推出了一些预编译的扩展框架，主要是LESS、Sass 和Compass(Compass 是基于Sass 的扩展)。可以方便地进行变量定义，格式引用，函数定义等操作，并内置了大量的效果。让您的CSS 开发效率提升一个档次。根据Chris Coyier的比较，Sass+Compass几
十大前端开发框架
简而言之，如果你认真对待目前的web 开发工作，那么使用框架进行开发就不是可选项而是必须要做的事情。你的站点必须高度灵活以适应不同的浏览器，平板，智能手机以及其他各种各样的手持设备。 一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript 组件的集合，我们可以在设计中使用它们。前端开发框架有很多，其中有一些写得很棒。为了大家的使用便利，下文列举了目前最强大应用最广泛的几款前端开发框架。记住，这些框架并不仅仅是CSS 栅格之类的一些东西，它们包括的是整套的前端开发框架。 1. Bootstrap Boostrap 绝对是目前最流行用得最广泛的一款框架。它是一套优美，直观并且给力的web 设计工具包，可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI 组件，栅格系统以及一些常用的JavaScript 插件。 Bootstrap 是用动态语言LESS 写的，主要包括四部分的内容：?脚手架——全局样式，响应式的12列栅格布局系统。记住Bootstrap 在默认情况下并不包 括响应式布局的功能。因此，如果你的设计需要实现响应式布局，那么你需要手动开启这项功能。 ?基础CSS——包括基础的HTML 页面要素，比如表格(table)，表单(form)，按钮(button)，以及图片(image)，基础CSS 为这些要素提供了优雅，一致的多种样式。 ?组件——收集了大量可以重用的组件，如下拉菜单（dropdowns ），按钮组（button groups ），导航面板（navigation control ）——包括： tabs,pills,lists 标签，面包屑导航（breadcrumbs ）以及页码（pagination ），缩略图(thumbnails)，进度条（progress bars ），媒体对象（media objects ）等等。 ? JavaScript——包括一系列jQuery 的插件，这些插件可以实现组件的动态页面效果。插件主要包括模态窗口（modals ），提示效果（tool tips ），“泡芙”效果（popovers ），滚动监控（scrollspy ），旋转木马(carousel)，输入提示(typeahead)，等等。 Bootstrap 已经足够强大，能够实现各种形式的 Web 界面。为了更加方便地利用 Bootstrap 进行开发，很多工具和资源可以用来配合使用，下面列举了其中的一部分工具和资源。、管路敷设技术通过管线敷设技术不仅可以解决吊顶层配置不规范高中资料试卷问题，而且可保障各类管路习题到位。在管路敷设过程中，要加强看护关于管路高中资料试卷连接管口处理高中资料试卷弯扁度固定盒位置保护层防腐跨接地线弯曲半径标高等，要求技术交底。管线敷设技术中包含线槽、管架等多项式，为解决高中语文电气课件中管壁薄、接口不严等问题，合理则：在分线盒处，当不同电压回路交叉时，应采用金属隔板进行隔开处理；同一线槽内，强电回路须同时切断习题电源，线缆敷设完毕，要进行检查和检测处理。、电气课件中调试对全部高中资料试卷电气设备，在安装过程中以及安装结束后进行高中资料试卷调整试验；通电检查所有设备高中资料试卷相互作用与相互关系，根据生产工艺高中资料试卷要求，对电气设备进行空载与带负荷下高中资料试卷调控试验；对设备进行调整使其在正常工况下与过度工作下都可以正常工作；对于继电保护进行整核对定值，审核与校对图纸，编写复杂设备与装置高中资料试卷调试方案，编写重要设备高中资料试卷试验方案以及系统启动方案；对整套启动过程中高中资料试卷电气设备进行调试工作并且指导。对于调试过程中高中资料试卷技术问题，作为调试人员，需要在事前掌握图纸资料、设备制造厂家出具高中资料试卷试验报告与相关技术资料，并且了解现场设备高中资料试卷布置情况与有关高中资料试卷电气系统接线等情况，然后根据规范与规程规定，制定设备调试高中资料试卷方案。 、电气设备调试高中资料试卷技术电力保护装置调试技术，电力保护高中资料试卷配置技术是指机组在进行继电保护高中资料试卷总体配置时，需要在最大限度内来确保机组高中资料试卷安全，并且尽可能地缩小故障高中资料试卷破坏范围，或者对某些异常高中资料试卷工况进行自动处理，尤其要避免错误高中资料试卷保护装置动作，并且拒绝动作，来避免不必要高中资料试卷突然停机。因此，电力高中资料试卷保护装置调试确灵活。对于差动保护装置高中资料试卷调试技术是指发电机一变压器组在发生内部故障时，需要进行外部电源高中资料试卷切除从而采用高中资料试卷主要保护装置。