移动端 Web 开发前端知识整理
2015-05-16 23:30
627 查看
最近整理的移动端 Web 开发前端知识,不定期更新。
获取地理位置
手势
canvas 绘图和动画(硬件加速)
localstorage,本地缓存
HTML5 动画效果 demo
http://fff.cmiscm.com/#!/main
CSS3 动画
http://isux.tencent.com/css3/index.html
http://beiyuu.com/css3-animation/
CSS3 实现的 Loading(加载)动画效果
基本的 HTML 文件结构
jQuery
todo:zepto 与 jQuery 冲突问题
很多插件是基于jQuery 的,如果想要使用这些插件,又引入了 jQuery 将引起冲突,而且这时候 zepto 就没有引入的意义,但是有些框架又是基于 zepto,例如 frozenui。
Amaze ~ 妹子 UI(国内开源)
jQuery.mmenu iOS 风格的菜单
bootstrap
bootstrap UI 组件
semantic-ui
ratchet
jquery mobile
矢量,颜色大小可以自定义
自定义图标字体
http://fontello.com/
有时只需要使用到一部分的图标,可以通过自定义的方式来减小图标字体文件的大小。
没有 AngularJS 之前,用 js 拼接出 HTML 字符串
有了 AngularJS 之后,利用 AngularJS 的数据绑定,直接写 HTML 模板,清晰易懂
AngularJS 学习资源
幕客网
http://angularjs.cn/T008
http://checkcheckzz.gitbooks.io/angularjs-learning-notes/content/index.html
boostrap 表单验证
Bootstrap Validator
http://1000hz.github.io/bootstrap-validator/
HAPPY.JS
Lightweight form validation for jQuery or Zepto.js
http://happyjs.com/
jQuery Form Validator
https://github.com/victorjonsson/jQuery-Form-Validator
AngularJS 本身有提供表单验证的功能
jquery-validation
jquery-validation
semantic-ui 自带表单验证
Sublime Text is a sophisticated text editor for code, markup and prose.
You'll love the slick user interface, extraordinary features and amazing performance.
Jetbrains WebStorm(The smartest JavaScript IDE)
WebStorm is a lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.
由于默认情况下(服务器没有设置 expire header 为 -1 或 0) WebView 会缓存静态文件,如果没有更新静态文件的版本,会导致网站做了更新,而用户实际上仍在使用旧的文件。
静态资源版本更新与缓存
http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1
使用 FIS 工具解决
FIS (百度开源)
http://fis.baidu.com/
FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架。可以实现静态文件压缩、合并、为文件名添加版本 md5 Hash。
Fiddler(抓包工具,需要借助 wi-fi 热点分享)
在前端开发中,经常作为反向代理服务器,用来在自己的开发电脑上,模拟生产环境,通过资源重定向和反向代理,可以同时访问部署在其他服务器上的接口或网站,以及自己电脑上正在开发的网页。
http://nginx.org/en/download.html
nginx 配置的一个例子
Test and share JavaScript, CSS, HTML or CoffeeScript online.
在线即时展现 Html、JS、CSS 的编辑工具,可以有效的帮助 web 前端开发人员来有效分享和演示前端效果。
https://jsfiddle.net/
CSS3 HTML5 兼容性查询
查询 HTML5 和 CSS3 语法兼容性
http://caniuse.com/
http://mobilehtml5.org/
CSS 语法手册
http://tympanus.net/codrops/css_reference/
codeschool
codeacademy
Requirejs
Seajs (淘宝开源)
使用 CDN,常用的库一般会有 CDN 地址,也可以将自己的一些静态文件放在七牛上,七牛有免费的额度。
小图片转成 base64,减少 HTTP 请求
css,js 文件压缩,启用GZip(HTTP服务器已开启 gzip)
服务器开启静态文件缓存,发布新版本时,需要对文件名加md5戳,使用 fis 工具(html 文件强制不缓存)。
大量的图片显示,可以使用 Canvas 画图,而不用 img 标签,Canvas 有硬件加速
无阻塞,写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾。
网页的渲染不支持硬件加速,dom很多很大的时候会很卡,Facebook 曾经就是因为这个原因放弃了html5,但现在又推出了一个 react js
javascript 单线程,不要执行太复杂的任务,否则会导致页面卡住。
动画优化,尽量使用CSS3动画
HTML5 的 Manifest 和 localstorage,在本地缓存文件和数据。
https://github.com/AlloyTeam/Mars
alloyteam 移动开发规范概述
http://alloyteam.github.io/Spirit/modules/Standard/index.html#overview
移动H5前端性能优化指南
http://isux.tencent.com/h5-performance.html
静态资源管理与模板框架
http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2
HTML5中40个最重要的技术点
http://www.techug.com/40-important-html-5-interview-questions-with-answers
Webkit WebApp 开发技术要点总结
http://www.cnblogs.com/pifoo/archive/2011/05/28/webkit-webapp.html
HTML5 可以做什么
拍照获取地理位置
手势
canvas 绘图和动画(硬件加速)
localstorage,本地缓存
HTML5 动画效果 demo
http://fff.cmiscm.com/#!/main
CSS3 动画
http://isux.tencent.com/css3/index.html
http://beiyuu.com/css3-animation/
CSS3 实现的 Loading(加载)动画效果
基本的 HTML 文件结构
<!DOCTYPE HTML> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <title>标题</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- 设置初始缩放比例为1.0,使用设备宽度 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"> <!-- 在iOS下开启全屏模式 --> <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 隐藏 Sarafi 状态栏 --> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link href="/static/css/your_css.css" rel="stylesheet"/> </head> <body> <script src="/static/js/your_js.js"></script> </body> </html>
DOM 操作库
zepto.jsjQuery
1. jQuery 的目标是兼容所有主流浏览器,这就意味着它的大量代码对移动端的浏览器是无用或者低效的 2. Zepto是一个轻量级的针对现代高级浏览器的JavaScript库,只针对移动端浏览器编写,因此体积更小、效率更高,更重要的是,它的 API 完全仿照 jQuery,如果你会用jquery,那么你也会用zepto。 3. Zepto的设计目的是提供 jQuery 的类似的API,但并不是100%覆盖 jQuery 。Zepto设计的目的是有一个5-10k的通用库(目前最新版,gzip 压缩后只有 9.1k)、下载并快速执行、有一个熟悉通用的API,所以你能把你主要的精力放到应用开发上。
todo:zepto 与 jQuery 冲突问题
很多插件是基于jQuery 的,如果想要使用这些插件,又引入了 jQuery 将引起冲突,而且这时候 zepto 就没有引入的意义,但是有些框架又是基于 zepto,例如 frozenui。
UI 框架
frozenui(腾讯开源) 腾讯手 Q 风格Amaze ~ 妹子 UI(国内开源)
jQuery.mmenu iOS 风格的菜单
bootstrap
bootstrap UI 组件
semantic-ui
ratchet
jquery mobile
字体图标
Font Awesome矢量,颜色大小可以自定义
自定义图标字体
http://fontello.com/
有时只需要使用到一部分的图标,可以通过自定义的方式来减小图标字体文件的大小。
HTML 模板引擎
AngularJS(Google 开源)
场景,需要要动态创建列表数据的时候没有 AngularJS 之前,用 js 拼接出 HTML 字符串
function render_order_data(data) { var obj_item_list = $('#item-list'); for (var i = 0; i < data.length; i++) { var arr = []; var d = data[i]; arr.push('<li class="ui-border-t">'); arr.push('<div class="item"><div><div>工单流水号</div><div>'); arr.push(d['id']); arr.push('</div></div><div><div>工单标题</div><div>'); arr.push(d['title']); arr.push('</div></div><div><div>申请时间</div><div>'); arr.push(d['createtime']); arr.push('</div></div><div><div>商铺关键字</div><div>'); arr.push(d['shop_name']); arr.push('</div></div><div><div>覆盖范围</div><div>'); arr.push(d['shop_lengths']); arr.push('</div></li>'); obj_item_list.append(arr.join('')); } }
有了 AngularJS 之后,利用 AngularJS 的数据绑定,直接写 HTML 模板,清晰易懂
<tr ng-repeat="entry in entries"> <td ng-bind="page_info.offset + $index+1"></td> <td ng-bind="entry.status"></td> <td ng-bind="entry.elapsed + 'ms'"></td> <td ng-bind="entry.code"></td> <td ng-bind="entry.time"></td> <td> <span ng-bind="entry.result ? 'Success' : 'Failure'" class="label {{ entry.result ? 'label-success' : 'label-danger' }}">Success</span> </td> </tr>
AngularJS 学习资源
幕客网
http://angularjs.cn/T008
http://checkcheckzz.gitbooks.io/angularjs-learning-notes/content/index.html
表单验证
HTML5 表单验证已经很强大,但是目前在 iOS 8 上面的浏览器仍然是不支持的,Android要 4.4 以上才支持。boostrap 表单验证
Bootstrap Validator
http://1000hz.github.io/bootstrap-validator/
HAPPY.JS
Lightweight form validation for jQuery or Zepto.js
http://happyjs.com/
jQuery Form Validator
https://github.com/victorjonsson/jQuery-Form-Validator
AngularJS 本身有提供表单验证的功能
jquery-validation
jquery-validation
semantic-ui 自带表单验证
开发模式
前后端分离,接口开发与 HTML,CSS,JS 这些前端开发分离。相关工具
IDE
Sublime TextSublime Text is a sophisticated text editor for code, markup and prose.
You'll love the slick user interface, extraordinary features and amazing performance.
Jetbrains WebStorm(The smartest JavaScript IDE)
WebStorm is a lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js.
前端工具
静态文件缓存问题(重要)由于默认情况下(服务器没有设置 expire header 为 -1 或 0) WebView 会缓存静态文件,如果没有更新静态文件的版本,会导致网站做了更新,而用户实际上仍在使用旧的文件。
静态资源版本更新与缓存
http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1
使用 FIS 工具解决
FIS (百度开源)
http://fis.baidu.com/
FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架。可以实现静态文件压缩、合并、为文件名添加版本 md5 Hash。
调试工具
Chrome (Android iOS 都是 Webkit 内核)Fiddler(抓包工具,需要借助 wi-fi 热点分享)
HTTP 服务器 Nginx
Nginx是一款面向性能设计的HTTP服务器,相较于Apache、lighttpd具有占有内存少,稳定性高等优势。在前端开发中,经常作为反向代理服务器,用来在自己的开发电脑上,模拟生产环境,通过资源重定向和反向代理,可以同时访问部署在其他服务器上的接口或网站,以及自己电脑上正在开发的网页。
http://nginx.org/en/download.html
nginx 配置的一个例子
server { listen *:5005; access_log logs/my_site_access.log; error_log logs/my_site_error.log; # 不缓存 expires 0; # add_header Cache-Control private; #location ~* \.html$ { # expires -1; #} location / { ssi on; autoindex on; # / 前缀的请求,定位到html目录下 root "D:/WebStorm/my_site/html"; index index.html index.htm; } # /static 前缀的 uri 请求,定位到这个目录 location /static { alias "D:/WebStorm/my_site/static"; } # /@api_my_site 前缀的 uri,反向代理到 http://192.168.14.93:9999 # /@api_my_site 前缀的 uri 是 api_my_site 接口请求地址 location /@api_my_site { # 重写 uri,原本的 uri 是 /@api_my_site/... # 可以去掉前缀 /@api_my_site/ # rewrite /@api_my_site/(.*) /$1 break; proxy_pass http://192.168.14.93:9999; proxy_set_header Cookie $http_cookie; } }
在线工具
jsfiddleTest and share JavaScript, CSS, HTML or CoffeeScript online.
在线即时展现 Html、JS、CSS 的编辑工具,可以有效的帮助 web 前端开发人员来有效分享和演示前端效果。
https://jsfiddle.net/
CSS3 HTML5 兼容性查询
查询 HTML5 和 CSS3 语法兼容性
http://caniuse.com/
http://mobilehtml5.org/
CSS 语法手册
http://tympanus.net/codrops/css_reference/
书
CSS设计指南(第3版)(文字版)在线学习资源
慕课网codeschool
codeacademy
JS 模块化加载
前端模块化开发的价值Requirejs
Seajs (淘宝开源)
常用组件
回到页首性能优化
移动网络的环境比较复杂,在调试的时候可以用 Chrome 模拟不同的网络环境,关注页面加载的数据量,和加载时间。使用 CDN,常用的库一般会有 CDN 地址,也可以将自己的一些静态文件放在七牛上,七牛有免费的额度。
小图片转成 base64,减少 HTTP 请求
css,js 文件压缩,启用GZip(HTTP服务器已开启 gzip)
服务器开启静态文件缓存,发布新版本时,需要对文件名加md5戳,使用 fis 工具(html 文件强制不缓存)。
大量的图片显示,可以使用 Canvas 画图,而不用 img 标签,Canvas 有硬件加速
无阻塞,写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾。
网页的渲染不支持硬件加速,dom很多很大的时候会很卡,Facebook 曾经就是因为这个原因放弃了html5,但现在又推出了一个 react js
javascript 单线程,不要执行太复杂的任务,否则会导致页面卡住。
动画优化,尽量使用CSS3动画
HTML5 的 Manifest 和 localstorage,在本地缓存文件和数据。
前端知识库
腾讯移动Web前端知识库 Marshttps://github.com/AlloyTeam/Mars
alloyteam 移动开发规范概述
http://alloyteam.github.io/Spirit/modules/Standard/index.html#overview
移动H5前端性能优化指南
http://isux.tencent.com/h5-performance.html
静态资源管理与模板框架
http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part2
HTML5中40个最重要的技术点
http://www.techug.com/40-important-html-5-interview-questions-with-answers
Webkit WebApp 开发技术要点总结
http://www.cnblogs.com/pifoo/archive/2011/05/28/webkit-webapp.html
相关文章推荐
- 移动端 Web 开发前端知识整理
- 前端开发知识整理--web综合篇
- 零基础学习web前端开发需要学习的前端知识
- 手机移动端web前端常见问题整理
- 前端开发整理(webAssembly)
- 移动端web页面前端开发总结
- web前端开发学习必备知识技能汇总
- web前端 —— 移动端知识的一些总结
- web前端开发必背知识
- Web前端,HTML5开发,前端资源,前端网址,前端博客,前端框架整理 - 转改
- 移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来。本文整理一些常用的meta标签
- Web前端开发基础知识--部分总结
- python开发学习-day15(前端部分知识、web框架、Django创建项目)
- 浅谈学习HTML5 Web前端开发知识体系划分
- WEB前端开发工具--整理
- web前端开发基础知识随笔
- 热门移动端H5开源前端开发框架搜集整理
- 整理六百篇web前端知识混总
- Web 前端开发学习资料整理
- 2018移动端h5项目分享|移动端HTML5+css3|web前端开发