当前位置: 首页 > news >正文

一个最简单的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对象《参数可以是对象,但是不能是》

 

转载于:https://www.cnblogs.com/hihao/p/6532569.html

相关文章:

  • 《Android游戏开发详解》一2.10 使用对象
  • 《Python核心编程(第3版)》——2.8 练习
  • 《编译与反编译技术实战 》一 第1章 实践的环境与工具
  • Hadoop创始人Doug Cutting谈未来大数据的技术
  • 《PowerShell V3——SQL Server 2012数据库自动化运维权威指南》——2.16 创建索引...
  • 《嵌入式C编程:PIC单片机和C编程技术与应用》一1.11 兼容性
  • 《CCNA学习指南:Cisco网络设备互连(ICND1)(第4版)》——2.5节点对点通信
  • 《走进SAP(第2版)》——1.2 小结
  • 《HTML5实战》——第2章 创建表单:输入小部件、数据绑定以及数据验证
  • 《Nmap渗透测试指南》—第7章7.9节系统漏洞扫描
  • Firefox OS 模拟器
  • ThinkPHP学习(五)图片验证码
  • 《需求设计:构建用户想要和需要的产品》——1.3 像工程学那样来开发IT应用程序...
  • 《重构:改善既有代码的设计》—第1章1.2节重构的第一步
  • 《UNIX网络编程 卷1:套接字联网API(第3版)》——2.6 TCP连接的建立和终止
  • canvas绘制圆角头像
  • CentOS学习笔记 - 12. Nginx搭建Centos7.5远程repo
  • Debian下无root权限使用Python访问Oracle
  • Linux编程学习笔记 | Linux IO学习[1] - 文件IO
  • Python进阶细节
  • SegmentFault 技术周刊 Vol.27 - Git 学习宝典:程序员走江湖必备
  • session共享问题解决方案
  • 第三十一到第三十三天:我是精明的小卖家(一)
  • 互联网大裁员:Java程序员失工作,焉知不能进ali?
  • 基于web的全景—— Pannellum小试
  • 开年巨制!千人千面回放技术让你“看到”Flutter用户侧问题
  • 想写好前端,先练好内功
  • 写代码的正确姿势
  • - 语言经验 - 《c++的高性能内存管理库tcmalloc和jemalloc》
  • 自制字幕遮挡器
  • 3月7日云栖精选夜读 | RSA 2019安全大会:企业资产管理成行业新风向标,云上安全占绝对优势 ...
  • LevelDB 入门 —— 全面了解 LevelDB 的功能特性
  • 阿里云ACE认证之理解CDN技术
  • ​​快速排序(四)——挖坑法,前后指针法与非递归
  • ​香农与信息论三大定律
  • !!Dom4j 学习笔记
  • # Apache SeaTunnel 究竟是什么?
  • #1015 : KMP算法
  • #ubuntu# #git# repository git config --global --add safe.directory
  • #我与Java虚拟机的故事#连载17:我的Java技术水平有了一个本质的提升
  • ()、[]、{}、(())、[[]]等各种括号的使用
  • ()、[]、{}、(())、[[]]命令替换
  • (04)Hive的相关概念——order by 、sort by、distribute by 、cluster by
  • (ISPRS,2023)深度语义-视觉对齐用于zero-shot遥感图像场景分类
  • (附源码)springboot“微印象”在线打印预约系统 毕业设计 061642
  • (附源码)ssm航空客运订票系统 毕业设计 141612
  • (黑客游戏)HackTheGame1.21 过关攻略
  • (转)chrome浏览器收藏夹(书签)的导出与导入
  • .Net - 类的介绍
  • .net oracle 连接超时_Mysql连接数据库异常汇总【必收藏】
  • .Net 中的反射(动态创建类型实例) - Part.4(转自http://www.tracefact.net/CLR-and-Framework/Reflection-Part4.aspx)...
  • .net用HTML开发怎么调试,如何使用ASP.NET MVC在调试中查看控制器生成的html?
  • :=
  • @reference注解_Dubbo配置参考手册之dubbo:reference
  • @Transactional 详解