Development aids and modules

mip has some built-in development tools and modules to solve some problems encountered in mip development and support native JS.

This article contains three parts:
1. Replacement of jquery and zepto
2. Viewport help
3. Introduction of jquery and zepto

1. Replacement of jquery and zepto

mip jquery and zepto are deprecated.

Why not recommended?
1. Native JS is easy enough to use
2. The performance of jquery and zepto is worse than native JS
3. Reduce the page load and do not need to introduce additional files

How to develop without jquery&zepto?
Please refer to the following help. Most of them can be replaced by native JS. mip also provides some built-in components to solve compatibility issues.

Selector

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

// has
// jquery
$element.hasClass('test');
// native
element.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

Asynchronous requests using fetch and fetch-jsonp

fetch
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();

Mobile system & Browser kernel & Browser manufacturer judgment

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 help

viewport provides view-related functions.

Why use viewport?

1. Provide some view-related extended functions
2. When the page is embedded in an iframe, there are some bugs in scrolling and page-related calculations

How to use

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. Introduce jquery or zepto

Considering that jquery and zepto have certain needs. So mip also provides asynchronous introduction methods for using them.

Introduction method:

define(function (require) {
    var $ = require('jquery'); 
    // or
    var $ = require('zepto');
});