jQuery之编写插件
一、学习插件编写背景
作为一名前端人员,应该注重前端复用性及组件化,更应该考虑前端的性能优化,做到代码简洁有序,不冗余。特别是在大型团队中,如果一个团队中存在多个功能相似的组件,举个栗子,拿分页组件举例,某一个项目系统中使用这个项目下人员编写的一个分页组件,另一个项目系统中使用另一个项目下人员编写的一个分页组件,诸如此类,还有很多个项目系统也是如此,那么将造成团队内部组件冗余不清晰。每个新接手一个项目系统的人员都得熟悉特定的这个项目系统下的诸如分页组件的其他组件,等熟悉之后才能更好地进行项目需求开发。这也正是每个公司想要封装属于自己内部的一套组件库的原因。
二、学习历程
1. 学习封装组件的几种普遍方法及思维
- 通过JavaScript面向对象的思想,prototype属性(这种属性是比较普遍的)
- 通过$.fn.pluginName方式(通过jQuery来扩展插件)
2.学习方式
找自己感兴趣的插件来学习,下载其源码,学习如何编写一个组件。之前在看React的combineReducer方法的源码的时候,其实React的思想已经很完备了,combineReducer这个方法就是将多个reducer分别处理不同的action,然后将不同action处理后的state合并成一个最新的state返回。感受最深的是,combineReducer这个方法对于接收参数的验证处理,考虑到了各种情况,保障用户不同的参数传入方式。
3.注重实践
学习完几个别人编写的插件之后,大概明白了插件(组件)编写时需要注意的原则。原则大概有这么几个:默认参数(defaultOption),初始化方法(init()),绑定事件(bindEvent),销毁实例或者绑定事件(destroy)。
然后可以根据项目系统中还需新增或完善的插件(组件)进行封装或补充。
三、实践心得
jQuery之编写插件的更多相关文章
- jQuery自己编写插件()
引言: 在项目中不同页面经常要用到已经写好的交互,比如弹窗,比如下拉菜单,比如选项卡,比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情,而且个人认为有些low了,我们可 ...
- jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2 ...
- 再谈:jquery编写插件的方法
版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三种方式 1.添加新的全局函数 2. ...
- 【原】jQuery编写插件
分享一下编写设置和获取颜色的插件,首先我将插件的名字命名为jquery.color.js.该插件用来实现以下两个功能1.设置元素的颜色.2.获取元素的颜色. 先在搭建好如下编写插件的框架: ;(fun ...
- jquery编写插件
jquery编写插件的方法 版权声明:作者原创,转载请注明出处! 编写插件的两种方式: 1.类级别开发插件(1%) 2.对象级别开发(99%) 类级别的静态开发就是给jquery添加静态方法,三 ...
- jquery带参插件函数的编写
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- javascript&&jquery编写插件模板
javascrpt插件编写模板 这里不分享如何编写插件,只留一个框架模板,使用面向对象的形式进行编写,方便管理 ;(function(window,document){ function FnName ...
- 两个jquery编写插件实例
(1) 封装基于jq弹窗插件 相信码友们对于$.fn.extexd();$.extend()以及$.fn.custom和$.custom都有一定的了解:我阐述一下我自己对于$.fn.custom和 ...
- jquery编写插件(转)
教你开发jQuery插件(转) 阅读目录 基本方法 支持链式调用 让插件接收参数 面向对象的插件开发 关于命名空间 关于变量定义及命名 压缩的好处 工具 GitHub Service Hook 原 ...
随机推荐
- python3 super().__init__()
父类不会自动调用__init__方法 class A: def __init__(self): A = 'A' self.a = 'a' print('init A') class B(A): def ...
- S3C2440 OpenJtag
C:\Users\Administrator\Desktop>oflash.exe leds.bin +--------------------------------------------- ...
- cell上的按钮点击和左滑冲突
cell上的某个按钮的点击事件,当cell左滑的时候,只要活动的区域也在按钮上,那么按钮的点击事件也会调用. fix: 给按钮添加一个手势(TapGesture)那么当点击的时候就会响应点击手势的方法 ...
- 7层网络以及5种Linux IO模型以及相应IO基础
一.七层网络模型 OSI是Open System Interconnection的缩写,意为开放式系统互联.国际标准化组织(ISO)制定了OSI模型,该模型定义了不同计算机互联的标准,它是一个七层的. ...
- 关于controller,service,dao层的问题记录
出错写法: 1>.AlarmRecordController art=new AlarmRecordController(); 2>.private static SystemServi ...
- 【转载】内联函数 —— C 中关键字 inline 用法解析
转载地址:https://blog.csdn.net/zqixiao_09/article/details/50877383 一.什么是内联函数 在C语言中,如果一些函数被频繁调用,不断地有函数入栈, ...
- Python_for语句
1.for语句: myuser={ 'id':1, 'name':'张三', '语文':98, '数学':99, '英语':40 } for key in myuser: print('学生的'+ke ...
- 十分钟掌握Pandas(上)——来自官网API
十分钟掌握Pandas(上)——来自官网API 其实不止10分钟,这么多,至少一天 一.numpy和pandas numpy是矩阵计算库,pandas是数据分析库,关于百度百科,有对pandas的介绍 ...
- 【转】provisional headers are shown 知多少
前言 请求里面provisional headers are shown(显示临时报头) 出现的情况很多,但原因是多样的.如果你去直接匹配关键字搜索,得到的结果可能与你自己的情况大相径庭.网上大部分都 ...
- Mongoose初使用总结
连接mongoose mongoose连接数据库有两种方式 第一种: 'use strict'; const mongoose = require('mongoose'); mongoose.conn ...