What does a JS framework need to do? (1)

What does a JS framework need to do? (1)

Why? I wonder if you have found that although the front-end is developing fast, some well-known frameworks will be hot for at least a long time, such as Backbone, React, and Ember. If you want to learn it, you must have enough time to learn it. After all, the facts are in front of us. Many companies' online products are written using React, such as Teambition's short chat, it seems that it was reconstructed from Backbone. However, when taking over new projects, many people are often at a loss and do not know what technologies to use, or rely only on the technologies they are good, even in some scenarios, it may not be the most suitable.

Because these students do not work hard at ordinary times? No. They may read books very late and browse many blogs to learn about CORS applications, or to find out why the scope in Angular cannot be bound in two-way in some cases. Yes, the time is spent, but the problem is still confused. Maybe the front-end is such a job. encourage you to learn swimming, breaststroke, freestyle, butterfly swimming, and the tsunami will be washed away ......

So what is this article about? That is, if you haven't learned anything now, you should rely on basic skills to complete a static page. Of course, there are also business logic, including data CRUD and animation. How should we do it? I have a question about VanillaJS. I don't know if you have read it. You will surely smile.

No more jQuery, no Bootstrap, throwing away all the weapons you are proud of, but the big devil IE 6 is still there. If you don't have specific requirements, you won't be able to follow them. If you really want to do it, you can create a todo app.

DOM Query

When there is no third-party framework available, if you really follow the function list, from the first implementation to the last one, each module is wrapped with self-executed anonymous functions, and all the code is written in one file, it looks very reasonable, but if you do, I'm afraid you will go crazy. Oh, the advantage is that you can boast to others that you have written 300 or 400 lines of code today, with a high output!

Therefore, if we do not use a third-party framework, we can write it by ourselves. Its functions only need to comply with the Application Scenario, so we do not need to consider any strange situations that will not happen.

Okay, start. The most dependent function is to obtain the corresponding DOM elements through the CSS selector. Here we only use the most compatible method, that is, the id and element name selector.

 
 

  
  
var idRegex         = /^#[\w\-]+/i, 
  
  
    tagRegex        = /^[a-z]+/i; 
  
  
      
  
  
function query(selector, context) { 
  
  
  context = context || document; 
  
  
 
  
  
  if (idRegex.test(selector)) { 
  
  
    return document.getElementById(selector.substring(1)); 
  
  
  } else if (tagRegex.test(selector)) { 
  
  
    return context.getElementsByTagName(selector); 
  
  
  } 
  
  
 
  
  
  return null; 
  
  
} 
 
 

By the way, I put all DOM operations in the F. DOM namespace, so the query method is used as follows:

F. DOM. query ('# id ');

It is indeed much more troublesome than jQuery's $ ('# id') method, but "the child is not ugly, the dog is not too poor", and the code written by myself should be used even if it is worse.

Some other necessary operations will not post the Code, such as addClass, removeClass, and hasClass.

DOM events

If someone has participated in the interview, I want to "how to listen to a DOM Event? Consider browser compatibility as much as possible. "This is a frequently asked question. Write a feasible solution here.

 
 

  
  
/Listen to DOM events
  
  
Function addEventListener (el, event, handler, useCapture ){
  
  
If (el. addEventListener ){
  
  
El. addEventListener (event, handler, useCapture );
  
  
} Else if (el. attachEvent ){
  
  
El. attachEvent ('on' + event, handler );
  
  
} Else {
  
  
// Not support
  
  
}
  
  
}
  
  
 
  
  
// Cancel the DOM Event
  
  
Function removeEventListener (el, event, handler, useCapture ){
  
  
If (el. removeEventListener ){
  
  
El. removeEventListener (event, handler, useCapture );
  
  
} Else if (el. detachEvent ){
  
  
El. detachEvent ('on' + event, handler );
  
  
} Else {
  
  
// Not support
  
  
}
  
  
}
 
 

I know that you may have better or better solutions, but I am sorry that this is not the focus of the discussion here.

There are also some useful methods for DOM events, such as preventDefault and stopPropagation, which can be encapsulated by yourself. Next, we would like to discuss the events of DOM loading. We will use this in jQuery:

 
 

  
  
$(function() { 
  
  
  // ready 
  
  
}); 
 
 

If we want to encapsulate a similar method, it may be written as follows:

AddEventListener ('window', 'load', callback );

But under what circumstances is the load event triggered? Triggered only when all resources on the page, including images, are loaded! That is to say, if there are many images and the network speed is slow, it takes a long time to trigger the load. There is no such latency issue during local debugging, so it is often ignored.

How can we correct it? First, you can put <script> below all the elements in <body>, so you do not need to listen to any "loaded" events. Second, listen to the DOMContentLoaded event, which is supported by IE 9 +. For compatibility with earlier browsers, read this article (addDOMLoadEvent ).