Jquery 扩展方法实现原理

<script type="text/javascript">    
    var searchCallback = function (data) {
        console.log(data)
    }
    var url = "http://demo.com/jsonp/search?id=1&callback=searchCallback";
    // 创建script标签，设置其属性
    var script = document.createElement(‘script‘);
    script.setAttribute(‘src‘, url);
    // 把script标签加入head，此时调用开始
    document.getElementsByTagName(‘head‘)[0].appendChild(script);
</script>

    // jQuery 1.3
    $(selector).(events, data, handler);
    // jQuery 1.4.3+
    $(elements).delegate(selector, events, data, handler);
    // jQuery 1.7+ live过时 旧版本的jQuery中用户，应优先使用.delegate()来取代.live()
    $(elements).on(events, selector, data, handler);

jQuery.fn.extend( {
        ...
	delegate: function( selector, types, data, fn ) {
		return this.on( types, selector, data, fn );
	},
	...
} );

function on( elem, types, selector, data, fn, one ) {
        ...        
        return elem.each( function() {
		jQuery.event.add( this, types, fn, data, selector );
	} );
}

jQuery.event = {
    ...
    add: function( elem, types, handler, data, selector ) {
          ...
         // 若未指定特殊的事件处理，则使用addEventListener
	 if ( !special.setup ||
	   special.setup.call( elem, data, namespaces, eventHandle ) === false ) {
             if ( elem.addEventListener ) {
		elem.addEventListener( type, eventHandle );
	     }
	 }
         ...
    }
    ...  
}

$("#header").data("title", "hello world");
// 执行后打印 $.cache 结果为
{
    1: {
        data: {
            title : "hello world"
        }
    }
}
// 查看 header 元素，发现属性中多了一行 
//"jQuery18102873769768048078: 1"
//其中 key 值那一长串为 jQuery 实例唯一标识，1 是 header 元素绑定的数据在 cache 对象中对应的属性名，该值每次增加 1，

$("#header").data("title");

// Catch cases where $(document).ready() is called
// after the browser event has already occurred.
// Support: IE <=9 - 10 only
// Older IE sometimes signals "interactive" too soon
if ( document.readyState === "complete" ||
	( document.readyState !== "loading" && !document.documentElement.doScroll ) ) {

	// Handle it asynchronously to allow scripts the opportunity to delay ready
	window.setTimeout( jQuery.ready );

} else {

	// Use the handy event callback
	document.addEventListener( "DOMContentLoaded", completed );

	// A fallback to window.onload, that will always work
	window.addEventListener( "load", completed );
}

// The ready event handler and self cleanup method
function completed() {
	document.removeEventListener( "DOMContentLoaded", completed );
	window.removeEventListener( "load", completed );
	jQuery.ready();
}
 

jQuery.extend({

    Deferred: function (func) {
    ...
    promise = {
        state: function () {
            return state;
        },
        always: function () {
            deferred.done(arguments).fail(arguments);
            return this;
        },
        "catch": function (fn) {
            return promise.then(null, fn);
        },

        then: function (onFulfilled, onRejected, onProgress) {
        ...
			},
    deferred = {}; 
    // Make the deferred a promise
    promise.promise(deferred);
    // Call given func if any
    if (func) {
        func.call(deferred, deferred);
    }

    // All done!
    return deferred;
    }
}

function update() {
    elements.each(function () {      
       ...
　　　　//判断当前视窗与设置的关系
       if (!$.belowthefold(this, settings) &&
        !$.rightoffold(this, settings)) {
        $this.trigger("appear");
    }
        ...
});
}

/* 符合条件时，显示图片 */
$self.one("appear", function () {
    if (!this.loaded) {
        $("<img />")
            .bind("load", function () {

                var original = $self.attr("data-" + settings.data_attribute);
                $self.hide();
                if ($self.is("img")) {
                    $self.attr("src", original);
                } else {
                    $self.css("background-image", "url(‘" + original + "‘)");
                }
                ...
            })
    .attr("src", $self.attr("data-" + settings.data_attribute));
    }
});