This is the 30th day of my participation in the Wenwen Challenge

Before the words

It’s the end and the beginning. By joining the nuggets in the more challenges, let oneself to harvest a lot, it is easy to do one thing always insist to do one thing, it is hard to very hard, in the middle of the holiday period, also want to give up, but, blow out of the cow force, how to also want to cash, alive, don’t be a hypocrite, turn over, one has written articles, are memories, slowly learned it was his own, For many gods, the quality of the articles is not very high, many of them are their own basic knowledge notes, simply to record their own learning process. Of course, everything is in accordance with their own learning plan, these 30 days, basically review as a front-end engineer want to become a full stack engineer all the necessary knowledge, want to give their own praise, in fact, each article, I gave their praise 😏. The reason why it is the end, but also the beginning, is to tell yourself that the next day is still very heavy, since the habit has been formed, it will continue to adhere to. From tomorrow on, we will thoroughly conquer each piece and fulfill our previous blow!!

1, the introduction,

In order to improve team cohesion, unify team code style and optimize team collaboration efficiency, it is necessary to restrict the code style of different programmers in the same project.

First of all, those who write their own code should meet the requirements of Web standards, taking into account the requirements of clear structure, good compatibility, high page performance, and simple code, so as to restrain others. Just as the so-called “one house does not sweep the world”,

Create a wealth belonging to each of us, come on, let us progress together!!

2. Development environment

2.1 development tools
Unified development of VSCode, WebStorm, Sublime, Atom: try to use VSCode, light weight, more plug-ins, free,Copy the code
2.2 VSCode tool plug-in
Vue plugins: ESlint, HTML CSS Support, HTML Snippets, Live Server, Vetur, Vue VSCode Snippets, Vue TypeScript Snippets, Git plugins  Git History, GitLensTheme: vscode-icons, Snazzy Operator, others: koroFileHeader(comments), json5. syntax, etcCopy the code
2.3. Naming conventions
PascalCase big camel case nomenclature: uppercase. Eg: StudentInfo, UserInfo, ProductInfo camelCase small camelCase naming: lowercase first letter. Eg: studentInfo, userInfo, productInfoCopy the code

3. Vue development specification

3.1 naming conventions

1.1.1 Project Naming Convention (Project)

Use lowercase characters to separate multiple words with hyphens. Example: btp-core-standardfrontend-admin Not recommended:  BtpCoreStandardfrontendAdmin/btp_core_standardfrontend_adminCopy the code

1.1.2 Component naming specification, mainly Vue official specification (Component)

1. Component names: Component names should always be multiple words, with naming conventions: Big hump: ToolCase

Multiple is a single word preceded by The prefix ‘The’, for example, TheHeader

Export default {name: 'ToolCase'} Recommended: export default {name: 'Todo' // or name: 'tool-case'}Copy the code

2, component file name: tool-case format, base file name: base-

Is exemple: components / | - tool - case. Vue | - my - component. Vue | - base - table. Vue is not recommended: components/ |- myComponent.vue |- MyComponent.vueCopy the code

3. For the Template, use the component format: Big Hump: ToolCase, and use self-closing components

<ToolCase /> <TheHeader /> Recommended: <tool-case />Copy the code

1.1.3 Methods, Variables, Naming Conventions (Method)

Let maxCount = 10 let minStr = 'STR' Const URL = 'XXXX' const MAX_COUNT = '30000' Can - Determines whether an action can be performed has - determines whether a value is included is - determines whether a value is included get - gets a value set - sets a value Load - loads some data hanlder - operates on some methods do - Function getName(){} function handlerOperater() {} function isQuery() {}Copy the code

1.1.4 Class & Constructor Naming Conventions (Class)

Example: class Persion {} class CatAnmial {}Copy the code

1.1.5 Folder Naming Specifications (File)

Folder name: CamelCase VS kebab-cas Unzip the project dependencies in node_modules and you'll see that almost all project folders are named kebab-case. Folders named kebab-case look clearer than folders named camelCase, 1, belong to subfolders under Components, use PascalBase style (big hump) with uppercase letters, Export {default as AppMain} from './AppMain' export {default as Navbar} from './Navbar'Copy the code
3.2 Project structure analysis of unified T
||- Build Build script directory| - build. Js production build (compile packaging) | script- check-versions.js Version verification tool| - utils. Js to construct related tools (mainly used for processing the CSS class file loader) |- Vue-loader.conf.js processes styles in vue| - webpack. Base. Conf. | js webpack basic configuration- Webpack.dev.conf. js Configures the Webpack development environment| - webapck. Prod. Conf. | js webpack production environment configuration- config Configures the project| - dev. Env. | js development environment variables- index.js Main configuration file| - prod. Env. | js production environment variables- test.env.js Tests environment variablesDependent module | | - node_modules project- the SRCPackage | | - API back-end unified interface- Login. js Encapsulates login related interfaces| - user. The package | js user information interface- Data. js Encapsulates basic data interfaces| - assets directory, resources will be webpack construct |- the components| - BaseTable |- index.vue
            | - FuncUserd |- index.vue
            | - PageComponents |- index.vue
    | | - filters filter method- Store ICONS SVG icon resources| -- - | the router routing file- Store Stores information| -- - | styles public global style file- utils| | - views views- Layout Indicates the layout view| -- - | login login view- index.vue   
         Other view | | - tool- App. Vue| | - main. Js project entry- Permission. js Route interception| - static pure static resources, will not be webpack build, eg: no NPM package | module- js Stores third-party JS plug-ins| | -. Babelrc Babel configuration file-. Editorconfig Configuration file of the editor| | -. Eslintignore eslint ignore files-.eslintrc.js Eslint configuration file. | - gitignore | git ignore configuration file-.postcsrc. Js Postcss configuration file| | - deployflow. Properties magic deployment file- index. HTML Indicates an HTML template| - package. Json NPM package configuration files, relying on information package |- package-lock.json Locks the package version number during installation| - README. Md project is introducedCopy the code
3.3. Annotate specifications

Single file annotation specification, each individual VUE file is commented at the beginning, indicating the file’s description, author, creation time, and so on.

  • API interface file, interface API must add comments
  • State, mutation, action, etc. must be commented in store
  • Methods in the file must be commented out
  • Unusual word variable that must be commented

Vscode installs the annotation plug-in: koroFileHeader

Common shortcut keys:

Add a comment to the file header: Window: CTRL+ALT+ I, MAC: CTRL+CMD+ I

Add a comment to the cursor or method header: Window: CTRL+ALT+ T MAC: CTRL+CMD+ I

Header comment

Shortcut key: (CTRL + CMD + I) <! -- * @Author: your name * @Date: 2020-08-18 13:54:26 * @LastEditTime: 2020-08-19 10:39:44 * @LastEditors: Please set LastEditors * @Description: In User Settings Edit * @FilePath: / btp_core_standrard_frontend_base/SRC/views/login/index. The vue translation -- -- > <! -- * @descripttion: (description of this file) * @version: (version) * @author: (Author) * @Date: (file creation time) * @lasteditors: * @lasteditTime: (last updated) -->Copy the code
3.4. Function comments
Shortcuts: (CTRL + CMD + t) /** * @description: * @param {type} * @param {type} * @return {type} */Copy the code
3.5. Comments on variables
CustId: ", // customer ID custCampId: ", // Task ID mobile: ", // Mobile phone number to receive SMS idTemplate: ", // SMS template ID smsCodeType: "// SMS type, 1- first dial SMS, 617- uninsured self-help insurance SMSCopy the code
3.6 comments for inline code blocks

When writing a more complex method, it is necessary to comment it, and to decide whether to use line-level comments rather than block comments

Comments on code blocks:

AddNode (a, b) {/** * addNode(a, b) {/** * addNode(a, b) {/** * addNode(a, b) {/** *Copy the code

Inline comments

ChangeItem (val) {}Copy the code
3.7 coding specifications
  • 1. The v-for loop must have a key attribute. The key must be unique throughout the for loop, so it is recommended to assign it to item.id
<ul>
   <li v-for="item in list" :key="itme.id"> 
   {{ todo.text }}
   </li>
</ul>

Copy the code

  • 2. Avoid v-if and V-for on the same element

  • Console. Log (), debugger, etc

  • 4. Disallow if, else abbreviations after ternary operators

  • 5. Component style setting scope, add scoped

    <style scoped>
   .btn-close {}
   .btn-iframe {}
</style>

Copy the code
3.8. UI framework selection
1. PC: Vue project preferred: Element UI 2; mobile: Vue project preferred: Ant - UICopy the code
3.9. CSS Preprocessor Selection
1. Suggest sass, lessCopy the code

4. JavaScript development specifications

4.1. Variable name

1. It is recommended to use the small hump method for variable names. The names in the code cannot end with an underscore, an underscore, or a dollar sign

Example: maxCase Example: _name/name_ / name$Copy the code

2. Use the lowerCamelCase style for method names, parameter names, member variables, and local variables, and follow the hump form

Example: localValue/getHttpMessage()/inputUserIdCopy the code

3. Constant names are all capitalized, words are separated by underscores, and semantic expression is complete and clear, not too long name

Cosnt MAX_STOCK_COUNT = '10'Copy the code
  1. Class and constructor names, big hump names, that is, capital letters
function Student(name) {
    this.name = name;
}
class CatAmian() {
 
}

Copy the code

Tip: the name of the definition should be readable and understandable, so that newcomers can quickly comb through the code logic when taking over the project!!

4.2 code format, space

1. Use two Spaces for indentation

If (x < y) {x += 10; } else { x += 1; }Copy the code

2. Insert an empty line to separate the code with different logic, different semantics and different business to improve readability

3, usually add Spaces before and after the operator (= + – * /) :

4.3. Strings

1. Use single quotation marks (‘) instead of double quotation marks (‘). ES6 is recommended for concatenating strings

This is great for creating HTML strings: example: let STR = 'foo'; let testDiv = '<div id="test"></div>'; Let STR = 'hello, my name is ${variable}.'; Let STR = "hello, my name is "+ variable +"."Copy the code
4.4 Object declaration

1. Create objects with literals/use literals instead of object constructors

Var user = {age: 0}; Example: var user = new Object(); user.age = 0;Copy the code
4.5, parentheses

1. Curly braces must follow the following keywords (even if the block contains only one line) : if, else, for, while, do, switch, try, catch, finally, with.

If (condition) {doSomething(); } Counterexample: if (condition) doSomething();Copy the code
4.6, undefined judgment

1. Never use undefined directly to judge variables; Use typeof and the string ‘undefined’ to determine variables

If (typeof person === 'undefined') {... } if (person === undefined) {... }Copy the code
4.7 Judging the conditions, the cycle is up to three layers

1. Do not use conditional judgments if you can use trigonometric and logical operators, but remember not to write too long trigonometric operators. If there are more than 3 layers please split the function and write clear comments.

4.8. Use console.log with caution

1. Exercise caution when using the log function in non-Webpack projects due to performance problems caused by excessive use of console.log

4.9 introduction of Script

Introduce a relative path for resource usage. Do not specify a specific protocol (HTTP :, HTTPS:) for the resource unless neither protocol is available

Recommendation: < script SRC = "/ / cdn.com/foundation.min.js" > < / script > is not recommended: < script SRC = "http://cdn.com/foundation.min.js" > < / script >Copy the code

5. HTML development specification

5.1, the standard

1. Document type declaration and encoding: unified HTML5 declaration type;

<! DOCTYPEhtml>

Copy the code

HTML5 element names can use both upper and lower case letters. Lower case letters are recommended, and a close tag is recommended for each element

<section> <p> This is a paragraph. </p> </section>Copy the code

2. The nested nodes should be indented by two Spaces (one TAB). TAB is not recommended.

3. All encoding must comply with THE HTML (XML) standard. Tags & attributes & attributes must be named with lowercase letters, underscores and digits, and all tags must be closed, including BR () and HR (). Attribute values are in double quotes;

5.2 Label use

1. Semantic labels:

There are many new semantic tags in HTML5, so the use of semantic tags is preferred to avoid the use of non-semantic tags such as div or SPAN tags on a page; Block-level elements cannot be nested in inline elements. For example :<header></header> </footer> </footer> Inline elements: A, B, SPAN, img, INPUT, select, textarea, em, img, strong Ul, OL, LI, DL, DT, DD, H1, H2, H3, H4... P, section, div, form empty element: <input type= "hidden" />, br>, HR >, link>, meta> A block element is always a single line, and a margin has no effect on inline elements. A block level can contain a portion of a block level element, and it can contain inline elements. Inline elements contain no block-level elements, only inline elements. <p> Tags are block-level elements, but no other block-level elementsCopy the code
5.3. Use of tag attributes/styles

1. When you need to add custom attributes to HTML elements, first consider whether there is a default existing appropriate tag to set. If not, you can use the prefix “data-” to add custom attributes, avoid using “data: “and other naming methods;

2. Avoid redirection when writing the link address. For example, href= “www.example.com/”, that is, the URL must be followed by “/”.

3. Avoid using the style attribute on the page, that is, style= “… , should try to use class or ID to define the new style, and then modify the corresponding CSS file;

4, img tag don’t forget Alt

5.4 Compatibility setting specifications

1, it is recommended to specify the lang attribute for the HTML root element to set the correct language for the document lang=” zh-cn”

2. Different doctypes trigger different rendering modes in different browsers

3, responsive web pages need to add viewPort

<! DOCTYPEhtml>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=11,IE=EDGE,chrome=1">
    <meta charset="utf-8">
    <meta name="Viewport" content="Width = device - width, initial - scale = 1.0, the minimum - scale = 1.0, the maximum - scale = 1.0, user - scalable = no"/>
    <title>xxxx</title>
  </head>
  <body>
  </body>
</html>

Copy the code

6. CSS writing specifications

6.1, named

1. Use lowercase letters to separate class names with hyphens. Id is humped; In short, naming to semantic, concise

Swiper-image {} #headTitle {} Not recommended: It is not recommended to use the underscore "_" to name CSS selector 1. Press shift less when typing. 2, browser compatibility issues (such as using selector naming _tips, which is not valid in IE6) 3, good differentiation of JavaScript variable naming (JS variable naming is "_")Copy the code
6.2. Selector

2. Try to use direct sub-selector, otherwise, it will cause performance loss

.content >. Title {font size: 2rem}Copy the code

3. Avoid using label names in CSS selectors

In terms of separating structure, presentation, and behavior, HTML tags should be avoided in CSS, and the presence of tag names in CSS selectors is potentially problematic. Counterexample:.p.. div {} Do not useCopy the code

4. Use abbreviated attributes whenever possible

Not recommended: padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0; Padding: 0 1em 2em;Copy the code

5. Each selector and attribute has an exclusive row

Button {width:100px; height:50px; color:#fff; background:#00a0e9; } button{width:100px; height:50px; color:#fff; background:#00a0e9; }Copy the code

6. Omit the units after 0

Not recommended: div{padding-bottom: 0px; margin: 0em; } div{padding-bottom: 0; margin: 0; }Copy the code

6. Avoid using ID selectors and global label selectors to prevent contamination of global styles

7. Avoid using compatibility properties, such as text – shadow | | CSS 3 related properties

8. To reduce the use of impact performance properties, such as the position: absolute | | float

9. Write the CSS properties in sequence

You are advised to follow the following rules: Layout location properties > Own Properties > Text properties > Other properties. This section can be written according to your own custom, but try to ensure that the same attributes are written together. Display, list-style, position (corresponding to top,right,bottom,left), float & Clear, visibility, and overflow. Its attributes mainly include: width, height, margin, padding, border and background; Text attributes include color, font, text-decoration, text-align, vertical-align, white-space and other content. The attributes I have listed are only the most commonly used and do not represent all;Copy the code

10. JavaScript reserved hook name, try to use the ID attribute, can get dom faster

6.3. Pay attention to implementation
1, all lowercase, underscore 2, remove the decimal point in front of the 0:0.9rem =>.9REM 3, use abbreviation: margin: 0 1REM 3REM 4, do not use id 5, avoid using! Important, in addition to some very special circumstances, try not to use! important ! The presence of Important can be a nightmare for late maintenance and multiplayer collaboration. 6. Layout component styles. Don't write code that changes global stylesCopy the code

When style overlay exists, if you find that a newly defined style cannot override an old style, you have to add it! Important only works because the priority of your newly defined selector is not high enough for the old style selector. So, reasonable writing of the new style selector is completely possible to circumvent something that seems to need to be used! Important.

7,

This article was written a long time ago. This time, I have reviewed my study and benefited a lot. June 30, 2021 is a month of harvest and growth. July, August, September, and so on, next, open the voyage of the ship 🚢, embark on a new journey, write their own gorgeous life, thank the nuggets, add down, we refueling together.