上节课我们说了写一个库的准备,但是这节课并不是写库为什么,有句话叫你没吃过猪肉还没看过猪走。所以我们先看看别人的库是怎么写的。在我们拥有了足够扎实的基础之后我们要做的不是闭门造车,而是去阅读一些知名的库,为什么?一个库从成百上千个库里面脱颖而出,被广大的开发者所接受使用,一定是在一些方面有很优秀的方面,比如架构,比如易用等,同时一些成熟的方法和代码可以借鉴学习,比如架构安全的代码,比如如何判断类型等等。不要闭门造成,首先是使用别人的东西,然后是阅读别人的代码体会优秀的部分,然后是优秀部分如何为我所用,到最后完全自主的创新。
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;
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。