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
420
解读HTML
cssrain
0
120
解读HTML5
cssrain
2
150
基础CSS(1)
cssrain
0
130
基础CSS(2)
cssrain
0
95
高效的CSS
cssrain
0
150
高级CSS—继承
cssrain
0
110
PhoneGap分享和交流
cssrain
0
84
PhoneGap实践
cssrain
0
65
Other Decks in Technology
See All in Technology
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
1.1k
Google Agentspaceを実際に導入した効果と今後の展望
mixi_engineers
PRO
2
280
KubeCon + CloudNativeCon Japan 2025 Recap
donkomura
0
140
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
340
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか?
cap120
1
380
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
140
【CEDEC2025】大規模言語モデルを活用したゲーム内会話パートのスクリプト作成支援への取り組み
cygames
PRO
2
740
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
3
250
【CEDEC2025】『ウマ娘 プリティーダービー』における映像制作のさらなる高品質化へ!~ 豊富な素材出力と制作フローの改善を実現するツールについて~
cygames
PRO
0
220
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
800
dipにおけるSRE変革の軌跡
dip_tech
PRO
1
210
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
kazaneya
PRO
10
2.5k
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
The Cost Of JavaScript in 2023
addyosmani
51
8.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
The Cult of Friendly URLs
andyhume
79
6.5k
GitHub's CSS Performance
jonrohan
1031
460k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
740
Designing Experiences People Love
moore
142
24k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
4 Signs Your Business is Dying
shpigford
184
22k
Agile that works and the tools we love
rasmusluckow
329
21k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Into the Great Unknown - MozCon
thekraken
40
2k
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
感 谢 聆 听