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");
});
http://m.bbyears.com/wangyezhizuo/116149.html
推荐访问:mip医学 mip男士护肤