Giter Site home page Giter Site logo

ec-do's Introduction

ec-do

自己封装的常用操作实例

实例为日常开发常用的小实例,包括数组去重,打乱数组,字母大小写转换,cookie操作的封装等。

使用方法

引入ec-do.js

//去除空格

ecDo.trim(' xx x x',1);

//xxxx

//大小写转换

ecDo.trim(' asdXaaaXHwwHwwad ')

//"asdXaaaXHwwHwwad"

具体使用方式在ec-do.js里面有说明

版本说明

ecDo 1.x使用es5语法编写

ecDo 2.x使用es6语法编写

ecDo 3.x使用es6语法编写,目前仍在测试阶段

具体方法

下面方法,如果在 demo 看到 'result:' 证明此函数是拥有返回值的函数,否则函数就没有返回值

extend 扩展

支持扩展函数列表

函数名称 demo
checkType example/checkType.html
filterStr example/filterStr.html

handle 批量处理

参考demo:example/handle.html

1.trim

description
ecDo.trim(str)

description-清除字符串的左右空格

param {String} str-待处理的字符串

demo
ecDo.trim('  1235asd ')

result:'1235asd'

2.trimAll

description
ecDo.trimAll(str)

description-清除字符串的所有空格

param {String} str-待处理的字符串

demo
ecDo.trim('  1235  asd ')

result:'1235asd'

3.trimLeft

description
ecDo.trimLeft(str)

description-清除字符串的左空格

param {String} str-待处理的字符串

demo
ecDo.trim('  1235  asd ')

result:'1235 asd '

4.trimRight

description
ecDo.trimRight(str)

description-清除字符串的右空格

param {String} str-待处理的字符串

demo
ecDo.trim('  1235  asd ')

result:' 1235 asd'

5.toggleCase

description
ecDo.toggleCase(str)

description-大小写转换

param {String} str-待处理的字符串

demo
ecDo.toggleCase('aSDasd')

result:'AsdASD'

6.firstWordUpper

description
ecDo.firstWordUpper(str)

description-首字母大写

param {String} str-待处理的字符串

demo
ecDo.firstWordUpper('shouHou')

result:'ShouHou'

7.firstWordLower

description
ecDo.firstWordLower(str)

description-首字母小写

param {String} str-待处理的字符串

demo
ecDo.firstWordLower('ASDsAD')

result:'aSDsAD'

8.encrypt

description
ecDo.encrypt(str, regIndex, ARepText = '*')

description-加密字符串*

param {String} str-待处理的字符串

param {Array} regIndex-要加密的字符串的位置

param {String} ARepText-加密显示的字符,默认是‘*’

demo
console.log(`加密字符|${ecDo.encrypt('18819233362','3,7','+')}|`)
console.log(`加密至结束|${ecDo.encrypt('18819233362','4')}|`)
console.log(`加密至开始|${ecDo.encrypt('18819233362','-4')}|`)
console.log(`不加密字符|${ecDo.encrypt(ecDo.encrypt('18819233362','0,2','+'),'0,-2','+')}|`)

参考example/encrypt.html

8.encryptStr

description
ecDo.encryptStr(str, regIndex, ARepText = '*')

description-加密字符串*

param {String} str-待处理的字符串

param {Array} regIndex-要加密的字符串的位置

param {String} ARepText-加密显示的字符,默认是‘*’

demo
ecDo.encryptStr('18819233362','3,7','+')//位置3-7的统一被替换成+

result:188+++++362

9.encryptUnStr

description
ecDo.encryptStr(str, regIndex, ARepText = '*')

description-不加密字符串*

param {String} str-待处理的字符串

param {Array} regIndex-不加密的字符串的位置

param {String} ARepText-加密显示的字符,默认是‘*’

demo
ecDo.encryptUnStr('18819233362','3,7','+')//位置3-7的之外的字符全部替换成+

result:188+++++362

10.encryptStartStr

description
ecDo.encryptStartStr(str, length, ARepText = '*')

description-字符串开始位置加密

param {String} str-待处理的字符串

param {Array} regIndex-加密字符串的长度

param {String} ARepText-加密显示的字符,默认是‘*’

demo
ecDo.encryptStartStr('18819233362','4')//从开始位置计算,前4位加密

result:*****233362

11.encryptEndStr

description
ecDo.encryptStartStr(str, length, ARepText = '*')

description-字符串结尾位置加密

param {String} str-待处理的字符串

param {Array} regIndex-加密字符串的长度

param {String} ARepText-加密显示的字符,默认是‘*’

demo
ecDo.encryptEndStr('18819233362','4')//从结尾位置计算,后4位加密

result:188192*****

12.checkType

description
//beta1
ecDo.checkType.check(str, type)
//beta2
ecDo.checkType(str, type)

description-检测字符串

param {String} str-待处理的字符串

param {String} type-数据格式(email,phone,tel,number,english,text,chinese,lower,upper) 可根据需要进行扩展

demo

beta1 版本 console.log(ecDo.checkType.check('18819663362','mobile')); //true //添加扩展 ecDo.checkType.addRule('password',function (str) { return /^[-a-zA-Z0-9._]+$/.test(str); })

ecDo.checkType.check('****asdasd654zxc', 'password')//false

beta2 版本

console.log(ecDo.checkType('18819663362','mobile'));
//true
//添加扩展
ecDoExtend.checkType.fn('password', function (str) {
   return /^[-a-zA-Z0-9._]+$/.test(str);

}) ecDo.checkType('****asdasd654zxc', 'password')//false

13.checkPwdLevel

description
ecDo.checkPwdLevel(str)

description-检测密码强度

param {String} str-待检测的字符串

demo
ecDo.checkPwdLevel('12asdASAD')
result:result:3(强度等级为3,大写+1,小写+1,数字+1,'-','.','_'任意一字符+1,长度小于6等级为0)

14.randomWord

description
ecDo.randomWord(count)

description-随机码

param {int} count-取值范围2-36

demo
ecDo.randomWord(10)
result:"2584316588472575"

ecDo.randomWord(14)
result:"9b405070dd00122640c192caab84537"

ecDo.randomWord(36)
result:"83vhdx10rmjkyb9"

15.countStr

description
ecDo.countStr(str, strSplit)

description-检测字符串的出现次数

param {String} str-待处理的字符串

param {String} strSplit-待检测的字符串

demo
var strTest='sad44654blog5a1sd67as9dablog4s5d16zxc4sdweasjkblogwqepaskdkblogahseiuadbhjcibloguyeajzxkcabloguyiwezxc967'
ecDo.countStr(strTest,'blog')
result:6

16.filterStr

description
 //beta1
 ecDo.filterStr.handle(type,str,restr,restr)
 //beta2
 ecDo.filterStr(type,str,restr,restr)

description-过滤字符串

param {String} type-过滤的类型(specialStr-特殊字符,html-html标签,emjoy-emjoy表情,word-小写字母,WORD-大写字母,number-数字,chinese-中文),可根据需要进行扩展

param {String} str-待处理的字符串

param {String} restr-替换成的字符,默认''

param {String} spstr-保留的特殊字符(specialStr 时起效)

demo

beta1 版本

console.log(`过滤字符|${ecDo.filterStr.handle('sadasdasdzxc4512235%$@^&^@*!(4613zxc','specialStr','','@')}|`);//除了@,其他特殊字符全部被过滤
//添加扩展
ecDo.filterStr.addType('english',function (str,replaceStr='') {
    return str.replace(/[a-zA-Z]/g, replaceStr);
});
//过滤英文字母
 console.log(ecDo.filterStr.handle('asdasd46撒打算的','english','.',''));

beta2 版本

console.log(`过滤字符|${ecDo.filterStr('sadasdasdzxc4512235%$@^&^@*!(4613zxc','specialStr','','@')}|`);//除了@,其他特殊字符全部被过滤
//添加扩展
ecDoExtend.filterStr.fn('english',function (str,replaceStr='') {
    return str.replace(/[a-zA-Z]/g, replaceStr);
});
//过滤英文字母
 console.log(ecDo.filterStr('asdasd46撒打算的','english','.',''));

17.filterSpecialStr

description
 ecDo.filterSpecialStr(str, type, restr, spstr)

description-过滤字符串的特殊符号

param {String} str-待处理的字符串

param {String} restr-替换成的字符,默认''

param {String} spstr-保留的特殊字符

demo
console.log(`${ecDo.filterSpecialStr('sadasdasdzxc4512235%$@^&^@*!(4613zxcasdasd46撒打算的','','@')}`);//除了@,其他特殊字符全部被替换成空格

result:sadasdasdzxc4512235@@4613zxcasdasd46

18.filterHtml

description
 ecDo.filterHtml(str, type)

description-过滤字符串的html标签

param {String} str-待处理的字符串

param {String} restr-替换成的字符,默认''

demo
console.log(ecDo.filterHtml('<title>Title</title>'));

result:Title

19.filterEmjoy

description
 ecDo.filterEmjoy(str, type)

description-过滤字符串的表情符号

param {String} str-待处理的字符串

param {String} restr-替换成的字符,默认''

demo
console.log(ecDo.filterEmjoy('\u4e00asdasdWECASasd'));

result:— asdasdWECASasd

20.filterWordUpper

description
 ecDo.filterWordUpper(str, type)

description-过滤字符串的大写字母

param {String} str-待处理的字符串

param {String} restr-替换成的字符,默认''

demo
console.log(ecDo.filterWordUpper('asdasdWECASasd'));

result:asdasdasd

21.filterWordLower

description
 ecDo.filterWordLower(str, type)

description-过滤字符串的小写字母

param {String} str-待处理的字符串

param {String} restr-替换成的字符,默认''

demo
console.log(ecDo.filterWordLower('asdasdWECASasd'));

result:WECAS

22.filterNumber

description
 ecDo.filterNumber(str, type)

description-过滤字符串的数字

param {String} str-待处理的字符串

param {String} restr-替换成的字符,默认''

demo
console.log(ecDo.filterNumber('asdasd67w9e41z5xc'));

result:asdasdwezxc

23.filterChinese

description
 ecDo.filterChinese(str, type)

description-过滤字符串的中文字符

param {String} str-待处理的字符串

param {String} restr-替换成的字符,默认''

demo
console.log(ecDo.filterChinese('8963325asd阿斯达所多1'));

result:8963325asd1

24.formatText

description
ecDo.formatText(str, size, delimiter)

description-格式化处理字符串

param {String} str-待处理的字符串

param {Int} size-间隔

param {String} delimiter-间隔符,默认','

demo
ecDo.formatText('1234asda567asd890')
result:"12,34a,sda,567,asd,890"

ecDo.formatText('1234asda567asd890',4,' ')
result:"1 234a sda5 67as d890"

ecDo.formatText('1234asda567asd890',4,'-')
result:"1-234a-sda5-67as-d890"

25.longestWord

description
ecDo.formatText(str, splitType)

description-找出最长单词

param {String} str-字符串

param {splitType} size-间隔符,默认' '

demo
ecDo.longestWord('Find the Longest word in a String')
result: {el: "Longest", max: 7}

ecDo.longestWord('Find|the|Longest|word|in|a|String','|')
result: {el: "Longest", max: 7}

26.titleCaseUp

description
ecDo.titleCaseUp(str, splitType)

description-句中单词首字母大写

param {String} str

param {splitType} size-间隔符,默认' '

demo
ecDo.titleCaseUp('this is a title')

result: "This Is A Title"

ecDo.titleCaseUp('this is a title','|')

result: "This Is A Title"

27.unique

description
ecDo.unique(arr)

description-数组去重

param {Array} arr-待去重数组

demo
ecDo.unique([1,2,3,4,2,1,2,3,4,5])

result: [1, 2, 3, 4, 5]

28.upset

description
ecDo.upset(arr)

description-数组顺序打乱

param {Array} arr-待打乱数组

demo
ecDo.upset([1,2,3,4,5,6,7,8,9,0])
result:  [7, 1, 3, 2, 4, 6, 8, 9, 0, 5]

29.maxArr

description
ecDo.maxArr(arr)

description-获取数组最大值

param {Array} arr-待处理数组

demo
ecDo.maxArr([1,2,3,4,5,6,7,8,9,0])
result:  9

30.minArr

description
ecDo.minArr(arr)

description-获取数组最小值

param {Array} arr-待处理数组

demo
ecDo.minArr([1,2,3,4,5,6,7,8,9,0])
result:  0

31.sumArr

description
ecDo.sumArr(arr)

description-数组求和

param {Array} arr-待处理数组

demo
ecDo.sumArr([1,2,3,4,5,6,7,8,9,0])
result:  45

32.covArr

description
ecDo.covArr(arr)

description-数组求和

param {Array} arr-待处理数组

demo
ecDo.covArr([1,2,3,4,5,6,7,8,9,0])
result:  4.5

33.randomOne

description
ecDo.randomOne(arr)

description-从数组中随机获取一个元素

param {Array} arr-待处理数组

demo
ecDo.randomOne(['a','b','c','d','e'])

result: "c"

34.getEleCount

description
ecDo.getEleCount(obj, ele)

description-获取数组(字符串)一个元素出现的次数

param {Array String} obj-待处理数组(字符串) param {String} ele-要匹配的元素

demo
ecDo.getEleCount('asd56+asdasdwqe','a')
result:3
ecDo.getEleCount([1,2,3,4,5,66,77,22,55,22],22)
result:2

35.getCount

description
ecDo.getCount(arr)

description-获取数组(字符串)所有元素的出现次数

param {Array String} obj-待处理数组(字符串)

demo
//返回所有情况
ecDo.getCount([1,2,3,1,2,5,2,4,1,2,6,2,1,3,2])

result:[{"el":"2","count":6},{"el":"1","count":4},{"el":"3","count":2},{"el":"4","count":1},{"el":"5","count":1},{"el":"6","count":1}]

36.removeArrayForValue

description
ecDo.removeArrayForValue(arr, val, type)

description-删除值为'val'的数组元素

param {Array} obj-待处理数组 param {Sting} val-要匹配的字符

demo
//数组元素的值全等于'test'才被删除
ecDo.removeArrayForValue(['test','test1','test2','test','aaa'],'test')

result:["test1", "test2", "aaa"]

37.removeArrayForLike

description
ecDo.removeArrayForValue(arr, val, type)

description-删除值含有'val'的数组元素

param {Array} obj-待处理数组 param {Sting} val-要匹配的字符

demo
//带有'test'的都删除
ecDo.removeArrayForValue(['test','test1','test2','test','aaa'],'test','%')

result:["aaa"]

38.getOptionArray(已废除,可以使用 map 代替)

description
ecDo.getOptionArray(arr, keys)

description-获取对象数组某些项

param {Array} obj-待处理数组 param {Sting} keys-要获取的值的属性,多个属性用','分割

demo
var arr=[{a:1,b:2,c:9},{a:2,b:3,c:5},{a:5,b:9},{a:4,b:2,c:5},{a:4,b:5,c:7}]

ecDo.getOptionArray(arr,'a')

result: [1, 2, 5, 4, 4]

ecDo.getOptionArray(arr,'a,c')

result:[{a: 1, c: 9},{a: 2, c: 5},{a: 5, c: undefined},{a: 4, c: 5},{a: 4, c: 7}]

39.filterKeys

description
ecDo.filterKeys(obj, keys)

description-过滤对象某些属性

param {Array} obj-待处理对象 param {Sting} keys-要过滤的值的属性,多个属性用','分割

demo
var arr=[{a:1,b:2,c:9},{a:2,b:3,c:5},{a:5,b:9},{a:4,b:2,c:5},{a:4,b:5,c:7}]

ecDo.filterKeys(arr,'a')
//result: [1, 2, 5, 4, 4]

ecDo.filterKeys(arr,'a,c')
//result:[{b: 2},{b: 3},{b: 9},{b: 2},{b: 5}]

ecDo.filterKeys({a:1,b:2,c:9},'a')
//result:{b:2,c:9}

40.sortBy

description
ecDo.sortBy(arr, sortText)

description-对象数组的排序

param {Array} arr-待处理数组 param {Sting} sortText-排序字段,多个字段用','分割

demo
var arr=[{a:1,b:2,c:9},{a:2,b:3,c:5},{a:5,b:9},{a:4,b:2,c:5},{a:4,b:5,c:7}]
//a是第一排序条件,b是第二排序条件
ecDo.sortBy(arr,'a,b')

result:[{"a":1,"b":2,"c":9},{"a":2,"b":3,"c":5},{"a":4,"b":2,"c":5},{"a":4,"b":5,"c":7},{"a":5,"b":9}]

41.steamroller

description
ecDo.steamroller(arr)

description-数组扁平化

param {Array} arr-待处理数组

demo
ecDo.steamroller([1,2,[4,5,[1,23]]])

result:[1, 2, 4, 5, 1, 23]

42.cut

description
ecDo.cut(arr,num,deep)

description-分割数组

param {Array} arr-待处理数组

param {Number} num-分割区间

demo
ecDo.cut([0,.....,100])

result:[[0,....49],[50,....99],[100]]

43.getFontSize

description
ecDo.getFontSize(_client)

description-适配rem

param {Int} _client-设计图宽度

demo
ecDo.getFontSize(750)

44.getEndTime

description
ecDo.getEndTime(endTime)

description-到某一个时间的倒计时

param {String} endTime-结束时间(需要正确的时间格式)

demo
ecDo.getEndTime('2017/11/22 16:0:0')
//测试时间是2017.11.6  17.14.55   //15天22时46分43秒

result:{ d:15, h:22, m:46, s:43 }

45.formatDate

description
ecDo.getEndTime(date,fmt)

description-时间格式化

param {String} date-时间戳(需要正确的格式) param {String} fmt-时间格式

demo
console.log(ecDo.formatDate(1526071153233));

result:2018-05-12 04:39:13

46.getDayByMonth

description
ecDo.getDayByMonth(month,year)

description-时间格式化

param {String} month-月份(默认当前月份) param {String} year-年份(默认当前年份)

demo
console.log(ecDo.getDayByMonth(1));

result:"2019/1/31" console.log(ecDo.getDayByMonth(12,2018)); result:"2018/12/31"

47.randomColor

description
ecDo.getEndTime(endTime)

description-生成随机颜色

demo
console.log(ecDo.randomColor(16));

result:#0d4814 console.log(ecDo.randomColor()); result:rgb(118,235,151)

48.randomNumber

description
ecDo.randomNumber(n1, n2)

description-随机返回一个范围的数字

param {Int} n1-最小值

param {Int} n2-最大值

demo
//返回5-10的随机整数,包括5,10
ecDo.randomNumber(5,10)

result:6 //返回0-10的随机整数,包括0,10 ecDo.randomNumber(10) result:7 //返回0-100000000的随机整数,包括0,10 ecDo.randomNumber()

49.setUrlPrmt

description
ecDo.setUrlPrmt(obj)

description-设置url参数

param {Object} url-原链接

param {Object} obj-需要设置的参数

demo
console.log(ecDo.setUrlParam('http://sss.com',{'a':1,'b':2}));

result:http://sss.com?a=1&b=2

50.getUrlParam

description
ecDo.getUrlParam(url)

description-获取url参数

param {String} url-超链接

demo
ecDo.getUrlParam('github.com?draftId=122000011938')

result:{draftId: "122000011938"}

51.upDigit

description
ecDo.upDigit(n)

description-现金额大写转换函数

param {number} n-金额数目

demo
ecDo.upDigit(10.5)

result:"人民币壹拾元伍角"

ecDo.upDigit(168752632)

result:"人民币壹亿陆仟捌佰柒拾伍万贰仟陆佰叁拾贰元整"

ecDo.upDigit(1682)

result:"人民币壹仟陆佰捌拾贰元整"

ecDo.upDigit(-1693)

result:"欠人民币壹仟陆佰玖拾叁元整"

52.clearKeys

description
ecDo.clearKeys(obj,clearValues)

description-情动对象里面值为null或者underfind的的属性underfind的属性

param {Object} obj-待处理对象

param {Array} clearValues-待清空的值 默认null, undefined, ''

demo
ecDo.clearKeys({a:"",b:null,c:"010",d:123})
result:{c: "010", d: 123}

ecDo.clearKeys({a:'',b:0,c:11,d:false},[0,''])
result:{c:11,d:false}

参考:example/clearKeys.html

53.fillKeys

description
ecDo.fillKeys(obj)

description-设置对象里面值为null或者underfind的属性的默认值

param {Object} obj-待处理对象

param {Array} fillValues-待设置的值 默认[null, undefined, '']

param {String} val-默认值 默认'-'

demo
ecDo.fillKeys({a:"",b:null,c:"010",d:123})
result:{a:"--",b:'--',c:"010",d:123}

ecDo.fillKeys({a:'',b:0,c:11,d:NaN},['',NaN],'*')
result:{a: "*", b: 0, c: 11, d: "*"}

参考:example/fillKeys.html

54.isType

description
ecDo.istype(o, type)

description-数据类型判断

param {Array|Object|String|Function|Number|Boolean|Undefined|Null|HTML} o-待处理的对象 param {String} type-类型字符串

demo
ecDo.istype([],'array')
result:true

ecDo.istype([])
result:'Array'

ecDo.isType('123','array,number')
result:false

ecDo.isType('123','array,string')
result:true

55.getBrowserInfo

description
ecDo.getBrowserInfo(type)

description-手机类型判断 param {String} type-类型字符串(android|iphone|ipad|weixin)

demo
ecDo.getBrowserInfo('android')

result:是安卓就返回true,否则就false

ecDo.getBrowserInfo()

result:返回手机浏览器的信息

56.throttle

description
ecDo.throttle(fn, delay, option)

description-函数节流 param {String} fn-执行的函数 param {Number} delay-间隔时间 param {Object} option-配置项 default:{first:true,last:true}

demo
 var count=0;
 function fn1(){
     count++;
     console.log(count)
 }

 //每100ms连续触发的调用,后一个调用会把前一个调用的等待处理掉
 /屏蔽首次调用  {first:false}
 //屏蔽最后一次调用  {last:false}

 document.onmousemove=delayFn(fn1,1000)
 //document.onmousemove=delayFn(fn1,1000,{first:false,last:false})

参考:example/throttle.html

57.debounce

description
ecDo.debounce(fn, delay)

description-函数节流 param {String} fn-执行的函数 param {Number} delay-间隔时间 param {Bool} delay-首次执行

demo
 var count=0;
 function fn1(){
     count++;
     console.log(count)
 }
 //鼠标移动事件触发,如果在300毫秒内连续触发事件,一直快速移动(时间间隔小于300毫秒),等到移动的时间间隔大于300毫秒的时候再执行。
 document.onmousemove=debounce(fn1,300)
 //如果要首次立即执行
 document.onmousemove=debounce(fn1,300,true)

参考:example/delayFn.html

58.setCookie

description
ecDo.setCookie(name, value, iDay)

description-设置cookie

param {String} name-cookie名 param {String} value-cookie值 param {Int} iDay-时间(天数)

demo
ecDo.setCookie('test', 'testcookie', 2)

59.getCookie

description
ecDo.getCookie(name)

description-获取cookie

param {String} name-cookie名

demo
ecDo.getCookie('test')

60.removeCookie

description
ecDo.removeCookie(name)

description-删除cookie

param {String} name-cookie名

demo
ecDo.removeCookie('test')

61.cookie

description
ecDo.cookie(name, value, iDay)

description-设置cookie

param {String} name-cookie名 param {String} value-cookie值 param {Int} iDay-时间(天数)

demo
ecDo.cookie('test', 'testcookie', 2)//设置
ecDo.cookie('test')//获取
ecDo.cookie('test', 'testcookie', -1)//删除,中间的值已经没有意义,只要天数设置-1,cookie就会无效

ec-dom DOM 操作函数

62.hasClass

description
ecDo.hasClass(obj, classStr)

description-检测对象是否有哪个类名

param {Object} obj-Dom对象 param {String} classStr-class名

demo
ecDo.hasClass(obj,'test')

result:true|false

63.addClass

description
ecDo.addClass(obj, classStr)

description-添加类名

param {Object} obj-Dom对象 param {String} classStr-class名

demo
ecDo.addClass(obj,'test')

64.removeClass

description
ecDo.removeClass(obj, classStr)

description-添加类名

param {Object} obj-Dom对象 param {String} classStr-class名

demo
ecDo.removeClass(obj,'test')

65.replaceClass

description
ecDo.replaceClass(obj, newName, oldName)

description-替换类名

param {Object} obj-Dom对象 param {String} newName-被替换的类名 param {String} oldName-替换的类名

demo
ecDo.replaceClass(obj,'test','afterClass')

66.siblings

description
ecDo.siblings(obj, opt)

description-获取兄弟节点

param {Object} obj-Dom对象 param {String} opt-过滤条件

demo
ecDo.siblings(obj,'#id')
result:符合条件的Dom对象

67.css

description
ecDo.css(obj,json)

description-设置样式

param {Object} obj-Dom对象 param {Object} json-样式名

demo

ecDo.css(obj,{'width':'300px','height':'300px'})

68.html

description
ecDo.html(obj)
ecDo.html(obj,str)

description-设置或者获取对象的所有内容

param {Object} obj-Dom对象 param {String} str-html内容

demo
ecDo.html(obj)
result:innerHTML

ecDo.html(obj,'<div>1111</div>')

69.text

description
ecDo.text(obj)
ecDo.text(obj,str)

description-设置或者获取对象的文本

param {Object} obj-Dom对象 param {String} str-内容(html标签将会被过滤)

demo
ecDo.text(obj)
result:innerHTML(过滤html标签)

ecDo.text(obj,'1230.312asd')

70.show

description
ecDo.show(obj)

description-显示对象

param {Object} obj-Dom对象

demo
ecDo.show(obj)

71.hide

description
ecDo.hide(obj)

description-隐藏对象

param {Object} obj-Dom对象

demo
ecDo.hide(obj)

72.ajax

description
ecDo.ajax(obj)

description-ajax封装参数

param {Object} 对象参数

  • @param {string}obj.type http连接的方式,包括POST和GET两种方式
  • @param {string}obj.url 发送请求的url
  • @param {boolean}obj.async 是否为异步请求,true为异步的,false为同步的
  • @param {object}obj.data 发送的参数,格式为对象类型
  • @param {function}obj.success ajax发送并接收成功调用的回调函数
  • @param {function}obj.error ajax发送失败或者接收失败调用的回调函数
demo
ecDo.ajax({
  	type:'get',
  	url:'xxx',
  	data:{
  		id:'111'
  	},
  	success:function(res){
  		console.log(res)
  	}
})

73.aftLoadImg

description
ecDo.aftLoadImg({dom, url, errorUrl, fn})

description-图片没加载出来时用一张图片代替

param {Object} obj.dom-Dom对象 param {String} obj.url-图片的url param {String} obj.errorUrl-出错的图片的url param {Function} obj.fn-回调函数,参数为obj.dom

demo

参考example/aftLoadImg.html

74.lazyLoadImg

description
ecDo.lazyLoadImg(className, num, errorUrl)

description-图片滚动懒加载

param {String} className-遍历Dom带有的类名 param {String} num-图片的url param {String} errorUrl-出错的图片的url

demo
//比如,一张图片距离文档顶部3000,num参数设置200,那么在页面滚动到2800的时候,图片加载。不传num参数就滚动,num默认是0,页面滚动到3000就加载


//html代码
//<p><img data-src="lawyerOtherImg.jpg" class="load-img" width='528' height='304' /></p>
//<p><img data-src="lawyerOtherImg.jpg" class="load-img" width='528' height='304' /></p>
//<p><img data-src="lawyerOtherImg.jpg" class="load-img" width='528' height='304' /></p>....

//data-src储存src的数据,到需要加载的时候把data-src的值赋值给src属性,图片就会加载。
//详细可以查看testLoadImg.html
    window.onload = function() {
     ecDo.loadImg('load-img',100);
    window.onscroll = function() {
            ecDo. loadImg('load-img',100);
        }
    }

参考example/lazyLoadImg.html

75.loadImg

description
ecDo.loadImg(className, cb)

description-图片加载(预加载)

param {string} className-遍历Dom带有的类名 param {function} cb-加载完毕的回调函数

demo

参考example/loadImg.html,example/loadImg1.html

76.findKeyword

description
 ecDo.findKeyword(str, key, el)

description-关键字加标签(高亮)

param {String} str-待处理的字符串 param {String} key-关键字,多个关键字','分割 param {String} el-要添加的元素,html标签元素 默认span

demo
ecDo.findKeyword('守侯我oaks接到了来自下次你离开快乐吉祥留在开城侯','守侯 开')

result:"守侯我oaks接到了来自下次你离快乐吉祥留在城侯"

ecDo.findKeyword('守侯我oaks接到了来自下次你离开快乐吉祥留在开城侯','守侯 开','i')

result:"守侯我oaks接到了来自下次你离快乐吉祥留在城侯"

LICENSE

MIT

ec-do's People

Contributors

chenhuiyj avatar hongxuwei avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ec-do's Issues

一些建议和BUG,共同完善

一、字符串相关:
1.关键字加标签findKey()方法:
调用:findKey('上海自来水来自海上','上海 海','p')
输出:<p>上海</p>自来水来自<p>海</p>上
问题:上海中也包含海,所以我可能期待的结果是:<p>上<p>海</p></p>自来水来自<p>海</p>上,当然每个人有不同的想法,我觉得你之前这个也不错,建议而已。
2.过滤字符串filterStr()方法:
原文:for(var i=0,len=_spstr.length;i<len;i++){ if(regText.indexOf(_spstr[i])===-1){ _regText+=_spstr[i]; } else{ _regText+='\\'+_spstr[i]; } }
问题:此for循环中的i与原文中上面的i可能冲突,导致结果出错。
建议:把此for循环中的i改为j,len改为length,期待改进。

二、数组相关:
1.数组扁平化steamroller()方法:
原文: if (Array.isArray(arr[i])) { newArr.push.apply(newArr, steamroller(arr[i])); } else {
问题:少一个this,另一种写法同理,期待改进。

三、数据类型相关:
1.数据类型判断istype()方法:
原文:if(_type){ var _type = type.toLowerCase(); }
问题:if判断语句中的_type应为type,期待改进。

四、ajax相关:
1.ajax()方法:
原文:if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { obj.success(xmlHttp.responseText); } else { obj.error(xmlHttp.responseText); }
问题:当readyState的状态为2和3的时候也会触发请求,故error事件并不能捕捉到异常,期待改进。

五、图片加载相关:
1.图片加载失败aftLoadImg()方法:
原文:aftLoadImg: function (obj, url, cb) { var oImg = new Image(), _this = this; oImg.src = url; .... },
问题:当图片加载失败时,可能会造成闪烁(一直请求加载,之前遇到过类似问题)
建议:aftLoadImg: function (obj, url, cb) { var oImg = new Image(), _this = this; oImg.onerror = ""; oImg.src = url; oImg.onerror = null; .... },
2.图片懒加载loadImg()方法:
问题:只能加载前三张图片,期待改进。

六、DOM操作相关:
1.显示与隐藏show()方法:
原文:obj.style.display = "";
问题:如果这个DOM对象本身的display属性为none的话,就不起效,但是又不能把他简单的设置为obj.style.display = "block";因为要保持它原本的display属性,期待改进。
2.设置文本内容html()方法:
建议:此方法名由"设置文本内容"改为"设置HTML内容的值",再新增一个“设置元素内容的文本”text()方法。ps:innerHTML是所有浏览器都支持的,innerText是IE浏览器和chrome浏览器支持的,Firefox浏览器不支持,其实innerHTML是W3C组织规定的属性,而innerText属性是IE浏览器自己的属性,不过后来的浏览器部分实现这个属性罢了。

感谢你的贡献,我自己也在你本来的代码里加了一些处理时间相关的方法,感觉时间处理比较常见,当然还有别的,期待你的更新。

本人水平有限,以上建议和意见可能不成熟,望见谅。

关于randomWord函数我有个不太明白的地方?

我觉得这个函数有个疑问, 我开始以为调用randomWord()函数时传递的数字, 是可以得到我传递时对应的字符长度. 所以我这里有点疑问, 我试了下, 发现得到的不是我传递的数字长度. 那么传递的数字的作用是什么?
麻烦您解答下.
打扰了.

原生方案

基于 https://segmentfault.com/a/1190000010225928 这篇文章(比较好辨识……)

库中部分 api 有原生方案的选择:

trim(str, type) case 2, 3, 4

  • String.prototype.trim
  • String.prototype.trimLeft
  • String.prototype.trimRight

repeatStr(str, count)

String.prototype.repeat

sumArr(arr)

[1, 2, 3, 4].reduce((x, sum) => x + sum, 0)

getEleCount (obj, ele)

要用 ===

hasClass(obj, classStr)

obj.classList.contains

addClass(obj,classStr)

obj.classList.add

removeClass(obj, classStr)

obj.classList.remove

replaceClass(obj,classStr)

obj.classList.replace

siblings(obj)

Array.from(obj.parentNode.children).filter(z => z !== obj)

css(obj, json)

Object.assign(obj, json)

getUrlPrmt(url) & setUrlPrmt(obj)

const url = new URL('https://github.com/chenhuiYj/ec-do/issues/new?a=1');
url.searchParams.get('a') // get
url.searchParams.set('b', '44') // set
urlX.href // https://github.com/chenhuiYj/ec-do/issues/new?a=1&f=1

尾声

替换 prototype 时不少库(如 jQuery)的做法是这样,不会造成覆盖原生方法:

String.prototype.trim = String.prototype.trim || function(type) { ... }

还有些其它问题不属于【原生方案】这一项,就不写在这了。

人民币转换大写函数Bug

当输入100000的时候会把“万”字去掉,变成人民币壹拾元整。类似的还有10000,20000,300000这些的数字,最后的replace正则有问题

ajax 错误

ec-do/ec-do.js

Lines 610 to 613 in 9e079f3

obj.success = obj.success || function () {
};
obj.success = obj.error || function () {
};

这里错了吧,2个 obj.success

增加 补零和字符串转DOM?!

function PrefixInteger(num, length = 2) { return (Array(length).join("0") + num).slice(-length); }
function strToNode(str = "<div class='strToNode'></div>") { let tempNode = document.createElement('div'); tempNode.innerHTML = str; return tempNode.firstElementChild; }

平均值哪里BUG

var covText = this.sumText / length;
this.sumText是undefined, length为0;
应该是sumText/arr.length吧?

大概看了下ec-do-2.0.0.js的代码,有点建议

  1. 可以将不同功用的归类,比如用于字符串的就是StringUtils,用于DOM的就是DOMUtils这样子,更清晰
  2. 我觉得不应该将函数中的Type用数字作区分,比如changeCase函数,用1表示首字母大写,用2表示首字母小写,这样子代码的可读性会很差,建议使用字符串类型,或者抽出来成为constant

一些疑问

  1. 数组求和那个函数用reduce方法不好吗?
  2. 随机码那个函数加上随机码长度更实用吧?
    3.得到n1-n2下标的数组,用slice方法好点吧?

设置url参数这样如何

function setUrlParam(url, obj) {
  let _rs = Object.keys(obj).filter(key => obj[key] !== ''&&obj[key] !== null&&obj[key] !== undefined)
    .map(key => encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]))
    .join('&'); 
  return `${url}?${_rs}`
}

text方法内调用filterStr方法的问题

   /**
     * @description 设置或获取文本内容
     * @param obj
     * @return {*}
     */
    text(obj) {
        if (arguments.length === 1) {
            return obj.innerHTML;
        } else if (arguments.length === 2) {
            obj.innerHTML = this.filterStr(arguments[1], 'html');
        }
        return this;
    },

text方法根据传参的数量不同,功能也不同,如果传2个参数,就是赋值操作,但是如果执行赋值操作,目前会报错 "this.filterStr is not a function"。

查阅filterStr方法,返回的是一个包含两个方法的对象,所以text调用this.filterStr需要修改。

有一处方法使用方式不懂

对于其中的html方法,具体的调用方式是什么样子的呢?
html(documrnt.getElementById('demo'),'123')这种还是html(documrnt.getElementById('demo'))这样的呢?

数组去重,这种思路如何?

//数组去重:利用key的唯一性
function removeRepetition (a) { var rs = [],hash = {}; for(var key in a){ if(a[key]!=null && !hash[a[key]]){ rs.push(a[key]); hash[a[key]] = true; } } return rs; }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.