This paper outlines the following aspects to develop front-end specification
1. Establishing Standard Catalog
2. The front-end naming convention
3. The front-end work norms
4. Develop a document written specification
1. Construction distal directory specification
We from the nomenclature, the root directory, business logic for directory and other aspects of building
1.1 Nomenclature:
- concise (as follows :)
* Src source code
* Img image resources
* Js JavaScript script
* Dep third party dependencies
- unused plural (below :)
* Do not use imgs docs
1.2 directory (root) by function structure (below :)
- src source code (logic)
- doc Documentation
- dep third party dependencies
- test test
1.3 folders divided according to the service logic (below :)
- src directory Glossary:
- common public resources
- public / static static resources
- component assembly
- view / tpl template file
```
src
common public resources
img
logo.png
sprites.png
css
reset.css
js
conf.js project profiles
public / static static resources
js
css
tpl
index.html
shopcar.html
img
component assembly
home
shopcar
login
register
user
list
detail
view / tpl tpl project template is a template abbreviation
```
1.4 Summary:
Above catalog development specifications used in two ways
1. Use the front-end engineering tools such as webpack, gulp, etc. manually create
Scaffold 2. Use tools provided by modification framework
2. The front-end naming convention
This part I explain the following two aspects
CSS naming convention:
- BEM Specifications
- OOCSS specification
javaScript preparation of specifications:
- JSLint
- eslint
2.1 css naming convention
2.1.1 BEM Specifications
- Concept:
Block Element Modifier, which is a front-end naming method, designed to help developers to implement modular, reusable, high maintainability and structure of the CSS code.
- BEM is the definition of a code of css class name, and each name and its components are certain meaning.
- from the Latin letters, numbers, - the composition of a single name css.
- Block Element Modifier
- independent and meaningful entity, eg header, container, menu, checkbox, etc.
- Block part and no independent significance, eg header title, menu item, list item, etc.
- a sign Blocks or Elements, you can use it to change its form of expression, behavior, state eg disabled, checked, fixed, etc..
- Naming
From the Latin alphabet, numbers, - the composition of a single name css.
- Block
Use simple prefix named after an independent and meaningful abstract blocks or components.
```css
<!-- e.g. -->
.block
.header
.site-search
```
- Element
__ connector used to connect and Block Element.
```css
<!-- e.g. -->
.block__element
.header__title
.site-search__field
```
- Modifier
Use - connector and connecting Block Element or Modifier.
```css
<!-- e.g. -->
.block--modifier
.block__element--modifier
.header--hide
.header__title--color-red
.site-search__field--disabled
```
- Example
```html
<-! HTML file ->
<form class="form form--theme-xmas form--simple">
<input class="form__input" type="text" />
<input class="form__submit form__submit--disabled" type="submit" />
</form>
```
```css
<!-- CSS -->
.form {}
.form--theme-xmas {}
.form--simple {}
.form__input { }
.form__submit {}
.form__submit--disabled {}
```
- Buttons examples
``` html
<-! HTML file ->
<button class="button">
Normal button
</button>
<button class="button button--state-success">
Success button
</button>
<button class="button button--state-danger">
Danger button
</button>
```
```css
<-! CSS file ->
.button {
display: inline-block;
border-radius: 3px;
padding: 7px 12px;
border: 1px solid #D5D5D5;
background-image: linear-gradient(#EEE, #DDD);
font: 700 13px/18px Helvetica, arial;
}
.button--state-success {
color: #FFF;
background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
border-color: #4A993E;
}
.button--state-danger {
color: #900;
}
```
2.1.2 OOCSS specification
- concept
Object Oriented CSS, CSS object-oriented, aimed at developing highly reusable, low expansion and high coupling CSS code.
OOCSS object-oriented thinking is to define the style, abstract and separation, pulled out a common code.
- to sum up:
The reuse things as a target point of view, then the different properties into another class name to
```css
<! - Example: ->
.list{
background: #fff;
}
.list--width{
width: 300px;
}
```
Write 2.2 js code specifications
· JSLint
· eslint
3. The front-end work norms
Our three aspects of daily, weekly and message format to understand
3.1 Daily reads as follows
- What do you do in the morning
- What did you do in the afternoon
- any problems? Is there a solution?
- plans for tomorrow? (Tomorrow going to do)
- Finally, to keep up with the content of the final surface Date
3.2 Weekly reads as follows:
2016.07.25-2016.07.29 Weekly:
. I work this week, the main content:
§ completion of the macro, as the cloud h5 player upgrades and large data reporting;
§ repair xk-h5 player bug: Samsung mobile phone comes with a browser can not slide seek;
§ admin-console back office systems to complete the preliminary production data terminal to access the page and statistical overview of the page;
. Ii main problems existing in the work:
iii - webserver large data show the presence of several pages transplant compatibility issues bootstrap and jquery.easyui conflict admin-console back office systems.;
. Iv - ideas to solve this problem may not be the most effective way to use iframe may be quicker; there is use of iframe iframe page easyui how to control how and when to change the page of the browser window, followed iframe change and other issues;
. V Next week work plan:
§ complete the production last week unfinished admin-console display large data page;
§ After the completion of the work, if you have time to try to solve the case with iframe;
§ There are no brothers asked to help do the job;
3.3 Common message format is as follows:
1. The clear message is sent who?
Participants: must think about it, if you are unsure, remember to ask your direct supervisor (colleague)
2. Subject of the message:
Themes must have one and only one
If necessary, add: [Please] marking, and other words
3. Message Body
To clear call:
Coherent example:
Good Leaders:
The following are known xxx please / Please marking
4. Signature:
What what what part of the name of what time jobs
5. Accessories
It should be noted annex is doing what?
6. Forwarding;
Original message needs to be explained. And then write their intentions clear
4. Develop a document written specification
This section will be described in the following sections
· Html specification
· Css specifications
· Js specification
4.1 html specification
1. tag sequence recommend the following attributes: class (class is designed with a high reusable components, it should at first) id name (id and more specifically should be used as little as possible, so that it is placed a second bit) data- * src for type href value placeholder title alt aria- * role required readonly disabled
2. id / class naming conventions: BEM OOCSS SMACSS (Extended)
3. Note Specification (preferably in English)
4.2 css specifications
1. Attribute Order
Location attribute (position top right z-index display float etc.)
大小 ( width height padding margin etc.)
Series text (font line-height letter-spacing color text-align ect.)
Background (background border etc.)
Other (animation transition etc.)
And written comments
2. try not to use the selector (css3 selector)
.content.first-child
3. Properties abbreviations:
4.3 Js specification
1. Language Specification
Declare variables must be added to the let keyword. Do not use var
Use the arrow priority function
Substituted template string using the connection string
2. Use a semicolon
If you only rely on the implicit separation between statements, sometimes a lot of trouble, use a semicolon more clearly where is the beginning and end of the statement, and in some cases, a missing semicolon BUG
3. Block the function declarations
Do not declare a function in the block, eg
if (x) {
function zxm() {}
}
If you really need, use the function to initialize a variable expression
if (x) {
let foo = function() {}
}
4. Note that cycle
forEach
map
filter
every
some
for..in
for...of
The for loop while
do...while
The naming convention:
camel hump represents the nomenclature represents the first letter capitalized pascal
Variable names: You must use camel nomenclature
Parameter name: You must use camel nomenclature
Function name: You must use camel nomenclature
Methods / properties: nomenclature must camel
Private (protection) Members: must begin with an underscore
Constant name: You must use all capital underlined nomenclature, eg XTEP_HOST_API
Class Name: You must use pascal nomenclature
Enumeration name: pascal must use nomenclature
Enumerated attributes: You must use all capital underlined nomenclature, eg XTEP_HOST_API
Namespace: You must use camel nomenclature
Semantics: name also need to focus on semantics
6. Statement:
var let const should be put into the function when the function has
Notes functions and variables representative of the meaning, and should be sorted in alphabetical order. Each variable on a separate line in order to add annotations
<! - Example: ->
var totalPrice = 1; // totalPrice represents the total price of commodities cart √
var num = 10, totalNum = 100; not recommended
7. callback function specifications:
Promise unified callback function using the callback parameter successful unified res, err error parameters
let callback = new Promise((resolve, reject) => {
IF (/ * * asynchronous operation success /) {
resolve(value);
} else {
reject(err);
}
});
callback.then((res) => {
console.log ( 'success callback!', res);
}).catch((err) => {
console.log ( 'failure callback!', err);
});
8. punctuation norms
js use of anti unified quotation marks () or single quotation marks ( ''), without quotation marks ( "")
9. Function Default
The default value is a function of other parameters written on the back
function zxm(a,b,name = 'zxm'){
console.log(name)
}