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

  • 相关阅读:
    记录下首次开通流量主,开心开心
    微信小程序之本地缓存
    在使用ef的情况下,有Migrations文件,想要直接生成数据库
    CSS 设置圆角div和阴影效果
    小程序UI库(UI组件)
    没有找到可以构建的 NPM 包---小程序开发
    php 接口参数对象转数组方法
    tp5框架获取随机n条
    php图片上传base64接口上传
    php如何实现定时任务,php定时任务方法,最佳解决方案,php自动任务处理
  • 原文地址:https://www.cnblogs.com/hihao/p/6532569.html
Copyright © 2020-2023  润新知