12 Professional JavaScript rules in 2015

12 Professional JavaScript rules in 2015

Disclaimer:The following content is absolutely concise. Yes, all the "Rules" in programming have exceptions.

It is difficult to learn JavaScript. It is so fast that you do not know whether you have "done wrong" at any specific time ". Sometimes it feels like the bad part is better than the good one. However, it doesn't make sense to discuss this. JavaScript is conquering the world, so we can only do this.

Below are some of my suggestions:

1. JS should be put in the. js File

"Amount, only a few lines ...", Yes, I mean, all JS should be put in.jsFile. Why? This helps readability and saves bandwidth. In-line JavaScript inEach timeWhen the page is loaded, it will be downloaded again..jsFiles will be cached. As you can see, this rule helps to support the following long string of other rules. This is why its rule #1.

2. JS should be static

I have seen many programmers like to use JavaScript dynamically. They like to use JavaScript dynamically like using server-side languages such as C #, Ruby, and Java.Never do this.. You have lost support for code coloring, syntax highlighting, and smart sensing. Remember, JavaScript should belong to.jsFile (see rule #1 ).

However, dynamic behavior is introduced using JSON. I call this the JavaScript configuration object mode. The specific method is as follows: inject JSON into the header of your application and use the data according to the business logic. You may think: "Hey, this violates Rule #1 ". I regard JSON as data rather than code, so I made an exception to support static and separate JavaScript files.

This mode is used by StackOverflow, as is Google. You can see their code:

As you can see, StackOverflow injects some personal settings, such as isNoticesTabEnabled. This simple JSON code snippet provides necessary data support for customizing the behavior of static JavaScript files. To achieve this, the server-side class of the serial number must be JSON and then placed in. Then you can refer to the data structure in a static JavaScript file as needed to use it because it is injected.

3. JS should be compressed

Compression can reduce the file volume and increase the page loading speed. Remember, performance is also a feature. For compression, you need to put JS in a separate file (see rule #1 ). Javascript compression was troublesome, but it is completely simple and automated. There is a way to do this, while Gulp and gulp-uglify are a low friction and automated approach.

4. JS should be at the bottom of the page

If you<script>Label in. Located inThe script must be loaded before the page is displayed.<script>Before </body>, you can display the page without waiting for the JS file to be downloaded. This helps improve the perception performance. If your ctipe PE must be located, You can consider using jQuery's$(document).readyIn this way, your script can be executed after the DOM is loaded.

5. JS should be real-time Linted

Linting follows the code style and discovers the correct characters, which helps to avoid errors. There are many such tools. I suggest using ESLint. You can use Gulp-eslint of gulp to run it. Gulp can view all your JS files and run linter each time you save them. In addition, you need to put your JS Code in a separate. js file to run linter.

6. JS should have automated testing

Over the past few years, we have learned the importance of testing. However, it largely ignores JavaScript and is not valued until recently. Currently, a typical JavaScript Application requires far more tests than you have manually tested. The key to using JavaScript to process so many Logics is automatic testing.

You can use tools such as Selenium automated integration testing. However, integration testing is often fragile, so I suggest focusing on automated unit testing. Automated unit testing has multiple options. If you are a newbie, I suggest you use Jasmine. If you want the ultimate configuration, you can use Mocha with Chai.

7. JS needs to be encapsulated

We have learned about the risks of global variables over the past few years. Fortunately, there are many ways to encapsulate JS:

• Immediately Invoked Function Expressions (aka IIFE)

• Revealing Modules

• AMD (typically via RequireJS)

• CommonJS (used by Node. js, use in browser via Browserify or Webpack)

• ES6 modules

The ES6 module is the future. The good news is that although it is not well supported in browsers, you can use it with Babel.

If you don't want transpile, CommonJS may be your best choice. Because Node uses the CommonJS mode, you can use npm to download thousands of packages. CommonJS cannot run in the browser, so you may need Browserify, Webpack, or JSPM.

8. JS dependencies should be clear

This rule is closely related to the preceding rule. Once you start encapsulating JavaScript, you need a simple method to reference other modules. This is the benefit of the modern module system CommonJS and ES6 modules. You only need to specify the dependency at the top of the file, just like a declaration like Java or C:

// CommonJS
Var react = require ('react ');
// ES6 Modules
Import React from 'react'

9. Transpile to JS

The official version of the latest version of JavaScript, EcmaScript 2015 (well known as ES6), was released in May. The browser does not support many of its features, but it does not matter. You can use Babel to experience its new features. Babel transfers ES6 to ES5. if you can tolerate this, you can now enjoy the new features of ES6. JavaScript is expected to release a new version once a year, so you may always need transpiling.

Or do you like strong type? Then you can consider TypeScript.

10. JS should be built automatically

We have talked about linting, compression, transpilation, and testing. But how can this happen automatically? Simple: use automatic build. Gulp is such a tool that combines all functions. However, you can also choose Grunt and Webpack. Or if you are a master, you can also use npm to build it. The key to the problem is that automation is a great choice not to expect people to remember to run these things manually.

11. Use the framework or library

Use some ready-made items. Want to be lightweight? Try Backbone or Knockout. Or jQuery is enough. Want more functions? Try Angular, Ember, or React with Flux.

The key is:

Do not try to start from scratch.Standing on the shoulders of giants.

No matter which framework you choose, you should keep your attention separate. This is the next point ..

12. JS shocould Separate Concerns

The habit of putting JavaScript code into a file is easy to develop, or blindly follow your framework's opinions. When you move to the client, do not forget your lessons learned on the server.

This does not just mean that you separate models, views, and controllers in MVC frameworks such as Angular and Knockout. When writing JavaScript, you should think about the problem as a server developer. Separate your business logic from data access.

This means that all AJAX calls should be in one place. Create a centralized "data access layer" for the client ". The business logic module should contain pure JavaScript. This makes the logic easy to reuse, test, and upgrade unaffected.