Mac Configuration Manual for front-end developers (II)

Write at the beginning

Previous article This article introduces the configuration of the system environment. In this article, we will introduce the simple configuration and practical plug-ins of the code editor Sublime Text 3.

Sublime Text is a cross platform code editor (Not IDE). It has a very rich and mature plug-in, supplemented by a large number of shortcut keys, which is sufficient to double the development efficiency.

In addition, GitHub opened a new product called Atom The code editor of Sublime Text is basically the same as Sublime Text. However, it is based on Node.js and Chromium, which will be introduced in the next article. Atom is also my main editor at present.

Read the full text »

Mac Configuration Manual for front-end developers (I)

preface

Sharp tools make good work.

At present, there are more and more tools available for developers to use. Reasonable use of tools can help improve development efficiency, but when there are many kinds of tools to choose, people will feel dazzled. So I'm going to share some of my Mac development environment configurations in the next few articles for your reference.

Read the full text »

Write a maintainable Gruntfile.js

use Grunt It has been a long time, and I have to lament the growth of its community and the endless emergence of various plug-ins. During this period, I also changed several ways to organize Gruntfile.js , but they are not ideal until I saw them some time ago load-grunt-tasks This plug-in and More maintainable Gruntfiles After this article, I will Gruntfile.js They were reorganized according to the way described by the author of the article.

I will record this method in my own words and share it with the users Grunt But this article is not a translation of More maintainable Gruntfiles. After all, my E language is too poor~

Read the full text »

JavaScript closures

Closures are one of the important features of JavaScript. Most programmers who have used JavaScript have also basically been exposed to closures, regardless of whether they know or understand the concept of closures. For example, when using jQuery:

 one
two
three
four
 var count = zero ;
$( '.btn' ).onclick = function (e) {
count += one ;
};

Closure, Wikipedia The explanation of is: guide the use of free variable functions. Personally, I think front end Daniel johnhax The explanation of is easier to understand: Closures are internal functions that can access external variables.

So, to understand closures, just make it clear Variable Scope That's about it. I got it right Variable Scope Some personal understandings of are recorded in the first two articles, so here we will simply talk about the variables in the scope that a function can access:

  1. Variables declared internally by the function itself
  2. Global variables in global scope
  3. If the function is an internal function, it can also access the variables declared in its external function

The third point is the behavior of closures, which is illustrated with a simple example.

Read the full text »

JavaScript Variable Scope (continued)

meet Part I The following points have been roughly clarified:

  1. JavaScript has no block level scope, only function (local) scope and global scope
  2. Not used in function var Variables declared by keywords will become global variables
  3. When the same name is used, local variables have higher access priority than global variables
  4. JavaScript has the feature of variable declaration in advance

Next, we will continue to talk about variable scope according to the last piece of code left by the previous article.

 one
two
three
four
five
six
seven
eight
nine
ten
eleven
twelve
 var name = 'global' ;

function foo () {
var name = 'foo' ;
bar();
}

function bar () {
console .log(name);
}

foo();

This code will eventually be printed on the console 'global' , not 'foo' It can be seen that the scope that the function can access when running is the scope when it is defined, not the scope when it is called.

Whenever we talk about JavaScript scope, we will basically mention the concepts of "lexical scope", "execution environment", "active object", and "scope chain". Understanding these concepts will help us understand closures in JavaScript. I would also like to talk about my understanding of this, and would be grateful if you could correct me.

Read the full text »