MIP手势介绍 MIP手势有哪些
MIP封装了单击,双击,滑动等手势,可在组件中使用
示例
var util = require('util'); var Gesture = util.Gesture; var customEle = require('customElemenet').create(); var build = function () { var gesture = new Gesture(this.element); // on 可接受多个事件名做为参数,以空格分隔。如 gesture.on('tap swipe') gesture.on('tap', function (event, data) { // 原始事件。如tap事件是通过 touchend 触发,event为tap对应的touchend事件对象 console.log(event); // gesture 计算后的数据。参数介绍见后面 console.log(data.type); // "tap" }); }; |
初始化参数介绍
gesture 实例化时第二个参数可以传一个object做为配置参数
示例:
// 默认阻止纵向滑动事件 var gesture = new Gesture(element, { preventY: true }); |
具体参数介绍:
preventDefault |
是否阻止默认事件 |
preventX |
是否阻止横向滑动时的默认事件 |
preventY |
是否阻止纵向滑动时的默认事件 |
stopPropagation |
是否阻止事件冒泡 |
默认参数:
// 如果初始化时不传入配置参数,会使用下面的配置进行初始化 { preventDefault: false, stopPropagation: false, // 默认会阻止横滑的事件,考虑到浏览器横滑有很多默认操作,所以在这里默认阻止横滑 preventX: true, preventY: false } |
gesture 数据对象介绍
数据对象做为事件处理函数的第二个参数传入。
示例:
gesture.on('tap', function (event, data) { console.log(data); }); |
通用字段:
angle |
滑动角度,如横滑为0度 |
deltaTime |
从开始到结束的时间间隔。单位是ms |
deltaX |
横轴位移 |
deltaY |
纵轴位移 |
direction |
方向。0: 未变动 1: 上 2:右 3: 下 4: 左 |
distance |
移动距离 |
pointers |
触摸点 |
timeStamp |
事件发生的时间戳 |
velocity |
速度 |
velocityX |
横向速度 |
velocityY |
纵向速度 |
x |
触摸中心点坐标x |
y |
触摸中心点坐标y |
type | 事件类型 |
扩展字段:
各手势可以向数据对象中扩展字段。如 swipe 事件中的 swipeDirection 字段,具体请看手势识别器介绍
手势识别器
手势识别器可以接收 gesture 数据对象,并识别出具体手势,触发具体的手势事件。
手势识别器对象在用户绑定事件时自动创建,在用户解绑事件时自动销毁。
目前有三种内置识别器:tap、dobuletap、swipe
tap
使用方法:
doubletap
双击,如果同时绑定tap和doubletap,tap事件会延迟300ms触发以判断是否触发双击。
使用方法:
gesture.on('tap', function (event, data) { console.log('单击'); }); |
gesture.on('tap', function (event, data) { console.log('双击'); }); |
swipe
滑动
使用方法:
// 使用方法1: gesture.on('swipe', function (event, data) { console.log(data.type); // "swipe" console.log(data.swipeDirection); // "up" or "right" or "down" or "left" }); // 使用方法2: gesture.on('swipeup swipedown', function (event, data) { console.log(data.type) // "swipeup" or "swipedown" console.log(data.swipeDirection) // "up" or "down" }); |
1、替代 jquery、zepto
mip 不推荐使用 jquery 和 zepto。
为什么不推荐?
1、原生JS已经足够好用
2、jquery、zepto 性能相对于原生JS比较差
3、减少页面负担,不必引入额外的文件
没有jquery&zepto的情况下如何开发?
请参见后面的帮助,大部分都可以用原生JS替代,mip也提供了一些内置组件以解决兼容问题。
选择器推荐:
querySelector
querySelectorAll
// 全局
// jquery
$('selector');
// native
document.querySelectorAll('selector');
// 局部
varelement =document.getElementById('xxx');
// jquery
$('selector', element);
// native
element.querySelectorAll('selector');
// 另外原生也支持
element.getElementsByClassName
element.getElementById
element.getElementsByTagName
attr & data
//attr
//jquery
$element.attr('test');
$element.attr('test','123');
//native
element.getAttribute('test');
element.setAttribute('test','1');
element.hasAttribute('test');
//data
//jquery
$element.data('test');
$element.data('test','1');
//native
element.dataset['test'];
element.dataset['test'] ='1';
dom
var util =require('util');
// previousElement
// jquery
$element.prev();
// native
element.previousElementSibling;
// nextElement
// jquery$element.next();
// native
element.nextElementSibling;
// closest
// jquery
$element.closest(selector);
// mip
util.dom.closest(element, selector);
// contains
// jquery
jQuery.contains(parent, child);
// mip
util.dom.contains(parent, child);
// matches(判断element与selector是否匹配)
// mip
util.dom.matches(document.body,'body');
// true
// 其它常规操作
// native
element.appendChild
element.insertBefore
element.removeChild
element.innerHTML
element.textContent
css
// jquery
$element.css('display','none');
// mip
varutil =require('util');
util.css(element,'display','none');
util.css(element, {
left:100,
top:200
});
var arr = [element, element1, element2];
util.css(arr,'display','none');
class
// add
// jquery
$element.addClass('test');
// native
element.classList.add('test');
// remove
// jquery
$element.removeClass('test');
// native
element.classList.remove('test');
// has// jquery$element.hasClass('test');
// nativeelement.classList.contains('test');
// toggle
// jquery
$element.toggleClass('test');
// native
element.classList.toggle('test');
position&width&height
// position
// jquery
$element.position();
// native
element.offsetLeft
element.offsetTop
// offset
// jquery
$element.offset();
// mip
var util = require('util');
util.rect.getElementOffset(element);
ajax
异步请求使用 fetch 和 fetch-jsonp
fetch
fetch-jsonp
// get
fetch(location.href).then(function(res){
returnres.text();
}).then(function(text){
fetchElement.innerHTML ='fetch: '+ (text.search('mip-test') !==-1);
});
// jsonp
var fetchJsonp = require('fetch-jsonp');
fetchJsonp('xxx', {
jsonpCallback:' cb'
}).then(function (res) {
return res.json();
}).then(function (data) {
console.log(data);
});
event
// on、bind
// jquery
$element.on('click', fn);
// native
element.addEventListener('click', fn,false);
// off、unbind
// jquery
$element.off('click', fn);
// native
element.removeEventListener('click', fn);
// delegate
// jquery
$element.delegate(selector,'click', fn);
// mip
var util = require('util');
var undelegate = util.event.delegate(element, selector,'click', fn);
// mip
undelegateundelegate();
// trigger
// jquery
$element.trigger('click');
// native
var event= document.createEvent('MouseEvents');
event.initEvent('click',true,true);
element.dispatchEvent(event);
// mip
var util = require('util');
element.dispatchEvent(event, util.event.create('click', data));
util
varutil =require('util');
// extend
// jquery$.extend(a, b);
$.extend(true, a, b);
// mip
util.fn.extend(a, b);
util.fn.extend(true, a, b);
// isPlainObject
// jquery$.isPlainObject(obj);
// mip
util.fn.isPlainObject(obj);
// isArray
// jquery
$.isArray(obj);
// native
Array.isArray(obj);
// trim
// jquery
$.trim(str);
// native
str.trim();
浏览器判断
var util = require('util');
var platform= util.platform;
// IOS
platform.isIos();
// Safari
platform.isSafari();
// Chrome
platform.isChrome();
// Uc
platform.isUc();
// webkit
platform.isWebkit();
2、viewport 帮助
viewport 提供了视图相关的功能。
为什么要使用viewport?
1、提供一些视图相关的扩展功能
2、当页面被嵌入到iframe中,滚动以及页面相关的计算有一些bug
使用方式
var viewport =require('viewport');
// 获取 scrollTop
varscrollTop = viewport.getScrollTop();
// 设置 scrollTop
viewport.setScrollTop(20);
// 获取页面可视宽度
viewport.getWidth();
// 获取页面可视高度
viewport.getHeight();
// 获取页面实际宽度
viewport.getScrollwidth();
// 获取页面实际高度
viewport.getScrollHeight();
// 获取页面
Rectviewport.getRect();
// 页面 scroll 事件
viewport.on('scroll',function(){
// code
});
// 页面 changed 事件
// 当页面滚动结束,或者滚动速度比较低时,会触发 changed 事件
viewport.on('changed',function(){
// code
});
3、引入jquery or zepto
考虑到 jquery 和 zepto 有一定需求。 所以mip也为使用它们提供了异步引入的方式。
引入方式:
define(function(require){
var $ = require('jquery');
// or
var $ = require('zepto');
});
百度MIP-Cache给所有符合规范的MIP页面提供cache服务,能够主动的提高页面加载速度,为使用 MIP-Cache 服务的页面上的图片、CSS文件等资源提供缓存服务,这样能做到所有HTTP请求来自于同源,能够加速加载速度。使用方法
在开发页面时,无需对 MIP Cache 进行额外关注,只要保证MIP页面、图片等资源是允许MIP cache的UA(baidumip, baidumib)抓取即可。
在引用图片等静态资源时,无论是否支持https,直接引用本站服务器上的图片即可。
如使用:<mip-img src="http://filesimg.111cn.net/2016/12/16/20161216114316209.png">。
MIP-Cache 生效流程
在 MIP 页被爬虫抓取后,会自动对静态资源的进行缓存,并且替换页面中的静态资源引用地址为缓存地址。搜索结果页会优先跳转到MIP-Cache url,在MIP-Cache缓存到期时进行一次回源,访问原页面 URL 并重新缓存。
缓存后的页面都是https的,安全性更高。
了解MIP cache的url规则
url规则和下列情况有关:
内容类型:图片、MIP页面等,图片使用'/i',其他使用'/c'协议类型:使用TLS,https的增加'/s',http的不加
例如:
1、网页地址或css、js https资源:
originalUrl:https://www.mipengine.org/
cdnMipUrl:https://mipcache.bdstatic.com/c/s/www.mipengine.org
http资源:
originalUrl:http://m.example.com/
cdnMipUrl:https://mipcache.bdstatic.com/c/m.example.org
2、图片 https资源:
originalUrl:https://www.mipengine.org/static/img/banner_wise_3f04050.jpg
cdnMipUrl:https://mipcache.bdstatic.com/i/s/www.mipengine.org/static/img/banner_wise_3f04050.jpg
http资源:
originalUrl:http://www.sinaimg.cn/dy/slidenews/1_img/2016_25/2841_703424_763161.jpg
cdnMipUrl:https://mipcache.bdstatic.com/i/www.sinaimg.cn/dy/slidenews/1_img/2016_25/2841_703424_763161.jpg
页面编码要求
强制使用UTF-8编码
MIP Cache 更新机制
1、MIP Cache 常规更新机制
MIP Cache 常规更新机制也是页面最常规,最常用的更新机制。目前页面更新周期52分钟,当用户访问 MIP 页面时,如果页面缓存已经超时,MIP Cache 会将当前页面返回给用户;与此同时,异步的发起一个请求,去更新 MIP Cache 中存储的页面。这样,后续访问这个页面的用户将会看到更新后的页面。目前,线上页面更新的平均时间(可以理解为有点击的间隔时间)为1天左右。目前抓取限制比较多的站点,更新的时效性无法保证,也请相关站长保证自己网站,服务的稳定性。
2、MIP Cache 快速更新机制
考虑到一些特殊情况,需要尽快更新 MIP Cache 中的页面。比如线上 BUG 紧急修复、发现网页有黄反等需要紧急更新或者删除的内容时,MIP Cache 也开放了单独的清理接口,阅读MIP-cache清理了解更多信息。生效时间大概5min。
3、MIP Cache 页面删除
如果有一些废弃页面需要删除:
- 站长首先删除本站原页面
- 调用 MIP Cache 快速更新机制删除 Cache
- 删除后,请给 MIP Cache 非200(404或者其他)状态码,防止cache中缓存错误页。
添加预取标签
待扩展
<linkhref="***"rel="dns-prefetch">
MIP校验规则是什么,MIP页面会有严格的规范校验,不允许存在任何校验不通过的问题存在,下面小编将为大家详细介绍MIP校验规则。本文档意在帮助开发者找到校验的内容和规则,快速定位校验不通过的原因。
MIP HTML 标签和属性错误
1. 缺少强制性标签
提示 |
MANDATORY_TAG_MISSING |
---|---|
错误说明 | "The mandatory tag '%1' is missing or incorrect." |
错误说明 | 强制性标签'xxx'缺失或错误 |
修复方法 | 添加(或者更正)强制性html标签 |
在MIP HTML中,强制性标签包括:
说明 |
备注 |
---|---|
<!doctype html> | 大小写均可 |
<html mip> | 强制小写 |
<head> | 强制小写 |
<meta charset="utf-8"> | utf-8不区分大小写,无单引号或者双引号限制 |
<meta name="viewport" content="width=device-width,initial-scale=1"> | 强制小写,无单引号或者双引号限制 |
< link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css" > | 强制小写,无单引号或者双引号限制,v1.1.1会根据版本不同而不同 |
<script src="https://mipcache.bdstatic.com/static/v1/mip.js" ></script > | 强制小写,无单引号或者双引号限制,v1.1.2会根据版本不同而不同 |
<body> | 强制小写 |
<link rel="canonical" href="http(s)://xxx"> | 强制小写 |
PS:meta 标签 name="viewport" 时, content的值必须且最少含有 width=device-width, minimum-scale=1 以及 initial-scale=1这3个属性且顺序不固定。
2. 禁用标签
提示 |
DISALLOWED_TAG |
---|---|
错误说明 | "The tag '%1' is disallowed." |
错误说明 | 禁止使用'xx'标签 |
修复方法 | 删除禁用标签 |
大部分 HTML 标签都是允许使用的,禁用或者需要替换的标签使用请参考:MIP HTML规范
3. 无效属性值
提示 |
INVALID_ATTR_VALUE |
---|---|
错误说明 | "The attribute '%1' in tag '%2' is set to the invalid value '%3'." |
错误说明 | 标签'xx'中的属性'xx'的属性值'xx'无效 |
修复方法 | 修改为有效属性值 |
当html标签有属性值不正确的时候,会报这个错误。mip中需要注意的有:
a:href属性不允许使用javascript:协议,
a:target属性需要设置为_blank
mip-img
src:必须是一个url
mip-pix
src:必须是一个支持https的地址url,
如果选用百度云提供的https代理,url中带"t={TIME}&title={TITLE}&host={HOST}&from=baidu"
其他html基本页面属性规范不变
注意:
1. MIP HTML中的url强制是https的
2. <a>标签:
<a href="javascript:xxx()"></a> 错
- <a href="xxx" target="_blank"></a> 对
4. 属性值的无效值
提示 |
INVALID_PROPERTY_VALUE_IN_ATTR_VALUE |
---|---|
错误说明 | "The property '%1' in attribute '%2' in tag '%3' is set to '%4', which is invalid." |
错误说明 | 标签'xx'中存在属性'yy','yy'中存在属性'zz',属性'zz'的属性值'aa'无效 |
修复方法 | 更正无效属性值 |
可能出现属性值的无效值的情况:
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
width的属性值device-width
initial-scale的属性值1
<script type="application/ld+json"></script>
<script type="application/json"></script>
除了外链 MIP 所需 js,script标签的type的属性值应该为application/ld+json 或 application/json
注意:除上述给出的值外均为无效值
5. 缺少强制性属性
提示 |
MANDATORY_ONEOF_ATTR_MISSING |
---|---|
错误说明 | "The tag '%1' is missing a mandatory attribute - pick one of %2." |
错误说明 | 标签'xx'的强制性属性'xx'缺失 |
修复方法 | 添加正确是属性 |
例如 mip html中 mip-img 和 mip-pix具有强制性属性的src:
mip-img
src
mip-pix
src
6. 直接父标签错误
提示 |
WRONG_PARENT_TAG |
---|---|
错误说明 | "The parent tag of tag '%1' is '%2', but it can only be '%3'." |
错误说明 | 标签'a'的直接父标签应该是'b',而不是'c' |
修复方法 | 添加所需的父标签 |
有一些标签有制定的直接父标签,如下示例给出了每个标签必须的直接父标签:
!doctype 的直接父标签是 root
head 的直接父标签是 html
body 的直接父标签是 html
link 的直接父标签是 head
meta 的直接父标签是 head
style mip-custom 的直接父标签是 head
style 的直接父标签是 boilerplate
7. 非法父级标签
提示 |
DISALLOWED_TAG_ANCESTOR |
---|---|
错误说明 | "The tag '%1' may not appear as a descendant of tag '%2'." |
错误说明 | 标签'a'不应该是标签'b'的子标签 |
修复方法 | 删除非法嵌套标签 |
如:
<body>的子标签写在了<head>中
8. 强制父级标签
提示 |
MANDATORY_TAG_ANCESTOR |
---|---|
错误说明 | "The tag '%1' may only appear as a descendant of tag '%2'." |
错误说明 | 标签'a'只能是标签'b'的子级标签 |
修复方法 | 删除标签或者给标签添加正确的父级标签 |
img 必须是noscript的子级标签
video 必须是noscript的子级标签
audio 必须是noscript的子级标签
head 中使用 noscript 时必须作为head的最后一个子节点, body中的noscript没有限制
9. 唯一标签重复
提示 |
DUPLICATE_UNIQUE_TAG |
---|---|
错误说明 | "The tag '%1' appears more than once in the document." |
错误说明 | 标签'xx'只能出现一次 |
修复方法 | 删除多余的标签 |
一份html中,有的标签具有唯一性,也就是说只能出现一次,当html中有重复的唯一标签的时候,应该报错。
以下是唯一标签列表:
<doctype html>
<html mip>
<head>
<link rel="canonical" href=...>
<meta charset="utf-8">
<meta viewport>
<style mip-custom>
<body>
MIP校验工具地址:https://www.mipengine.org/validator/validate
相关文章
- 在昨天的《Javascript权威指南》学习笔记之十:ECMAScript 5 增强的对象模型一文中,对于一段代码的调试出现了一个奇怪现象,现将源代码贴在下面: 复制代码 代码如下: <script type="text/javascript"> function Person(){}...2014-05-31
- 复制代码 代码如下: //element:需要添加新样式的元素,value:新的样式 function addClass(element, value ){ if (!element.className){ element.className = value; }else { newClassName = element.className; newClas...2014-05-31
- 在javascritp中,不一定只有对象方法的上下文中才有this, 全局函数调用和其他的几种不同的上下文中也有this指代。 它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。JavaScript 中函数的调用有以下...2015-03-15
- 有一道js面试题,题目是这样的:下列代码的执行结果是什么,为什么? 复制代码 代码如下: var i, j, k; for (i=0, j=0; i<10, j<6; i++, j++) { k = i+j; } document.write(k); 答案是显示10,这道题主要考察JavaScript的逗...2015-03-15
- 事件触发器从字面意思上可以很好的理解,就是用来触发事件的,但是有些没有用过的朋友可能就会迷惑了,事件不是通常都由用户在页面上的实际操作来触发的吗?这个观点不完全正确,因为有些事件必须由程序来实现,如自定义事件,jQue...2014-06-07
- 1、ActiveX向Javascript传参 复制代码 代码如下: <script language="javascript" for="objectname" event="fun1(arg)"> fun2(arg); </script> objectname为ActiveX控件名,通过<object>标签里的id属性设定,如下; 复制...2014-06-07
- 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。 HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。 HTML DOM 模型被构造为对象的树: 通过可编程的对象模型,Java...2015-10-23
- Window有navigator对象让我们得知浏览器的全部信息.我们可以利用一系列的API函数得知浏览器的信息.JavaScript代码如下:function message(){ txt = "<p>浏览器代码名: " + navigator.appCodeName + "</p>";txt+= "<p>...2015-11-24
- 虽然ES6都还没真正发布,但已经有用ES6重写的程序了,各种关于ES789的提议已经开始了,这你敢信。潮流不是我等大众所能追赶的。潮流虽然太快,但我们不停下学习的步伐,就不会被潮流丢下的,下面来领略下ES6中新特性,一堵新生代JS...2015-11-24
- ---恢复内容开始---1.location.href.....(1)self.loction.href="http://www.cnblogs.com/url" window.location.href="http://www.cnblogs.com/url" 以上两个用法相同均为在当前页面打开URL页面 (2)this.locati...2015-10-30
- tab切换在网页中很常见,故最近总结了4种实现方法。 首先,写出tab的框架,加上最简单的样式,代码如下: <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style> *{ pa...2015-11-08
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
前言在面向对象的编程范式中,封装都是必不可少的一个概念,而在诸如 Java,C++等传统的面向对象的语言中, 私有成员是实现封装的一个重要途径。但在 JavaScript 中,确没有在语法特性上对私有成员提供支持, 这也使得开发人员使...2015-10-30- 生生把写过的java版改成javascript版,第一次写,很不专业,见谅。唉,我是有多闲。复制代码 代码如下: var Sudoku = { init: function (str) { this.blank = []; this.fixed = []; this.cell =...2015-03-15
javascript中slice(),splice(),split(),substring(),substr()使用方法
1.slice();Array和String对象都有在Array中 slice(i,[j])i为开始截取的索引值,负数代表从末尾算起的索引值,-1为倒数第一个元素 j为结束的索引值,缺省时则获取从i到末尾的所有元素参数返回: 返回索引值从i到j的数组,原数组...2015-03-15javascript中的document.open()方法使用介绍
document.open()方法打开一个新的文档,并用document.write()方法编写文档的内容,然后用document.close()方法关闭文档操作,使其内容显示出来。 例如: 复制代码 代码如下: <script type="text/javascript"> window.onloa...2013-10-13- 本文实例讲述了JS实现的自定义网页拖动类。分享给大家供大家参考,具体如下: Javascript本身没有暂停功能(sleep不能使用)同时 vbscript也不能使用doEvents,故编写此函数实现此功能。 javascript作为弱对象语言,一个函数也...2015-11-08
- 经常在写代码的时候碰到这样的场景:页面初始化时显示loading页,同时启动多个ajax并发请求获取数据,当每个ajax请求返回时结束loading。 举个例子,一个下订单的页面,要查询常用地址信息、商品信息、地市信息…而这些请求都...2015-10-30
- 小编也是刚开始学JavaScript,觉得淘宝评星效果很棒,于是产生了自己写一个的想法,先给大家分享一下实现效果:现附上自己写的源代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script language="Java...2015-11-24
开启Javascript中apply、call、bind的用法之旅模式
我希望能够通过这篇文章,能够清晰的提升对apply、call、bind的认识,并且列出一些它们的妙用加深记忆。 apply、call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为...2015-10-30javascript移动设备Web开发中对touch事件的封装实例
在触屏设备上,一些比较基础的手势都需要通过对 touch 事件进行二次封装才能实现。zepto 是移动端上使用率比较高的一个类库,但是其 touch 模块模拟出来的一些事件存在一些兼容性问题,如 tap 事件在某些安卓设备上存在事...2014-06-07