How to Learn javascript from the source code

How to Learn javascript from the source code
How to Learn javascript from source code

Alan said, to learn javascript, you must learn the source code. Through the master source code, you can learn a lot of skills that are hard to see in books.

Looking at the source code is like drinking chicken soup, and all the nutrition is in this soup. This soup is the source code, and the highly handwritten source code is the best chicken soup.

This is why he quickly becomes a new star in the front-end industry in just two years. He won't say anything, but I think it's important to share good things.

In this way, more new stars can appear in the front-end field and contribute to promoting the healthy development of the entire front-end.

His source code experience does not know whether it will appear in his new book. If yes, the information is disclosed in advance.

The following are some methods I have summarized while practicing these days.

I will take Alan's module class require. js as an example.

Source code of require. js:

/*************************************** * ************************* Supports AMD, CMD module Loading Method * @ by Aaron * github: https://github.com/JsAaron/aaronRequire * Blog: http://www.cnblogs.com/aaronjs/ **************************************** *************************/; (Function (r) {if (typeof module = "object" & typeof require = "function") {module. exports. require = r. require; module. exports. define = r. define;} else {require = r. require; define = r. define;}) (function () {var objproto = Object. prototype, objtoString = objproto. toString, arrproto = Array. prototype, nativeForEach = arrpro To. forEach, modules ={}, pushStack ={}; function each (obj, callback, context) {if (obj = null) return; // if the local forEach method is supported, and is the function if (nativeForEach & obj. forEach === nativeForEach) {obj. forEach (callback, context);} else if (obj. length = + obj. length) {// for loop iteration for (var I = 0, l = obj. length; I <l; I ++) {if (callback. call (context, obj [I], I, obj) === breaker) return ;}}; function isFunc Tion (it) {return objtoString. call (it) = '[object Function]';} function isArray (it) {return objtoString. call (it) = '[object Array]';} // parses the dependency function parseDeps (module) {var deps = module ['deps '], temp = []; each (deps, function (id, index) {temp. push (build (modules [id])}) return temp;} function build (module) {var depsList, existMod, factory = module. factory, id = module. id; if (existMod = PushStack [id]) {// execute return existMod repeatedly;} // interface point. Expose the data or method to external calls if it is defined on it. Module. exports = {}; // deduplication delete module. factory; if (module. deps) {// dependent array list depsList = parseDeps (module); module. exports = factory. apply (module, depsList);} else {// exports supports direct return or modulejs. exports module. exports = factory (require, module. exports, module) | module. exports;} pushStack [id] = module. exports; return module. exports;} // parse the require module function makeRequire (ids, callback) {v Ar r = ids. length, shim = []; while (r --) {shim. unshift (build (modules [ids [r]);} if (callback) {callback. apply (null, shim);} else {shim = null;} return {// introduce module require: function (id, callback) {// array form // require (['domainready', 'app'], function (domReady, App) {}); if (isArray (id )) {if (id. length> 1) {return makeRequire (id, callback) ;}id = id [0];} if (! Modules [id]) {throw "module" + id + "not found";} if (callback) {var module = build (modules [id]); callback (module) return module;} else {if (modules [id]. factory) {return build (modules [id]);} return modules [id]. exports ;}}, // define the module define: function (id, deps, factory) {// Module name, dependency list, module itself if (modules [id]) {throw "module" + id + "module already exists! ";} // Dependency import if (arguments. length = 3) {modules [id] = {id: id, deps: deps, factory: factory};} else {modules [id] = {id: id, factory: deps };}}}}());

<! DOCTYPE html> 
I recommend using Google Chrome for debugging, which is very convenient.
The first rule of learning source code is to start from the function call.
My demo starts with define ('A. This is the simplest case.
Open your browser and check

Google's Console is great. I often use the Console to output logs and Resources to view data.
Elements: view the structure and style. Sourcese is used for breakpoint adjustment.
Today, I want to record this breakpoint.

Where to start the disconnection, which directly affects the effect of the adjustment. Feel for yourself.
When you press F11 to see where the cursor passes, the variable name will show the value of the variable. This is much more convenient than playing a bunch of console. log or alert
And you don't need to see where this function is defined. Press F11 to automatically take you there. You just need to guess in advance whether the process and the actual process in your mind are the same.
Sample. In some specific methods, you can skip the preliminary adjustment. First, let's clarify the process and work out a big idea. Then, let's look at the implementation details.
After understanding these implementations, write them again to see if they can be implemented. Finally, try to simplify it and implement it with your own code.
You will get a lot from this process.
 

How to Learn javascript? Jquery is developed by js, and jquery is a js class library.



Learn about the basics of javascript and get a big rhino (javascript authoritative guide). jquery will look at the Chinese API

If you want to continue your further study after completing basic learning, let's take a look at the jquery plug-ins developed by others, and then implement several examples.

How should I learn JavaScript? The following is my experience. I am not a so-called "super high-handed". If the landlord finds it useful, he can try to learn it by following the steps below.



It would be nice to study JavaScript in depth. It is not easy to be proficient.



First, it is clear that JavaScript is divided into three parts:

ECMAScript, BOM, DOM



The first step is to understand what these three parts are doing, and then learn in the above sequence.

To learn more, use one. Let's take a look at it first. After using it, I will study it again... This will be more efficient.



After that, you should take a look at JavaScript's virtual object-oriented (this is because JavaScript is simulated instead of a real object-oriented)



I will look at it later, because the content in JavaScript is actually quite complicated. And there are a lot of technical skills, so you need to read more. You should learn about ajax here, because ajax is implemented based on JavaScript. After learning ajax, you need to use JavaScript and ajax to perform some special webpage effects.



Next, we should consider JavaScript optimization. For example, when introducing JavaScript files, we should place them at the location of the page, how should we define variables, and so on...



Then, we suggest learning some frameworks. Jquery is recommended. Slide shows of some websites on the Internet and what sliding doors are easy to use jquery. Of course, since it is a framework, it can be used, and there is nothing to learn. We recommend that you familiarize yourself with jquery APIs and then read the source code. After some JavaScript skills are available, read the jquery source code. Otherwise it will be very painful, and of course it will be of great help to the improvement.



During the entire process of learning JavaScript, when learning every part of the content, you must pay attention to browser compatibility issues.



Another point is that the key is not how much you read, but how much you use. Only in use can we have the most vivid feelings. Therefore, no matter what the webpage is, the view must be the most dazzling (of course, the first must meet the performance requirements ).



This is some of my experience in learning JavaScript and I hope it will be useful to the landlord.