Articles under category JavaScript

Today, just an old friend chatted up the jQuery source code. He didn't understand the source code. I had a learning and communication attitude and explained the core realization to him. (as if he had been pigeon for a long time).

By the way, which CDN service provider is looking for a jQuery file to open? The 1.2.3 version I use here is for example. The latest version is almost the same, with only two or three changes. Https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.js

Source code analysis

17-20 elements Pass the selector and return the init method of your own new. It is estimated that you haven't used it either. $() The second parameter is omitted here.

 Var jQuery = window.jQuery = function (selector) {
return new jQuery.prototype.init (selector);}

26-27 elements This is why it is always a global variable to mount to a window object because of the beginning of $.

 / / Map the jQuery namespace to the '$' one
window.$= jQuery;

36-547 elements Eliminate the core of retention that we do not need. Init Method, the jQuery instance and the selector are judged internally. Here we ignore and simplify.

 JQuery.fn = jQuery.prototype = {
init: function (selector) {
var nodes = document.querySelectorAll (selector); 
for (VaR, 
for) = =; one hundred thousand;

549 elements In the last paragraph, the jQuery prototype chain is passed to the prototype of the init method under the jQuery prototype. Looking back at the new code, it is clear and clear.

 JQuery.prototype.init.prototype = jQuery.prototype;

Complete implementation

Adding functionality to the jQuery prototype is very close to the first version of jQuery. Here I am a simple implementation. Text () Method

 Var jQuery= function (selector) {
return new jQuery.fn.init (selector); 
}

jQuery.fn = jQuery.prototype = {
init: + (
}

jQuery.fn) = = (()); (()); Element: function (callback) {
for (VaR I = 0; I < this.length; i++) {
callback (this[i]); Return content;} else {
return this[0].innerHTML;}}}, 
}

jQuery.prototype.init.prototype = jQuery.prototype; 

window.$= jQuery;

End

Actually, the core is not complicated. I like it very much. I think most of my functions are implemented by plug-ins. The ingenious design and convenience of the tools themselves.

On the traditional page production, jQuery used a very comfortable shuttle, but the appearance of MVVM changed the way of thinking. We only need to pay attention to business logic, do not need to manually operate DOM, do not need to pay attention to the synchronization of data status, and ease the project management.

If there are simple needs on a single page, jQuery is still useful, MVVM can only be added trouble.

If there is novice learning Nodejs Get URL post When the parameters are returned, the same problem will happen to me, and today we will solve this problem.

Node.js Unlike PHP This old backend language has a specific way to obtain external parameters, after all, it is a new force, hoping that the later version will be more convenient and efficient.


 / / normal acquisition value 
app.get ("/", (req, RES) = {
console.log (req.query); 
res.send ("finish");}; 
app.post ("/", (req, RES) = > {
console.log (req.body); 
res.send ("finish");};

If you want to export normally, your anticipation is like this.

 / / GET request 
{
name: 'Feng Xiaoxian', 
age:'18'
}
 complete.

or

 / / POST request 
{
name: 'Feng Xiaoxian', 
age:'18'
}
 complete.

However, it is not!!!

 / / the two output will be like this!!! {}
undefined

This is because we lack a module, express middleware. Body-parser

Official statement
Node.js body parsing middleware.
Parse incoming request bodies in a middleware before your handlers, available, handlers

Basically, parsing the content of the body in the client request, JSON encoding and URL encoding processing.


Next we will install. Body-parser

 / / install body-parser
npm install body-parser

 / / import app.js
var bodyParser = require ('body-parser'); 
app.use (bodyParser); / so / req.body, to use req.body to get the value of post transfer, 
app.post ("/", (req, RES) = > 
app.post ("));" ("completion");};

Learning without motivation, eating jujube is? In the process of learning nodejs, I will give you a little refreshing.

Here I use the cnodejs community's simplest crawler tutorial to do the basic modification of eel.

 / / initialize project 
npm init
// to start app.js
node app.js
//, you can be happy. A kind of Play fast (see the end of the code)

If you don't know how to use nodejs
Linux players can see My article Windows players can download.Msi directly to the official website, and install next step. Through train


Basic crawling ideas

  1. The paging button of the page catches all the little sister's page links appearing on this page and stores them.
  2. Using eventproxy to visit every little sister's page concurrently
  3. During the visit, we use cheerio (similar to jQuery module) to match the picture address we need, and record all the pictures found.
  4. HTTP requests every picture address to save binary data stream.
  5. FS outputs binary data streams into picture files, and the name of the files is extracted from the original address.
  6. Save to folder

Here, I am afraid that because the request is too large, we can use express to build static pages. query and download To reduce the possibility of crawling sites being crawled to death.

Download address: Xjj.zip