作为刚接触前端的不久的童鞋，大家都会兴奋于CSS和JS所带来漂亮界面，然而，前端工程师除了UI重构外，还有非常重要的职责在正确的区域渲染出服务端的数据。毕竟，我们要构建一个大的web应用，必然不是普普通通的静态页面构成。
下文将罗列将来前端工程师应该必备的同后端打交道的常用技能。
服务端渲染
谈起服务端渲染，对于动态服务而言，这个世界上跑的大多数页面都经历过服务端的数据渲染，接口-&前端赋值-&模版渲染 。这一切都在服务器完成，我们查看源码时候，可以看到完整的html代码，包括每个数据值。
常用的php模版有，Smarty,Blade,Mustache,如果你们团队使用Smarty，我们可以看到一些view的文件里会前套Smarty的模版语言;
{foreach $list as $item}
&h3&{$item['name']}&/h3&
&p&{$item['desc']}&/p&
{/foreach}
如果Node,js作为服务端的话，这个时候我们可以使用前端模版渲染的模块，比如ejs,doT,jade等等。
注意不同的模版可能存在不同模版语法，需要自己学习使用
当然服务端渲染随着单页应用以及Restful接口的兴起，Ajax逐渐成为目前前后端交流最为频繁的方式。Ajax实际核心是XmlHttpRequest,我们通过对该对象的操作来进行异步的数据请求。
// 一般流程
var oReq = new XMLHttpRequest();
oReq.addEventListener("load", function(res) {
// your code to do something
oReq.open("GET", "http://www.example.org/example.txt");
oReq.send();
实际上我们接触到最多jQuey就有很好的封装，比如$.ajax，$.post等，如果用Angular的话我们可以用$http服务，除了这些之外，我们可以使用第三方的Ajax库等。
如果使用Ajax的话，我们不得不面临一些问题，由于同源限制的问题，我们不得不去克服这个问题，这个时候我们可以要求服务端，设置header头，header('Access-Control-Allow-Origin: *');或者叫设置nginx配置
add_header 'Access-Control-Allow-Origin' '';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET';
当然这不是最好的做法，实际现在我们也可以这么做:
ajax -& 代理 -& API
我们可以用php的curl或者通过服务器的配置来实现反向代理。从而达到同源的效果。
前端工程师一定要要求每次请求的数据接口一严格遵循基础的数据结构要求，尽管js是弱变量类型语言，但是我们还是应该严格要求，是数组，就不应该是对象，是数字就不应该是字符串，这样做有利于降低隐藏bug并且提升前后端工作效率。
JSONP算作JSON的一种”使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于的支持，我们可以简单的将数据封装成一个js脚本请求，当然我们在jquery中会用到。
function logResults(json){
console.log(json);
url: "/api",
dataType: "jsonp",
jsonpCallback: "logResults"
聊Comet我们还得说下短轮询，由于某些特定的业务需求，比如通知，我们需要有及时的数据更新,我们能够想到的就是使用setInterval每隔一定时间比如10s去获取一次请求，从而做到一些通知更新，但是这并不一种高效的做法，这会增加服务器的请求数量。这个时候有了另外一种概念，“反向Ajax”，由服务器进行数据推送， Comet能够让信息近乎实时的被推送到页面上，非常适合要求实时性的获取的数据的页面。
如图所示，就是一个简单的Comet模型，就是数据请求后挂起，直到有数据响应推送到客户端，这个时候客户端再发起一个新的连接。
这样相对来说可以减少一定数量的请求，以及数据的及时响应，从而一定意义的实现所谓推送。
一个简单的PHP Demo代码，就是我们需要这端代码一直运行着…
while(true) {
set_time_limit(0);
echo 'data';
b_flush();
JavaScript：
function createStreamingClient(url,progress,finished){
var xhr=new XMLHttpRequest(),received=0;
xhr.open("get",url,true);
xhr.onreadystatechange=function(){
if(xhr.readyState==3){
result=xhr.responseText.substring(received);
received+=result.
progress(result);
}else if(xhr.readyState==4){
finished(xhr.responseText);
xhr.send(null);
var client = createStreamingClient(url,fuc1,func2)
SSE Server-Sent Events
SSE是围绕只读Comet交互推出的API或者模式。SSE API用于创建到服务器的单向连接，服务器通过这个连接可以发送任意数量的数据。服务器响应的MIME类型必须是text/event-stream，而且是浏览器中的Javascript API能解析的格式输出。
现对于Comet，我们可以看出我们只进行了一次连接，然后服务端会去控制数据的响应，从而发送给客户端。这样相对来说，但是如同定义的描述，这种只适合只读数据的情形。比如一些通知和状态码这样的。SEE的使用非常简单，只需要掌握这几个api就行：
var es = new EventSource(''
function listener(event) {
console.log(event.data);
// 创建一个SSE连接
es.addEventListener("open", listener);
// 响应获取消息的事件
es.addEventListener("message", listener);
// 发生错误
es.addEventListener("error", listener);
注意：如果在回话过程中遇见错误后，默认程序会重新发起一次新的连接，从而防止挂掉就不再响应了
服务端（node,php）的代码，可以参考：
Web Sockets
HTML5 WebSocket 设计出来的目的就是要取代轮询和 Comet 技术，使客户端浏览器具备像 C/S 架构下桌面系统的实时通讯能力。 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。也就是我们可以使用web技术构建实时性的程序比如聊天游戏等应用。
其实Web Sockets 的API很少，就下面这些
websocket = new WebSocket("ws://:9001");
websocket.onopen = function(evt) { /* do stuff */ }; //on open event
// 当web socket关闭
websocket.onclose = function(evt) { /* do stuff */ };
// 进行通信时
websocket.onmessage = function(evt) { /* do stuff */ };
// 发生错误时
websocket.onerror = function(evt) { /* do stuff */ };
// 向服务器发发送消息
websocket.send(message); //send method
websocket.close(); //close method
对于服务端的话，PHP支持了很多socket 相关api，但是我们可以使用更加成熟的框架（实用）比如，.当然node.js写 socket也非常得心应手，node.js对高并发支持相对较好，可以使用。
服务端大概会做下面的事情: + 创建一个socket + 绑定地址和端口 + 监听进入的连接 + 接收新的连接 + web socket 握手 + 解码数据
注意：SSE和 Web Sockets 都是新的api，需要大家考虑兼容性*
说了那么多简单总结下，大家想明白几点就行了，客户端与服务端谁先主动，是否强调数据的实时性。
AJAX – 请求 → 响应 （频繁使用）
Comet – 请求 → 挂起 → 响应 （模拟服务端推送）
Server-Sent Events – 客户单 ← 服务端 （服务端推送）
WebSockets – 客户端
服务端 (未来趋势,双工通信)
在文章中找不到问题答案？您还可以
热门栏目订阅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后端：后端更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。
&& 我们再来看看大公司对前后端人员招聘的要求，通过这个角度看看前端、后端的技术要求：
& & Web前端：
& & & & 1）精通HTML，能够书写语义合理，结构清晰，易维护的HTML结构。
& & & & 2）精通CSS，能够还原视觉设计，并兼容业界承认的主流浏览器。
& & & & 3）熟悉JavaScript，了解ECMAScript基础内容，掌握1~2种js框架，如JQuery
& & & & 4）对常见的浏览器兼容问题有清晰的理解，并有可靠的解决方案。
& & & & 5）对性能有一定的要求，了解yahoo的性能优化建议，并可以在项目中有效实施。
& & & & 6）......
& & Web后端：
& & & & 1）精通jsp，servlet，java bean，JMS，EJB，Jdbc，Flex开发，或者对相关的工具、类库以及框架非常熟悉，如Velocity，Spring，Hibernate，iBatis，OSGI等，对Web开发的模式有较深的理解
& & & & 2）练使用oracle、sqlserver、mysql等常用的数据库系统，对数据库有较强的设计能力
& & & & 3）熟悉maven项目配置管理工具，熟悉tomcat、jboss等应用服务器，同时对在高并发处理情况下的负载调优有相关经验者优先考虑
& & & & 4）精通面向对象分析和设计技术，包括设计模式、UML建模等
& & & & 5）熟悉网络编程，具有设计和开发对外API接口经验和能力，同时具备跨平台的API规范设计以及API高效调用设计能力
& & & & 6）......
文章转载自：爱思资源网&
阅读(...) 评论()博客访问： 454
博文数量： 2
博客积分： 0
博客等级： 民兵
技术积分： 10
注册时间：
记着脚下，三省吾身。
APP发帖 享双倍积分
IT168企业级官微
微信号：IT168qiye
系统架构师大会
微信号：SACC2013
分类： WINDOWS
原文地址： 作者：
&&&&& 关于
　　三层架构(3-tier application) 通常意义上的三层架构就是将整个业务应用划分为：表现层（UI）、业务逻辑层（BLL）、数据访问层（DAL）。区分层次的目的即为了“高内聚，低耦合”的思想。
　　１、表现层（UI）：通俗讲就是展现给用户的界面，即用户在使用一个系统的时候他的所见所得。
　　２、业务逻辑层（BLL）：针对具体问题的操作，也可以说是对数据层的操作，对数据业务逻辑处理。
　　３、数据访问层（DAL）：该层所做事务直接操作数据库，针对数据的增、删、改、查。
　　　　三层结构原理：
　　　　3个层次中，系统主要功能和业务逻辑都在业务逻辑层进行处理。
　　　　所谓三层体系结构，是在客户端与数据库之间加入了一个“中间层”，也叫组件层。这里所说的三层体系，不是指物理上的三层，不是简单地放置三台机器就是三层体系结构，也不仅仅有B/S应用才是三层体系结构，三层是指逻辑上的三层，即使这三个层放置到一台机器上。
　　　　三层体系的应用程序将业务规则、数据访问、合法性校验等工作放到了中间层进行处理。通常情况下，客户端不直接与数据库进行交互，而是通过COM/DCOM通讯与中间层建立连接，再经由中间层与数据库进行交互。
表示层 　　位于最外层（最上层），离用户最近。用于显示数据和接收用户输入的数据，为用户提供一种交互式操作的界面。
业务逻辑层 　　业务逻辑层（Business Logic Layer）无疑是系统架构中体现核心价值的部分。它的关注点主要集中在业务规则的制定、业务流程的实现等与业务需求有关的系统设计，也即是说它是与系统所应对的领域（Domain）逻辑有关，很多时候，也将业务逻辑层称为领域层。例如Martin Fowler在《Patterns of Enterprise Application Architecture》一书中，将整个架构分为三个主要的层：表示层、领域层和数据源层。作为领域驱动设计的先驱Eric Evans，对业务逻辑层作了更细致地划分，细分为应用层与领域层，通过分层进一步将领域逻辑与领域逻辑的解决方案分离。
　　　　业务逻辑层在体系架构中的位置很关键，它处于数据访问层与表示层中间，起到了数据交换中承上启下的作用。由于层是一种弱耦合结构，层与层之间的依赖是向下的，底层对于上层而言是“无知”的，改变上层的设计对于其调用的底层而言没有任何影响。如果在分层设计时，遵循了面向接口设计的思想，那么这种向下的依赖也应该是一种弱依赖关系。因而在不改变接口定义的前提下，理想的分层式架构，应该是一个支持可抽取、可替换的“抽屉”式架构。正因为如此，业务逻辑层的设计对于一个支持可扩展的架构尤为关键，因为它扮演了两个不同的角色。对于数据访问层而言，它是调用者；对于表示层而言，它却是被调用者。依赖与被依赖的关系都纠结在业务逻辑层上，如何实现依赖关系的解耦，则是除了实现业务逻辑之外留给设计师的任务。
数据层 　　数据访问层：有时候也称为是持久层，其功能主要是负责数据库的访问，可以访问数据库系统、二进制文件、文本文档或是XML文档。
　　　　简单的说法就是实现对数据表的Select，Insert，Update，Delete的操作。如果要加入ORM的元素，那么就会包括对象和数据表之间的mapping，以及对象实体的持久化。
　　1、开发人员可以只关注整个结构中的其中某一层；
　　2、可以很容易的用新的实现来替换原有层次的实现；
　　3、可以降低层与层之间的依赖；
　　4、有利于标准化；
　　5、利于各层逻辑的复用。
　　1、降低了系统的性能。这是不言而喻的。如果不采用分层式结构，很多业务可以直接造访数据库，以此获取相应的数据，如今却必须通过中间层来完成。
　　2、有时会导致级联的修改。这种修改尤其体现在自上而下的方向。如果在表示层中需要增加一个功能，为保证其设计符合分层式结构，可能需要在相应的业务逻辑层和数据访问层中都增加相应的代码。
　　1. UILayer里面只有少量(或者没有)的SQL语句或者存储过程调用, 并且这些语句保证不会修改数据?
　　2. 如果把UILayer拿掉, 你的项目还能在Interface/API的层次上提供所有功能吗?
　　3. 你的DAL可以移植到其他类似环境的项目吗?
　　4. 三个模块, 可以分别运行于不同的服务器吗?
　　如果不是所有答案都为YES, 那么你的项目还不能算是严格意义上的三层程序. 三层程序有一些需要约定遵守的规则：
　　1. 最关键的, UI层只能作为一个外壳, 不能包含任何BizLogic的处理过程
　　2. 设计时应该从BLL出发, 而不是UI出发. BLL层在API上应该实现所有BizLogic, 以面向对象的方式
　　3. 不管数据层是一个简单的SqlHelper也好, 还是带有Mapping过的Classes也好, 应该在一定的抽象程度上做到系统无关
　　4. 不管使用COM+(Enterprise Service), 还是Remoting, 还是WebService之类的远程对象技术, 不管部署的时候是不是真的分别部署到不同的服务器上, 最起码在设计的时候要做这样的考虑, 更远的, 还得考虑多台服务器通过负载均衡作集群
　　所以考虑一个项目是不是应该应用三层/多层设计时, 先得考虑下是不是真的需要? 实际上大部分程序就开个WebApplication就足够了, 完全没必要作的这么复杂. 而多层结构, 是用于解决真正复杂的项目需求的。
与MVC的区别
　　同样是架构级别的，相同的地方在于他们都有一个表现层，但是他们不同的地方在于其他的两个层。
　　在三层架构中没有定义Controler的概念。这是我认为最不同的地方。而MVC也没有把业务的逻辑访问看成两个层，这是采用三层架构或MVC搭建程序最主要的区别。当然了。在三层中也提到了Model，但是三层架构中Model的概念与MVC中Model的概念是不一样的，“三层”中典型的Model层是已实体类构成的，而MVC里，则是由业务逻辑与访问数据组成的。
　　MVC（模型Model-视图View-控制器Controller）是一种设计模式，我们可以用它来创建在域对象和UI表示层对象之间的区分。　　三层结构的程序不是说把项目分成DAL, BLL, WebUI三个模块就叫三层了, 下面几个问题在你的项目里面：优点：　　　　在软件体系架构设计中，分层式结构是最常见，也是最重要的一种结构。微软推荐的分层式结构一般分为三层，从下至上分别为：数据访问层、业务逻辑层（又或成为领域层）、表示层。
阅读(58) | 评论(0) | 转发(0) |
下一篇：没有了
相关热门文章
给主人留下些什么吧！~~
请登录后评论。作为一个从零开始的new bee,一直搞不清前端和后端的区别，今天看到这篇文章，吐槽的很清晰明了，转载了。
“前端”“后端”傻傻分不清楚 - 网页设计师 VS. 网页开发者，一样悲催的两个物种
我们经常对Web designer（网页设计师）和Web developer（网页开发者，也称程序员）傻傻分不清楚，其实他们之间有着巨大的差异。两者之间的差异主要表现在：一个是有关网站的视觉或美学方面，被称为“前端”；另一个则是看不见的编码方面的设计，被称为“后端“。简而言之，的网站界面都是出自网页设计师之手，而强大的功能则是网页开发者的杰作……
以上只是从双方的职能上来理解彼此的差异，事实上他们的差异远不止这些。为此，国外设计网站Downgraf特意制作了一张图表来展示两个职业的种种差异：网页设计师和网页开发者（程序员）都留胡茬，一个没钱，一个没时间；两者都喜欢内涵T恤，一个走字体设计路线，一个走代码风；两者都配自家设备，一个必带MacBook Pro，一个只挑小键盘??除了以上种种差异，他们还有一个共同点：害怕MM，看来都是“宅”惹的祸。欲知更多详情，读图吧：
转载自http://www.ipc.me/web-designer-vs-web-developer.html
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1799次
排名：千里之外}