Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

JavaScript is the most important part of the three basic knowledge that front-end developers must master, and it is also the one with the longest contact time and the most written. Naming problems are inevitable in the development process. Do you run out of words, struggle, and regret? This article will solve most of these problems and make it easy to write compliant, readable, and short code.

JS common naming methods

Use underscores with caution

The underscore _ is used in the front as an underscore for special use, such as in constants as a semantic separator (MAX_VALUE), and in the front as a private, unused variable (__myprovite).

The use of dollar signs

PHP uses dollar characters for all variables. Js rarely uses dollar characters, but it can make code more readable if used properly. Here’s an example:

function getData(id, method) {
  
    action.loadData(id, method);
}
 
function getData($id, $method) {
    action.loadData($id, $method);
}
Copy the code

The above two functions, using the dollar character, can be seen at a glance as the variable passed in as the argument.

constant

A constant is a variable that does not change after initialization. Such variables are usually named in all caps + underscores. Such as

var IMAGE_SERVER = 'http://img.alibaba.com';
var MAX_LENGTH = 200;
Copy the code

The global variable

After modularization, global variables are used less, but in the VM output variables are global variables, global variables are generally named g+ variable name.

var gConfig = {
 a:1.b:2
};
Copy the code

Private variables

Because JS does not support private variables, so private variables are simulated, the industry common JS private variable naming method is underscore + variable name for example

var Student = Base.extend({
    _name: 'Ming'.getName: function(){
        return this._name; }});Copy the code

In this case, name is a private variable, and an underscore variable usually means a variable that should not be used directly.

Method named

General methods are named by (verb + noun) and divided by hump, such as doSomething, loadData, getState, getData, parseData, etc. If the method is an event response, then it is recommended (on+ event target + event name) to use hump semantics such as onMybtnClick, onCardboxClick, onMenuDrop, etc. Once such a specification is formed, As long as the partner sees the relevant function, it will know what kind of function it is.

If you need to do a separate behavior in a method that responds to an event, then that behavior should be separated out as a separate function, not put directly into the on function for example

function onMybtnClick() {
    loadData();
    hideMyBtn();
}
Copy the code

This makes the submission code much more readable, even without comments, so people can see that after clicking the button, they do two things: load the data and hide my button

Folder classification naming

In the front-end transformation, folders that are generally involved include Component (for storing components), util(for storing utility classes), mock(for storing mock data), and if redux architecture is also used, actions, reducer folders, Front-end engineering is so complex that it is no longer recommended to put CSS in a separate styles folder. Instead, put CSS in a component granular folder

Common naming methods in HTML

Properties are case insensitive

HTML is case insensitive, so it’s best not to write dataRole=” ABC “, but data-role instead.

Naming method: (role + name)

A good way to name characters in HTML is by naming them

Such as

<div data-role="container-chatbox"> </div>
<a data-role="btn-chat"></a>
Copy the code

Common naming methods of the CSS

Delimit the semantics with a dash

For example, the container – component

Common role name

Wraper: indicates the outer wrapping layer. Container: indicates the container layer. BTN: indicates the button

The name of the page URL

The naming of the path

In a URL, a path typically corresponds to a stored folder such as myhost.com/my-folder/m… In this case, the my-folder is usually just a folder. It is a good idea to use the -partition semantics instead of using the hump when creating new folders

HTML file name

HTML is better than mypage.html. Another reason to be case-insensitive is that the window system is case-insensitive when stored. If a partner creates two new files mypage.html and mypage.html on their MAC, there will be no problem, but an error occurs when another Windows colleague checks out the code.

The name of the URL parameter

PageSize =20, totalPage=100, pageSize=20, pageSize= 100, pageSize=20, pageSize= 100, pageSize=20, pageSize= 100 Although param[‘page-size’] also works, param.pagesize makes the program more elegant.