Aides et modules au développement
mip dispose d'outils et de modules de développement intégrés pour résoudre certains problèmes rencontrés lors du développement de mip et prendre en charge le JS natif.
Cet article contient trois parties :
1. Remplacement de jquery et zepto
2. Aide de Viewport
3. Introduction de jquery et zepto
1. Le remplacement de jquery et zepto
mip jquery et zepto ne sont pas recommandés.
Pourquoi pas recommandé ?
1. Native JS est assez simple à utiliser
2 Les performances de jquery et zepto sont pires que celles de JS natif
3. Réduisez le chargement de la page sans introduire de fichiers supplémentaires
Comment développer sans jquery. & zepto ?
Veuillez consulter l'aide ci-dessous. La plupart d'entre eux peuvent être remplacés par le mip JS natif qui fournit également certains composants intégrés pour résoudre les problèmes de compatibilité.
Selector
Recommandé :
// 全局
// 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';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.textContentcss
// 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
Les requêtes asynchrones utilisent fetch et 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));util
var 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();Système mobile et noyau du navigateur et jugement du fabricant du navigateur
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.
Pourquoi utiliser la fenêtre d'affichage ?
1. Fournir des fonctions étendues liées à la vue
2 Lorsque la page est intégrée dans une iframe, il y a des bugs dans le défilement et les calculs liés à la page
Comment utiliser
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. Présentez jquery ou zepto
Considérant que jquery et zepto ont certains besoins. Ainsi, mip fournit également des méthodes d'introduction asynchrones pour les utiliser.
Méthode d'introduction :
define(function (require) {
var $ = require('jquery');
// or
var $ = require('zepto');
});
