【mip是什么意思】MIP开发辅助工具 MIP模块介绍

时间:2020-12-13  来源:jquery  阅读:

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是什么意思】MIP开发辅助工具 MIP模块介绍

http://m.bbyears.com/wangyezhizuo/116149.html

推荐访问:mip医学 mip男士护肤
相关阅读 猜你喜欢
本类排行 本类最新