MIP开发辅助工具 MIP模块介绍

本次一聚教程网为大家带来的是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">

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

本节的主要内容为MIP HTML规范说明，这是了解MIP的第一步，下面小编将为大家带来MIP HTML规范的详细说明介绍。

头部使用规范

• 起始标签使用 <!doctype html>

• html标签必须加上mip标记，即: <html mip>

• 必须包含 <head>和 <body>标签

• 必须在head标签中包含字符集声明: <meta charset="utf-8">，字符集统一为utf-8

• 必须在head标签中包含viewport设置标签: <meta name="viewport" content="width=device-width,initial-scale=1">，推荐包含minimum-scale=1

• 必须在head标签中包含 < link rel="stylesheet" type="text/css" href="https://mipcache.bdstatic.com/static/v1/mip.css" >

• 必须在body标签中包含 <script src="https://mipcache.bdstatic.com/static/v1/mip.js" ></script >

• 必须在head标签中包含 <link rel="canonical" href="http(s)://xxx" >

页面元素使用规范

MIP HTML 禁止使用对页面性能以及安全有较大影响的标签，请将其替换为MIP的特有标签（例如:将img标签替换为mip-img）:

标签	使用范围	备注
img	替换为mip-img
video	替换为mip-video
audio	替换为mip-audio
iframe	替换为mip-iframe
style	替换为<style mip-custom>	只能在head标签中使用一次
script	禁止使用	禁止使用script标签, 以下两种情况除外：1）外链mip组件所需js，2）type为 "application/ld+json" 或 "application/json"
svg	允许使用
button	允许使用
link	允许使用
a	允许使用,建议使用mip-link组件代替	不可以href="javascript:"，target必须设置为_blank
frame	禁止使用
frameset	禁止使用
object	禁止使用
param	禁止使用
applet	禁止使用
embed	禁止使用
form	替换为mip-form	内部允许使用input、textarea标签
input elements	禁止使用	包括: select, option

HTML 属性

• MIP HTML 中所有on开头的属性都不允许使用，如：onclick，onmouseover。
• MIP HTML 中允许使用on属性。
• MIP HTML 中不允许使用style属性。

自定义样式使用规范

出于性能考虑，html 中不允许使用内联style，所有样式只能放到head 的 style 标签里。

正确：

<head>

<stylemip-custom>

p{color:#00f;}

</style>

</head>

<body>

<p>Hello World!</p>

</body>

错误：

<pstyle="color:#00f;">Hello World!</p>

验证规范

MIP校验工具地址：https://www.mipengine.org/validator/validate