How to quickly lay the foundation for front-end development, and then make their own technology as soon as possible to the next level? I believe this is a problem every front-end couple are thinking of. And this problem is more than one student asked me, how quickly learn the front? Js learn to what extent? In fact, such problems have a common point, what is really important in [front-end development of technology? ]
In my subjective view, the core technology of front-end development technology system has one and only one, is JavaScirpt. Not a deep understanding JavaScirpt, it is impossible to deeply understand the whole front-end technology system. Why do you say? There was a classmate asked me, "Do html5, css2,3 core technology is not yet"? I was probably the kind of answer, "because it is the Js drives h5, css, rather than vice versa."
<!-- -->
Why, then, we must master JavaScirpt it? Some students vue, reactJs frame with 6 very good too. In the short term really is no problem, but if in the long run. Do not have JavaSciprt, we will not be able to perceive the essence. What does that mean? So,
1, functions are objects, objects are passed by reference;
2, the first point is not appreciated, in fact, can not understand the redux reference to the function is transmitted to the inside reducers;
3, not in-depth understanding of prototype, constructor, would not understand es6 in the constructor of the supers () is actually the following three lines of code,
function a(){}
function b(){}
b.prototype = new a();
4, do not know if js closure, would not understand the private method;
5, if you do not understand the point 4, it is impossible to read data attributes, access attributes Object.defineProperty () get and set;
6, not to implement the principles understand vueJs two-way binding,
7、、、
This continued in 2012, you will find yourself only few vue, react, jq, js, and then want to improve do not know what to see, want to see some in-depth stuff can not read. Then their wages on long-term technology and hovering at a low level.
<!-- -->
Well, so much information online, in the end, what does that look? Behold book or do? Do not tangle, I'll give you summed up, native JavaScritp core content focus, that is, below these,
You just get to know the content of 80%, your basis would be said to have JavaScript lay. Then there are the students have been ignorant, and do not understand all these things [ah]. . .
<-! Now let's analyze, what are the screenshot above? ->
this, an object;
new new, is generating an instance, it is actually an object;
the prototype, it has the property of each function, it is an object of the result;
constructor, it points to the constructor function are objects;
call, apply, its value is passed to this, is the object;
Inheritance is a.prototype = new b (), the operation of the object;
Prototype chain mainly prototype, constructor, but also the operation target;
Modular, mainly operating function, what is the function? Or objects
Closure, the function returns the parent subroutine, function object;
IIFE (function () {}) (), an automatic execution function is a function of the object;
Scope chain, in this operation, or objects;
the __proto__, each object has implicit prototype property, but also the value of the object;
...
..
You can find all these things [objects], no exceptions. why? Because JavaScirpt is object-based scripting language. So, learn to understand JavaScript is the first condition, in terms of objects to look at Js, [objects are passed by reference].
So, from the point of view of the object, the screenshot above is only one thing that is "subject." The reason is divided into a lot of names, just to deal with different situations only. If you do not recognize it, it will fall into endless trouble in school.
JavaScirpt more annoying point is that the same thing under different circumstances, have different names. Such as functions,
function a(){}，
This is a normal function;
function a(){}
new a();
Then the function a name constructor
function a(){}
a.xx = function(){console.log("xxx")}
a.xx();//xxx
At this time it is called static methods xx
function a(){
this.axx = function(){}
}
Then axx called dynamic methods
function a(){
var x = 1;
function b(){console.log(x)}
return b;
}
At this time function b, called closure
function a(){
this.fn = function(){}
}
Then fn function call public methods
function a(){
function b(){}
this.b1 = b;
}
At this private method called function b
What privilege and b1 function method, because it can access private and public methods;
But the students a closer look at these names aside, they are functions ah. With respect to their operation, either the reference operation or by scope. The reference and scope, is the most basic concept of the most basic. So, ah, it is like playing ground as the first layer is not strong, natural second layer, the n-layer is not strong. You see those who do not understand the important points in the screenshot above, it is because on the most basic objects, knowledge cited deep understanding.
<!-- -->
So how to do it?
The first step, a thorough understanding of, remember the simplicity of the basic concept;
The second step, from the object, the reference point of view javascirpt;
The third step, keep in mind Js passed around are cited;
The name can not be js a variety of bells and whistles, the concept of Akira dazzled, to look beyond the surface, [they] are objects.
Because of space limitations, this article is written here basically also coming to an end.
Product is slightly Library http://www.pinlue.com/