移动端 Web 开发前端知识整理-白红宇

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

阅读量：6088 次

发布时间：2019-06-20

本文共 4743 字，大约阅读时间需要 15 分钟。

文章来源：

最近整理的移动端 Web 开发前端知识，不定期更新。

HTML5 可以做什么

拍照

获取地理位置

手势

canvas 绘图和动画(硬件加速)

localstorage，本地缓存

HTML5 动画效果 demo

CSS3 动画

基本的 HTML 文件结构

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

   
         标题

DOM 操作库

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 框架

腾讯手 Q 风格

iOS 风格的菜单

字体图标

矢量，颜色大小可以自定义

自定义图标字体

有时只需要使用到一部分的图标，可以通过自定义的方式来减小图标字体文件的大小。

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(''); arr.push('
         
          
           
            工单流水号
           
           
            '); arr.push(d['id']); arr.push('
           
          
          
           
            工单标题
           
           
            '); arr.push(d['title']); arr.push('
           
          
          
           
            申请时间
           
           
            '); arr.push(d['createtime']); arr.push('
           
          
          
           
            商铺关键字
           
           
            '); arr.push(d['shop_name']); arr.push('
           
          
          
           
            覆盖范围
           
           
            '); arr.push(d['shop_lengths']); arr.push('
           
          
         
'); obj_item_list.append(arr.join('')); } }

有了 AngularJS 之后，利用 AngularJS 的数据绑定，直接写 HTML 模板，清晰易懂

1 2 3 4 5 6 7 8 9 10 11

       Success

AngularJS 学习资源

幕客网

表单验证

HTML5 表单验证已经很强大，但是目前在 iOS 8 上面的浏览器仍然是不支持的，Android要 4.4 以上才支持。

boostrap 表单验证

Bootstrap Validator

HAPPY.JS

Lightweight form validation for jQuery or Zepto.js

jQuery Form Validator

AngularJS 本身有提供表单验证的功能

jquery-validation

semantic-ui 自带表单验证

开发模式

前后端分离，接口开发与 HTML，CSS，JS 这些前端开发分离。

相关工具

IDE

Sublime Text is a sophisticated text editor for code, markup and prose.
You’ll love the slick user interface, extraordinary features and amazing performance.

（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 会缓存静态文件，如果没有更新静态文件的版本，会导致网站做了更新，而用户实际上仍在使用旧的文件。

静态资源版本更新与缓存

使用 FIS 工具解决

FIS （百度开源）

FIS是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架。可以实现静态文件压缩、合并、为文件名添加版本 md5 Hash。

调试工具

Chrome （Android iOS 都是 Webkit 内核）

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

HTTP 服务器 Nginx

Nginx是一款面向性能设计的HTTP服务器，相较于Apache、lighttpd具有占有内存少，稳定性高等优势。

在前端开发中，经常作为反向代理服务器，用来在自己的开发电脑上，模拟生产环境，通过资源重定向和反向代理，可以同时访问部署在其他服务器上的接口或网站，以及自己电脑上正在开发的网页。

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; } }