Question and answer form read jquery source (i)

I read the garden friend Allen Aaron series of blog "jquery Source Analysis series", mainly reading the principle of jquery, and then run the code of Friends, the real jquery source of the reading is not much. Mainly directly read the jquery source code, one can read the parts are not many, rather than read the source code to parse the article, and then read the harvest greater. After reading all the jquery source blog, I am ready to really start reading the source code of jquery. And the form of reading belongs to ask self-answer, to read the blog when the left to ask questions, and then through their own reading source of the form of the answer, of course, also included in reading the source code when those who do not understand the place, ask questions, and then slowly digest the solution.

This jquery source series is not a tutorial, but the author's study of jquery source notes, and therefore will take the question and answer this non-systematic form. If you want to learn the jquery source system, please read Alan Aaron's blog carefully, or read the source code of jquery directly on Gitbub (the current master version is the version to 3.1.1-pre.). If after reading also and the author, to some of the content in question, you can look at the author's series of blogs, see if you have doubts about your problems.

Question: How to build jquery's source code

When I started reading the source of jquery, I found that the source code itself was modular, and Alan Aaron did not read the version, and he was directly reading the dist code. So how does jquery build the source code?

A : read jquery's readme.md file on GitHub, which is very clear. Install the GIT client and Nodejs and NPM first. Then clone the resources on GitHub to local, find a directory, then open the command line and enter the git clone command:

git clone git://github.com/jquery/jquery.git

The source code for jquery will be cloned locally:

Then go to the directory, run the following command on the command line, jquery will automatically install the NPM module and build jquery.

NPM Run Build

Finally, in the Dist directory, we will build the jquery file we want.

Question: What is the structure of the jquery directory on git?

A : The specific directory structure can be seen here, one by one to describe the role of the various directories and files:

. GitHub	GIT-related directories
Build	Build the relevant script file, I probably read it, mainly to create two grunt tasks, responsible for building (bulid) and output (dist)
Dist	Outputs the built-in files, mainly Jquery.js and Jquery.min.js, as well as Jquery.min.map. These are the JS files we end up using.
External	Third-party code, the heaviest third-party library in jquery sizzle right here.
Node_modules	Nodejs module files, the build time to install the node non-global module is put here, attribute Nodejs's small partners should be very clear
Src	The directory of jquery's own source code, which is the part of our main reading
Test	Unit Test Cases
. BABELRC	Configuration file for Babel
. editorconfig	Editorconfig configuration files, Editorconfig is a configuration that helps developers define and maintain consistent code styles between different editors and Ides, and many Ides support Editorconfig plugins. Use this to make the code appear as Editorconfig conventions automatically under various Ides
. eslintignore	Eslint related files, configuring file directories that are not used for eslint syntax detection
. Eslintrc.json	The Eslint configuration file. Eslint and jshint more like, can be considered as Jshint upgrade version, are used to do grammar detection.
. gitattributes	Git-related files for setting how files are compared
. gitignore	Git configuration files configured to configure files that do not need to be added to version management
. mailmap	Seems to be an email address list
. npmignore	NPM related files, configuring which files do not need to be published to npmjs.org
. NPMRC	NPM configuration file
. travis.yml	TARVIS-CI configuration files for continuous integration, GitHub integrates continuous Integration Services Travis, and after each push, Travis is executed regularly “npm test” to test the project
AUTHORS.txt	Contributors Directory
Contributing.md	Contribution Code Guidelines
Gruntfile.js	Configuration file for Grunt
LICENSE.txt	License Agreement
Readme.md	Documentation for GitHub projects
Package.json	NPM's Package file

Several places to note:

1.jQuery is a modular tool with Requirejs, so the source code for jquery is the AMD specification. AMD this modular specification is mainly active in the browser-based JS module management, he has the asynchronous loading, relying on the front of the very good features, of course, to do the backend code module management can also, but I think here with AMD a bit "overqualified". jquery's modular management of AMD specifications may be a historical cause, and the early years of modular tools are not as mature as they are today.

2.jQuery is built with grunt, and jquery does its own grunt task of building, the code can refer to the grunt task under the build directory and grunt configuration file gruntfile.js. Based on Grunt,jquery complete testing, build, merge code, compression and so on, and finally copy the built files into the dist directory.

The 3.jQuery configuration of the NPM package shows that jquery itself has been posted on npmjs.org, and we can install jquery directly with NPM.

4.jQuery has babel configuration file, the source code is not using ES6 syntax?

Question: jquery has a Babel configuration file, does the source code of jquery use the ES6 syntax?

A : the answer is no, we do not see Babel in the grunt inside the configuration, direct test can not be used in the source code ES6.

Add a ES6 syntax to the source code first, and then build. At this point we will find that the build will be error-free, and the ES6 syntax in the built-in Jquery.js file has not been converted to ES5 syntax. This means that Babel is not enabled when the source code is built.

We're looking at the configuration of Babel in grunt.

Babel: {    options: {        "inline",        true    },    nodesmoketests: {        Files: {            "test/node_smoke_tests/lib/ensure_iterability.js":            "test/node_smoke_tests/ Lib/ensure_iterability_es6.js "}}    },

As you can see, Babel only converts the smoke test case in the test case, while the source code is not in the converted list.

Question: The source code for jquery is modular with the AMD specification, so why is the final code built without AMD's statement?

A : read the source code of jquery and we can see clearly the statement of the AMD specification.

And then in Dist's built-in file, we couldn't find the shadow of the AMD Spec statement, how did jquery get rid of these AMD statements? At first, I think it was using some grunt plug-ins, and later read the code inside the build found, is in the build using a regular AMD statement removal. Although jquery is using AMD as a module, the specific code structure has its own set of strategies, which should be considered for the final building of the code.

SRC root directory, there are more than 20 JS files, many JS files have the same name of the directory with the corresponding. The most special directory in the directory is the Var directory, because the Var directory does not exist with the corresponding file named Var.js.

var is the same name as JS's keyword Var, which is definitely related to naming this directory. Yes, jquery, when removing AMD statements, discovers that if it is a file in the Var directory, it will convert it to the form "var file name = AMD Output Object". Such as:

Define (' Var/arr ', [],function() {    "use strict";     return  ' var/document ', [],function() {    "use strict";     return  ' Var/getproto ', [],function() {    "use strict";     return object.getprototypeof;} );......

These modules of the source code will eventually be built as:

var arr = []; var document = window.document; var getproto = object.getprototypeof;
......

For modules that are not in the "var" directory, jquery will remove AMD-related statements such as the Define keyword directly. The Sizzle module is more special, jquery in the construction of the time also done more operations, here is no longer scrutiny.

As you can see from the analysis, jquery is a build that destroys the scope of each AMD module. The reason we need to modularize our code is that we don't want our internal (private) variables to be declared in the global scope, and JavaScript is a function-level scope language, and jquery removes the form of AMD in its construction, In this way, all the code of the module is built in the same scope, so be careful when you modify the jquery source code, do not create variables of the same name in the scope, and prevent conflicts between modules.

The above is the process of jquery removing AMD.

Once we understand the construction process of jquery, we can easily and happily browse the source code of jquery. In fact, if jquery is built with tools like Webpack, it's a lot easier. jquery's failure to adopt such a tool may also be a historical reason, or for further optimization of the code.

Question and answer form read jquery source (i)