从零实现一个简易的jQuery框架之二—原型继承实现$()

jQuery整体框架甚是复杂,也不易读懂。但是若想要在前端的路上走得更远、更好,研究分析前端的框架无疑是进阶路上必经之路。但是庞大的源码往往让我们不知道从何处开始下手。在很长的时间里我也被这种问题困扰着,自己也慢慢摸索到一个比较不错的看源码的“姿势”。

一定不推荐的就是拿到源码直接开始啃,首先我们一定要对这个框架的整体的架构有一定的了解,每个模块之间的联系是怎样的;

然后找一找有没有关于源码分析的书籍,如果有的话那么恭喜你了,你可以直接跟着书的思路开始看源码;

如果没有框架源码分析相关书籍的话,那么就只能自己啃源码了,可以从成熟框架的早期源码开始看起,这样一开始的代码量不多,多看几遍还是可以理解的。

看源码时不仅要知道其然,还要知道其所以然。即不仅要知道这样写,还需要知道为什么这样写。这就要求我们不仅要看源码,而且要敲源码,换几种不同的思路来实现源码实现的功能能让我们更好的理解作者为什么这样写。

jQuery框架总体架构

(function(){
//替换全局的$,jQuery变量
var _jQuery = window.jQuery, _$ = window.$,
//jQuery实现 jQuery
= window.jQuery = window.$ = function( selector, context ) { return new jQuery.fn.init( selector, context ); };
//jQuery原型方法 jQuery.fn
= jQuery.prototype = { init: function( selector, context ) {}, //一些原型的属性和方法 };

//原型替换 jQuery.fn.init.prototype
= jQuery.fn;

//原型扩展 jQuery.extend
= jQuery.fn.extend = function() { ... }; jQuery.extend({ // 一堆静态属性和方法 }); })();

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwxfjs.html