位置: 编程技术 - 正文

分享我对JS插件开发的一些感想和心得(js插件推荐)

编辑:rootadmin

推荐整理分享分享我对JS插件开发的一些感想和心得(js插件推荐),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:分享我对js插件的认识,js插件怎么写,分享我对js插件的评价,js插件使用教程,分享我对js插件的评价,js插件大全,分享我对js插件的评价,分享我对js插件的看法,内容如对您有帮助,希望把文章链接给更多的朋友!

本文阅读目录:

&#;起因&#;如何开发一个轻量级的适用性强的插件&#;总结

起因

如果大家平时做过一些前端开发方面的工作,一定会有这样的体会:页面需要某种效果或者插件的时候,我们一般会有两种选择:

1、上网查找相关的JS插件,学习其用法2、自己造轮子,开发插件。

寻找存在的插件

第一种做法,上网查找JS插件

这种方式如果是有刚好符合项目需求的插件,那是非常幸运的事了。但是我相信大部分情况下,我们找到的插件会有下面的几个问题:

(1)UI定制:很多插件提供的UI和我们的项目设计风格完全不搭,可能写好的html和css不符合插件使用的方式,结果我们还要去修改html和css来适应插件的用法。(2)学习成本:如果是比较复杂的插件,存在着一个学习成本的问题,要去学习这个插件怎么使用。(3)插件不符合需求:我们找到的插件并不完全保证符合我们项目的需求,这个时候你可能要去修改它的代码来支持项目需求,这也是可能存在的问题(4)插件功能太大而全:假设你的项目需要一个简单的轮播插件,结果找到一个很牛逼的轮播插件,各种酷炫的效果,而且刚好也能使用,但是这个插件的体积和一个js库的体积差不多,而如果自己写效果的话,其实只要几十行代码就可以搞定了,这时候引入这个插件是否太过多余了。这是使用js插件可能存在的一些问题,当然具体情况具体分析,我也并非不使用已经写好的js插件,毕竟有些插件是经过了时间考验的,使用起来更有益于项目的进行。如果是下面几种情况,我会考虑使用已经存在的js插件:

(1)复杂的功能:比如文件上传,批量上传,进度显示等等,比如HTML编辑器(2)项目工期紧急,对性能要求不高的场景(3)js插件刚好符合项目的需求

自己造轮子

第二种做法,自己造轮子开发插件自己写插件主要有下面几个问题:

(1)开发插件需要时间,可能拖延项目工期,如果工期紧急不建议选用这种方式(2)自己造的轮子未必有现有轮子的好用,要考虑到队友是否适用(3)需要比较高的开发水平

如果平时项目不紧急的话,我会考虑自己造轮子,主要有几个好处:

(1)完全符合项目需求,这一条是显而易见的,因为完全针对项目来开发的插件(2)知根知底,容易修改,插件完全是自己开发的,项目有什么需求变化完全可以灵活应对(3)轻量级,因为我们不像其他开源插件要应对那么多种需求,所以我们自己的轮子也只需要符合自己的车,不需要很多变化,相对来说,变化少功能少,代码也会少。(4)对个人能力是一个很大的锻炼,不要重复造轮子这是在程序员中广为流传的一句话,这也成为很多人偷懒的一个借口,但是我们不应该以此为借口来阻碍自己的前进的脚步。造过轮子的同学应该深有体会,造过一个轮子,远比你使用别人写的个插件的收获还要多,我们的轮子可以不在项目中使用,但这是一种效率极高的学习方式,强烈推荐。

如何开发一个轻量级的适用性强的插件

怎么开发一个适应性强的且轻量的插件呢?所谓适用性强,简单地说就是有几点:

1、对UI限制越少越好,最好没有2、不提供太多功能,只提供简单的api,让使用者易于扩展

我们举个例子,假设我们要开发一个jQuery分页插件,关于jQuery插件开发教程,请参考jQuery插件开发。

确定需求

确定需求是开发插件的第一步。要开发一个轻量级的分页插件,我们还是用从插件最基本的需求开始说起,分页插件最基本的需求是什么呢,无非就是页码显示,页码之间的切换,所以,我们的插件要围绕着这基本需求开始,而暂时不要考虑其他可能存在的需求。

确定插件html和css

确定好插件的需求后,第二步就是插件的UI,也就是html和css。

假设基本的ui如下:

分享我对JS插件开发的一些感想和心得(js插件推荐)

基本的分页UI

看到上面的基本ui,不知道大家会想到什么样的html结构。对于我们开发人员来说,html和css要越简单越好,所以最基本的html结构无非就是a标签和span标签的混合,有的同学可能会想到使用ul,li标签,但这其实增加的复杂度,得不偿失。我们编写html代码如下:

这是最基本html代码结构,包含了分页插件的容器div.pager,当前页span.curPage,其他页码a标签,上一页,下一页等按钮。

接着是css代码,主要当前页标签,其他页面标签,上一页下一页,鼠标悬停在按钮上等几种样式,编写如下:

编写js代码

写好基本的html和css,接下来最关键的就是js代码了。首先我们搭建好jQuery插件开发的基本形式:

这里主要提供了一些可选参数的默认值,比如页码默认为0,每页数量6条等等。

接着我们来考虑一下分页插件的思路:

1、设置当前页码为0,表示第一页2、生成分页插件的html代码3、修改页码,再生成html代码

基于这个思路,我们编写代码如下:

这段代码中有两个关键点要记住:

(1)html代码的生成,由于页码可能太多,需要隐藏部分页码,所以我们要生成一个省略号表示被隐藏的页码,通过maxButtonCount来表示最多的页码按钮

(2)事件绑定,每次页码改变都会重新生成html,我们采用事件代理的方式,提高了性能,也不用重复绑定事件这样一个最基本的分页插件已经可以了。

但是这样足够了吗?

假设我们需要支持输入页码直接跳转的功能,那该如何呢,是否需要修改原有的html结构和css?前面我们说到,开发一个插件要围绕最基本的需求开始,那对于这些潜在的可能存在的需求又该如何处理呢。

我的解决方案是这样的,提供简单的api,不提供UI,完全由用户自定义。

我们在上面的代码增加三个api:getPageIndex,setPageIndex和setItemCount,分别表示获取当前索引,设置当前索引,设置项目总数量。代码如下:

提供了这三个api,假设用户需要跳转页码的功能,可以直接使用setPageIndex方法来跳转,UI完全由用户自定义,插件本身只专注基本功能,不干涉其它。

大家可以查看DEMO

整个插件的代码已经放在我的github上,有兴趣的同学可以点击查看github

总结

最后,我整理一下我开发一些js插件的思路:

1、专注最基本的需求本身,暂时不考虑可能潜在的需求2、尽量不提供或少提供UI,减少对使用者的限制3、考虑可能潜在的需求,提供api,潜在的需求完全由用户自定义

这是我在编写js插件时,考虑如何轻量化并且适用性强的一些想法,欢迎大家交流!

JS获取时间的相关函数及时间戳与时间日期之间的转换 时间戳和时间日期的转换是常见的操作,下面就通过代码实例介绍一下如何实现它们之间的相互转换。在没学习本文之前先给大家介绍下javascript中Date()

JavaScript判断图片是否已经加载完毕的方法汇总 在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法

JS通过Cookie判断页面是否为首次打开 废话不多说了,直接给大家贴代码了,本文写的不好还请各位大侠见谅。JScriptcode:functionCookie(key,value){this.key=key;if(value!=null){this.value=escape(value);}this.expi

标签: js插件推荐

本文链接地址:https://www.jiuchutong.com/biancheng/381731.html 转载请保留说明!

上一篇:关于JavaScript作用域你想知道的一切(关于javascript的说法)

下一篇:JS获取时间的相关函数及时间戳与时间日期之间的转换(js获取当前时间)

  • 境内单位和个人向境外单位提供服务
  • 非员工私车公用怎么进行账务处理
  • 个人所得税年度汇算时间
  • 残疾人保障金的计算方法
  • 个税缴款三方协议
  • 企业发行债券的目的
  • 银行承兑汇票手续费是多少
  • 外购商品增值税
  • 建筑企业增值税怎么算
  • 没残值的固定资产有哪些
  • 期初余额什么时候在借方什么时候在贷方
  • 用于集体福利的消费税
  • 企业必须要现金流入吗
  • 固定资产清理科目怎么结转
  • 核定征收的企业需要汇算清缴吗
  • 小微企业免征增值税的账务处理
  • 资产损益表怎么看
  • 财务报告报送与信息采集季报怎么填写
  • 税控盘第一次使用
  • 企业取得代扣代缴个税手续费分录
  • 新员工15号入职交社保吗
  • 已申报未导入什么意思呀
  • 查账征收的企业所得税什么时候开始汇算
  • 非关联企业无偿拆借资金企业所得税
  • 委托加工物资是一级科目吗
  • 备注栏需要写内容嘛
  • 工资薪金所得包括差旅费津贴吗
  • 进项发票大过销项,退税只退13个点的增值税吗
  • 组策略阻止了这个程序0x800704ec
  • 退货 会计
  • 产品成本核算方法的构成要素
  • 稿酬特许权使用费的预扣率是多少
  • 穿墙路由器怎么选择
  • PHP:imagelayereffect()的用法_GD库图像处理函数
  • 公司收到个人汇款怎么办
  • php socket编程
  • 动态模型图如何制作
  • 业务招待费专票可以抵扣增值税吗
  • php流程图
  • 银行结算方式有哪几种方式?其具体内容是什么?
  • js 跳转网页
  • sql server功能介绍
  • 分公司是独立的诉讼主体吗
  • sql server触发器的作用
  • SQL Server通过重建方式还原master数据库
  • 电商新规则
  • 购车的车辆购置税计入固定资产可以所得税一次性扣除吗
  • 实收资本的账务处理与其他应收款
  • 小规模增值税为负数怎么报税
  • 咨询服务业优惠政策
  • 刚成立公司没有发生业务,如何申报企业所得税
  • 应收账款全额计提的条件
  • 进货没开发票,销货却开发票应怎么做帐?
  • 计算成本时应该考虑什么
  • 账户分类的作用是什么
  • 小规模纳税人超过30万是全额纳税吗
  • 低值易耗的管理制度
  • 企业开发有多个产品
  • 小规模纳税人应纳增值税额的计算
  • 建账的内容一般包括什么
  • sql语句压缩
  • win7怎么创建新用户
  • ubuntu 16.04
  • win8搜索程序和文件在哪里
  • ati2mdxx.exe是什么进程 ati2mdxx进程信息查询
  • pruttct.exe - pruttct是什么进程 有什么用
  • 利用图片密码登录微信
  • win7系统浏览器不见了
  • Win10系统里的Smartscreen筛选器的使用以及开启方法
  • vtune自动安装脚本分享
  • css中背景图片设置
  • jQuery中Nicescroll滚动条插件的用法
  • JavaScript中String.match()方法的使用详解
  • 如何搭建应用服务器
  • 怎么利用python处理批量表格
  • 税收征管法规定税务机关在税款征收中可以采取哪些措施
  • 广东 电子税局 app
  • 广东电子税务局中山税务局网
  • 如何查询企业上市情况
  • 小规模纳税人是按月还是按季度申报增值税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设