jquery,zepto插件编写相关
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);
参考:
- jQuery官网学习中心关于插件开发的文章: http://learn.jquery.com/plugins/
- jQuery官网插件中心:http://plugins.jquery.com/
- jQuery官网插件发布指南:http://plugins.jquery.com/docs/publish/
- JavaScript Hoist :http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html
- Google Web Developer Tool : https://developers.google.com/closure/
jquery,zepto插件编写相关的更多相关文章
- delaycall.js 修改表单延迟自动提交的 jQuery / Zepto 插件
delaycall.js delaycall 是一个 jQuery / Zepto 插件,用于在用户完成某项操作后,延迟指定秒数后自动调动指定函数.如用户输入完内容后,延迟1秒,自动提交表单. Git ...
- 【JQuery Zepto插件】图片预加载
屏幕滚动到图片当前位置加载图片,把图片的真实地址写到data-src属性里即可. <img src="占位图" data-src="img/foot.jpg&quo ...
- (转)jQuery插件编写学习+实例——无限滚动
原文地址:http://www.cnblogs.com/nuller/p/3411627.html 最近自己在搞一个网站,需要用到无限滚动分页,想想工作两年有余了,竟然都没有写过插件,实在惭愧,于是简 ...
- jQuery插件编写学习+实例——无限滚动
最近自己在搞一个网站,需要用到无限滚动分页,想想工作两年有余了,竟然都没有写过插件,实在惭愧,于是简单学习了下jQuery的插件编写,然后分享出来. 先说下基础知识,基本上分为两种,一种是对象级别的插 ...
- Jquery不同版本共用的解决方案(插件编写)
最近在为某公司做企业内部UI库,经过研究分析和评审,决定基于Jquery开发,结合Bootstrap插件那简洁,优雅,高效的思想进行插件编写. 但是在编写的过程中遇到一个头疼的问题,就是正在编写的插件 ...
- jQuery插件编写及链式编程模型小结
JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQu ...
- 编写jquery常用插件的基本格式
写jquery插件需要明白的那些知识点 1.jquery中$是神马?$.fn又是神马? 稍微有jquery经验的都知道在jquery中$等价于jQuery,在控制台一试便知: 我们在jquery(1. ...
- 移动端下拉刷新、加载更多插件dropload.js(基于jQuery/Zepto)
移动端下拉刷新.加载更多插件dropload.js(基于jQuery/Zepto) 原文:http://www.grycheng.com/?p=1869 废话不多说,先让大家看一下案例效果: DEMO ...
- jQuery插件编写及链式编程模型
jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我 ...
随机推荐
- 解决.NET Core R1中文乱码问题
今天写了一个简单的.NET Core RC1控制台程序,发现中文显示一直是乱码.查看操作系统设置,没有问题:查看源文件编码,也没有问题:甚至查看了Console字符编码相关的注册表,依然没有发现问题. ...
- 【转载】C++中的static关键字的总结
本文前半部分转自:博主chao_yu 本文后半部分转自:博主VincentCZW 静态变量作用范围在一个文件内,程序开始时分配空间,结束时释放空间,默认初始化为0,使用时可以改变其值. 静态变量或静态 ...
- 裸机——wdt
1. 首先晓得看门狗的基本知识 看门狗是带复位功能的定时器,用于在系统跑飞时复位系统. 接下来按照上次的知识对看门狗进行推导 看门狗的关键词是 定时器 复位 定时器 关键是 时间段 中断 时间段 关键 ...
- POJ:3258-River Hopscotch
River Hopscotch Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 17740 Accepted: 7414 Desc ...
- [记读书笔]python3.5实现socket通讯(UDP)
UDP连接: 无连接,从一个端向另一端发送独立的数据分组 使用UDP连接的客户-服务器程序: UDPServer.py import socket serverPort = 50009 serverS ...
- 容器技术Docker
什么是decker容器 简单理解就是将代码和部署环境一起打包的一个容器
- centos使用--vim配置和推荐插件使用
目录 1.vimrc的配置内容 2.Vundle使用 简介 安装vundle 配置vundle插件: 安装需要的插件 移除不需要的插件 其他常用命令 3 使用插件 3.1 NERDTree 3.2 e ...
- Linux 批量删除文件后缀
例子: [zengs@gene CASP9]$ lscasp9.ids T0526 T0538 T0550 T0562 T0574 T0586 T0598 T0610 T0622 T0634T0515 ...
- 编译gearman提示缺少boost
编译german时提示缺少boost: checking for boostlib >= 1.39... configure: We could not detect the boost lib ...
- 17、bootStrap组件
1.bootStrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 2.字体图标 ①不要和其他图标混合使用 ②只能对内容为空的元素起作用 3.下拉菜单 <di ...