文章来源： 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 模拟不同的网络环境，关注页面加载的数据量，和加载时间。

  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

移动端 Web 开发前端知识整理的更多相关文章

  1. web开发前端面试知识点目录整理

    web开发前端面试知识点目录整理 基本功考察 关于Html 1. html语义化标签的理解; 结构化的理解; 能否写出简洁的html结构; SEO优化 2. h5中新增的属性; 如自定义属性data, ...

  2. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  3. 【前端】移动端Web开发学习笔记【1】

    下一篇:移动端Web开发学习笔记[2] Part 1: 两篇重要的博客 有两篇翻译过来的博客值得一看: 两个viewport的故事(第一部分) 两个viewport的故事(第二部分) 这两篇博客探讨了 ...

  4. 移动端web开发的一些知识点

    整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...

  5. .NET Web开发技术简单整理 转

    .NET Web开发技术简单整理 原文:http://www.cnblogs.com/SanMaoSpace/p/3157293.html 在最初学习一些编程语言.一些编程技术的时候,做的更多的是如何 ...

  6. 移动端web开发基础概念

    最近在了解移动端web开发的相关知识,有些概念总是模糊不清,这次花费了一些时间整体的梳理了一遍. 分辨率 分辨率可以从显示分辨率与图像分辨率两个方向来分类.显示分辨率(屏幕分辨率)是屏幕图像的精密度, ...

  7. 关于web开发前端h5框架的选择

    关于web开发前端h5框架的选择 看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...

  8. 移动端web开发技巧（转）

    原文链接:http://liujinkai.com/2015/06/06/mobile-web-skill/ 移动端web开发技巧 这是一个最好的时代,因为我们站在潮流中:但也是一个最坏的时代,因为我 ...

  9. 安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

    一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调 ...

随机推荐

  1. 15－static和extern关键字1-对函数的作用

    一.extern与函数 如果一个程序中有多个源文件(.c),编译成功会生成对应的多个目标文件(.obj),这些目标文件还不能单独运行,因为这些目标文件之间可能会有关联,比如a.obj可能会调用c.ob ...

  2. Highchart基础教程－图表的主要组成

    一.Highchar图表的主要组成 1.图表标题(Title):图表包含标题和副表题(subTitle,可选). 2.坐标轴(Axis):包括x轴(xAxis)和y轴(yAxis).多个数据列可以共同 ...

  3. Lambda表达式的诞生过程

    这是一篇很经典的文章,解决了工作中一些使用过但是又不太明白的知识点,今天终于弄明白了.花了一晚上重新整的,坚决要分享出来!!! 那得从很久很久以前说起了,记得那个时候... 懵懂的记得从前有个叫委托的 ...

  4. Windows API 函数列表 附帮助手册

    所有Windows API函数列表,为了方便查询,也为了大家查找,所以整理一下贡献出来了. 帮助手册:700多个Windows API的函数手册 免费下载 API之网络函数 API之消息函数 API之 ...

  5. qt中ui的 使用介绍

    1.什么是ui?ui通常是用Qt 设计师设计出来的界面文件的后缀.通常情况下ui是一个指向这个界面类的指针.ui-> 一般就是用来访问这个界面类里面的控件.例如你的ui文件里有一个叫okButt ...

  6. 同步降压DC-DC转换IC——XC9264

    设计一个12V转3.3V,输出电流30mA的电源电路,由于项目对转化效率要求较高,所以不能采用低压差线性稳压LDO的方案.经过对比,TOREX的XC9264效率在此转化条件下效率可做到85%以上,比M ...

  7. java 多线程 Synchronized方法和方法块 synchronized(this)和synchronized(object)的理解

    synchronized 关键字,它包括两种用法:synchronized 方法和 synchronized 块. 1. synchronized 方法:通过在方法声明中加入 synchronized ...

  8. 用字体在网页中画Icon图标

    第一步,下载.IcoMoon网站选择字体图标并下载,解压后将fonts文件夹放在工程目录下.fonts文件夹内有四种格式的字体文件: 注:由于浏览器对每种字体的支持程度不一致,要想在所有浏览器中都显示 ...

  9. 学习python函数笔记之一

    1.函数文档字符串,用于存放函数的说明,一般写在第一行 2.函数调用:函数名+参数列表(函数的参数分实际参数和形式参数,str就是形式参数,则'welcome 头 python'就是实际参数) 参数需 ...

  10. 【codevs1106】 篝火晚会

    http://codevs.cn/problem/1106/ (题目链接) 题意 将1~n顺序排列的环改成另一个环,问n-不动点数. Solution 啊智障啦,不会做×＿× 左转hzwer 代码 / ...