第一次写jQuery插件,简直无从下手,好在一步一步从简单到复杂(对我来说挺复杂的),终于理解了jQuery插件的写法规则,并最终以一个新闻式插件面世。尤其感谢带领我的很棒的前端师傅~
废话不多说,开始。(编写准备工具:sublime(其他只要可以开发HTML就行),jQuery包)
一、题目:编写一个类似新闻样式的小插件(即:用上这个插件,就能自动生成一个新闻样式),如图所示。
二、分析题目,整理思路,并用代码实现它
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对象《参数可以是对象,但是不能是》