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
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
63
Other Decks in Technology
See All in Technology
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
6
1.7k
Transformerを用いたアイテム間の 相互影響を考慮したレコメンドリスト生成
recruitengineers
PRO
2
430
Amplify Gen2から知るAWS CDK Toolkit Libraryの使い方/How to use the AWS CDK Toolkit Library as known from Amplify Gen2
fossamagna
1
350
AI エージェントと考え直すデータ基盤
na0
20
7.9k
CDK Vibe Coding Fes
tomoki10
1
630
Autify Company Deck
autifyhq
2
44k
How Do I Contact Jetblue Airlines® Reservation Number: Fast Support Guide
thejetblueairhelpsupport
0
150
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
170
推し書籍📚 / Books and a QA Engineer
ak1210
0
140
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
520
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
470
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
1.3k
Featured
See All Featured
BBQ
matthewcrist
89
9.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Visualization
eitanlees
146
16k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Side Projects
sachag
455
42k
Making Projects Easy
brettharned
116
6.3k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
GraphQLとの向き合い方2022年版
quramy
49
14k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
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
感 谢 聆 听