一个最简单的jQuery插件编写历程

第一次写jQuery插件,简直无从下手,好在一步一步从简单到复杂(对我来说挺复杂的),终于理解了jQuery插件的写法规则,并最终以一个新闻式插件面世。尤其感谢带领我的很棒的前端师傅~

废话不多说,开始。(编写准备工具:sublime(其他只要可以开发HTML就行),jQuery包)

一、题目:编写一个类似新闻样式的小插件(即:用上这个插件,就能自动生成一个新闻样式),如图所示。

image.png

二、分析题目,整理思路,并用代码实现它

1、首先用HTML+CSS将静态页面写出来(不用想许多后续难度等等问题,一步一步做下去)

2、用JavaScript(或者jQuery)改写静态HTML,达到删除html代码还能照常显示(这时候开始出现一些问题,仔细调试、检查)

3、实现复杂动态问题(这里是实现上一页、下一页翻页功能)

4、解决数据格式问题(图中所有数据都是后台数据传输,设计好数据格式)

5、优化代码,提高性能

6、按照jQuery插件的形式修整代码

7、后续检查优化

三、分享我在这个过程中遇到的问题和解决办法

1、数据。需要什么数据,数据从哪里来,前端要怎么获取。

如果是在群体项目开发中,后端会给出数据,并且数据的格式和到底有哪些数据都是后端(或者说开发需求讨论中)给出。这将省了前端许多功夫(起码不用思考哪些数据是后台动态的,对新手来说很是锻炼,不过只要一步一步优化,即使刚开始没有考虑到的数据,后期可以修改完善,形成一个独立性高的插件)。

【1】哪些数据是需要从后台传输(需要什么数据)

在这个题目中刚开始我想到的考后端传输的数据只有:1)右边数据。2)分页数据。3)图片地址

后来随着题目的深入(重点是师傅的指点),发现可以从后端获取的数据还有:1)分页数据的长度(count)。《可能后台准备的数据有100条,但是每次请求只给你3条,这时候你无法在前端通过js求得数据长度,这也就涉及到最后一页如果数据没有那么占满一页,要如何显示,到最后一页不能再点击下一页等问题》2)pageSize(每页显示几条数据,每个地方的需求不同,每页显示几条数据不能定死,这样会减少插件利用率)

【2】数据从哪里来(前端要怎么获取)

既然这个数据从后台来(可以用ajax请求),但是这是自己锻炼的题目,并不是项目开发,那么如何获取?----自定义

解决办法是先自定义需要的数据,然后引用函数的时候传输这个自己定义的变量。

那么,问题来了,数据长什么样?

刚开始,虽然知道数据可能是json样式,但是没有对象的思想(传输数据,无论需要多少数据,有多少层,都将它们一起封装在一个对象中,然后通过调用对象来调用数据),只是需要几个数据,就定义了几个变量。后期将所有需要的数据封装成一个options对象《参数可以是对象,但是不能是》

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏老马寒门IT

02-老马jQuery教程-jQuery事件处理

在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。

25200
来自专栏IMWeb前端团队

jQuery中的remove和empty区别

说道dom中移出节点,这两个都可以完成。但也有写差别: empty()是只移除了 指定元素中的所有子节点,拿$(“div”).empty()来说,他只是把 移...

22950
来自专栏西安-晁州

jquery.edatagrid(可编辑datagrid)的使用

用spring+springmvc+mybatis+mysql实现简单的可编辑单元格,首先是页面效果图: ? 其中,“编号”列是不可编辑的,“暂缓措施”是可以自...

31800
来自专栏老马寒门IT

04-老马jQuery教程-DOM节点操作及位置和大小

DOM时代我们通过document的createElement方法动态创建标签。创建标签后,动态的给他添加属性。例如代码:

24000
来自专栏老马寒门IT

06-老马jQuery教程-jQuery高级

jQuery里面的大部分API都是在jQuery的原型对象上定义的。jQuery源码中对原型对象做了简写的处理。也就是说:jQuery.fn === jQuer...

25100
来自专栏IMWeb前端团队

也谈 setTimeout

也谈 setTimeout setTimeout ,延迟一段事件执行代码,当然这是最基本的用法,这里不说基本用法。 jQuery 中的轮询 轮询,可能是 set...

233100
来自专栏老马寒门IT

03-老马jQuery教程-DOM操作(上)

在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索。目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作...

23600
来自专栏别先生

jQuery/javascript实现简单网页计算器

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>jQuery实现</title> 5 <scr...

39980
来自专栏IMWeb前端团队

jQuery中的DOM操作

Dom操作的分类:DOM Core,html-DOM,CSS-DOM 查找节点: 查找属性节点(通过jq选择器),操作属性节点(attr(‘属性名’,’属性值’...

21470
来自专栏老马寒门IT

05-老马jQuery教程-动画

jQuery的动画系统做的非常出色,而且把最常用的显示、隐藏、淡入淡出、滑动显示和折叠凳效果都做了很好的封装。跟jQuery的选择器和事件配合起来,可以实现很多...

22700

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励