Introduction to MIP module, an auxiliary tool for MIP development

1. Replace jquery and zepto

Jquery and zepto are not recommended for mip.

Why not?

1. Native JS is good enough

2. jquery and zepto have poor performance compared with native JS

3. Reduce the page burden and avoid introducing additional files

How can I develop a file without jquery and zepto?

Refer to the help later. Most of them can be replaced by native JS. mip also provides some built-in components to solve compatibility problems.

Recommended selector:

QuerySelector

QuerySelectorAll

// Global

// Jquery

$ ('Selector ');

// Native

Document. querySelectorAll ('selector ');

// Local

Varelement = document. getElementById ('XXX ');

// Jquery

$ ('Selector ', element );

// Native

Element. querySelectorAll ('selector ');

// Also supported by native

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

// Previuselement

// Jquery

$ Element. prev ();

// Native

Element. Previuselementsibling;

// 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 (determine whether the element matches the selector)

// Mip

Util. dom. matches (document. body, 'body ');

// True

// Other general operations

// Native

Element. appendChild

Element. insertBefore

Element. removeChild

Element. innerHTML

Element. textContent

Css

// Jquery

$Element.css ('display', 'none ');

// Mip

Varutil = require ('til ');

Util.css (element, 'display', 'none ');

Util.css (element ,{

Left: 100,

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

// Nativeelement. 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 ('til ');

Util. rect. getElementOffset (element );

Ajax

Asynchronous requests use fetch and fetch-jsonp

Fetch
Fetch-jsonp

// Get

Fetch (location. href). then (function (res ){

Returnres. 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 and 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 ('til ');

Var undelegate = util. event. delegate (element, selector, 'click', fn );

// Mip

Undelegateundelegate ();

// Trigger

// Jquery

$ Element. trigger ('click ');

// Native

Var event = document. createEvent ('mouseevents ');

Event. initEvent ('click', true, true );

Element. dispatchEvent (event );

// Mip

Var util = require ('til ');

Element. dispatchEvent (event, util. event. create ('click', data ));

Util

Varutil = require ('til ');

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

Browser judgment

Var util = require ('til ');

Var platform = util. platform;

// IOS

Platform. isIos ();

// Safari

Platform. isSafari ();

// Chrome

Platform. isChrome ();

// Uc

Platform. isUc ();

// Webkit

Platform. isWebkit ();

2. viewport help

Viewport provides View-related functions.

Why use viewport?

1. Provides some view-related extensions
2. When pages are embedded in iframe, there are some bugs in scrolling and page-related computing.

Usage

Var viewport = require ('viewport ');

// Obtain scrollTop

VarscrollTop = viewport. getScrollTop ();

// Set scrollTop

Viewport. setScrollTop (20 );

// Obtain the visible width of the page

Viewport. getWidth ();

// Obtain the visual height of the page

Viewport. getHeight ();

// Obtain the actual page width

Viewport. getScrollwidth ();

// Obtain the actual page height

Viewport. getScrollHeight ();

// Obtain the page

Rectviewport. getRect ();

// Page scroll event

Viewport. on ('scroll ', function (){

// Code

});

// Page changed event

// When the page rolling ends or the scrolling speed is low, the changed event is triggered.

Viewport. on ('changed ', function (){

// Code

});

3. Introduce jquery or zepto

Considering that jquery and zepto have certain requirements. Therefore, mip also provides an asynchronous method for using them.

Introduction method:

Define (function (require ){

Var $ = require ('jquery ');

// Or

Var $ = require ('zepto ');

});