一、学习插件编写背景

作为一名前端人员,应该注重前端复用性及组件化,更应该考虑前端的性能优化,做到代码简洁有序,不冗余。特别是在大型团队中,如果一个团队中存在多个功能相似的组件,举个栗子,拿分页组件举例,某一个项目系统中使用这个项目下人员编写的一个分页组件,另一个项目系统中使用另一个项目下人员编写的一个分页组件,诸如此类,还有很多个项目系统也是如此,那么将造成团队内部组件冗余不清晰。每个新接手一个项目系统的人员都得熟悉特定的这个项目系统下的诸如分页组件的其他组件,等熟悉之后才能更好地进行项目需求开发。这也正是每个公司想要封装属于自己内部的一套组件库的原因。

二、学习历程

1. 学习封装组件的几种普遍方法及思维

  • 通过JavaScript面向对象的思想,prototype属性(这种属性是比较普遍的)
  • 通过$.fn.pluginName方式(通过jQuery来扩展插件)

2.学习方式

找自己感兴趣的插件来学习,下载其源码,学习如何编写一个组件。之前在看React的combineReducer方法的源码的时候,其实React的思想已经很完备了,combineReducer这个方法就是将多个reducer分别处理不同的action,然后将不同action处理后的state合并成一个最新的state返回。感受最深的是,combineReducer这个方法对于接收参数的验证处理,考虑到了各种情况,保障用户不同的参数传入方式。

3.注重实践

学习完几个别人编写的插件之后,大概明白了插件(组件)编写时需要注意的原则。原则大概有这么几个:默认参数(defaultOption),初始化方法(init()),绑定事件(bindEvent),销毁实例或者绑定事件(destroy)。
然后可以根据项目系统中还需新增或完善的插件(组件)进行封装或补充。

三、实践心得

jQuery之编写插件的更多相关文章

  1. jQuery自己编写插件()

    引言: 在项目中不同页面经常要用到已经写好的交互,比如弹窗,比如下拉菜单,比如选项卡,比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情,而且个人认为有些low了,我们可 ...

  2. jquery编写插件的方法

     版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...

  3. 再谈:jquery编写插件的方法

    版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...

  4. 【原】jQuery编写插件

    分享一下编写设置和获取颜色的插件,首先我将插件的名字命名为jquery.color.js.该插件用来实现以下两个功能1.设置元素的颜色.2.获取元素的颜色. 先在搭建好如下编写插件的框架: ;(fun ...

  5. jquery编写插件

    jquery编写插件的方法    版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三 ...

  6. jquery带参插件函数的编写

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  7. javascript&&jquery编写插件模板

    javascrpt插件编写模板 这里不分享如何编写插件,只留一个框架模板,使用面向对象的形式进行编写,方便管理 ;(function(window,document){ function FnName ...

  8. 两个jquery编写插件实例

    (1) 封装基于jq弹窗插件   相信码友们对于$.fn.extexd();$.extend()以及$.fn.custom和$.custom都有一定的了解:我阐述一下我自己对于$.fn.custom和 ...

  9. jquery编写插件(转)

    教你开发jQuery插件(转)   阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原 ...

随机推荐

  1. Java 之 File类(文件操作)

    一.概述 java.io.File 类是文件和目录路径名册抽象表示,主要用于文件和目录的创建.查找和删除等操作. File类是一个与系统无关的类,任何的操作系统都可以使用这个类中的方法. 路径问题: ...

  2. __init__、__new__方法详解

    __init__详解 class Dog(object): def __init__(self): print('init方法') def __del__(self): print('del方法') ...

  3. c# 方法的隐藏

  4. Python memory error的问题

    前段时间在读取一个文件的过程中,竟然出现了Memory Error!简直让我怀疑自己买了个假电脑,毕竟是8G内存i7处理器,一度怀疑自己装了假的内存条....下面说一下几个解题步骤....一般就是用下 ...

  5. 算法学习:我终于明白二分查找的时间复杂度为什么是O(logn)了

    最近发现了个好东西,就是一个学算法的好东西,是网易公开课的一个视频. 直通车 这是麻省理工学院的公开课,有中英字幕,感谢网易.. 也可以在App把视频缓存下来之后再放到电脑上面看,因为我这样可以倍速, ...

  6. cmd中for的用法

    在cmd窗口输入for /?后的原文,被我自己“翻译”了一下,更像人话了. 推荐去https://www.cnblogs.com/cbugs/p/8992059.html这篇部落格里去看看,讲的更好. ...

  7. 详细讲解vue.js里的父子组件通信(props和$emit)

    在进入这个话题之前,首先我们先来想一下在vue里,如何写一个父子组件.为了简单起见,下面的代码我都没用脚手架来构建项目,直接在html文件里引入vue.js来作为例子.父子组件的写法如下: <d ...

  8. 洛谷P2661 信息传递【并查集】

    题目:https://www.luogu.org/problemnew/show/P2661 题意: 有一个有向图,问最小环的的大小. 思路: 明明是图的遍历,但是bfs会T.第二组下下来的数据n居然 ...

  9. QCheckBox 使用本地图片的QSS样式

    setStyleSheet 为以下字符串,选中,未选中,有焦点,无焦点时显示不一样的图片 QString("QCheckBox::indicator:unchecked{image:url( ...

  10. php常量和变量之变量引用

    变量引用 变量引用很多老师喜欢来用C语言的指针来去讲解.我们作为有这么多年开发和教学经验的人来说——大多数学习PHP的人来说根本不了解C语言. 使用C语言一指针来讲解变量引用,我们觉得画蛇填足.并且, ...