美文网首页让前端飞Web前端之路
使用es6编写的小型类库(包含多种常规方法)

使用es6编写的小型类库(包含多种常规方法)

作者: 那年那夏你很美 | 来源:发表于2020-03-27 11:25 被阅读0次

使用es6编写的小型类库,持续更新

1.tab.js

页签切换插件;

所需参数:id:父级id(字符串’id’);title:id下title类名(字符串’title’),detaile:要展示的详情类名(字符串’detail’),acitve:激活class(字符串’active’),type:类型,选填默认为’click’(字符串’click’,‘hover’,‘autoPlay’),time:时间(Number型,默认为1000)

内置方法:

(1)init()初始化方法

(2)hide()全部隐藏方法

(3)show()展示方法

(4)hover()悬浮展示方法

(5)autoPlay()自动切换方法(伪轮播)

使用方式例:console.log(new tab(‘tab’,‘tabtitle’,‘detail’,‘active’));

2.jsonTree.js

json结构转树形结构:

所需参数:_jsonData:json数据源(json数组);_pid:父级id的key值(字符串),_id:本身id值(字符串),_children:子级列表key值(自定义默认为’children’可选项,字符串),_jsonStr:要转换的key值(json型数据)

_jsonData形式:var jsons = [

{

“parentChannelId”:"",

“level”:“2”,

“channelName”:"\u4E00\u7EA7\u680F\u76EE1",

“channelId”:“379b2622-34c6-450c-a3ce-f415d2db3bac”

},

{

“parentChannelId”:“379b2622-34c6-450c-a3ce-f415d2db3bac”,

“level”:“3”,

“channelName”:"\u4E8C\u7EA7\u680F\u76EE1",

“channelId”:“fe45381d-917a-4750-ba1f-35b27525fabc”

}]

_jsonStr形式:var keyMap = {//将所有key名为channelName转换为name,channelId转换为id

“channelName” : “name”,

“channelId” : “id”

};

内置方法:

(1)getTreeDate()获取jsonTree结构

(2)getJsonStr()key值转换方法

使用方式例:

var json=new treeData(jsons,‘parentChannelId’,‘channelId’,‘children’,keyMap).getTreeDate();

console.log(json);

3.currentDate

获取当前时间:

内置方法:

(1)init()给初始化时间所需参数赋值date,year,mouth,day,week,hours,minutes,seconds

(2)getCurrentDate()获取当前日期,返回值类型 yyyy年mm月dd日 week

(3)getCurrentTime()获取当前时间,返回值类型 hh:mm:ss

(4)getAllCurrentDate()获取当前日期时间,返回值类型 yyyy-mm-dd hh:mm:ss week

使用方式例:console.log(new currentDate().getAllCurrentDate());

4.formCheck

数据验证:

所需参数:{‘a’:’ value’,‘b’:’ ‘,c:’’}//key:要验证的参数名,value:要验证的参数值

内置方法:

(1)check()对数据进行非空校验,返回所有值为空的key名[],返回类型数组

使用方式例:console.log(new formCheck(arr).check()+‘不能为空’);//console.log([‘b’,‘c’]);

5.fontRoll

文字横向滚动

所需参数:_id:包裹id(字符串’id’),_class:文字class名(字符串’class’),_speed:滚动速度(Number型,默认为50)

内置方法:

(1)init()初始化方法,内含是否开启滚动校验,以及触发事件绑定

(2)isScoll()校验是否开启滚动

(3)marquee()定时器开启

(4)mouseover()鼠标移入关闭定时器

(5)mouseout()鼠标移出开启定时器

使用方式例:new fontRoll(‘txt-scroll’,‘aaa’,50);

===================================================2020/3/27更新

6.selectTab

自定义下拉框

所需参数:_id:select的id(字符串’id’),_class:选中状态类名(字符串’class’),type:类型(字符串,默认单选,‘single’,‘check’),_height:下拉框最大高度(Number型,默认为200)

内置方法:

内置方法:

(1)init()初始化方法,生成自定义下拉框,以

结构

(2)insertAfter()在页面中插入节点

(3)HandleClick()事件绑定方法,点击显示隐藏,点击其他地方关闭下拉

(3)singleHandleClick()单选事件绑定方法,点击li施加选中,点击其他关闭下拉框

(3)checkHandleClick()多选事件绑定方法,点击li施加选中或取消选中

(4)removeAllClass()移除活跃li的active

(5)newGuid()生成随机值

(6)getValue()获取选中值

(7)setSingleValue(val,name)单选中设定选中值,所需参数val:值,name:对应名称

(8)setCheckValue(arr)多选中设定选中值,所需参数arr为数组对象,例如arr=[{“name”:“2”,“value”:“2”},{“name”:“3”,“value”:“3”},{“name”:“4”,“value”:“4”}];

使用方式例:const a = new selectTab(‘select’,‘active’,‘check’);

a.setCheckValue([{“name”:“2”,“value”:“2”},{“name”:“3”,“value”:“3”},{“name”:“4”,“value”:“4”}]);

const b = new selectTab(‘select1’,‘active’);

b.setSingleValue(3,‘3’);

console.log(a.getValue());

========================================================================================

暂时只有这么多,后续有更新会及时同步,欢迎提出建议

依赖性低,无需jquery支持,对兼容性要求较高,无UI要求

Git地址:https://github.com/a894732835/es6-Class-Plugins

相关文章

  • 使用es6编写的小型类库(包含多种常规方法)

    使用es6编写的小型类库,持续更新 1.tab.js 页签切换插件; 所需参数:id:父级id(字符串’id’);...

  • 使用己有的C/C++库

    JNI的一个使用方式就是编写一些本地方法来使用己有的本地库。本章介绍了一种生成一个包含一系列本地函数的类库的经典的...

  • 面向对象 解决增删改查

    面向对象 1. 用构造函数方法 构造函数类似于类,但不是类,在ES6出来之前常规用法。 1. 用类方法 ES6出来...

  • 从零开始打造自己的PHP框架——第1章

    目标 本篇,我们来实现类库自动加载,以及路由解析。 类库自动加载 常规加载 常规加载一般使用include或者re...

  • JNI

    一、开发步骤: 编写带有 native 声明的方法的 Java 类 使用 javac 命令编译编写的 Java 类...

  • Mac系统下JNI实现native方法(Java调用C++语言的

    JNI的实现步骤如下: 编写带有native声明的方法的Java类 使用javac命令编译编写的Java类 使用j...

  • 初始类和对象

    对象的特征 属性 方法 定义一个类的步骤 定义类名 编写类的属性 编写类的方法 使用对象 创建对象类名 对象名=n...

  • cocoa pods的Podfile文件编写

    1.为不同target添加依赖库,可以使用下列方法编写 也可以按照下列方法编写多个target依赖相同的库(Rub...

  • cordova项目遇到的问题1-no member named

    编写了cordova的插件,插件中包含了ios的第三方类库 类库的源代码是c++,添加后编译报错,错误提示:no ...

  • 一个vue的小工具库

    最近使用vue进行开发,于是动手封装了一个vue的小型工具库,期待能够继续完善 使用ES6导入就好了,不过部分依赖...

网友评论

    本文标题:使用es6编写的小型类库(包含多种常规方法)

    本文链接:https://www.haomeiwen.com/subject/pfcluhtx.html