封装常用的DOM函数
- $
- 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
import $ from 'mma-dom/lib/jq/'Using npm:
$ npm install ma-dom- 传入一个类似CSS3选择器的参数，返回一个类数组的选择器对象，可以通过数组索引转化为原生DOM对象。
- 可以通过$.fn.extend(name,fn)扩展选择器对象的方法，第一个参数为函数名，第二个参数为函数体，默认会将原生DOM作为函数的第一个参数。(这个不太好描述，有时间再说吧)。
fullscreen(el,status);
第一个参数为需要全屏的元素，第二个参数为开启或关闭，对应的参数为open/close- text(el,text);第二个参数存在时设置el的文本内容，第二个参数不存在时获取el的文本内容。
- html(el,html);第二个参数存在时设置el的html内容，第二个参数不存在时获取el的html内容。
- val(el,val);第二个参数存在时设置表单el的值，第二个参数不存在时获取el的值。
- data(el,name,value);value存在时设置el的data-[name]的值，value不存在时获取el的data-[name]的值。
- attr(el,name,value);value存在时设置el的名为name的属性的值，value不存在时获取el的名为name的属性的值。
- data和attr方法也可以使用对象参数进行设置，比如attr(body,"width","300px")和atrr(body,{width:"300px"})都是可以的
- append(el,html)在el内部的最后面添加html。
- prepend(el,html)在el内部的最前面添加html
- after(el,html)在el的后方添加html，与el同级。
- before(el,html)在el的前方添加html，与el同级。
- empty(el)清空el的内部元素和文本。
- remove(el)从父元素中移除el元素。
css(el,name,value)当value存在时设置el的css name属性的值;value不存在时获取el的css name属性的值。 css(el,"width","300px")和css(el,{width:"300px"})都可以使用。
- getBox(el)获取元素的DOMRect信息，调用了getBoundingClientRect方法
- getElementPos(el)获取元素相对于文档窗口的横纵坐标，返回值为{x,y}
- getScroll()获取滚动条的横纵距离,返回值为{x,y}
- getViewportSize()获取视口宽度
- addEvent(el,type,listener);在el上绑定类型为type的事件，监听事件为listener
- removeEvent(el,type);在el上移除类型为type的事件
- on(parent,type,target,listener);使用事件委托的方式在父元素parent上监听真正的触发元素target的type事件。
- off(parent,type,target);移除parent上关于target元素的type事件的事件委托。
- isArray(data)判断传入的参数是否为数组
- isObject(data)判断传入的参数是否为对象
- isFunction(data)判断传入的参数是否为函数
- ObjectToArray(obj)将传入的对象转化为一个包含键值对的二维数组;如{a:123,b:456}将被转化为[["a",123],["b",456]];
- toFormData(obj,prefix)将传入的对象转化为符合表单请求的字符串，第二个参数决定是否在字符串的最前方添加？,默认为false。toFormData({a:"test",b:"test1"},true)将返回 "?a=test&b=test1"。
- 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即可- getRandom(length);获取长度为length的随机数;
- getFileUrl(e,cb);第一个参数为事件对象，第二个参数为回调函数，回调函数的第一个参数是文件的dataURL;常用于
html <input type="file">的change事件 - openFile(cb);需要传入回调函数。触发该函数后，会自动打开选择文件的弹窗，选择完毕后dataURL会作为回调函数的第一个参数,file为第二个参数，files为第三个参数
- copy(el);将需要复制内容的DOM元素作为参数传入，即可将该DOM元素的内容复制至剪贴板。如果需要隐藏元素，请使用
css opacity:0;position:fixed;top:-10000px;left:-10000px;z-index: -100;;使用display: none或者visibility: hidden会造成无法复制现象。 - storeSelection(el,start);存储某个节点的选区信息，选中该节点的全部区域。传入第二个参数时，只保留光标的最终状态，不会选中其他部分。注意：调用该方法后，会导致其他输入区域无法使用，还需要调用window.getSelection().removeAllRanges()方法移除之前的选取
- getPostfix(name);获取文件名的后缀
- toArray(data);将类数组转换为数组；
- rgbToHex(rgb);将rgb的颜色代码转为16进制；如rgb(255,0,0)将被转换为"#FF0000";
- validateData(data,regs);对输入的数据进行验证; 返回为null表示数据完全合法;不合法时将返回{msg:String,error:Boolean}
var data = {
username: 123546
},regs = [{
name: 'tel',
reg: /\w{6,20}/g,
msg:'错误信息'
}];
validateData(data,regs);