编程知识 cdmana.com

Recommend a few big factory front-end code specification, learned, you can also write poetry like code!

Hello everyone , I'm yours Front end Octopus cat , One doesn't like fish 、 I don't like meow Super Cat ~

brief introduction

Front end Octopus cat from 2016 To join in GitHub, To the present 2020 year , Come on 5 A year .

I believe many people didn't visit GitHub The habit of , So there's always the asymmetry of open source information , What excellent front-end open source projects are worth learning .

Between the initial front end and the advanced front end , The biggest gap may be caused by poor information .

from 2018 Year begins , I've developed the habit of going shopping every day GitHub The habit of , Usually in the morning before going to work or at noon lunch break will go around .

Look at the good front-end projects that open source every day , What are the mainstream front-end technology stacks used , It's worth learning .

So I also collected a lot of good open source projects , I would like to recommend it to you , There will be one to three essays in a week .

I hope you're browsing 、 Learning the process of these open source projects recommended by the front-end Octopus cat , You can learn more about programming 、 Improve programming skills 、 Find the joy of programming .

official account : front end GitHub, Focus on Mining GitHub Excellent front-end open source project , Smooth your front end information asymmetry , cover JavaScript、Vue、React、Node、 Applet 、Flutter、Deno、HTML、CSS、 Data structure and algorithm wait .

The following is a 【 front end GitHub】 Of the 5 Content of the issue .

What I bring to you today is Front end code specification of several large factories .

Front end code specification  

Ten million lines of code , Safety first line ; The front end is not standardized , Two lines of tears of colleagues .

tencent

It contains a lot of content :

PC End topic : Quick start 、 File directory 、 Page header 、 Universal title、 Universal foot、 Statistical code 、 Compatibility testing

Mobile theme : Quick start 、 File directory 、 Page header 、REM Layout 、 Universal foot、 Statistical code 、 Share components 、 Compatibility requirements

Double ended official website : Quick start 、 Page Jump

http://tgideas.qq.com/doc/index.html

But there's also something about the business , It's not universal .

JD.COM

Compared with Tencent's code specification , I would recommend the bump lab code specification , It's quite complete .

HTML standard

be based on W3C、 Apple developers and other official documents , And combined with the team's daily business needs and the team in the daily development process summed up the experience of the agreement .

Picture specification

Learn about various image format features , Develop a picture specification based on characteristics , Including but not limited to the quality of the picture agreement 、 How to introduce pictures 、 Image merging, etc .

CSS standard

Unified team CSS Code writing and SASS The syntax style of a precompiled language , Provide common media query statements and browser private property reference , And from the business level to standardize the reference of common modules .

Naming specification

from “ Catalog name ”、“ Picture name ”、“ClassName” Naming and other levels of agreement to standardize the naming habits of the team , Enhance the readability of team code .

JavaScript standard

Unified team JS Grammar style and writing habits , Reduce the probability of program errors , It also includes ES6 Grammar norms and best practices for .

Bump lab : https://guide.aotu.io/index.html

Alibaba

Contains : type 、 object 、 Array 、 character string 、 function 、 attribute 、 Variable 、 promote 、 Comparison operator & Equal sign 、 block 、 notes 、 blank 、 comma 、 A semicolon 、 Type conversion 、 Naming rules 、 Accessors 、 Constructors 、 event 、 modular 、jQuery、ECMAScript 5 Compatibility 、 test 、 performance 、 resources 、JavaScript The style guide says

Airbnb Javascript Style Guide: https://github.com/airbnb/javascript

Baidu

JavaScript Coding standards 、HTML、CSS、Less、E-JSON Data transmission standard 、 Modules and loaders 、 Package structure 、 Project directory structure 、 Chart library standard 、react Coding standards .

such as : Indent

  • [ mandatory ] Use  4  Space as an indent level , Not allowed  2  A space or  tab  character .
  • [ mandatory ] switch  Under the  case  and  default  You have to add an indent level .
// good
switch (variable) {

    case '1':
        // do...
        break;

    case '2':
        // do...
        break;

    default:
        // do...

}

// bad
switch (variable) {

case '1':
    // do...
    break;

case '2':
    // do...
    break;

default:
    // do...

}
Specification document : https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md

Netease coding specification :

CSS standard : A set of rules and methods , Help you structure and manage styles

HTML standard : A series of suggestions and methods , Help you build a simple and rigorous structure

Engineer specifications : Front end page development engineer's workflow and team cooperation specification

But it's not just that , There are more :

http://nec.netease.com/standard

JavaScript Standard Style

In addition to many corporate organizations , Many individuals also use specifications in projects .

https://github.com/standard/standard

Vue

This is official Vue Style guide for specific code .

If used in engineering Vue, To avoid mistakes 、 Little tangles and antipatterns , This guide is a good reference .

But we're not sure that all the content of the style guide is ideal for all teams or projects .

So based on past experience 、 The surrounding technology stack 、 It is advisable to make a meaningful deviation in personal values .

Official style guide :  https://cn.vuejs.org/v2/style-guide/index.html

es6

How to integrate ES6 New syntax , Applied to coding practice , With the traditional JavaScript Grammar goes together , Write reasonable 、 Easy to read and maintain code .

es6 Programming style : http://es6.ruanyifeng.com/#docs/style

Bootstrap

It contains HTML and CSS.

HTML

grammar 、HTML5 doctype、 Language properties 、IE Compatibility mode 、 Character encoding 、 introduce CSS and JavaScript file 、 Practical is king 、 Attribute order 、 Boolean properties 、 Reduce the number of tags 、JavaScript Generated Tags .

CSS

grammar 、 Declaration order 、 Do not use @import、 Media query (Media query) The location of 、 Prefixed properties 、 Single line rule statement 、 Attribute declaration in short form 、Less and Sass Nesting in 、Less and Sass Operator in 、 notes 、class name 、 Selectors 、 Code organization .

Bootstrap Coding standards : https://codeguide.bootcss.com/

ESLint

At present, most front-end projects will use Can be assembled JavaScrip t and JSX Check tools .

Find the problem

ESLint Statically analyze your code to quickly discover problems .ESLint Built into most text editors , You can use ESLint Run as part of the continuous integration pipeline .

Auto repair

ESLint Many of the problems found can be fixed automatically .ESLint Fix recognizable syntax , So you won't encounter the errors introduced by traditional search and replace algorithms .

customized

Preprocessing code , Using a custom parser , And write with ESLint Built in rules used with your own rules . You can customize ESLint, Make it work exactly the way the project requires .

ESLint: https://eslint.org/

ESLint Chinese net :https://eslint.bootcss.com/

Prettier

Prettier It's a “ Have a point of view ” Tool formatting code .

In short , This tool can make the output code consistent with the style .

It is also used in most front-end projects at present .

Prettier: https://prettier.io/

Last

Okay ,【 front end GitHub】 Of the 5 We've finished the issue , For more details, please see the warehouse address below :

Original address : https://github.com/FrontEndGitHub/FrontEndGitHub

How to find good open source projects , Take a look at these two articles :GitHub The supernatural skill of mining - How to find excellent open source projects and To tell you the truth , You may even GitHub Search doesn't work - How to accurately search for immortals .

Feel useful ? Collect if you like , By the way, I'd like to say something nice , Your support is my greatest encouragement !

Wechat search “ front end GitHub”, reply “ e-book ” You can get 160 The front end is the essence book .

In the past, the essence of literature

版权声明
本文为[It's night and day]所创,转载请带上原文链接,感谢

Scroll to Top