1.

$.fn.pluginName = function(opt){}
就是为jquery的prototype定义了函数, 这样, 任何一个jquery对象都可以使用这个成员函数,
这种写法直观明了, 你只要知道的就是$.fn = jQuery.prototype = $.prototype

2.

$.fn.extend, 在jquery中重新定义了extend的使用方法, 如果只有一个参数, 那么就是扩展本身,
 即$.fn.extend({}), 就是用{}对象扩展$.fn, 也就是jquery的prototype, 这样, 和上面那个就一样了
 两者没有什么区别, 怎么用看自己习惯和理解

3.

写插件的时候, 由于是扩展prototype, 所以this就是对象实例, 即this就是jquery对象,
$(this)还是jquery对象, 他们虽然不是同一对象, 但是内容是完全相同的

//匿名封装$ ,防止外部代码的冲突污染
(function($){
var plugin,privateMethod; // 声明插件名和插件的私有方法 /**
* 这里是插件的主体部分
* 这里是一个自运行的单例模式。
* 这里之所以用一个 Plugin 的单例模式 包含一个 Plugin的类,主要是为了封装性,更好的划分代码块
* 同时 也 方便区分私有方法及公共方法
* PS:但有时私有方法为了方便还是写在了Plugin类里,这时建议私有方法前加上"_"
*/
plugin = (function(){ //实例化插件部分 @param element 传入jq对象的选择器 $("#J_plugin").plugin() ,其中 $("#J_plugin") 即是 element
//* @param options 插件的一些参数
function plugin(element,options){ //将dom jquery 对象赋给插件保存,方便使用
this.$element = $(element); //将插件的默认参数及用户定义的参数合并到一个新的obj里
this.settings = $.extend({}, $.fn.plugin.defaults,options);
//如果将参数设置在dom的自定义属性里,也可以这样写
this.settings = $.extend({}, $.fn.plugin.defaults, this.$element.data(), options); this.init();//初始化
} //插件的公共方法 写法1
plugin.prototype.dosomething = function(){
//....
} //插件的公共方法 写法2
plugin.prototype = {
init:function (){ },
dosomething2: function(){
//...
}
}; return plugin;
}) (); //插件的私有方法
privateMethod = function(){} //将plugin对象转换为jquery插件对象
$.fn.plugin = function(options){
return this.each(function(){
var $me = $(this), instance = $me.data('plugin'); if(!instance){
//将实例化后的插件缓存在dom结构里(内存里)
$me.data('plugin', new plugin(this, options));
} //优雅处: 如果插件的参数是一个字符串,则 调用 插件的 字符串方法。
// * 如 $('#id').plugin('doSomething') 则实际调用的是 $('#id).plugin.doSomething
// doSomething是刚才定义的接口(公共方法) * 这种方法 在 juqery ui 的插件里 很常见
if ($.type(options) === 'string') instance[options](); });
}; //插件的默认参数
$.fn.plugin.defaults = {
xx: 'a',
xxx: 123
}; //优雅处: 通过data-xxx 的方式 实例化插件 这样的话 在页面上就不需要显示调用了。
// 可以查看bootstrap 里面的JS插件写法
$(function(){
return new plugin( $('[data-plugin]') );
}); }) (jQuery);

:

zepto:

(function ($) {
/**
* 定义一个插件 Plugin
*/
var Plugin,
privateMethod; //插件的私有方法,也可以看做是插件的工具方法集 /**
* 这里是插件的主体部分
* 这里是一个自运行的单例模式。
* 这里之所以用一个 Plugin 的单例模式 包含一个 Plugin的类,主要是为了封装性,更好的划分代码块
* 同时 也 方便区分私有方法及公共方法
* PS:但有时私有方法为了方便还是写在了Plugin类里,这时建议私有方法前加上"_"
*/
Plugin = (function () { /**
* 插件实例化部分,初始化时调用的代码可以放这里
* @param element 传入jq对象的选择器,如 $("#J_plugin").plugin() ,其中 $("#J_plugin") 即是 element
* @param options 插件的一些参数神马的
* @constructor
*/
function Plugin(element, options) {
//将插件的默认参数及用户定义的参数合并到一个新的obj里
this.settings = $.extend({}, $.fn.plugin.defaults, options);
//将dom jquery对象赋值给插件,方便后续调用
this.$element = $(element);
//初始化调用一下
this.init();
} /**
* 写法一
* 插件的公共方法,相当于接口函数,用于给外部调用
*/
Plugin.prototype.doSomething = function () {
/**
* 方法内容
*/
}; /**
* 写法二
* 将插件所有函数放在prototype的大对象里
* @type {{}}
*/
Plugin.prototype = { init:function(){ }, doSomething2:function(){ }
}; return Plugin; })(); /**
* 插件的私有方法
*/
privateMethod = function () { }; /**
* 这里是将Plugin对象 转为jq插件的形式进行调用
* 定义一个插件 plugin
* zepto的data方法与jq的data方法不同
* 这里的实现方式可参考文章:http://trentrichardson.com/2013/08/20/creating-zepto-plugins-from-jquery-plugins/
*/
$.fn.plugin = function(options){
return this.each(function () {
var $this = $(this),
instance = $.fn.plugin.lookup[$this.data('plugin')];
if (!instance) {
//zepto的data方法只能保存字符串,所以用此方法解决一下
$.fn.plugin.lookup[++$.fn.plugin.lookup.i] = new Plugin(this,options);
$this.data('plugin', $.fn.plugin.lookup.i);
instance = $.fn.plugin.lookup[$this.data('plugin')];
} if (typeof options === 'string') instance[options]();
})
}; $.fn.plugin.lookup = {i: 0}; /**
* 插件的默认值
*/
$.fn.plugin.defaults = {
property1: 'value',
property2: 'value'
}; /**
* 优雅处: 通过data-xxx 的方式 实例化插件。
* 这样的话 在页面上就不需要显示调用了。
* 可以查看bootstrap 里面的JS插件写法
*/
$(function () {
return new Plugin($('[data-plugin]'));
});
})(Zepto);

参考:

http://www.tuicool.com/articles/AZ77j2

http://www.jb51.net/article/61694.htm
http://blog.jobbole.com/30550/
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html

具体示例:

//调用
var slide = $('#wrapper').customSlide();
console.log('second');
var tmp = $('#wrapper').customSlide('ok');
tmp.customSlide('ok'); //插件
;(function($){ var customSlide,privateMethods; customSlide = (function () { function customSlide(element,options) {
this.settings = $.extend({}, $.fn.customSlide.defaults, options);
this.$element = $(element);
this.init();
} customSlide.prototype = {
init: function () {
console.log('init');
},
ok:function () {
console.log('ok');
}
}; return customSlide;
}) (); $.fn.customSlide = function (options) {
return this.each(function () { // return 从而可以链式调用
var $this = $(this),
instance = $.fn.customSlide.lookup[$this.data('customSlide')]; //在dom元素上实例化插件并缓存到dom对象上
if(!instance){
console.log(instance);
$.fn.customSlide.lookup[++$.fn.customSlide.lookup.i] = new customSlide(this,options);
$this.data('customSlide',$.fn.customSlide.lookup.i); // 在dom上写 attr data-custom-slide=1; 标识已初始化实例
instance = $.fn.customSlide.lookup[$this.data('customSlide')];
console.log(instance);
}
if(typeof options ==='string'){
instance[options](); // 通过传递string的方式调用示例的无参方法
}
});
}; $.fn.customSlide.lookup = {i: 0}; $.fn.customSlide.defaults = { }; $(function () {
return new customSlide($('[data-customSlide]')); // bootstrap方式的在元素上写 data-xxx 的方式启动插件
}); }) (Zepto);

参考:

  1. jQuery官网学习中心关于插件开发的文章: http://learn.jquery.com/plugins/
  2. jQuery官网插件中心:http://plugins.jquery.com/
  3. jQuery官网插件发布指南:http://plugins.jquery.com/docs/publish/
  4. JavaScript Hoist :http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html
  5. Google Web Developer Tool : https://developers.google.com/closure/

jquery,zepto插件编写相关的更多相关文章

  1. delaycall.js 修改表单延迟自动提交的 jQuery / Zepto 插件

    delaycall.js delaycall 是一个 jQuery / Zepto 插件,用于在用户完成某项操作后,延迟指定秒数后自动调动指定函数.如用户输入完内容后,延迟1秒,自动提交表单. Git ...

  2. 【JQuery Zepto插件】图片预加载

    屏幕滚动到图片当前位置加载图片,把图片的真实地址写到data-src属性里即可. <img src="占位图" data-src="img/foot.jpg&quo ...

  3. (转)jQuery插件编写学习+实例——无限滚动

    原文地址:http://www.cnblogs.com/nuller/p/3411627.html 最近自己在搞一个网站,需要用到无限滚动分页,想想工作两年有余了,竟然都没有写过插件,实在惭愧,于是简 ...

  4. jQuery插件编写学习+实例——无限滚动

    最近自己在搞一个网站,需要用到无限滚动分页,想想工作两年有余了,竟然都没有写过插件,实在惭愧,于是简单学习了下jQuery的插件编写,然后分享出来. 先说下基础知识,基本上分为两种,一种是对象级别的插 ...

  5. Jquery不同版本共用的解决方案(插件编写)

    最近在为某公司做企业内部UI库,经过研究分析和评审,决定基于Jquery开发,结合Bootstrap插件那简洁,优雅,高效的思想进行插件编写. 但是在编写的过程中遇到一个头疼的问题,就是正在编写的插件 ...

  6. jQuery插件编写及链式编程模型小结

    JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...

  7. 编写jquery常用插件的基本格式

    写jquery插件需要明白的那些知识点 1.jquery中$是神马?$.fn又是神马? 稍微有jquery经验的都知道在jquery中$等价于jQuery,在控制台一试便知: 我们在jquery(1. ...

  8. 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)

    移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...

  9. jQuery插件编写及链式编程模型

    jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...

随机推荐

  1. linux下载利器之curl和wget的区别

    linux下载利器-------curl和wget的区别 curl和wget基础功能有诸多重叠,如下载等. 在高级用途上的curl由于可自定义各种请求参数所以长于模拟web请求,用于测试网页交互(浏览 ...

  2. 第4章 HDFS操作

    目录 4.1 命令行操作 4.2 Java API操作 4.2.1 创建Java工程 4.2.2 读取数据 4.2.3 创建目录 4.2.4 创建文件 4.2.5 删除文件 4.2.6 遍历文件和目录 ...

  3. 学习Pytbon第十天 函数2 内置方法和匿名函数

    print( all([1,-5,3]) )#如果可迭代对象里所有元素都为真则返回真.0不为真print( any([1,2]) )#如果数据里面任意一个数据为真返回则为真a= ascii([1,2, ...

  4. Small Talk Matters【闲谈很重要】

    Small Talk Matters We' ve all been there: in a lift, in line at the bank or on an airplane, 我们都有过这样的 ...

  5. python字典的整理信息

    字典的增删改查大纲 增: dic={'age':18,'name':'liu','sex':'male'} dic['high'] = 185 #没有键值对,添加 dic['age'] = 16 #有 ...

  6. luogu3317 [SDOI2014]重建

    原来矩阵树定理对于边是概率的情况也是适用的qwqwq. ref #include <iostream> #include <cstdio> #include <cmath ...

  7. Avril Lavigne : Everybody Hurts (Ver3)

    http://www.guitartabsexplorer.com/ http://www.guitartabsexplorer.com/lavigne-avril-Tabs/everybody-hu ...

  8. erlang节点局域网通信

    节点1: F:\WorkSpace\Server\src>erl -name hw@192.168.10.142 -setcookie 4213 consulting .erlang in &q ...

  9. Pascal小游戏 打飞机

    一个经典的打飞机游戏(1)Pascal代码 十分经典,有一种街机的感觉 奇葩青年的又一控制台神作. uses crt; type list=record         ty,ax:integer;  ...

  10. python学习笔记十六:读取JSON文件

    读取JSON文件可以用JSON库,示例代码: #coding:utf-8 import json with open("msg.json") as jsonfile: json_d ...