1. 把你的代码全部放在闭包里面

这是我用的最多的一条。但是有时候在闭包外面的方法会不能调用。

不过你的插件的代码只为你自己的插件服务,所以不存在这个问题,你可以把所有的代码都放在闭包里面。 而方法可能应该放在Prototype方法内部。

/注意为了更好的兼容性,开始前有个分号
;(function($){ //此处将$作为匿名函数的形参
/*这里置放代码,可以使用$作为jQuery的缩写别名*/
})(jQuery); //这里将jQuery作为实参传递给匿名函数了
<script>
//插件编写
;(function(){
$.fun.extend({
"color":function(value){
return this.css('color',value);
}
});
})(jQuery); //插件应用
$(function(){
alert($('div').color('red'));
});
</script> <div class='a'>red</div>
<div style="color:blue">blue</div>

$.fn.extend

$.fn就是jQuery的原型,$.fn等于jQuery.prototype,$是jQuery的别名。$.fn.extend方法的作用是用于扩展jQuery实例对象,也就是我们从页面中获得的jQuery对象。

插件:一个函数

(function($) {

    $.fn.pluginName = function(options) {

// 代码在此处运行

        return this;
} })(jQuery);

  上面的代码中的函数可以像其他的jQuery函数那样通过$('#element’).pluginName()来调用。注意,我是如何把“return this”语句加进去的;这小片的代码通过返回一个原来元素的集合(包含在this当中)的引用来产生链式调用的效果,而这些元素是被一个jQuery对象所包裹的。你也应该注意,“this”在这个特定的作用域中是一个jQuery对象,相当$(‘#element’)。

  根据返回的对象,我们可以总结出,在上面的代码中,使用$(‘#element’).pluginName()的效果和使用$(‘#element’)的效果是一样的。在你的即时执行函数作用域中,没必要用$(this)的方式来把this包裹到一个jQuery对象中,因为this本身已经是被包装好的jQuery对象。

http://www.runoob.com/w3cnote/jquery-10-skill.html

编写优秀jQuery插件技巧的更多相关文章

  1. 编写优秀jQuery插件的10个技巧

    前言:在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行 ...

  2. 近期十大优秀jQuery插件推荐

    当有限的开发知识限制了设计进展,你无法为自己插上创新的翅膀时,jQuery可以扩展你的视野.本文将推荐从jQuery网站的Plugin频道中推选出的近期十款优秀jQuery插件. 1.jQuery U ...

  3. 2013年优秀jQuery插件

    今天为大家推荐的是2013年的第一期,在这期里面十个jQuery插件涵盖了响应式的网格布局插件.图片放大插件.表单元素中自定义select插件,google 地图插件.文件拖放上传插件.tooltip ...

  4. 【jQuery基础学习】08 编写自定义jQuery插件

    目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方 ...

  5. 编写jQuery 插件

    编写jQuery Plugin,要设置默认值,并允许用户修改默认值,或者运行是传入其他值. 最终,我们得出编写一个jQuery插件的原则: 给$.fn绑定函数,实现插件的代码逻辑: 插件函数最后要 r ...

  6. 详细图解jQuery对象,以及如何扩展jQuery插件

    详细图解jQuery对象,以及如何扩展jQuery插件 早几年学习前端,大家都非常热衷于研究jQuery源码.我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来 ...

  7. 前端基础进阶(十一):详细图解jQuery对象,以及如何扩展jQuery插件

    早几年学习前端,大家都非常热衷于研究jQuery源码.我还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,“原来JavaScript居然可以这样用!” 虽然随着前端的发 ...

  8. Lazy Load, 延迟加载图片的 jQuery 插件.

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  9. 使用jquery插件实现图片延迟加载技术(懒加载)

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

随机推荐

  1. C++与C的区别

    在最开始C++只是C加上了一些面向对象的特性,C++最初的名字为C with Classes.后来C++又提出了一些不同于Class的特性:Exceptions(异常).templates(模板).S ...

  2. Node require

    var user = require("./module_user");//使用模块 module_userconsole.log(user.userCount);user.use ...

  3. 流程控制之if判断,while循环,for循环

    if判断? 什么是if判断? 判断一个条件如果成立则做...不成立则... 为什么要有判断? 让计算机像人一样具备判断的能力 如何用if判断 if 条件1: code1    code2    cod ...

  4. 机器学习中的降维算法:ISOMAP & MDS

    参见:https://blog.csdn.net/Dark_Scope/article/details/53229427

  5. 关于gzip zgrep zcat 的使用

    最近由于重构代码,要判断很多接口是否还在使用,然后就要从现在已有日志里面去找 是否还有调用.我很疑惑,如果要一个一个文件从文件系统里面拷贝出来然后再使用grep cat vi 等方法去查找该有多麻烦. ...

  6. Java之JSON操作(Jackson)

    Java to JSON: package json.jackson; import bean.User; import com.fasterxml.jackson.databind.ObjectMa ...

  7. JavaScript——数组

    数组是JavaScript中的常用类型,本文详述了数组的基本知识以及一些常用的数组方法,并对每种方法进行了详细解释 数组定义 用字面量直接定义 1 var arr=[0,0,0]; //注意,是方括号 ...

  8. Js 百分比进度条

    [构想] CSS3 + JS CSS3控制进度 利用CSS3中的 @keyframes JS实现百分比 根据CSS来调整,时间 [页面代码] 第一种: 默认直接进入就是下载 CSS代码 body { ...

  9. 自学Zabbix4.1 zabbix监控web服务器访问性能

    自学Zabbix4.1 zabbix监控web服务器访问性能 使用Zabbix实现对web性能的监控,通过它可以了解web站点的可用性以及性能.最终将各项指标绘制到图形中,这样我们可以了解到一个站点的 ...

  10. 【转】如何基于linux进程通信设计方案

    前言 linux下的进程通信手段基本上是从Unix平台上的进程通信手段继承而来的.而对Unix发展做出重大贡献的两大主力AT&T的贝尔实验室及BSD(加州大学伯克利分校的伯克利软件发布中心)在 ...