提升js编写能力

 静态方法,属于类的方法,即类可以直接调用的方法。为类所有实例化对象所共用(但不能用实例对象之间调用),所以静态成员只在内存中占一块区域;

实例方法,属于实例化类后对象的方法,即实例对象调用的方法。每创建一个类的实例,都会在内存中为非静态成员分配一块存储;

静态方法在一启动时就实例化了,因而静态内存是连续的,且静态内存是有限制的;而非静态方法是在程序运行中生成内存的,申请的是离散的空间。

看代码:

function a(){ }
a.staticMethof = function(){ 
   alert('静态方法') ; 
}
a.prototype.instaceMethod = function(){
  alert('实例方法');
}
a.staticMethof();//类a直接调用
var instace = new a();
instace.instaceMethod();//a的实例对象instace调用

拿jQuery框架来看,它的方法都是实例方法,它的工具函数都是静态方法。

静态方法$.each();

实例方法$('body').each();

下面来看下jQuery中拓展两种方法extend的用法。

 $.extend是拓展静态方法,而$.fn.extend是拓展实例方法

先说下extend:

extend,这个函数的功能基本都是实现对象的拷贝功能,即将一个对象的所有属性拷贝到另外一个对象上去,开发插件时经常用到。

看代码:

jQuery.extend(object)

为jQuery类添加方法,即添加静态方法

jQuery.extend({

  min:function(a,b){

    return (a<b?a:b);

  },

  max:function(a,b){

    return (a>b?a:b);

  }

});

jQuery.min(2,3);//2

jQuery.max(4,5);//5

Object jQuery.extend(target,object1,[objectN]);

为其他类添加静态方法(用一个或多个对象来拓展一个对象,返回被拓展的对象)

var settings = { validate: false, limit: 5, name: "foo" };

var options = { validate: true, name: "bar" };

jQuery.extend(settings,options);

结果:settings == { validate:true, limit: 5, name:"bar"}

jQuery.fn

jQuery.fn = jQuery.prototype = {

  init:function(selector,context){

    }

}

原来jQuery.fn = jQuery.prototype,对prototype原型链是不陌生的吧?

jQuery.fn.extend( object );

对jQuery.prototype进行拓展,即添加实例函数。

例如要开发一个插件,编辑框被点击时,alert编辑框中的内容。

$.fn.extend({
alertWhileClick: function(){
$(this).click(function(){
alert($(this).val());
})
};
});
$("#input1").alertWhileClick();

你可以拓展一个对象到jQuery的prototype中去,这样的话就是插件机制了。

(function( $ ){
$.fn.tooltip = function( options ) {
};
//等价于

var tooltip = {
function(options){
}
};
$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip
})( jQuery )

posted @ 2017-05-13 10:40  小白点  阅读(780)  评论(0编辑  收藏  举报