Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
前端框架开发培训
Search
cssrain
September 02, 2014
Technology
0
82
前端框架开发培训
前端框架开发培训
cssrain
September 02, 2014
Tweet
Share
More Decks by cssrain
See All by cssrain
UED工作流程分享和交流
cssrain
1
410
解读HTML
cssrain
0
120
解读HTML5
cssrain
2
140
基础CSS(1)
cssrain
0
130
基础CSS(2)
cssrain
0
94
高效的CSS
cssrain
0
150
高级CSS—继承
cssrain
0
110
PhoneGap分享和交流
cssrain
0
84
PhoneGap实践
cssrain
0
63
Other Decks in Technology
See All in Technology
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
950
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
220
Delegating the chores of authenticating users to Keycloak
ahus1
0
130
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
490
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
300
mrubyと micro-ROSが繋ぐロボットの世界
kishima
3
400
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
320
Operating Operator
shhnjk
0
390
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
150
KubeCon + CloudNativeCon Japan 2025 Recap by CA
ponkio_o
PRO
0
290
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
190
Featured
See All Featured
Faster Mobile Websites
deanohume
307
31k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
Designing Experiences People Love
moore
142
24k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Unsuck your backbone
ammeep
671
58k
Code Review Best Practice
trishagee
69
18k
Scaling GitHub
holman
459
140k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Gamification - CAS2011
davidbonilla
81
5.3k
Transcript
单东林 2013年04月 前端框架开发培训 UED分享 · 交流 http://cssrain.github.io
1,开发模式 2,数据整合 3,开发规范 浏览器兼容性管理 文件目录管理 Lib源管理 内容:
1,开发模式
Ajax开发模式 所有页面的数据都是从前台发送ajax请求,后台返回的形式。所有操作都 是异步模式。
$.PostJson(url , params ,callback) 为了让代码更加统一,规范,我们把Ajax封装了。它有3个参数,第1个为 请求的url,第2个为传递的参数,第3个回调函数。
$.PostJson(url , params ,callback) 为了让代码更加统一,规范和方便维护,我们所有Ajax要发送请求的URL集 合到一个js中,通过全局方式来调用。同时,我们会把JSON分为2个版本, 本地一份,远程一份。
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); } });
配置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];
Ajax加载数据的典型代码: $.PostJson( dataArray.index , "opId="+opId+"&op="+op,function(state,json){ //判断Ajax请求是否成功 if(state=="success"){ //判断返回数据是否成功 if(json.returnCode==“0”){ //成功
}else{ //失败 } }else{ //失败 } });
2,数据整合
JS模板 + JSON = HTML 传统模式:后台输出json,前台把json解析,拼接成HTML插入到页面中
Handlebars.js 它是JavaScript一个语义模板库,通过对view和data的分离来快速构建 Web模板。它采用“Logic-less template”(无逻辑模版)的思路。
JS模板 + JSON = HTML
<div class="entry"> <h1> {{title}} </h1> <div class="body"> {{body}} </div> </div>
{{ }} ???
如何使用它? 官方网站:http://handlebarsjs.com/ 教程: http://software.intel.com/zh-cn/articles/html5handlebars
3,开发规范
浏览器兼容性管理 保证代码样式,脚本在规定的浏览器下正常运行。
文件目录管理 文 件 目 录 样 式 目 录 样式CSS和image必须处于同一
目录,Images文件夹里的图片 需要分模块放。 脚 本 目 录 项目中所有使用的类库,目录命名必须是: 脚本名 / 版本号 / 脚本名.js。 如引入1.7.2版的jQuery: res/lib/jquery/1.7.2/jquery.js 类库分为压缩版和未压缩版,压缩版请以 “类库名.min.js” 命名。
Lib源地址 所有的脚本库都需要从Lib源中获取,Lib源已放置在项目中。如果没有相 关的lib,可讨论后再添加Lib源。切勿随意添加lib,随意引入其他脚本效 果!
目前已有的源: 表格,表单提交,弹出层,树等Lib都有。
Q&A
感 谢 聆 听