MIP其它功能介绍 MIP提升开发效率的功能

mip除了手势之外还提供一些功能，以解决在组件中遇到的各种问题和提升开发效率，下面就为大家带来这些功能的详细介绍。

prerenderElement

提前渲染 mip 元素。

如果元素不在 viewport 内，强制触发元素的 viewportCallback firstInviewCallback 方法。

varelement =document.getElementById('mip-test'); MIP.prerenderElement(element);

event-action

由于mip不允许使用附加的JS代码。所以提供了一套事件action机制，可以通过dom属性来触发某个mip元素的自定义事件。

html：

<mip-testid="test"></mip-test> <divon="tap:test.custom_event">不带参数</div> <divon="tap:test.custom_event(test_button)">带参数</div> <divon="tap:test.custom_event(test_button) tap:test.custom_event(test_button1)">多个事件</div>

JS：

// mip-test.js define(function(require){ var customEle =require('cust omElement').create(); customEle.prototype.build =function(){ // 绑定事件，其它元素可通过 on="xxx" 触发 this.addEventAction("custom_event",function(event/* 对应的事件对象 */, str/* 事件参数 */){ console.log(str);// undefined or 'test_button' or 'test_button1' }); }; returncustomEle; });

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

本次一聚教程网为大家带来的是MIP开发辅助工具和模块介绍，mip内置了一些开发工具和模块，为解决一些mip开发中遇到的问题和支持原生JS。

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">