MIP 문서 매뉴얼 / 开发辅助工具和模块

开发辅助工具和模块

mip内置了一些开发工具和模块,为解决一些mip开发中遇到的问题和支持原生JS。

本文包含三个部分:
1、替代jquery、zepto
2、viewport帮助
3、jquery、zepto引入

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');

// 局部
var element = 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
var util = 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');

//