2

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

1.可以借鉴的资源

1)github

Github不仅仅是你储存代码的地方,更是你学习别人开源代码的好地方,还是那你了解语言发展趋势和方向的好地方。比如你想了解如今js发展热度。
可以直接在这里查看:https://github.com/showcases/front-end-javascript-frameworks
至于var的开源就不多说了。

2)官网

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

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

2.深入阅读jquery源码

​ jquery至少解决了两个问题,1兼容性2易用性,我们使用jquery 1.11.2,为什么用这个版本,因为这个版本没有太多的新技术,比如引入大量的模块,

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

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

所以我们尽量使用稳定而在我们已经学过的技术范围之内的版本。

获得地址:

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;
});

彬哥头发多
4.3k 声望1.4k 粉丝

一个会写代码的职业规划师,2本职业规划书作者。争取未来1年帮100个朋友薪资上涨50%。