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

日期：2021-12-15 栏目：程序人生浏览：次

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

HTML5 可以做什么

拍照

获取地理位置

手势

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

localstorage，本地缓存

HTML5 动画效果 demo

CSS3 动画

CSS3 实现的 Loading（加载）动画效果

基本的 HTML 文件结构

<!DOCTYPE HTML> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <title>标题</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">  <meta content="yes">  <meta content="black"> <link href="http://www.likecs.com/static/css/your_css.css"/> </head> <body> <script src="http://www.likecs.com/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

bootstrap UI 组件

semantic-ui

ratchet

jquery mobile

字体图标

Font Awesome

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

自定义图标字体

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

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>\'); arr.push(\'<div><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\'">Success</span> </td> </tr>

AngularJS 学习资源

幕客网

表单验证

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

boostrap 表单验证

Bootstrap Validator

HAPPY.JS

Lightweight form validation for jQuery or Zepto.js

jQuery Form Validator

https://github.com/victorjonsson/jQuery-Form-Validator

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

jquery-validation

jquery-validation

semantic-ui 自带表单验证

开发模式

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

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

相关推荐