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

時間 2019-11-06

標籤移動 web 開發前端知識整理欄目無線简体版

原文原文鏈接

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

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

HTML5 能夠作什麼

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

HTML5 動畫效果 demohtml

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

CSS3 動畫html5

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

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

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

基本的 HTML 文件結構css3

<!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.jsnginx

jQuery

jQuery 的目標是兼容全部主流瀏覽器，這就意味着它的大量代碼對移動端的瀏覽器是無用或者低效的

Zepto是一個輕量級的針對現代高級瀏覽器的JavaScript庫，只針對移動端瀏覽器編寫，所以體積更小、效率更高，更重要的是，它的 API 徹底仿照 jQuery，若是你會用jquery，那麼你也會用zepto。

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 學習資源

表單驗證

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 配置的一個例子

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 （淘寶開源）

經常使用組件

回到頁首

性能優化

移動網絡的環境比較複雜，在調試的時候能夠用 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，在本地緩存文件和數據。