文章来源： 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. 会议管理心得记录（非markdown版）

    前提 本文说的会议特指有开发团队成员参与的会议, 包括但不限于开发.设计.测试.运维.管理岗位的成员. 因为不同工种和行业都有其特殊性,我是一名程序员,并不太了解其他工种和行业的具体情况,不敢妄言. ...

  2. mysql数据类型

    一.数值类型 Mysql支持所有标准SQL中的数值类型,其中包括严格数据类型(INTEGER,SMALLINT,DECIMAL,NUMBERIC),以及近似数值数据类型(FLOAT,REAL,DOUB ...

  3. Mysql常用函数，难点，注意

    一.数学函数 ABS(x)   返回x的绝对值 BIN(x)   返回x的二进制(OCT返回八进制,HEX返回十六进制) CEILING(x)   返回大于x的最小整数值 EXP(x)   返回值e( ...

  4. zabbix完整安装

    一.nginx安装 1.必要软件准备: 为了支持rewrite功能,我们需要安装pcre: yum install pcre-* 需要ssl的支持,如果不需要ssl支持,请跳过这一步: yum ins ...

  5. MPI-2 并行IO的使用方法

    写的MPI程序需要用到并行IO来操作文件,但是搜遍了度娘都没有找到多少关于并行IO函数的使用方法.最后在知网搜到了一些有用的论文,看了一下,感觉豁然开朗. MPI-1对文件的操作是使用绑定语言的函数调 ...

  6. x01.MagicCube: 简单操作

    看最强大脑,发现魔方还是比较好玩的,便买了一个,对照七步还原法,居然也能成功还原. 为什么不写一个魔方程序呢?在网上找了找,略作修改,进行简单操作,还是不错的,其操作代码如下: protected o ...

  7. springMVC注解初步

    一.(补充)视图解析器---XmlViewResolver 作用:分离配置信息. 在视图解析器---BeanNameViewResolver的基础之上进行扩充,新建一个myView.xml分离信息 在 ...

  8. AC日记——丑数 codevs 1246

    1246 丑数 USACO  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 对于一给定的素 ...

  9. [No00008D]腾讯通RTX联系方式批量获取

    公司用的RTX让我一直很不爽,QQ比RTX好多少为啥不让用,微信都有企业版了为啥还用腾讯通?终于今天发现唯一的好处是可以从服务器上拉公司妹子们的联系方式!!当然,我要这些联系方式,只是为了联tiao系 ...

  10. [LeetCode] Power of Three 判断3的次方数

    Given an integer, write a function to determine if it is a power of three. Follow up:Could you do it ...