网站设计下一波——程序化网页.pptx

1、网站设计下一波网页程序化,Web App 特点、优势及构成 Google DevFest Shanghai 2012/9/23 samshi_html5,Web App 是什么,A web application is an application utilizing web and browser technologies to accomplish one or more tasks over a network 在浏览器运行的程序，通过网络和浏览器技术实现任务 界定Web App的界限是很模糊的，传统网站也多少使用些程序。 Web App更象是一种网页开发模式，尽量用程序来完成网站任务,

2、Web App 用什么语言开发,浏览器部分 原生支持：html(html5)、css、Javascript 插件依赖：Flash/Silverlight 服务器部分 php/asp/java/python/nodejs,Web App 与传统网页的区别,Web App是单页式的，不换页，内容更新只改变局部，响应速度快 Web App更注重交互，使用习惯同常用的安装软件，用户体验好,Web App 典型实例, cuttherope.ie,Web App 与传统软件的区别,Web App不用安装，打开URL即可使用 Web App自动升级 Web App只依赖浏览器，所以跨平台能力强 Web Ap

3、p处理本地文件能力较弱 Web App性能比传统软件差，但在PC上已经相差无几,Web App 的VMC策略,在传统网站MVC 模式中，Web 用户向服务器提交的所有请求都由控制器(C)接管，控制器负责决定应该调用哪个模块(M)来进行处理；然后这个模块进行业务逻辑处理，并返回数据；最后控制器调用相应的视图(V)来格式化数据，并刷新网页呈现给用户。 Web App 的MVC策略， Web 用户向Web App提交的所有请求都由前端控制器(C)接管，控制器负责决定应该调用哪个前端模块(M)来进行处理；然后这个模块进行业务逻辑处理，如果需要服务器端数据，则索取，并返回数据；最后控制器调用相应的前端视

4、图(V)来格式化数据，并更新局部网页呈现给用户,Web App 技术路线图-准备,判断 浏览器判断 触屏判断 数组判断 数字处理 between，结果限定在两个值之间 toHex，10进制数字转16进制，随机颜色获取 fixTo，保留小数进位 字符处理 trim，清楚空格 colorToRGBA，16进制颜色返回rgba格式 时间处理 getMS，获得目前毫秒数,Web App 技术路线图-Dom,Dom工具库，控制网页标签的一切细节 生成，document.createElement(tag) 添加，father.appendChild(child) 删除，father.removeElem

5、ent(child) 样式设定，ele.style.border= 1px solid red 内容设定，ele.innerHTML = string 显示节点，ele.style.display= 隐藏节点，ele.style.display=none,Web App 技术路线图-Event,EVENT工具库，处理鼠标和键盘的交互感应 添加事件，主要使用以下事件，PC与触屏一致 mousedown/touchstart mouseup/touchend mousemove/touchmove 事件触发后的预处理，不同浏览器和触屏一致 冒泡处理stopPropagation/cancelBub

6、ble 缺省处理returnValue/preventDefault 坐标取值event.clientX/event.touches0.clientX 拖动、轻扫、点击、长按等不同输入响应,Web App 技术路线图-Animate,Animate定时器 requestAnimationFrame/setTimeout Tween 运动函数：linear/quad/cubic/quart/sine/circ 自定义运动方式 多任务运动管理,Web App 技术路线图-Canvas,创建canvas标签代替图片，常用于按钮、背景、边框及一切有规则图形，尺寸是图形的10% 创建img标签，内容用c

7、anvas.toDataURL Canvas扩展，更可以大幅消减图案语句尺寸 CanvasRenderingContext2D.prototype 使用缩写方式ctx.m 代替 ctx.moveTo 使用链式命令ctx.m().l().b().f() 使用自定义图例,Web App 技术路线图-Ajax,Ajax标准对象 XMLHttpRequest() new ActiveXObject(Msxml2.XMLHTTP) new ActiveXObject(Microsoft.XMLHTTP) Ajax管理中心 收集各个模块的Ajax请求后，编码，合并成一个请求向后台发送 收到后台数据后，按照

8、模块分割，送回相应模块处理 兼容script模式或ajax模式,Web App 开发经验一,html文件部分，body标签不写内容 无css文件，style部分仅少量全局css属性 所有标签由Dom工具来生成和设置其css属性 好处之一可以保存现有css设定值，避免重复设定 好处之二是读取已保存的css设定值更方便，而不必从css属性中读取,Web App 开发经验二,Web App整体初始化部分 加载图片、js等资源，完成则运行所有模块的初始化部分 设定onresize，触发则运行所有模块的调整尺寸部分 设定onhashchange 设定document.body的mousemove，屏蔽触

9、屏的满屏拖动 设定onkeydown,Web App 开发经验三,Web App可以由多个模块构成，模块定义 创建部分，并定义基本结构，加载就运行 初始化部分，加载好资源后运行 调整尺寸部分，在每次改变浏览器尺寸后运行 请求数据部分，在需要数据时向Ajax中心请求 获取数据部分，在每次获取数据后运行,Web App 服务器端程序,以php为例，后台只要一个ajax.php程序，即可实现大多数网站的数据处理需求 ajax.php的构成 设定Content-type:application/x-javascript 设定Charset:UTF-8 合并get/post：array_merge($_GET, $_POST) 按模块写相应处理程序 将各模块处理结果合并成字符串返回前端,Web App 服务器端数据库,以php为例，后台只要一个db程序，即可实现大多数网站的数据保存需求 db.php的构成 密码控制，以sesson保证权限 db.php?set=keyvalue保存数据，php的set模块负责把数据保存到数据库里 db.php?get=key读取