ma-dom

封装常用的DOM函数

Features

• $
• fullscreen
• text,html,val,attr,data
• append,prepend,after,before,empty,remove
• css
• animate(不推荐，还不完善，建议使用CSS3动画)
• getBox,getElementPos,getScroll,getViewportSize
• addEvent,removeEvent,on,off
• isArray,isObject,isFunction,ObjectToArray,toFormData,setStoreData,openFile,getRandom,getFileUrl,storeSelection,copy

完整的引入方式为：

import {
    $,
 
    fullscreen,
 
    text,
    html,
    val,
    attr,
    data,
 
    append,
    prepend,
    after,
    before,
    empty,
    remove,
 
    css,
 
    animate,
 
    getBox,
    getElementPos,
    getScroll,
    getViewportSize,
 
    addEvent,
    removeEvent,
    on,
    off,
 
    ObjectToArray,
    isArray,
    isObject,
    isFunction,
    toFormData,
    getRandom,
    openFile,
    getFileUrl,
    storeSelection,
    copy,
    xss,
    getPostfix,
    getType,
    toArray,
    validateData,
    rgbToHex,
} from 'ma-dom'
 

类似jQuery的$

上文中的$只是一个简单的包装过的选择器，提供了扩展的方法，还需要自己进行扩展。 也可以使用包含上述功能的$方法，使用方法大致类似于jQuery

import $ from 'mma-dom/lib/jq/'

Installing

Using npm:

$ npm install ma-dom

Example

选择器$

1. 传入一个类似CSS3选择器的参数，返回一个类数组的选择器对象，可以通过数组索引转化为原生DOM对象。
2. 可以通过$.fn.extend(name,fn)扩展选择器对象的方法，第一个参数为函数名，第二个参数为函数体，默认会将原生DOM作为函数的第一个参数。(这个不太好描述，有时间再说吧)。

fullscreen全屏模式

fullscreen(el,status);
第一个参数为需要全屏的元素，第二个参数为开启或关闭，对应的参数为open/close

DOM内容获取与设置

1. text(el,text);第二个参数存在时设置el的文本内容，第二个参数不存在时获取el的文本内容。
2. html(el,html);第二个参数存在时设置el的html内容，第二个参数不存在时获取el的html内容。
3. val(el,val);第二个参数存在时设置表单el的值，第二个参数不存在时获取el的值。
4. data(el,name,value);value存在时设置el的data-[name]的值，value不存在时获取el的data-[name]的值。
5. attr(el,name,value);value存在时设置el的名为name的属性的值，value不存在时获取el的名为name的属性的值。
6. data和attr方法也可以使用对象参数进行设置，比如attr(body,"width","300px")和atrr(body,{width:"300px"})都是可以的

DOM添加与删除

1. append(el,html)在el内部的最后面添加html。
2. prepend(el,html)在el内部的最前面添加html
3. after(el,html)在el的后方添加html，与el同级。
4. before(el,html)在el的前方添加html，与el同级。
5. empty(el)清空el的内部元素和文本。
6. remove(el)从父元素中移除el元素。

CSS属性的获取与设置

css(el,name,value)当value存在时设置el的css name属性的值;value不存在时获取el的css name属性的值。 css(el,"width","300px")和css(el,{width:"300px"})都可以使用。

获取元素的位置信息

1. getBox(el)获取元素的DOMRect信息，调用了getBoundingClientRect方法
2. getElementPos(el)获取元素相对于文档窗口的横纵坐标，返回值为{x,y}
3. getScroll()获取滚动条的横纵距离,返回值为{x,y}
4. getViewportSize()获取视口宽度

事件

1. addEvent(el,type,listener);在el上绑定类型为type的事件，监听事件为listener
2. removeEvent(el,type);在el上移除类型为type的事件
3. on(parent,type,target,listener);使用事件委托的方式在父元素parent上监听真正的触发元素target的type事件。
4. off(parent,type,target);移除parent上关于target元素的type事件的事件委托。

常用函数

1. isArray(data)判断传入的参数是否为数组
2. isObject(data)判断传入的参数是否为对象
3. isFunction(data)判断传入的参数是否为函数
4. ObjectToArray(obj)将传入的对象转化为一个包含键值对的二维数组;如{a:123,b:456}将被转化为[["a",123],["b",456]];
5. toFormData(obj,prefix)将传入的对象转化为符合表单请求的字符串，第二个参数决定是否在字符串的最前方添加？,默认为false。toFormData({a:"test",b:"test1"},true)将返回 "?a=test&b=test1"。
6. setStoreData(state,keys,data);可用于vuex或者vue,

例如vuex,
var state = {
    lists : [{
        id:1,
        str:"213",
        child:{
            "test":"test child"
        }
    },{
        id:2,
        str:"asd"
    }]
};
setStoreData(state,["lists",0,"child"],{"new-child":"new-child"});
console.log(state.lists[0]);
 
使用该函数即可轻松改变嵌套多层的对象。state为最顶层的对象，keys为每一层的键名，data为需要替换的数据。
在vue中使用时第一参数写成this即可

1. getRandom(length);获取长度为length的随机数;
2. getFileUrl(e,cb);第一个参数为事件对象，第二个参数为回调函数，回调函数的第一个参数是文件的dataURL;常用于html <input type="file">的change事件
3. openFile(cb);需要传入回调函数。触发该函数后，会自动打开选择文件的弹窗，选择完毕后dataURL会作为回调函数的第一个参数,file为第二个参数，files为第三个参数
4. copy(el);将需要复制内容的DOM元素作为参数传入，即可将该DOM元素的内容复制至剪贴板。如果需要隐藏元素，请使用css opacity:0;position:fixed;top:-10000px;left:-10000px;z-index: -100;;使用display: none或者visibility: hidden会造成无法复制现象。
5. storeSelection(el,start);存储某个节点的选区信息，选中该节点的全部区域。传入第二个参数时，只保留光标的最终状态，不会选中其他部分。注意：调用该方法后，会导致其他输入区域无法使用，还需要调用window.getSelection().removeAllRanges()方法移除之前的选取
6. getPostfix(name);获取文件名的后缀
7. toArray(data);将类数组转换为数组；
8. rgbToHex(rgb);将rgb的颜色代码转为16进制；如rgb(255,0,0)将被转换为"#FF0000";
9. validateData(data,regs);对输入的数据进行验证; 返回为null表示数据完全合法;不合法时将返回{msg:String,error:Boolean}

var data = {
    username: 123546
},regs = [{
    name: 'tel',
    reg: /\w{6,20}/g,
    msg:'错误信息'
}];
 
validateData(data,regs);