前端框架开发培训

前端框架开发培训

Transcript

1. 单东林 2013年04月 前端框架开发培训 UED分享 · 交流 http://cssrain.github.io
2. 1，开发模式 2，数据整合 3，开发规范 浏览器兼容性管理 文件目录管理 Lib源管理 内容：
3. 1，开发模式
4. Ajax开发模式 所有页面的数据都是从前台发送ajax请求，后台返回的形式。所有操作都 是异步模式。
5. $.PostJson(url , params ,callback) 为了让代码更加统一，规范，我们把Ajax封装了。它有3个参数，第1个为 请求的url，第2个为传递的参数，第3个回调函数。
6. $.PostJson(url , params ,callback) 为了让代码更加统一，规范和方便维护，我们所有Ajax要发送请求的URL集 合到一个js中，通过全局方式来调用。同时，我们会把JSON分为2个版本， 本地一份，远程一份。
7. Ajax封装： $.extend({ PostJson: function(url, datas , callback) { $.ajax({ url: url, type: "GET", data : datas +"&_=" + (new Date()).getTime(), cache: false, dataType: “json", success: function(json) { callback("success", json); }, error: function(e) { callback("error", null); } });
8. 配置URL本地数据和远程数据： var conf = 1 ; //数据配置数组的配置参数，0为本地数据，1为远程数据 var srcPref = ["res/data/","front/sh/"]; var dataArray = [ { //本地数据 "index": srcPref[conf]+"advertisements.json", "brandModel" : srcPref[conf]+"top.json“ }, { //远程数据 "index": srcPref[conf]+"business!getHomeJson?uid=home", "brandModel" : srcPref[conf] + "business!getBrandModel" } ]; window.dataArray = dataArray[conf];
9. Ajax加载数据的典型代码： $.PostJson( dataArray.index , "opId="+opId+"&op="+op,function(state,json){ //判断Ajax请求是否成功 if(state=="success"){ //判断返回数据是否成功 if(json.returnCode==“0”){ //成功 }else{ //失败 } }else{ //失败 } });
10. 2，数据整合
11. JS模板 + JSON = HTML 传统模式：后台输出json，前台把json解析，拼接成HTML插入到页面中
12. Handlebars.js 它是JavaScript一个语义模板库，通过对view和data的分离来快速构建 Web模板。它采用“Logic-less template”（无逻辑模版）的思路。
13. JS模板 + JSON = HTML
14. <div class="entry"> <h1> {{title}} </h1> <div class="body"> {{body}} </div> </div> {{ }} ???
15. 如何使用它？ 官方网站：http://handlebarsjs.com/ 教程： http://software.intel.com/zh-cn/articles/html5handlebars
16. 3，开发规范
17. 浏览器兼容性管理 保证代码样式，脚本在规定的浏览器下正常运行。
18. 文件目录管理 文 件 目 录 样 式 目 录 样式CSS和image必须处于同一 目录，Images文件夹里的图片 需要分模块放。 脚 本 目 录 项目中所有使用的类库，目录命名必须是： 脚本名 / 版本号 / 脚本名.js。 如引入1.7.2版的jQuery: res/lib/jquery/1.7.2/jquery.js 类库分为压缩版和未压缩版，压缩版请以 “类库名.min.js” 命名。
19. Lib源地址 所有的脚本库都需要从Lib源中获取，Lib源已放置在项目中。如果没有相 关的lib，可讨论后再添加Lib源。切勿随意添加lib，随意引入其他脚本效 果！
20. 目前已有的源： 表格，表单提交，弹出层，树等Lib都有。
21. Q&A
22. 感 谢 聆 听