We talked about the preparation for writing a library in the last class, but this class is not a storehouse. Why? So let's first look at how other people's libraries are written. What we need to do after we have a solid foundation is not to build a car behind closed doors, but to read some well-known libraries. Why? A library stands out from hundreds of libraries and is accepted by developers. It must be excellent in some aspects, such as architecture, ease of use, etc. At the same time, some mature methods and codes can learn from it, such as the code of architecture security, such as how to judge the type and so on. Don't create it behind closed doors. First, use someone else's stuff, then read someone else's code and experience the good part, then how the good part works for me, and finally, completely independent innovation.
1. Resources for Reference
1)github
Github is not only a place for you to store code, but also a good place for you to learn about other people's open source code. It's also a good place for you to understand the trends and directions of language development. For example, you want to know how hot js is today. You can view it directly here: https://github.com/showcases/front-end-javascript-frameworks As for the open source of var, let's not say much.
2) Official Website
The official website of a repository is always the preferred website to keep abreast of its latest developments and learning materials. For example, jquery.
Let's take jquery as an example to analyze its source code.
2. Read the jquery source code in depth
jquery solves at least two problems, 1 compatibility 2 ease of use, we use jquery 1.11.2, why use this version, because this version does not have many new technologies, such as the introduction of a large number of modules,
Learning a new thing shouldn't burden developers, for example. I just want to learn the excellent architecture of jquery, but you use ES6 grammar, so I have to learn ES6, you use too much modularity, then I have to learn modularity, you use packaging tools, I have to learn grunt and so on. In the end, I think it's too big to go to your uncle's. I won't learn.
Do you need to plant grass for a glass of pure milk?
So we try to use stable versions that are within the scope of the technologies we have learned.
Get the address:
https://raw.githubusercontent.com/jquery/jquery/1.11.2/dist/jquery.js
Code directly not BB.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Copyright Copyright Copyright of Big Bingo</title> <meta name="author" content="Nicholas·Cock·Big Bingge-QQ group:552079864"> <meta name="copyright" content="Nicholas·Cock·Big Bingge"> <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>Nicholas·Cock·Advantages of Big Bingo</h1> <ul class="good"> <li>high</li> <li>rich</li> <li>Handsome</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);
Open jquery.js and the first thing you can learn is coming. I wipe, pretend to be a sharp tool, annotations.
/*! * 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 */
Without explanation, you can use it in your own library.
(function(global,factory){ factory(global); })(window,function(window,noGlobal){ //Keep in mind that this is where the jquery core code is located var version = "1.11.2"; var jQuery = function( selector, context ) { return new jQuery.fn.init(selector, context ); } //This fn has various functions on it. jQuery.fn = jQuery.prototype = { jquery: version, constructor: jQuery, //Various functions first: function(selector) { } }; //When this new object is passed in var init = jQuery.fn.init = function (selector, context) { //Get the Selector Officer }; init.prototype = jQuery.fn; window.jQuery = window.$ = jQuery; });
A simple anonymous function executes itself, gets the selector, and then marks where to put the function, such as first. Next time, go into the function.
Summary: jQuery is easy to use and easy to do, but the code is a bit messy, less around, in fact, all the features can be written on the prototype of JQuery, and then
Initialize and execute it with init as follows:
window.jQuery = window.$ = jQuery; var jquery = function( selector, context ) { return new jQuery(selector, context ); }; //Setting Styles jQuery.prototype.css = function(selector, context ){ };
This will make it much clearer. When I teach to write the library later, I release the implementation code.