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
62
Other Decks in Technology
See All in Technology
How Community Opened Global Doors
hiroramos4
PRO
1
110
Amazon ECS & AWS Fargate 運用アーキテクチャ2025 / Amazon ECS and AWS Fargate Ops Architecture 2025
iselegant
16
5.4k
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
270
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
310
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
emiki
0
930
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
710
Fabric + Databricks 2025.6 の最新情報ピックアップ
ryomaru0825
1
130
Prox Industries株式会社 会社紹介資料
proxindustries
0
270
Wasm元年
askua
0
140
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
520
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
140
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
330
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Scaling GitHub
holman
459
140k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Done Done
chrislema
184
16k
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
感 谢 聆 听