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

第一次写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对象《参数可以是对象，但是不能是》