web前端技术讲稿

Web应用技术浅析

沈联民讲解目录理想杯经验谈MVC架构前端技术介绍标准概念实用技术实用工具推荐网站联系我APeraGlobalCompany©2009PERAChina经验谈参加不不参加好用心做比不用心做好拿一等奖比拿二等奖好

显示数据一个典型的Web应用用户在浏览器上操作浏览器提供请求方式Web程序存取数据库处理客户端请求发给浏览器响应数据浏览器MVC三层模式1、模型〔Model〕

业务逻辑层。用于封装业务逻辑和数据模型。2、视图〔View〕

表示层。就是与用户实现交互的界面，通常实现数据的输入和输出功能。3、控制器〔controller)

控制层。起到控制整个业务流程的作用，实现View层跟Model层的协同工作。

MVC三层模型Web前端技术—View层客户端技术三要素HTMLWeb前端开发是从网页制作演变而来的，前端开发的入门门槛比较低，与效劳器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。需要一定的美工根底。JavaScriptCSSWeb前端即视图层主要做与业务逻辑无关的数据展现标准！？讲解目录1.文档结构—三层开发模式Base层common层page层三层模式的解释Base层：位于最底层，提供CSSreset功能和最小粒度的通用类—原子类。Common层：位于中间，提供组件级的CSS类。抽取网站的公用局部，提取模块，定义颜色，字体，布局，表单，表格等公用样式。Page层：非高度重用的模块放在page层，主要是针对单个页面或者具有相似布局的模块〔作用：三层结构能保证css代码结构的高重用率，清晰逻辑〕文档结构举例2.编程标准 A.做到页面整洁性良好的语义标签缩进树形结构与文档流多浏览器支持〔图片还是文字？〕 B.保证良好的结构注释Html树形结构<html><head> <title>文档标题</title></head><body> <ahref=“#”>我的链接</a> <h1>我的标题</h1></body></html>对应的树形结构Css注释标准结构注释/*BasicStyleSheet(forversion4browsers)version:1.1author:andybemail:*/风格统一的大注释块：/*Typography*/自我提示:/*Use://info.ph/~etan/w3pantheon/style/starhtmlbug.htm*/其他：/*:TOGO:Remembertoremovethisrulebeforethesitegoeslive*//*KLUDGE:ImanagedtofixthisprobleminIEbysettingasmallnegpretty*//*:BUGRule还可以使用关键字TRICKY提醒其他开发人讲解目录几个概念多请求还是多文件表格还是css先布局还是先写样式CSS解析权重浅析APeraGlobalCompany©2009PERAChina1.多请求还是多文件？平衡处理：每个CSS文件都意味着要对效劳器进行一次额外的调用。这会影响性能，所以一些开发人员喜欢使用一个大型CSS文件而不是多个小文件。最终的选择实际上取决于实际情况，而且在某种程度上这是一个个人喜好问题。我倾向于尽可能保持灵活性和维护的简单性。〔建议：做网站时,提前考察网站使用群体的硬件，网络情况。如:大局部显示屏尺寸，网络类型，使用群体的年龄层次，技术层次。以作出性能优先，还是体验优先的判断〕2.表格还是DIV？ Div+Css根本可以满足任意网页的编程需要，在任意情况下，Div+Css都应该是首选布局方式。 表格只用来展示大批量数据，不用于布局。3.先布局还是先样式？ 布局优先！〔大中型网站建议在common层别离出links、form、words、table、layout,分别建立css文件〕〔优先布局可以保证网站的显示结构不被破坏，这是一个网站的最根本要求！〕4.CSS解析权重浅析讲解目录技术多列布局绝对定位Hack处理Javascript初步介绍〔jquery，Extjs〕APeraGlobalCompany©2009PERAChina1.多列布局之浮动2.绝对定位absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"left","top","right"以及"bottom"属性进行规定。relative生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20"会向元素的LEFT位置添加20像素。static默认值。没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）。inherit规定应该从父元素继承position属性的值。3.Hack及兼容性处理小例子：有时候，可能希望在同一个规那么中对Windows上的IE6和更低版本应用一个声明，对其他所有浏览器应用另一个声明。为此，可以使用注释属性招数，也可以使用!important或下划线招数。!important招数之所以能够起作用是因为Windows上的IE6和更低版本在处理单一规那么中的多个属性方面有问题：#nay{Position:fixed!important;Position:static;}4.Javascript应用Jquery：

jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又想写出优秀的js效果，jQuery可以帮你到达目的！并且简介的语法和高的效率一直是jQuery追求的目标，优点：注重简介和高效，js效果有yui-ext的选择，因为yui-ext重用了很多jQuery的函数缺点：据说太嫩，历史不悠久。Javascript应用Yui-ext

基于YahooUI的扩展包yui-ext是具有CS风格的Web用户界面组件，能实现复杂的Layout布局，界面效果可以和backbase媲美，而且使用纯javascript代码开发。真正的可编辑的表格EditGrid，支持XML和Json数据类型，直接可以迁入Grid。

-优点：结构化，类似于java的结构，清晰明了，底层用到了Jquery的一些函数，使整合使用有了选择，最重要的一点是界面非常震撼。

-缺点：太过复杂，整个界面的构造过于复杂，文件包太大，加载时间长，不适于外围Internet网使用。讲解目录实用工具viewpageFirebugIETestserAPeraGlobalCompany©2009PERAChina讲解目录网站推荐APeraGlobalCompany©2009PERAChina网站推荐禅意花园：站酷：CssRain：javaEye：讲解目录个人信息姓名：沈联民性别：男QQ：406400939Blog：APeraGlobalCompany©2009PERAChina业精于勤儿荒于嬉，行成于思而毁于随 --韩愈THANKS

--沈联民

APeraGlobalCompany©2009PERAChina常见Web开发技术名词B/S架构：B/S结构〔Browser/Server结构〕结构即浏览器和效劳器结构。它是随着Internet技术的兴起，对C/S结构的一种变化或者改进的结构。它有以下几个特点： 1、具有分布性特点，可以随时随地进行查询、浏览等业务处理。 2、业务扩展简单方便，通过增加网页即可增加效劳器功能。 3、维护简单方便，只需要改变网页，即可实现所有用户的同步更新。 4、但个性化特点明显降低，无法实现具有用户个性化的功能要求。JavaEE：JavaEE是Sun公司的一套基于企业级应用开发的技术架构标准，包含许多组件，它同时简化和标准了应用系统的开发与部署，进而提高系统可移植性、平安性与复用性。MVC：MVC是一个架构模式，它强制性的使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件：模型、视图、控制器。它们各自处理自己的任务。该模式是XeroxPARC在八十年代为编程语言Smalltalk－80创造的一种软件设计模式，至今已被广泛使用。最近几年被推荐为Sun公司J2EE平台的设计模式。AJAX：即AsynchronousJavaScriptandXML〔异步JavaScript和XML)，是指一种创立交互式网页应用的网页开发技术。WebServices：是由企业发布的完成其特定商务需求的在线应用效劳,其他公司或应用软件能够通过Internet来访问并使用这项在线效劳。SOA(ServiceOrientedArchitecture)面向效劳的架构,其实质就是要将系统模型与系统实现分割开来。UDDI(UniversalDescription,DiscoveryandIngergration)是一种目录效劳，企业可以使用它对Webservices进行注册和搜索。可译为“通用描述、发现与集成效劳”。WSDl:网络效劳描述语言的缩写，是一个用来描述Web效劳和说明如何与Web效劳通信的XML语言。SOAP:简单对象访问协议，简单对象访问协议〔SOAP〕是一种轻量的、简单的、基于XML的协议，它被设计成在WEB上交换结构化的和固化的信息。SOAP可以和现存的许多因特网协议和格式结合使用，包括超文本传输协议〔HTTP〕，简单邮件传输协议〔SMTP〕。Rup：RationalUnifiedProcess的缩写，即统一软件开发过程，是一个面向对象且基于网络的程序开发方法论。UML：UnifiedModelingLanguage的缩写,即统一建模语言,是用来对软件密集系统进行可视化建模的一种语言。UML为面向对象开发系统的产品进行说明、可视化、和编制文档的一种标准语言。常见Web开发技术名词HTTP:超文本传输协议〔HypertextTransferProtocol〕

WWW:万维网(WorldWideWeb)

TCP/IP:传输控制协议/互联网络协议,是Internet最根本的协议〔TransmissionControlProtocol/InternetProtocol)

URL:统一资源定位符〔UniformResourceLocator〕URI的一个子集

URI:资源标志符〔UniversalResourceIdentifier〕

JMS:是Java平台上有关面向消息中间件的技术标准，Java消息效劳〔JavaMessagingService〕

HTML:超文本标记语言或超文本链接标示语言〔HyperTextMark-upLanguage〕

CSS:层叠样式表CascadingStyleSheets

XML:即可扩展标记语言〔eXtensibleMarkupLanguage〕

JSON:是一种轻量级的数据交换格式(JavaScriptObjectNotation)

DTD:文档类型定义(DocumentTypeDefinition)

AJAX:异步JavaScript和XML(AsynchronousJavaScriptandXML)

SEO:搜索引擎最正确化〔SearchEngineOptimization〕

DTO:数据传输对象〔DataTransferObject〕

EJB:称为Java企业(EnterpriseJavaBeansEJB)

POJO:简