<p><code></p> <blockquote> <p>上节课我们说了写一个库的准备,但是这节课并不是写库为什么,有句话叫你没吃过猪肉还没看过猪走。所以我们先看看别人的库是怎么写的。在我们拥有了足够扎实的基础之后我们要做的不是闭门造车,而是去阅读一些知名的库,为什么?一个库从成百上千个库里面脱颖而出,被广大的开发者所接受使用,一定是在一些方面有很优秀的方面,比如架构,比如易用等,同时一些成熟的方法和代码可以借鉴学习,比如架构安全的代码,比如如何判断类型等等。不要闭门造成,首先是使用别人的东西,然后是阅读别人的代码体会优秀的部分,然后是优秀部分如何为我所用,到最后完全自主的创新。</p> </blockquote> <h3 id="articleHeader0">1.可以借鉴的资源</h3> <p>1)github</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="Github不仅仅是你储存代码的地方,更是你学习别人开源代码的好地方,还是那你了解语言发展趋势和方向的好地方。比如你想了解如今js发展热度。 可以直接在这里查看:https://github.com/showcases/front-end-javascript-frameworks 至于var的开源就不多说了。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code><span class="hljs-type">Github</span>不仅仅是你储存代码的地方,更是你学习别人开源代码的好地方,还是那你了解语言发展趋势和方向的好地方。比如你想了解如今js发展热度。 可以直接在这里查看:https:<span class="hljs-comment">//github.com/showcases/front-end-javascript-frameworks</span> 至于<span class="hljs-keyword">var</span>的开源就不多说了。</code></pre> <p>2)官网</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="一个库的官网永远是了解它最新进展和学习资料的首选网站。比如jquery." title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs erlang"><code style="word-break: break-word; white-space: initial;">一个库的官网永远是了解它最新进展和学习资料的首选网站。比如jquery.</code></pre> <p>下面我们就拿jquery举例分析下它的源码。</p> <h3 id="articleHeader1">2.深入阅读jquery源码</h3> <p>​ jquery至少解决了两个问题,1兼容性2易用性,我们使用jquery 1.11.2,为什么用这个版本,因为这个版本没有太多的新技术,比如引入大量的模块,</p> <p>学习一个新东西不应该增加开发者的负担,举个例子。我只想学习jquery的优秀架构,可是你用了ES6语法,那我还得学ES6,你用了太多的模块化,那我还得学模块化,你用了打包工具,我还得学grunt等。到最后想想都头大了,去你大爷的,我不学了。</p> <p>你有必要为了喝杯纯牛奶而去种草么?</p> <p>所以我们尽量使用稳定而在我们已经学过的技术范围之内的版本。</p> <p>获得地址:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="https://raw.githubusercontent.com/jquery/jquery/1.11.2/dist/jquery.js" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;"><span class="hljs-string">https:</span><span class="hljs-comment">//raw.githubusercontent.com/jquery/jquery/1.11.2/dist/jquery.js</span></code></pre> <p>直接上代码不BB.</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<!DOCTYPE html><br /> <html lang=&quot;en&quot;><br /> <head><br /> <meta charset=&quot;UTF-8&quot;><br /> <title>大彬哥版权所有翻录必究</title><br /> <meta name=&quot;author&quot; content=&quot;尼古拉斯·屌·大彬哥-QQ群:552079864&quot;><br /> <meta name=&quot;copyright&quot; content=&quot;尼古拉斯·屌·大彬哥&quot;><br /> <meta name=&quot;viewport&quot; content=&quot;width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0&quot;><br /> <meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;ie=edge&quot;></p> <style> </style> <p></head><br /> <body></p> <div id=&quot;main&quot; class=&quot;container&quot;> <h1>尼古拉斯·屌·大彬哥的优点</h1> <ul class=&quot;good&quot;> <li>高</li> <li>富</li> <li>帅</li> </ul> </div> <p><script src=&quot;jquery.js&quot;></script><br /> <script src=&quot;index.js&quot;></script><br /> </body><br /> </html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>大彬哥版权所有翻录必究<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"author"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"尼古拉斯·屌·大彬哥-QQ群:552079864"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"copyright"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"尼古拉斯·屌·大彬哥"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"X-UA-Compatible"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"ie=edge"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="undefined"> </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"main"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>尼古拉斯·屌·大彬哥的优点<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"good"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>高<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>富<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>帅<span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"jquery.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"index.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>index.js</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="var aLi = $('ul.good li'); console.log(aLi);" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">var</span> aLi = $(<span class="hljs-string">'ul.good li'</span>); <span class="hljs-built_in">console</span>.log(aLi);</code></pre> <p>打开jquery.js第一个可以学的东西就来了,我擦嘞,装逼的利器啊,注释。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="/*! * jQuery JavaScript Library v1.11.2 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2005, 2014 jQuery Foundation, Inc. and other contributors * Released under the MIT license * http://jquery.org/license * * Date: 2014-12-17T15:27Z */" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs ruby"><code>/*! * <a href="http://www.js-code.com/tag/jquery" title="浏览关于“jQuery”的文章" target="_blank" class="tag_link">jQuery</a> JavaScript Library v1.<span class="hljs-number">11.2</span> * <span class="hljs-symbol">http:</span>/<span class="hljs-regexp">/jquery.com/</span> * * Includes Sizzle.js * <span class="hljs-symbol">http:</span>/<span class="hljs-regexp">/sizzlejs.com/</span> * * Copyright <span class="hljs-number">2005</span>, <span class="hljs-number">2014</span> jQuery Foundation, Inc. <span class="hljs-keyword">and</span> other contributors * Released under the MIT license * <span class="hljs-symbol">http:</span>/<span class="hljs-regexp">/jquery.org/license</span> * * <span class="hljs-symbol">Date:</span> <span class="hljs-number">2014</span>-<span class="hljs-number">12</span>-<span class="hljs-number">17</span><span class="hljs-symbol">T15:</span><span class="hljs-number">27</span>Z *<span class="hljs-regexp">/</span></code></pre> <p>不解释,你可以直接拿过去改吧改吧用在你自己的库里。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="(function(global,factory){ factory(global); })(window,function(window,noGlobal){ //大家记住这里才是放jquery核心代码的地方 var version = &quot;1.11.2&quot;; var jQuery = function( selector, context ) { return new jQuery.fn.init(selector, context ); } //这个fn身上放各种功能函数 jQuery.fn = jQuery.prototype = { jquery: version, constructor: jQuery, //各种功能 first: function(selector) { } }; //这个new 对象的时候传参进去 var init = jQuery.fn.init = function (selector, context) { //拿到选择器干事儿 }; init.prototype = jQuery.fn; window.jQuery = window.$ = jQuery; });" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code>(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">global,factory</span>)</span>{ factory(global); })(<span class="hljs-built_in">window</span>,<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">window,noGlobal</span>)</span>{ <span class="hljs-comment">//大家记住这里才是放jquery核心代码的地方</span> <span class="hljs-keyword">var</span> version = <span class="hljs-string">"1.11.2"</span>; <span class="hljs-keyword">var</span> jQuery = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"> selector, context </span>) </span>{ <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> jQuery.fn.init(selector, context ); } <span class="hljs-comment">//这个fn身上放各种功能函数</span> jQuery.fn = jQuery.prototype = { <span class="hljs-attr">jquery</span>: version, <span class="hljs-attr"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a>ructor</span>: jQuery, <span class="hljs-comment">//各种功能</span> first: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">selector</span>) </span>{ } }; <span class="hljs-comment">//这个new 对象的时候传参进去</span> <span class="hljs-keyword">var</span> init = jQuery.fn.init = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">selector, context</span>) </span>{ <span class="hljs-comment">//拿到选择器干事儿</span> }; init.prototype = jQuery.fn; <span class="hljs-built_in">window</span>.jQuery = <span class="hljs-built_in">window</span>.$ = jQuery; });</code></pre> <p></code></p>

本文固定链接: http://www.js-code.com/jquery/jquery_41195.html