seo-开发辅助工具和模块

mip.js内置了一些开发工具和模块，使用原生JS实现通用的函数。这些函数不能直接在页面<script>标签中使用，但在开发MIP组件时可以在组件JS中引用。  

本文包含四个部分：  

1.替代jquery、zepto  

2.viewport帮助  

3.jquery、zepto引入  

4.组件提前渲染  

1.替代jquery、zepto  

MIP不推荐使用jquery和zepto。  

为什么不推荐?1、原生JS已经足够好用2、jquery、zepto性能相对于原生JS比较差3、减少页面负担，不必引入额外的文件  

没有jquery&zepto的情况下如何开发？请参见后面的帮助，大部分都可以用原生JS替代，mip也提供了一些内置组件以解决兼容问题。  

选择器  

推荐：querySelectorquerySelectorAll  

//全局  

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

varutil=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  

});  

vararr=[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');  

//native  

element.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  

varutil=require('util');  

util.rect.getElementOffset(element);  

ajax  

异步请求使用fetch和fetch-jsonp  

fetchfetch-jsonp  

//get  

fetch(location.href).then(function(res){  

returnres.text();  

}).then(function(text){  

fetchElement.innerHTML='fetch:'+(text.search('mip-test')!==-1);  

});  

//jsonp  

varfetchJsonp=require('fetch-jsonp');  

fetchJsonp('xxx',{  

jsonpCallback:'cb'  

}).then(function(res){  

returnres.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  

varutil=require('util');  

varundelegate=util.event.delegate(element,selector,'click',fn);  

//mipundelegate  

undelegate();  

//trigger  

//jquery  

$element.trigger('click');  

//native  

varevent=document.createEvent('MouseEvents');  

event.initEvent('click',true,true);  

element.dispatchEvent(event);  

//mip  

varutil=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();  

手机系统&浏览器内核&浏览器厂商判断  

varutil=require('util');  

varplatform=util.platform;  

//Tridentengine  

platform.isTrident();  

//Geckoengine  

platform.isGecko();  

//Webkitengine  

platform.isWebkit();  

//iOSsystem  

platform.isIos();  

//Androidsystem  

platform.isAndroid();  

//Getsystemversion  

platform.getOsVersion();  

//Ucbrowser  

platform.isUc();  

//Chromebrowser  

platform.isChrome();  

//Androidbrowser  

platform.isAdr();  

//Safaribrowser  

platform.isSafari();  

//QQbrowser  

platform.isQQ();  

//Firefoxbrowser  

platform.isFireFox();  

//Baidubrowser  

platform.isBaidu();  

//Baiduapplicationbrowser  

platform.isBaiduApp();  

//WeChatapplicationbrowser  

platform.isWechatApp();  

//Weiboapplicationbrowser  

platform.isWeiboApp();  

//QQapplicationbrowser  

platform.isQQApp();  

location.hash获取  

MIP页面URL支持的hash模式为：键值对以等号链接，多个hash以'&'链接。使用MIP.hash.get()方法能够直接获取当前页面hash。  

//例：#a=12&b=&c==333  

MIP.hash.get('a')//'12'  

MIP.hash.get('b')//''  

MIP.hash.get('c')//'=333'  

parseCacheUrl  

将CacheURL转化为原始URL。  

varutil=require('util');  

//input:https://www-mipengine-org.mipcdn.com/c/s/www.mipengine.org/  

//output:https://www.mipengine.org/  

varpageUrl=util.parseCacheUrl('https://www-mipengine-org.mipcdn.com/c/s/www.mipengine.org/')  

//input:https://www-mipengine-org.mipcdn.com/i/s/www.mipengine.org/static/img/mip_logo_3b722d7.png  

//output:https://www.mipengine.org/static/img/mip_logo_3b722d7.png  

varimgUrl=util.parseCacheUrl('https://www-mipengine-org.mipcdn.com/i/s/www.mipengine.org/static/img/mip_logo_3b722d7.png')  

2、viewport帮助  

viewport提供了视图相关的功能。  

为什么要使用viewport?  

1、提供一些视图相关的扩展功能2、当页面被嵌入到iframe中，滚动以及页面相关的计算有一些bug  

使用方式  

varviewport=require('viewport');  

//获取scrollTop  

varscrollTop=viewport.getScrollTop();  

//设置scrollTop  

viewport.setScrollTop(20);  

//获取页面可视宽度  

viewport.getWidth();  

//获取页面可视高度  

viewport.getHeight();  

//获取页面实际宽度  

viewport.getScrollwidth();  

//获取页面实际高度  

viewport.getScrollHeight();  

//获取页面Rect  

viewport.getRect();  

//页面scroll事件  

viewport.on('scroll',function(){  

//code  

});  

//页面changed事件  

//当页面滚动结束，或者滚动速度比较低时，会触发changed事件  

viewport.on('changed',function(){  

//code  

});  

3、引入jqueryorzepto  

考虑到jquery和zepto有一定需求。所以mip也为使用它们提供了异步引入的方式。  

引入方式：  

define(function(require){  

var$=require('jquery');  

//or  

var$=require('zepto');  

});  

4、组件提前渲染prerenderElement  

提前渲染MIP组件。  

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

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

MIP.prerenderElement(element);