Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the code specifications for improving the efficiency of front-end development". The content of the explanation in this article is simple and clear, and it is easy to learn and understand. let's study and learn "what are the code specifications for improving the efficiency of front-end development"?

Common naming rules

1. The nomenclature of the big hump, with capitalized initials.

FirstOne

two。 Small hump nomenclature, the first letter of the first word is lowercase, the rest is the same as the big hump

FirstOne

3. Snake nomenclature in which words are concatenated with underscores.

First_one

4. The nomenclature of a minus sign in which words are separated by a minus sign

First-one

The biggest advantage of these naming methods is that they can easily distinguish words from words.

Those hidden rules in the code specification

Hidden rules in html code

1.html is case-insensitive

Browser parsing tags are case-insensitive.

/ / it's compiled like this.

Although class, id or other custom attributes are supported in uppercase. However, there is basically no uppercase, so it is recommended that the code in html should be named by serpentine and minus names (as if because early xhtml does not support uppercase)

two。 Semantic label

To be honest, the semantics are easy to grasp, but it is not easy to understand the default attributes of these semantic tags and reset them. (if you want to know how to reset properties, please check out my article, "Development efficiency reached a new high, only because of this wave of CSS operations.")

The semantic label of personal feeling has two main advantages.

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Support for seo search

It is very comfortable to read and will not be sprayed with div by others.

There are only so many semantic tags, and if you master it, you will master it. It is suggested that we should master the practical benefits.

Hidden rules in JS code

JS is case-sensitive, so the common naming method is the large and small hump naming. But there are many more tricks:

1. The constructor uses the large hump naming method (or es6's class class)

/ / the constructor simply means that the function FistOne () {} new FirstOne () / / class that needs to be new is the class FirstOne () {} of sugar that conforms to the following syntax

two。 The constant is named in full uppercase serpentine.

Constants are variables that cannot be changed, and in order to stand out, they all follow the serpentine naming rule of all capitals.

Const FIRST_ONE = 3

3. Other variables are named by the small hump.

4. Type name abbreviation

JS is a weakly typed language and is easy to write. But I think you must have encountered the following situation.

/ / case 1, the string let a = true let b = 'true' / / case 2 named true, all numeric string let c =' 123 'let d = 123

C and d are OK, because there are implicit conversions in js. You are equal to compare, but an and b are not equal. I encountered this situation when I was in conjunction with the backend, and he told me that a value of type boolean was returned and a string was returned. I just took him as a condition of judgment.

Let a = 'false' / / suppose this is the boolean value returned to me by the backend if (a) {/ / XXXXX some column operations}

As a result, it is conceivable that the false has been executed all the time. At that time, I almost doubted life, so you were lucky to read this article. Here is a detail: Google console has color changes when printing values, the string is pure black, and other types of values are dark blue.

This section says so much about the importance of visible types, so what are the good naming methods?

Type abbreviations give an example of the number of arrayaaApple apples in a group of apples, the number of stringssApples, anyway, it is a string objectooApple, an apple object functionfnfnApple about apple function booleanbbApple whether there is an apple or not

Of course, this part of the people have different opinions, if you have a better way of naming, welcome comments and exchanges.

5. The verbs that are specific to the function

Verb meaning type value has is there something booleanis is not booleanget getting some East African Boolean value set setting something has no return value

This part with expansion, welcome the omnipotent students to comment on the expansion.

6. Reasonable comments

As long as you write comments, the person who maintains the code will definitely look at the comments first. If you say your first reaction is to look at the source code, there's nothing I can do about you.

Scenario 1: function comments

The keyword means that the parameter passed in @ param {TYPE} should indicate what type @ return {TYPE} is supported, and what type is supported. No return value is void@author author information @ date creation time @ example, for example

/ * @ param date {Date | timestamp} time to format * @ param format {string} supported keywords yyyy MM dd hh mm ss * @ return {string} * @ author MrXu * @ date October 13, 2019 * @ example * 1570929141012-> October 15, 2019 * dateFormat (1570929141012, 'yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

Writing a string like this is also tiring, so it is necessary to generate code snippets quickly (interested students can see my previous article "how to make vscode your development artifact?")

Hidden rules in CSS code

1. No uppercase.

As mentioned earlier, html tags are not case-sensitive, although attribute values are uppercase. But uppercase is not recommended.

One problem with the minus sign naming method is that you can't double-click to select it, but I happened to find a way to set the double-click selection of the minus sign naming method from other people's article comments:

/ / vscode or sublime setting plus this regular match, you can select wordSeparators ":. /\ ()\":.; ~! @ # $% ^ & * | + = [] {} `~? "

two。 Styles can also be classified.

Display properties themselves, text properties and other decorations displaywidthfontvisibilityheighttext-alignpositionmargintext-decorationfloatpaddingvertical-alignclearborderwhite-spacelist-styleoverflowcolortopmin-widthbackground

It is recommended that you first write display properties-> self properties (box model properties)-> text properties and other decorations.

3. BEM layout

Block: module, using-linking between names and words

Element: element, a child of the module, to connect with block with _ _

Modifier: embellishments, variants of modules, defining special modules to-- connect with block

/ / for example, .person {} .person _ header {} .person _ main {} .person _ footer {} .person-- cap {} .person-- clothing {} .person-- shoe {} / / now the css precompiler is also very popular, so post a css precompiler. The compilation effect is the same as above. Person {& _ header {} & _ _ main {} & _ _ footer {} &-cap {} &-- clothing {} &-- shoe {}} Thank you for your reading. These are the contents of "what are the code specifications for improving the efficiency of front-end development"? after the study of this article I believe that you have a deeper understanding of the code specifications that improve the efficiency of front-end development, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.