体验javascript之美-第十一课-jquery源码分析

时间 2019-11-15

标签体验 javascript 之美第十一课 jquery 源码分析栏目 JavaScript 繁體版

原文原文链接

上节课咱们说了写一个库的准备，可是这节课并非写库为何，有句话叫你没吃过猪肉还没看过猪走。因此咱们先看看别人的库是怎么写的。在咱们拥有了足够扎实的基础以后咱们要作的不是闭门造车，而是去阅读一些知名的库，为何？一个库从成百上千个库里面脱颖而出，被广大的开发者所接受使用，必定是在一些方面有很优秀的方面，好比架构，好比易用等，同时一些成熟的方法和代码能够借鉴学习，好比架构安全的代码，好比如何判断类型等等。不要闭门形成，首先是使用别人的东西，而后是阅读别人的代码体会优秀的部分，而后是优秀部分如何为我所用，到最后彻底自主的创新。javascript

1.能够借鉴的资源

1)githubhtml

Github不单单是你储存代码的地方，更是你学习别人开源代码的好地方，仍是那你了解语言发展趋势和方向的好地方。好比你想了解现在js发展热度。
能够直接在这里查看：https://github.com/showcases/front-end-javascript-frameworks
至于var的开源就很少说了。

2）官网java

一个库的官网永远是了解它最新进展和学习资料的首选网站。好比jquery.

下面咱们就拿jquery举例分析下它的源码。jquery

2.深刻阅读jquery源码

jquery至少解决了两个问题，1兼容性2易用性，咱们使用jquery 1.11.2,为何用这个版本，由于这个版本没有太多的新技术，好比引入大量的模块，git

学习一个新东西不该该增长开发者的负担，举个例子。我只想学习jquery的优秀架构，但是你用了ES6语法，那我还得学ES6,你用了太多的模块化，那我还得学模块化，你用了打包工具，我还得学grunt等。到最后想一想都头大了，去你大爷的，我不学了。github

你有必要为了喝杯纯牛奶而去种草么？安全

因此咱们尽可能使用稳定而在咱们已经学过的技术范围以内的版本。架构

得到地址：模块化

https://raw.githubusercontent.com/jquery/jquery/1.11.2/dist/jquery.js

直接上代码不BB.函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大彬哥版权全部翻录必究</title>
    <meta name="author" content="尼古拉斯·屌·大彬哥-QQ群:552079864">
    <meta name="copyright" content="尼古拉斯·屌·大彬哥">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>

    </style>
</head>
<body>
<div id="main" class="container">
    <h1>尼古拉斯·屌·大彬哥的优势</h1>
    <ul class="good">
        <li>高</li>
        <li>富</li>
        <li>帅</li>
    </ul>
</div>
<script src="jquery.js"></script>
<script src="index.js"></script>
</body>
</html>

index.js

var aLi = $('ul.good li');
console.log(aLi);

打开jquery.js第一个能够学的东西就来了，我擦嘞，装逼的利器啊，注释。

/*!
 * 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
 */

不解释，你能够直接拿过去改吧改吧用在你本身的库里。

(function(global,factory){
    factory(global);
})(window,function(window,noGlobal){
    //你们记住这里才是放jquery核心代码的地方
    var version = "1.11.2";
    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;
});