webx turbine 前端开发入门理解

篇文章主要介绍webx turbine的部分。可能有错或者很狭隘，希望大家指正（先给大家列个webx3.0的流程图）。

  webx框架，是#宝结合自己的需求，结合了springExt, webx Framework 和 webx turbine形成的层次化，可定制的框架。具体来说，这三个层次是这样的：

1. SpringExt：基于Spring，提供扩展组件的能力。它是整个框架的基础。
2. Webx Framework：基于Servlet API，提供基础的服务，例如：初始化Spring、初始化日志、接收请求、错误处理、开发模式等。Webx Framework只和servlet及spring相关 —— 它不关心Web框架中常见的一些服务，例如Action处理、表单处理、模板渲染等。因此，事实上，你可以用Webx Framework来创建多种风格的Web框架。

Webx Turbine：基于Webx Framework，实现具体的网页功能，例如：Action处理、表单处理、模板渲染等。（这三点是我抄的(✿◡‿◡)）
说他们可定制，是因为可以只使用它们的部分功能。这正好体现了他的灵活性。于我而言，我没有过多考虑他的灵活性，而是就基于前人的代码，从前端页面入手，一步一步去看代码的具体工作流程的。

首先，webx页面使用了velocity模板来控制整个页面。对于一个呈现我们面前的页面，他通常就是由3个部分来表示的：screen, control 和 layout。其中，screen是一个网页主要呈现给用户的内容；control是除了内容以外的，可以是导航栏、页首、页尾等不变的部分；layout则是将他们整合到一起的一个vm文件。这样很方便，省去了前端去在js代码里面的各种拼接，一句$control.setTemplate("##.vm")就将想要整合的文件放了进来；同时，$screen_placeholder 则是将screen的主要代码放（$screen_placeholder的信息是通过Screen模块产生的。Screen模块是使用两个组件来创建的：一个Velocity模板和一个Java类。这个模板提供了一个可视化界面（look and feel），Java类为这个模板增加引用到上下文给用户。在本段的后面，我将解释为什么这两个组件都是必需的。为了让系统能够正常工作，模板得到一个和Java类一模一样的名称。）进来。第一次体现convention over rule（约定胜于配置）的地方就是这里：layout对于页面screen的控制就是通过相同的名字来实现的。通过layout的整合，screen可以直接通过id或者class引用control里面的内容。

对于同名的java(在web/###/module/action或者screen等)，之前一直不太理解他们的区别，猛一看都是各种set/get方法，不明所以，直到某日看到上面那句“Screen模块是使用两个组件来创建的：一个Velocity模板和一个Java类。这个模板提供了一个可视化界面（look and feel），Java类为这个模板增加引用到上下文给用户”。也就是说，同名java里的screen是干嘛的呢，是——从前端的页面获取值，填充context的！（请原谅我现在对context也不太清楚）；而同名java里的action是干嘛的呢，是——用来提交表单页面的！（上面说了这是webx turbine的特有功能），他也是从前端获得值，但是不填充context，而是将这些参数传给service层，让他们去进行数据库的操作的。

跑题了，，，继续看前端的页面。此时，这个页面只是一个静态的，没有的结构和复杂交互的页面。实际中，一个模块的完成仅有template部分是不够的（这种情况可以用在网址的首页，帮助文档等地方，仅显示链接），大部分还要css部分来控制页面的布局和script部分实行页面的表单处理、用户交互什么的。

css的全称是 cascading style sheets层叠表单样式，从名字也可以看出网页的布局一般是通过各种所谓的表单的嵌套叠加实现的。我们的代码使用bootstrap这个成熟的框架，里面有很多丰富的web组件，包括：下拉菜单、按钮组、按钮下拉菜单、导航、导航条、路径导航、分页、排版、缩略图、警告对话框、进度条、媒体对象等，使用的时候，只是在html页面的head部分添加上对该css的引用（<link rel="stylesheet" href="$staticContent.getURI('css/gaea-merge.css')" />），以及在使用它的控件上加上class引用。刚开始使用的时候注意不要乱改class,因为这样很有可能就不能使用它们之前绑定的方法了！

除了这些，网页更重要的是要能和用户交互。比如，根据用户的需求提供搜索功能；点击不同的按钮，显示不一样的页面等。对于这些，前端要做的就是每当有这些事情发生的时候，页面如何做出反应？这部分内容，就在script里面完成。从script的代码中，我第一次发现了OOP的概念在这里体现的这么明显！每个控件就是一个对象，流程则来源于事件驱动——发生了才去执行！

最初看代码就是从script入手的，当时很晕，有个原因就是代码使用了kissy这个全终端支持的js框架（官方文档是这么介绍滴~KISSY is a powerful javascript framework for building cross end web application such as desktop, mobile and pad.）。代码里面，同种功能的事情，语法不太相同：比如click事件，Kissy的写法是: E.on(‘#***’, ‘click’, 回调函数)但是，普通jquery风格则是$('#***').bind('click', 回调函数)等；还有对于对象的选择，可以通过class选择一类，可以通过id选择一个，还可以通过类型'a[data-tag="executiveLog"]'选择。

另一个原因是，对于初次接触js的人来说，满篇的回调函数、闭包（函数内部的函数，连接函数内部和外部的桥梁）是很让人头疼的！甚至于刚开始连他们叫这个名字都不知道！但是，他们的存在是必要的，js的很多必备功能必须要靠他们实现！（我是很久才发现这个道理的o(╯□╰)o）回调函数体现了一种时序性——一定要当前的发生完了才能去做下面的！比如：按钮点击了才去实现功能；下拉列表只有被触碰了才加载等等。闭包则可以看成是一个函数的返回值！作为另外一个函数的内部函数，闭包可以将其内部值返回出来。在这里多说一下，个人对于闭包的理解是这样的：闭包函数的父函数可以看出一个类，闭包函数则是他对外提供的public的方法，内部变量可以看出是private属性；在使用公共方法（闭包）的时候注意不要轻易改变私有变量的值（内部变量）！但是，闭包要少用，因为他将函数里面的局部变量一直保存在了内存中，使用多了会导致内存不足，影响性能。

 做好前端其实要学的非常多，在初步明白了大体流程后，里面的具体细节还有很多，很多框架、模板，甚至具体的js、jQuery等也都是要花时间。而且得对整个web开发的流程了解，在基础知识方面：网络、数据库也都得再看。这就是我对前端学习的感受，希望可以给像我一样的初学者以帮助。