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

This article mainly introduces "what are the specifications of front-end development". In daily operation, I believe that many people have doubts about the specifications of front-end development. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "what are the specifications for front-end development?" Next, please follow the editor to study!

Introduction to naming hump nomenclature

Pascal Case big hump nomenclature: the initials are capitalized. Eg:StudentInfo 、 UserInfo 、 ProductInfo

Camel Case hump nomenclature: lowercase initials. Eg:studentInfo, userInfo, productInfo file resource naming

File name must not contain spaces

It is recommended that only lowercase letters be used for file names, not uppercase letters. To stand out, you can use uppercase letters such as README, LICENSE for the names of some description files. )

When a file name contains multiple words, it is recommended that the words be separated by a half-corner hyphen (-).

Introduce resources to use relative paths, and do not specify the specific protocol (http:,https:) that the resource carries, unless neither of these protocols is available.

Not recommended:

Recommend

Variable naming

Naming method: small hump naming method naming convention: type + object description method. If there is no clear type, you can prefix it to a noun.

Recommend

Var tableTitle = "LoginTable"

Not recommended

Var getTitle = "LoginTable" function

Naming method: small hump mode (constructor uses big hump nomenclature) naming rules: prefix as verb

Recommended:

/ / whether you can read function canRead () {return true;} / / get the name function getName {return this.name} constant

Naming method: all uppercase naming conventions: use uppercase letters and underscores to combine names, and underscores are used to divide words. Recommended:

Var MAX_COUNT = 10; var URL = 'member of the http://www.baidu.com'; class

Common properties and methods: how to name the same variable

Private properties and methods: prefixed with an underscore (_) followed by the same naming as public properties and methods

Recommended (is it more familiar to replace name with this)

Function Student (name) {var _ name = name; / / Private member / / Public method this.getName = function () {return _ name;} / / Public mode this.setName = function (value) {_ name = value;}} var st = new Student ('tom'); st.setName (' jerry'); console.log (st.getName ()) / / = > jerry: output _ name private variable value comment specification one-line comment (/ /)

Separate line: / / (double slash) and leave a space between the comment text

Add a comment after the code: / / (double slash) with a space between the code and / / (double slash) with the comment text.

Comment code: leave a space between / / (double slash) and the code.

Recommended:

/ / A function is called; 1) setTitle () on a single line; var maxCount = 10; / / set the maximum; 2) comment / / setName () at the end of the code; / / 3) comment the code on multiple lines (/ comment description /)

If the beginning (/ *) and the end (* /) are both on one line, it is recommended to use a single-line comment

If there are at least three lines of comments, the first behavior / *, the last behavior * /, the other lines start with *, and the comment text leaves a space with *.

Recommended: / * * after the code is executed here, it will call the setTitle () function * setTitle (): set the value of title * / setTitle (); copy the code

Function (method) comment

Function (method) comments are also a kind of multi-line comments, but contain special comment requirements. Refer to javadoc (Baidu encyclopedia) syntax:

/ * function description * @ keyword * / copy code

Commonly used annotation keywords

Recommended:

/ * *-merge Grid lines-@ param grid {Ext.Grid.Panel} need merged Grid-@ param cols {Array} requires a merged Index (ordinal) array; count from 0, and ordinal numbers are also included. -@ param isAllSome {Boolean}: whether the cols of two tr must be the same before merging. True: do the same thing False (default): not exactly the same-@ return void-@ author polk6 2015-07-21-@ example-_ _-| Age | name | Age | name | -mergeCells (grid [0])-- | 18 | Zhang San | = > | | Zhang San |-- 18-- | 18 | Wang Wu | | | Wang Wu |-- * / function mergeCells (grid) | Cols, isAllSome) {/ / Do Something} HTML specification document specification

Document declaration types using HTML5:

The DOCTYPE tag is a document type declaration of the standard generic markup language, and its purpose is to tell the standard generic markup language parser what kind of document type definition (DTD) it should use to parse the document.

The purpose of using document declaration types is to prevent the weird mode of opening browsers.

No DOCTYPE document type declaration will turn on the weird mode of the browser, and the browser will render the page in its own parsing way, with different styles under different browsers.

If you add it to your page, it is tantamount to turning on standard mode. The browser parses the rendered page according to the W3C standard.

Script loading

When it comes to the location of js and css, everyone should know that js is at the bottom and css is at the top. However, if your project only needs to be compatible with ie10+ or accessed only on the mobile side, you can use HTML5's new attribute async to include script files that are compatible with older browsers (IE9-): script references are written before the closing tag of body, with the async attribute. Although this does not load scripts asynchronously in older browsers, it only blocks DOM parsing before the end of the body tag, which greatly reduces its blocking impact. In modern browsers, the script will not load until the DOM parser finds the script tag at the end of the body, and the load is asynchronous and does not block the CSSOM (but its execution still occurs after the CSSOM). To sum up, all browsers recommend:

Only compatible with modern browser recommendations:

Semantics

We've been talking about semantic programming, semantic programming, but very few people in the code fully use the right elements. There is also a reason to use semantic tags for SEO.

Semantics refers to the use of an element according to its initial meaning when it was created. It means to do the right thing with the right label, not just div and span.

Not recommended:

My page title Home News About All news articles Bad article Introduction sub-title This is a very bad example for HTML semantics I think I'm more on the side and should not receive the main credits This article was created by David 2014-01-01 00:00 Related sections: Events, Public holidays Copyright 2014

Recommend

Html code: My page title Home News About All news articles Good article Introduction sub-title

This is a good example for HTML semantics

I think I'm more on the side and should not receive the main credits

This article was created by David 1 month ago

Related sections: Events, Public holidays

Copyright 2014 alt tag is not empty

The alt attribute of the tag specifies alternate text to replace what the image is displayed in the browser when the image cannot be displayed or when the user disables the image display. Assuming that the user cannot view the image for the following reasons, the alt property can provide alternative information for the image:

The network speed is too slow.

Errors in the src property

Browsers disable images

The user uses a screen reader

From the SEO point of view, the crawler in the browser cannot climb the content of the picture, so we need to have text to tell the crawler the content of the picture.

The separation of structure, performance and behavior

Try to include only structural HTML; in documents and templates and move all presentation code into stylesheets and all action behaviors into scripts. In addition, in order to make the relationship between them as small as possible, style and script files are introduced into documents and templates as little as possible. Recommendations:

Do not use more than one or two style sheets

Do not use more than one or two scripts (learn to merge scripts)

Do not use inline style (.inline no-good {})

Do not use the style attribute on the element ()

Do not use inline scripts (alert ('no good'))

Do not use imagery elements (i.e.,)

Do not use the representation class name (i.e. Red, left, center)

HTML only focuses on content

HTML displays only the display content information

Don't introduce some specific HTML structures to solve some visual design problems.

Do not use the img element as an element specifically for visual design

Style problems should be solved using css

Not recommended:

See the square next to me? Css code: .text-box > .square {display: inline-block; width: 1rem; height: 1Reme; background-color: red;}

Recommend

Html code: See the square next to me? Css code: / * We use a: before pseudo element to solve the design problem of placing a colored square in front of the text content * / .text-box:before {content: "; display: inline-block; width: 1Reme; height: 1Reme; background-color: red;}

The only reason pictures and SVG graphics can be introduced into HTML is that they present some information related to the content.

Not recommended

Html Code:

See the square next to me?

Recommend

Html code: See the square next to me? Css code: / * We use a: before pseudo element with a background image to solve the problem * / .text-box:before {content: "; display: inline-block; width: 1Reme; height: 1Reme; background: url (square.svg) no-repeat; background-size: 100%;} js specification avoids global namespace pollution

To prevent global namespaces from being contaminated, our common practice is to wrap the code into an IIFE (Immediately-Invoked Function Expression), creating separate and isolated definition fields. It also makes the memory be released immediately after execution.

IIFE also ensures that your code is not easily modified by code in other global namespaces (i.e. Third-party libraries, window references, overridden undefined keywords, etc.). Not recommended:

Var x = 10, y = 100; / / Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this / / will be stored in the window object. This is very unclean and needs to be avoided. Console.log (window.x +''+ window.y)

Recommend

/ / We declare an IIFE and pass parameters into the function that we will use from the global space (function (log, w, undefined) {'use strict'; var x = 10, y = 100; / / Will output' true true' log ((W.x = undefined) +'+ (W.y = undefined));} (window.console.log, window))

Recommended writing method of IIFE:

(function () {'use strict'; / / Code goes here} ())

If you want to reference a global variable or a variable with an outer IIFE, you can pass parameters in the following ways:

(function ($, w, d) {'use strict'; $(function () {w.alert (d.querySelectorAll (' div') .length);} (jQuery, window, document)); copy code strict mode

ECMAScript 5 strict mode can be activated within the entire script or within a single method. It will do more strict error checking corresponding to different javascript contexts. Strict mode also ensures that javascript code is more robust and runs faster.

Strict mode prevents the use of reserved keywords that are likely to be introduced in the future.

You should enable strict mode in your script, preferably in a separate IIFE. Avoid using it in the first line of your script, causing all your scripts to start strict mode, which may cause problems with some third-party class libraries.

Variable declaration

Always use var to declare variables. If var is not specified, variables are implicitly declared as global variables, such as

Var a = b = 0; / / b is implicitly created as a global variable to copy the code

So, always use var to declare variables and use a single var pattern (using only one var definition for all variables at the beginning of the function). For example:

(function () {'use strict' var a = 0, b = 0, c = 0, I, j, myObject ();} ())

The advantage of using strict mode is that when you mistakenly type the wrong variable name, it can help you locate the source of the error by reporting an error message.

Js statement in advance

Javascript automatically defines variables and methods within the scope of the function in advance (just declare in advance, the assignment is still in place), for example:

(function (log) {'use strict'; var a = 10; for (var I = 0; I)

< a; i++) { var b = i * i; log(b); } if(a === 10) { var f = function() { log(a); }; f(); } function x() { log('Mr. X!'); } x(); }(window.console.log)); 提升后的js (function(log){ 'use strict'; // All variables used in the closure will be hoisted to the top of the function var a, i, b, f; // All functions in the closure will be hoisted to the top function x() { log('Mr. X!'); } a = 10; for(i = 0; i < a; i++) { b = i * i; log(b); } if(a === 10) { // Function assignments will only result in hoisted variables but the function body will not be hoisted // Only by using a real function declaration the whole function will be hoisted with its body f = function() { log(a); }; f(); } x(); }(window.console.log));使用严格等 总是使用 === 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。例如： (function(log){ 'use strict'; log('0' == 0); // true log('' == false); // true log('1' == true); // true log(null == undefined); // true var x = { valueOf: function() { return 'X'; } }; log(x == 'X'); }(window.console.log));等同== 和严格等===的区别 ==， 两边值类型不同的时候，要先进行类型转换，再比较。 ===，不做类型转换，类型不同的一定不等。 ==等同操作符 如果两个值具有相同类型，会进行===比较，返回===的比较值 如果两个值不具有相同类型，也有可能返回true 如果一个值是null另一个值是undefined，返回true 如果一个值是string另个是number，会把string转换成number再进行比较 如果一个值是true，会把它转成1再比较，false会转成0 console.log( false == null ) // false console.log( false == undefined ) // false console.log( false == 0 ) // true console.log( false == '' ) // true console.log( false == NaN ) // false console.log( null == undefined ) // true console.log( null == 0 ) // false console.log( null == '' ) // false console.log( null == NaN ) // false console.log( undefined == 0) // false console.log( undefined == '') // false console.log( undefined == NaN) // false console.log( 0 == '' ) // true console.log( 0 == NaN ) // false 总结一下== false 除了和自身比较为 true 外，和 0，"" 比较也为 true null 只和 undefined 比较时为 true， 反过来 undefined 也仅和 null 比较为 true，没有第二个 0 除了和 false 比较为 true，还有空字符串 ''" 和空数组 [] 空字符串 '' 除了和 false 比较为 true，还有一个数字 0 ==, >

, language & frameworks = > JavaScript = > Code Quality Tolls = > JSHint

Jshint in webstorm

What do these specifications mean? here are some commonly used ones, and you can refer to the official documentation for the rest.

Css specification naming of id and class

The names of ID and class always use names that reflect the purpose and purpose of the element, or other generic names, instead of superficial and obscure names are not recommended:

.fw-800 {font-weight: 800;} .red {color: red;}

Recommended:

.heavy {font-weight: 800;} .heavy {color: red;} rational use of ID

In general, ID should not be used for styles, and the weight of ID is very high, so do not use ID to solve the style problem, but use class is not recommended:

# content .title {font-size: 2em;}

Recommended:

Avoid using tag signatures in the .content .title {font-size: 2em;} css selector

From the principle of separation of structure, performance and behavior, HTML tags in css should be avoided as far as possible, and there are potential problems with tag signatures in css selectors.

Use the subselector

Many front-end developers write selector chains without using direct subselectors (note: the difference between direct subselectors and descendant selectors). Sometimes, this can lead to painful design problems and sometimes it can be performance-consuming. However, in any case, this is a very bad practice. If you don't write general-purpose selectors that match to the end of DOM, you should always consider direct sub-selectors. Not recommended:

.content .title {font-size: 2rem;}

Recommend

.content > .title {font-size: 2rem;} try to use abbreviated attributes

Using abbreviated attributes as much as possible is useful for code efficiency and readability, such as the font attribute. Not recommended:

Border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0

Recommended:

Border-top: 0; font: 100% font 1.6 palatino, georgia, serif; padding: 0 1em 2emposition 0 without units

Omit the units after 0, and it is not recommended:

Padding-bottom: 0px; margin: 0em

Recommended:

Padding-bottom: 0; margin: 0; attribute format

To ensure consistency and extensibility, each declaration should end with a semicolon and each declaration should be wrapped.

Use a space after the colon of the property name. For reasons of consistency

Always use a space between the property and the value (but there is no space between the property and the colon).

Each selector and property declaration always uses a new line.

Property selectors or attribute values are enclosed in double quotation marks ("") instead of single quotation marks (").

The Uri value (url ()) does not use quotation marks.

As a best practice, we should follow the following order (in the order of the following table):

Structural attributes:

Display

Position, left, top, right etc.

Overflow, float, clear etc.

Margin, padding

Expressive attributes:

Background, border etc.

Font, text

Not recommended:

.box {font-family: 'Arial', sans-serif; border: 3px solid # ddd; left: 30%; position: absolute; text-transform: uppercase; background-color: # eee; right: 30%; isplay: block; font-size: 1.5remr; overflow: hidden; padding: 1em; margin: 1em

Recommended:

Box {display: block; position: absolute; left: 30%; right: 30%; overflow: hidden; margin: 1mm; padding: 1em; background-color: # eee; border: 3px solid # ddd; font-family: 'Arial', sans-serif; font-size: 1.5remt; text-transform: uppercase;} this ends the study of "what are the specifications for front-end development". I hope to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.