正文 

当前位置： 首页 > java > java教程

移动端web开发前端知识整理

Leone Leone     2022-08-01     745

关键词：

文章来源： 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

 

web开发需要学习啥？

...段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术，动画、弹性盒模型设计。5.熟练完成移动端页面的设计。6.熟练运用所学知识仿制任意Web网站。7.能综... 查看详情

零基础学习前端开发要怎么开始

...段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术，动画、弹性盒模型设计。5.熟练完成移动端页面的设计。6.熟练运用所学知识仿制任意Web网站。7.能综... 查看详情

北京web前端培训机构，出来好找工作吗，需要学哪些内容？

...段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术，动画、弹性盒模型设计。5.熟练完成移动端页面的设计。6.熟练运用所学知识仿制任意Web网站。7.能综... 查看详情

学前端都学啥比较好？

...段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术，动画、弹性盒模型设计。5.熟练完成移动端页面的设计。6.熟练运用所学知识仿制任意Web网站。7.能综... 查看详情

前端开发必学的技术都有哪些？

...段目标：1.熟练掌握HTML5、CSS3、Less、Sass、响应书布局、移动端开发。2.熟练运用HTML+CSS特性完成页面布局。4.熟练应用CSS3技术，动画、弹性盒模型设计。5.熟练完成移动端页面的设计。6.熟练运用所学知识仿制任意Web网站。7.能综... 查看详情

学习web前端开发，需要掌握哪些知识

...t面向对象、JavaScriptDOM和BOM编程、jQuery框架阶段2.HTML5+CSS3+移动端核心HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练阶段3.移动端移动端核心、移动端适配、移动端特效阶段4.服务器端服务器端开发、数据库操作、前后... 查看详情

前端里移动端到底比pc端多哪些知识?

前端里移动端到底比pc端多哪些知识，为啥面试时好多公司都问h5水平如何？ 我做过几年的web前端开发，就简单谈谈自己的感受吧。首先来看看PC端和移动端在前端开发上的一些区别：（1）PC考虑的是浏览器兼容性，移动端开... 查看详情

前端技术栈都有哪些

...作与样式设计实现，能够配合UI设计师进行项目开发。2、移动端页面制作与响应式实现讲解移动端布局与设备适配、响应式设计与实现等，获得移动端页面适配工程师技能，主要进行移动端网页的布局制作与样式设计实现。可以... 查看详情

移动端web开发基础知识(代码片段)

文章目录移动端Web开发移动端基础浏览器视口样式编写分辨率和设备像素比二倍图SVG矢量图移动端Web开发移动Web开发的两种主流方案，一种是单独制作移动端页面，另一种是制作响应式页面移动端页面：单独制作移动... 查看详情

web前端，html5开发，前端资源，前端网址，前端博客，前端框架整理-转

Web前端/H5开发，前端资源，前端网址，前端博客，前端框架整理-转 综合类前端知识体系前端知识结构Web前端开发大系概览Web前端开发大系概览-中文版WebFront-endStackv2.2免费的编程中文书籍索引前端书籍前端免费书籍大全前端... 查看详情

（16-10-09）关于前端的一些基础知识

...览器来浏览和使用的。目前来说，页面主要涉及电脑端和移动端，主要针对Web的结构、行为和表现三个方面来进行开发，其中HTML负责Web的结构，CSS负责Web的表现，JavaScript负责Web的行为。Web前端开发技术是一个先易后难的过程，... 查看详情

前端里移动端到底比pc端多哪些知识，为啥面试时好多公司都问h5

...b前端开发，就简单谈谈自己的感受吧。首先来看看PC端和移动端在前端开发上的一些区别：（1）PC考虑的是浏览器兼容性，移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器用的都是webki... 查看详情

热门移动端h5开源前端开发框架搜集整理

...：这里蚂蚁金服出的一款框架，提供了桌面版和移动版两大块。移动版的首页是：https://mobile.ant.design/index-cn。应用者：蚂蚁金服、阿里巴巴、口碑、滴滴Framework7官网：framework7.taobao.org介绍：出处看官网 查看详情

前端开发和后端开发的区别？

...要有以下三大部分：【Web前端开发】：PC端开发任务。【移动端开发】：包括Android开发、iOS开发和各种小程序开发。【大数据呈现端开发】：主要是基于已有的平台完成最终分析结果的呈现，呈现方式通常也有多种选择，比如大... 查看详情

web前端之移动端课程开发之06.bootstrap(代码片段)

...平板手机端栅格布局完整的类库jQuery插件不同的使用场景移动设备优先Bootstrap3 查看详情

web前端之移动端课程开发之06.bootstrap(代码片段)

...平板手机端栅格布局完整的类库jQuery插件不同的使用场景移动设备优先Bootstrap3 查看详情

如何学习web前端开发？

...t面向对象、JavaScriptDOM和BOM编程、jQuery框架阶段2.HTML5+CSS3+移动端核心HTML5新特性、Canvas专列、CSS3新特性、CSS3进阶、CSS3实例演练阶段3.移动端移动端核心、移动端适配、移动端特效阶段4.服务器端服务器端开发、数据库操作、前后... 查看详情

零基础，如何自学前端？

...变换•CSS3animation动画•H5C3炫酷页面开发•Flex伸缩布局•移动端主流适配方案•常见移动端样式兼容方案•预处理器Less第二阶段：核心知识点•JavaScript语言基础•BOM操作大全•DOM操作大全•封装动画函数•JavaScript高级•正则表... 查看详情