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
130
解读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
AIエージェントの開発に必須な「コンテキスト・エンジニアリング」とは何か──プロンプト・エンジニアリングとの違いを手がかりに考える
masayamoriofficial
0
360
Webアクセシビリティ入門
recruitengineers
PRO
1
220
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
5
1.4k
第4回 関東Kaggler会 [Training LLMs with Limited VRAM]
tascj
12
1.7k
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
190
会社にデータエンジニアがいることでできるようになること
10xinc
9
1.6k
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
2
140
新卒(ほぼ)専業Kagglerという選択肢
nocchi1
1
2.1k
EKS Pod Identity における推移的な session tags
z63d
1
200
開発と脆弱性と脆弱性診断についての話
su3158
1
1.1k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
30k
VPC Latticeのサービスエンドポイント機能を使用した複数VPCアクセス
duelist2020jp
0
180
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Being A Developer After 40
akosma
90
590k
Rails Girls Zürich Keynote
gr2m
95
14k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
A Modern Web Designer's Workflow
chriscoyier
695
190k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
780
KATA
mclloyd
32
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Producing Creativity
orderedlist
PRO
347
40k
4 Signs Your Business is Dying
shpigford
184
22k
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
感 谢 聆 听