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也提供了一些内置组件以解决兼容问题。
选择器
推荐:
// 全局 // 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'); //