方法和原理在这篇博文中非常详细易懂 http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html

下面整理下基本知识点和基本的代码段:

jQuery插件开发方式主要有三种:

  1. 通过$.extend()来扩展jQuery
  2. 通过$.fn 向jQuery添加新的方法
  3. 通过$.widget()应用jQuery UI的部件工厂方式创建

extend()的作用和用法

extend()中可以传入一个或多个对象,依次往前覆盖,最终第一个对象会添加到jQuery自身,直接看代码:

$.extend({
sayHello: function(name) {
console.log('Hello,' + (name ? name : 'Dude') + '!');
}
})
$.sayHello(); //调用
$.sayHello('Wayou'); //带参调用

extend()会在第二种方法中用来传入参数

一个基本的插件编写方式

js:

$.fn.pig = function(options){
var defaults = {
'color' : 'red',
'fontsize' : '12px'
};
var settings = $.extend({}, defaults, options);
this.css({
'color': settings.color,
'font-size': settings.fontsize
}); return this.each(function(){
$(this).append(' ' + $(this).attr('href'));
})
}

html:

<ul>
<li>
<a href="http://www.baidu.com/">百度</a>
</li>
<li>
<a href="http://www.google.com/">谷歌</a>
</li>
<li>
<a href="http://www.360.com/">360</a>
</li>
</ul>
<p>我是PPP</p>
<script type="text/javascript">
$(function() {
$('a').pig({
'color': '#2c9929'
});
})
</script>

上面的代码,已经可以让使用者传入对象或不传对象,能编写出健壮而灵活的插件了。

但是,当插件内容复杂时,代码面临组织问题,可以用面向对象的思维来做:

面向对象的插件开发

js定义对象后调用,然后包裹自调用匿名函数防止污染全局变量

(function() {
//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
this.$element = ele,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration': 'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
beautify: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
//在插件中使用Beautifier对象
$.fn.pig = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify();
}
})();

html不变

<ul>
<li>
<a href="http://www.baidu.com/">百度</a>
</li>
<li>
<a href="http://www.google.com/">谷歌</a>
</li>
<li>
<a href="http://www.360.com/">360</a>
</li>
</ul>
<p>我是PPP</p>
<script type="text/javascript">
$(function() {
$('a').pig({
'color': '#2c9929'
});
})
</script>

目前为止似乎接近完美了。

如果再考虑到一些潜在的问题,那么balabalabala,最后是这个样子:

;(function($, window, document,undefined) {
//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
this.$element = ele,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration': 'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
beautify: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify();
}
})(jQuery, window, document);

开始写一个自己的jQuery插件吧,发布jQuery插件到github的详细步骤这里也有:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html

jQuery插件开发代码的更多相关文章

  1. 代码: jquery 插件开发(自用插件)

    http://www.imooc.com/learn/99 阿当大话西游之WEB组件 2016-4-19 jquery插件开发: 2016-3-1 http://www.cnblogs.com/Way ...

  2. JavaScript学习笔记(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  3. JavaScript学习总结(四)——jQuery插件开发与发布

    jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...

  4. jQuery插件开发精品教程,让你的jQuery提升一个台阶

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

  5. jquery插件开发

    jQuery是一个封装的很好的类,比如我们用语句$("#btn1") 会生成一个 jQuery类的实例. 一.jQuery插件开发注意要点 1.使用闭包,避免全局依赖,避免第三方破 ...

  6. jQuery插件开发(溢出滚动)

    声明:此程序仅针对手机端,简单的封装一个插件,意在记载插件的开发过程,如有错误及不足之处,还望即时指出. 移动开发的时候,我们经常会遇到滑动事件,众所周知手机端滑动主要依靠touch事件.最近接连遇到 ...

  7. 从零开始学jQuery插件开发

    http://www.w3cfuns.com/notes/19462/ec18ab496b4c992c437977575b12736c.html jQuery 最成功的地方,是它的可扩展性,通过吸引了 ...

  8. jquery插件开发继承了jQuery高级编程思路

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

  9. 跟我一起学JQuery插件开发

    http://www.cnblogs.com/Leo_wl/archive/2012/04/06/2435511.html 以前一直比较好奇,jquery插件是怎么开发的,怎么写属于自己的插件? 昨天 ...

随机推荐

  1. 【C#】toString("Format") 格式化

    1..ToString("P");//得到小数点后2位的百分比,自动 加上%号;//9512.35% 这个比较厉害! furenjun yoolonet

  2. sqli篇-本着就了解安全本质的想法,尽可能的用通俗易懂的语言去解释安全漏洞问题

    前言 最早接触安全也是从xss攻击和sql注入攻击开始的. 和xss一样屡居OWASPtop10 前三名的漏洞,sqli(sql Injection)sql注入攻击也是web安全中影响较大和影响范围较 ...

  3. windows和linux执行class

    windows java -classpath .;lib/* com.Test linux java -classpath .:ib/* com.Test "."代表当前路径,这 ...

  4. Linux下 JDK安装

    在linux下安装JDK步骤如下: 第一步:查看Linux自带的JDK是否已安装 (1)查看jdk: [root@web-server ~]# rpm -qa|grep jdk ← 查看jdk的信息或 ...

  5. BZOJ 2006: [NOI2010]超级钢琴

    2006: [NOI2010]超级钢琴 Time Limit: 20 Sec  Memory Limit: 552 MBSubmit: 2613  Solved: 1297[Submit][Statu ...

  6. 《图解HTTP》阅读笔记

    HTTP基础的简单理解 在了解HTTP协议之前,我们先了解下TCP/IP的参考模型,TCP/IP参考模型分为四层:应用层.传输层.网络层.链路层(数据链路层). 应用层:为不同的网络应用提供所需的服务 ...

  7. mysql 远程连接数据库的二种方法

    http://blog.csdn.net/freecodetor/article/details/5799550 一.连接远程数据库: 1.显示密码 如:MySQL 连接远程数据库(192.168.5 ...

  8. es6学习笔记(1) let和const命令详解

    let和const命令: Es6新增了let命令,声明变量,但与var不一样的,只在let命令所在的代码块内有效(如for循环之外let声明的变量就不再有效).并且let不像var那样会发生" ...

  9. win tomcat

    D:\tomcat8080\binstartup.bat rem ------------------------------------------------------------------- ...

  10. HTML中的SVG

    HTML5中的SVG是Scalable Vector Graphic的简称,是一种用来绘制矢量图的HTML5标签,由万维网联盟定制,是一个基于可扩展标记语言,用于绘制二维可缩放矢量图形. 是一种使用X ...