1.jquery中$是神马?$.fn又是神马?

稍微有jquery经验的都知道在jquery中$等价于jQuery,在控制台一试便知:

我们在jquery(1.8.3)源码中也能找到下面代码:

其实在jquery中$就是一个函数function,当我们执行$()时会得到一个jquery对象,得到的jquery对象的类型是object类型,而不是数组。除此之外$也是个对象,因为在$上面也可以定义方法和属性,比如常见的$.ajax。

$.fn就是$的原型,,在源码中我们也能找到jQuery.fn = jQuery.prototype

jquery对象中的上百种方法就是定义在原型中,为什么定义在原型中?这就是js面向对象的重要知识了,可参考我的这篇文章 对于jquery这么多方法的库来说,方法定义在原型上极大的节省了内存。这里只需知道$.fn就是$的原型就行。

插件的写法

插件说白了就是为jquery库添加特定的方法,插件的形式一般开头为$.fn.extend 在源码中我们也能看到很多这样的例子:

            

所以一个常见的插件的基本样式应该如下(注释写的很详细,就不再一一赘述):

/*
插件名:
作者:
日期:等信息
*/ //一个匿名自执行函数,划分一个独立的作用域,不至于插件中的变量干扰jquery

;(function($){ //开始写上; 为防止代码压缩出错

//为jquery扩展方法,也就是插件的主体
$.fn.extend({ //方法名
"method" : function(opts){
//定义插件的默认参数
var default = {
width : //定义默认宽度
height : //定义默认高度
speed : //定义默认速度
//等等各种默认参数
}
//有些参数用户直接使用默认,有些参数用户要使用自己定义的
//自定义参数替换默认参数
//var option = $.extend(default,opts); //为什么不用此行代码?为了保护默认参数
//extend方法中opts会永久取代default,所以新加一个空对象{}来保存本次所使用的参数,下次使用default依然不变
var option = $.extend({},default,opts); this.each(function(){ //用each处理选择器选中的一个或多个dom节点
/*
此处是插件处理过程代码
*/
}); //最后别忘了保持jquery的链式操作(视情况而定)
return this; //返回被选中的元素节点,以供后续操作。
} }); })(jQuery)//传入jQuery是为更快查找,避免沿作用域链往上层查找,提高性能

常见的插件写法就是这样,据说90%以上的插件就是用$.fn.extend()方式实现的,因为jquery的特色就是先选择dom节点,然后链式处理这些节点。还有不常见的$.extend()插件编写方式,该方式编写的插件是在jquery命名空间内添加方法,也就是说在使用时不需要先选择dom节点,使用时直接$.method()即可。

插件的命名和代码压缩

命名默认采用jquery.method.js (method代指插件名),除此之外最好弄一个压缩版:jquery.method.min.js 至于代码的压缩,包括去空格,去换行,其实还有方法名的简写操作,比如方法名叫removeAttr,很长,那么可以直接改写为一个字母a,这也是短化代码的方法,除此之外还有if else 转换为三木运算等压缩方式。

最新文章

  1. php 日期计算 总结
  2. 3D几何变换
  3. 几种I/O模型功能和性能对比
  4. (原)java中对象复制、==、equals
  5. IbatisNet的介绍和使用
  6. 基于UP-CUP6410点灯实验完成
  7. c++ List、Vector、Stack、Queue使用
  8. 无责任Windows Azure SDK .NET开发入门篇二[使用Azure AD 进行身份验证--2.1使用Azure AD需要了解几个概念]
  9. XOR 加密简介
  10. 微信小程序scroll-view(或者其他view) 计算高度 px转rpx有关
  11. django项目中购物车的实现
  12. hdu3047 Zjnu Stadium【带权并查集】
  13. php之code tips
  14. mongodb和spring的整合
  15. 推荐一个 基于 WebSocket 和 Redis 的 即时通信 开源项目
  16. Fusion-io ioDrive Duo Enterprise PCIe Review
  17. Numpy 用于数组的文件输入和输出
  18. CVE-2012-4792Microsoft Internet Explorer 释放后使用漏洞
  19. js延迟加载优化页面响应速度
  20. JAVA中正则表达式学习总结

热门文章

  1. [剑指Offer] 26.二叉搜索树与双向链表
  2. P4467 [SCOI2007]k短路
  3. JDBC连接数据库的过程
  4. 计蒜客16492 building(二分线段树/分块)
  5. 2017 Multi-University Training Contest - Team 2 TrickGCD(组合数学)
  6. Citrix Netscaler负载均衡算法
  7. poj3347 Kadj Squares (计算几何)
  8. GDI+小例子
  9. [Leetcode] first missing positve 缺失的第一个正数
  10. Every Programmer Should Know These Latency Numbers