개발 지원 및 모듈
mip에는 mip 개발 시 발생하는 일부 문제를 해결하고 기본 JS를 지원하는 개발 도구와 모듈이 내장되어 있습니다.
이 문서는 세 부분으로 구성됩니다.
1. jquery 및 zepto 교체
2. 뷰포트 도움말
3. jquery 및 zepto 소개
1. jquery 및 zepto 교체
mip jquery 및 zepto는 권장되지 않습니다.
추천하지 않는 이유
1. 네이티브 JS는 사용하기 쉽습니다.
2. jquery와 zepto의 성능은 네이티브 JS보다 낮습니다.
아래 도움말을 참조하세요. 대부분은 네이티브 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.getElementsByTagNameattr & 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';
domvar 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');
// has
// jquery
$element.hasClass('test');
// native
element.classList.contains('test');
// toggle
// jquery
$element.toggleClass('test');
// native
element.classList.toggle('test');
position& wi dth&height// position
// jquery
$element.position();
// native
element.offsetLeft
element.offsetTop
// offset
// jquery
$element.offset();
// mip
var util = require('util');
util.rect.getElementOffset(element);
ajax비동기 요청은 가져오기 및 가져오기를 사용합니다. -jsonpfetch
fetch-jsonp
// get
fetch(location.href).then(function (res) {
return res.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 undelegate
undelegate();
// 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));
utilvar util = 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;
// Trident engine
platform.isTrident();
// Gecko engine
platform.isGecko();
// Webkit engine
platform.isWebkit();
// iOS system
platform.isIos();
// Android system
platform.isAndroid();
// Get system version
platform.getOsVersion();
// Uc browser
platform.isUc();
// Chrome browser
platform.isChrome();
// Android browser
platform.isAdr();
// Safari browser
platform.isSafari();
// QQ browser
platform.isQQ();
// Firefox browser
platform.isFireFox();
// Baidu browser
platform.isBaidu();
// Baidu application browser
platform.isBaiduApp();
2.viewport는 뷰 관련 기능을 제공합니다. 뷰포트를 사용하는 이유 1. 뷰 관련 확장 기능 제공 2. 페이지가 iframe에 포함되면 스크롤 및 페이지 관련 계산에 버그가 있습니다.
var viewport = require('viewport');
// 获取 scrollTop
var scrollTop = 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. jquery 또는 zepto를 소개하세요
