MIP组件开发规范介绍 MIP组件开发规范详解

本次为大家带来的是MIP组件开发规范，帮助大家了解组件在开发时需要用到的组建是哪些，以及这些组件的作用等。

开发文档

站长开发扩展组件请参照下面链接

扩展组件 开发文档

开发辅助工具库

开发辅助工具和模块

手势：单击，双击，滑动

其它：dom触发js事件

组件类型划分

1、内置组件

定义：为了解决性能、安全性问题必须要使用的组件，代码被集成在mip.js中。如 mip-img、mip-video 等。

2、扩展组件

定义：其它类型的组件，一般情况下组件开发都是扩展组件，使用时需要引入对应的js文件。

mip除了手势之外还提供一些功能，以解决在组件中遇到的各种问题和提升开发效率，下面就为大家带来这些功能的详细介绍。

prerenderElement

提前渲染 mip 元素。

如果元素不在 viewport 内，强制触发元素的 viewportCallback firstInviewCallback 方法。

varelement =document.getElementById('mip-test'); MIP.prerenderElement(element);

event-action

由于mip不允许使用附加的JS代码。所以提供了一套事件action机制，可以通过dom属性来触发某个mip元素的自定义事件。

html：

<mip-testid="test"></mip-test> <divon="tap:test.custom_event">不带参数</div> <divon="tap:test.custom_event(test_button)">带参数</div> <divon="tap:test.custom_event(test_button) tap:test.custom_event(test_button1)">多个事件</div>

JS：

// mip-test.js define(function(require){ var customEle =require('cust omElement').create(); customEle.prototype.build =function(){ // 绑定事件，其它元素可通过 on="xxx" 触发 this.addEventAction("custom_event",function(event/* 对应的事件对象 */, str/* 事件参数 */){ console.log(str);// undefined or 'test_button' or 'test_button1' }); }; returncustomEle; });

MIP封装了单击，双击，滑动等手势，可在组件中使用，下面一聚教程网将为大家详细介绍MIP手势的用法。

    MIP封装了单击，双击，滑动等手势，可在组件中使用

    示例

var util = require('util');                     var Gesture = util.Gesture;                     var customEle = require('customElemenet').create();                     var build = function () {                     var gesture = new Gesture(this.element);                     // on 可接受多个事件名做为参数，以空格分隔。如 gesture.on('tap swipe')                     gesture.on('tap', function (event, data) {                     // 原始事件。如tap事件是通过 touchend 触发，event为tap对应的touchend事件对象                     console.log(event);                     // gesture 计算后的数据。参数介绍见后面                     console.log(data.type); // "tap"                     });                     };

    初始化参数介绍

    gesture 实例化时第二个参数可以传一个object做为配置参数

    示例：

// 默认阻止纵向滑动事件                     var gesture = new Gesture(element, {                     preventY: true                     });

    具体参数介绍：

preventDefault	是否阻止默认事件
preventX	是否阻止横向滑动时的默认事件
preventY	是否阻止纵向滑动时的默认事件
stopPropagation	是否阻止事件冒泡

    默认参数：

// 如果初始化时不传入配置参数，会使用下面的配置进行初始化                     {                     preventDefault: false,                     stopPropagation: false,                     // 默认会阻止横滑的事件，考虑到浏览器横滑有很多默认操作，所以在这里默认阻止横滑                     preventX: true,                     preventY: false                     }

    gesture 数据对象介绍

    数据对象做为事件处理函数的第二个参数传入。

    示例：

gesture.on('tap', function (event, data) {                     console.log(data); });

    通用字段：

angle	滑动角度，如横滑为0度
deltaTime	从开始到结束的时间间隔。单位是ms
deltaX	横轴位移
deltaY	纵轴位移
direction	方向。0: 未变动 1: 上 2:右 3: 下 4: 左
distance	移动距离
pointers	触摸点
timeStamp	事件发生的时间戳
velocity	速度
velocityX	横向速度
velocityY	纵向速度
x	触摸中心点坐标x
y	触摸中心点坐标y
type	事件类型

    扩展字段：

    各手势可以向数据对象中扩展字段。如 swipe 事件中的 swipeDirection 字段，具体请看手势识别器介绍

    手势识别器

    手势识别器可以接收 gesture 数据对象，并识别出具体手势，触发具体的手势事件。

    手势识别器对象在用户绑定事件时自动创建，在用户解绑事件时自动销毁。

    目前有三种内置识别器：tap、dobuletap、swipe

    tap

    使用方法:

    doubletap

    双击，如果同时绑定tap和doubletap，tap事件会延迟300ms触发以判断是否触发双击。

    使用方法：

gesture.on('tap', function (event, data) {                     console.log('单击'); });

gesture.on('tap', function (event, data) {                     console.log('双击'); });

    swipe

    滑动

    使用方法：

// 使用方法1：                     gesture.on('swipe', function (event, data) {                     console.log(data.type); // "swipe"                     console.log(data.swipeDirection); // "up" or "right" or "down" or "left"                     });                     // 使用方法2：                     gesture.on('swipeup swipedown', function (event, data) {                     console.log(data.type) // "swipeup" or "swipedown"                     console.log(data.swipeDirection) // "up" or "down"                     });

本次一聚教程网为大家带来的是MIP开发辅助工具和模块介绍，mip内置了一些开发工具和模块，为解决一些mip开发中遇到的问题和支持原生JS。

1、替代 jquery、zepto

mip 不推荐使用 jquery 和 zepto。

为什么不推荐？

1、原生JS已经足够好用

2、jquery、zepto 性能相对于原生JS比较差

3、减少页面负担，不必引入额外的文件

没有jquery&zepto的情况下如何开发？

请参见后面的帮助，大部分都可以用原生JS替代，mip也提供了一些内置组件以解决兼容问题。

选择器推荐：

querySelector

querySelectorAll

// 全局

// jquery

$('selector');

// native

document.querySelectorAll('selector');

// 局部

varelement =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

varutil =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');

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

util.rect.getElementOffset(element);

ajax

异步请求使用 fetch 和 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、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

undelegateundelegate();

// 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

varutil =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;

// IOS

platform.isIos();

// Safari

platform.isSafari();

// Chrome

platform.isChrome();

// Uc

platform.isUc();

// webkit

platform.isWebkit();

2、viewport 帮助

viewport 提供了视图相关的功能。

为什么要使用viewport?

1、提供一些视图相关的扩展功能
2、当页面被嵌入到iframe中，滚动以及页面相关的计算有一些bug

使用方式

var viewport =require('viewport');

// 获取 scrollTop

varscrollTop = viewport.getScrollTop();

// 设置 scrollTop

viewport.setScrollTop(20);

// 获取页面可视宽度

viewport.getWidth();

// 获取页面可视高度

viewport.getHeight();

// 获取页面实际宽度

viewport.getScrollwidth();

// 获取页面实际高度

viewport.getScrollHeight();

// 获取页面

Rectviewport.getRect();

// 页面 scroll 事件

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

// code

});

// 页面 changed 事件

// 当页面滚动结束，或者滚动速度比较低时，会触发 changed 事件

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

// code

});

3、引入jquery or zepto

考虑到 jquery 和 zepto 有一定需求。 所以mip也为使用它们提供了异步引入的方式。

引入方式：

define(function(require){

var $ = require('jquery');

// or

var $ = require('zepto');

});