jquery 初始化zoom jquery 初始化函数

转载

mob64ca141a683a 2023-08-24 22:43:21

文章标签 jquery 初始化zoom jQuery 初始化 css 文章分类 jQuery 前端开发

这一篇主要总结一下jQuery这个js在引入的时候做的一些初始化工作

第一句window.undefined=window.undefined;

是为了兼容低版本的IE而写的

因为在低版本的IE中undefined不是window对象下的属性

因此window.undefined就是undefined

根据=运算符右结核性的特征，=右边的window.undefined就是undefined

既然window没有undefined属性

因此左边其实可以理解为在window下面扩展一个undefined属性

这个值就是undefined

接下来

if ( $ ){
    jQuery._$ = $;
}

这个是为了防冲突处理

如果在引入jQuery之前先引入了其他的库

而其他的库里面已经将$作为全局变量

这样就先将其他库中的$存在_$属性下

接下来再将jQuery赋值给$

此后再调用$的时候调的就是jQuery的$

如果想要用其它库

就可以通过jQuery._$来获取

接下来将已经定义好的jQuery构造函数赋值给$

var $ = jQuery;

再往下给jQuery添加了一些实例方法

我个人感觉这些实例方法处于一个比较顶层的位置

也就是说在这些方法里面会调用很多其他的方法，尤其是调用其他静态方法

所以我想学习完一些最基本的静态方法之后再回过头来看这部分

接下来就是extend方法了

extend是jQuery内部扩展实例化方法和静态方法的一个基础方法

也是jQuery对外扩展插件的一个方法

jQuery.extend = jQuery.fn.extend = function(obj,prop) {
    if ( !prop ) { prop = obj; obj = this; }
    for ( var i in prop ) obj[i] = prop[i];
    return obj;
};

v1.0.0的extend逻辑很简单

从函数的定义上来看，作者希望给extend传入两个参数：obj和prop

功能自然就是把prop里面的成员扩展给obj

但是如果只传入了一个参数，就代表给jQuery或jQuery.fn本身扩展

也就是说obj就是jQuery或jQuery.fn

方法里面的第一句也就是这个作用了

值得一提的是这个地方巧妙的利用了this

如果通过如下方式调用

jQuery.extend({"aaa":1})

那么里面的this指向就是jQuery，这样就会把aaa扩展成jQuery的静态成员

而如果通过下面这种方式调用

jQuery.fn.extend({"bbb":2});

那么里面的this指向的就是jQuery.fn，即jQuery.prototype，这样就会把bbb扩展成jQuery的实例化成员

再往下就又扩展了一些静态成员

这些静态属性或方法涵盖了初始化、属性操作、样式操作、DOM操作、选择器、事件系统等等

初始化：init

属性操作：className.add className.remove className.has attr

样式操作：swap css curCSS

DOM操作：clean getAll parents sibling

选择器：expr token find parse filter

事件系统：event.add event.remove event.trigger event.handle event.fix

工具方法：each trim merge grep map

这些方法等遇到了再具体去看

再往下来了一个初始化代码块，这个代码块又给jQuery增加了两个静态成员：

jQuery.browser和jQuery.boxModel

jQuery.browser用于判断浏览器，jQuery.boxModel用于判断是否是标准盒模型

这两个属性都很简单

再往下就出现了jQuery.macros这个静态成员

macros里面其实存储了若干方法的"公共信息"

这些方法在接下来的jQuery.init()会逐个实现

jQuery.extend({
    jQuery.initDone = true;
    init:function(){
        jQuery.each(jQuery.macros.axis,function(i,n){...});
        jQuery.each(jQuery.macros.to,function(i,n){...});
        jQuery.each(jQuery.macros.each,function(i,n){...});
        jQuery.each(jQuery.macros.filter,function(i,n){...});
        jQuery.each(jQuery.macros.attr,function(i,n){...});
        jQuery.each(jQuery.macros.css,function(i,n){...});
    },
    each:function(obj,fn,args){
        if ( obj.length == undefined ){
        　　for ( var i in obj ){
           　　fn.apply( obj[i], args || [i, obj[i]] );
           }
        }else{
        　　for ( var i = 0; i < obj.length; i++ ){
        　　　　fn.apply( obj[i], args || [i, obj[i]] );
        　　}
        }
    　　 return obj;
    }
});

jQuery.macros = {
    to: {
        appendTo: "append",
        prependTo: "prepend",
        insertBefore: "before",
        insertAfter: "after"
    },    
    css: "width,height,top,left,position,float,overflow,color,background".split(","),
    filter: [ "eq", "lt", "gt", "contains" ],
    attr: {
        val: "value",
        html: "innerHTML",
        id: null,
        title: null,
        name: null,
        href: null,
        src: null,
        rel: null
    },    
    axis: {
        parent: "a.parentNode",
        ancestors: jQuery.parents,
        parents: jQuery.parents,
        next: "jQuery.sibling(a).next",
        prev: "jQuery.sibling(a).prev",
        siblings: jQuery.sibling,
        children: "a.childNodes"
    },
    each: {
        removeAttr: function( key ) {
            this.removeAttribute( key );
        },
        show: function(){
            this.style.display = this.oldblock ? this.oldblock : "";
            if ( jQuery.css(this,"display") == "none" )
                this.style.display = "block";
        },
        hide: function(){
            this.oldblock = this.oldblock || jQuery.css(this,"display");
            if ( this.oldblock == "none" )
                this.oldblock = "block";
            this.style.display = "none";
        },
        toggle: function(){
            $(this)[ $(this).is(":hidden") ? "show" : "hide" ].apply( $(this), arguments );
        },
        addClass: function(c){
            jQuery.className.add(this,c);
        },
        removeClass: function(c){
            jQuery.className.remove(this,c);
        },
        toggleClass: function( c ){
            jQuery.className[ jQuery.className.has(this,c) ? "remove" : "add" ](this,c);
        },

        remove: function(a){
            if ( !a || jQuery.filter( [this], a ).r )
                this.parentNode.removeChild( this );
        },
        empty: function(){
            while ( this.firstChild )
                this.removeChild( this.firstChild );
        },
        bind: function( type, fn ) {
            if ( fn.constructor == String )
                fn = new Function("e", ( !fn.indexOf(".") ? "$(this)" : "return " ) + fn);
            jQuery.event.add( this, type, fn );
        },

        unbind: function( type, fn ) {
            jQuery.event.remove( this, type, fn );
        },
        trigger: function( type, data ) {
            jQuery.event.trigger( type, data, this );
        }
    }
};