碼上歡樂
相關內容    簡體    繁體

移動端 Web 開發前端知識整理

本文轉載自   查看原文   2016-08-27 17:47   11195    大前端/ 移動端

文章來源： http://www.restran.net/2015/05/14/mobile-web-front-end-collections/

 

最近整理的移動端 Web 開發前端知識，不定期更新。

HTML5 可以做什么

  1. 拍照
  2. 獲取地理位置
  3. 手勢
  4. canvas 繪圖和動畫(硬件加速)
  5. localstorage，本地緩存

HTML5 動畫效果 demo

http://fff.cmiscm.com/#!/main

CSS3 動畫

http://isux.tencent.com/css3/index.html

http://beiyuu.com/css3-animation/

CSS3 實現的 Loading（加載）動畫效果

基本的 HTML 文件結構

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!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.js

jQuery

  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

semantic-ui

ratchet

jquery mobile

字體圖標

Font Awesome

矢量，顏色大小可以自定義

自定義圖標字體

http://fontello.com/

有時只需要使用到一部分的圖標，可以通過自定義的方式來減小圖標字體文件的大小。

HTML 模板引擎

AngularJS（Google 開源）

場景，需要要動態創建列表數據的時候

沒有 AngularJS 之前，用 js 拼接出 HTML 字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
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 模板，清晰易懂

1
2
3
4
5
6
7
8
9
10
11
 
<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 學習資源

表單驗證

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 Text

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。

調試工具

Chrome （Android iOS 都是 Webkit 內核）

Fiddler（抓包工具，需要借助 wi-fi 熱點分享）

HTTP 服務器 Nginx

Nginx是一款面向性能設計的HTTP服務器，相較於Apache、lighttpd具有占有內存少，穩定性高等優勢。

在前端開發中，經常作為反向代理服務器，用來在自己的開發電腦上，模擬生產環境，通過資源重定向和反向代理，可以同時訪問部署在其他服務器上的接口或網站，以及自己電腦上正在開發的網頁。

http://nginx.org/en/download.html

nginx 配置的一個例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
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;
 }
}

在線工具

jsfiddle

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/

書

CSS設計指南（第3版）（文字版）

在線學習資源

慕課網

codeschool

codeacademy

JS 模塊化加載

前端模塊化開發的價值

Requirejs

Seajs （淘寶開源）

常用組件

回到頁首

性能優化

  1. 移動網絡的環境比較復雜，在調試的時候可以用 Chrome 模擬不同的網絡環境，關注頁面加載的數據量，和加載時間。

http://oxygen.qiniudn.com/img2015051433.png

  1. 使用 CDN，常用的庫一般會有 CDN 地址，也可以將自己的一些靜態文件放在七牛上，七牛有免費的額度。
  2. 小圖片轉成 base64，減少 HTTP 請求
  3. css，js 文件壓縮，啟用GZip（HTTP服務器已開啟 gzip）
  4. 服務器開啟靜態文件緩存，發布新版本時，需要對文件名加md5戳，使用 fis 工具（html 文件強制不緩存）。
  5. 大量的圖片顯示，可以使用 Canvas 畫圖，而不用 img 標簽，Canvas 有硬件加速
  6. 無阻塞，寫在HTML頭部的JavaScript（無異步），和寫在HTML標簽中的Style會阻塞頁面的渲染，因此CSS放在頁面頭部並使用Link方式引入，避免在HTML標簽中寫Style，JavaScript放在頁面尾。
  7. 網頁的渲染不支持硬件加速，dom很多很大的時候會很卡，Facebook 曾經就是因為這個原因放棄了html5，但現在又推出了一個 react js
  8. javascript 單線程，不要執行太復雜的任務，否則會導致頁面卡住。

  9. 動畫優化，盡量使用CSS3動畫

  10. HTML5 的 Manifest 和 localstorage，在本地緩存文件和數據。

前端知識庫

騰訊移動Web前端知識庫 Mars

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

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 移動端web前端開發 移動端web開發的一些知識點 PC端和移動端在前端開發上的一些區別，前端里移動端到底比pc端多哪些知識 ▲移動web前端開發 web前端開發之移動端真機調試 移動端前端開發調試 移動前端開發和 Web 前端開發的區別 web移動端布局方式整理 移動端web開發框架 移動端Web開發之我見
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM