声明：本文转载自https://my.oschina.net/u/2306318/blog/1609942，转载目的在于传递更多信息，仅供学习交流之用。如有侵权行为，请联系我，我会及时删除。
<!-- bad --> <div id="main"> <div class="article"> <div class="header"> <h1>Blog post</h1> <p>Published: <span>21st Feb, 2015</span></p> </div> <p>…</p> </div> </div><!-- good --> <main> <article> <header> <h1>Blog post</h1> <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p> </header> <p>…</p> </article> </main>
<!-- bad --> <h1> <figure> <img alt=Company src=logo.png> </figure> </h1> <!-- good --> <h1> <img alt=Company src=logo.png> </h1><!-- bad --> <!doctype html> <html lang=en> <head> <meta http-equiv=Content-Type content="text/html; charset=utf-8" /> <title>Contact</title> <link rel=stylesheet href=style.css type=text/css /> </head> <body> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required=required /> </label> <script src=main.js type=text/javascript></script> </body> </html><!-- good --> <!doctype html> <html lang=en> <meta charset=utf-8> <title>Contact</title> <link rel=stylesheet href=style.css> <h1>Contact me</h1> <label> Email address: <input type=email placeholder=you@email.com required> </label> <script src=main.js></script> </html>为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的展现。
<!DOCTYPE html> <html> <head> </head> </html>根据 HTML5 规范：
强烈建议为 html 根元素指定 lang 属性，从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等等。更多关于 lang 属性的知识可以从 此规范 中了解。
这里列出了语言代码表。
<html lang="en"> <!-- ... --> </html>IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。
阅读这篇 stack overflow 上的文章可以获得更多有用的信息。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式。这样做的好处是，可以避免在 HTML 中使用字符实体标记（character entity），从而全部与文档编码一致（一般采用 UTF-8 编码）。
<head> <meta charset="UTF-8"> </head>可用性不应该是事后才考虑的事情。你可以通过简单的修改做出不错的效果，例如：
<div class=button>这种粗暴的做法）<!-- bad --> <h1><img alt="Logo" src="logo.png"></h1> <!-- good --> <h1><img alt="My Company, Inc." src="logo.png"></h1><!-- bad --> <!doctype html> <meta charset=utf-8> <script src=analytics.js></script> <title>Hello, world.</title> <p>...</p> <!-- good --> <!doctype html> <meta charset=utf-8> <title>Hello, world.</title> <p>...</p> <script src=analytics.js></script>id class name data-xxx src, for, type, href title, alt aria-xxx, role value style/* bad */ div { color: red } /* good */ div { color: red; }/* bad */ img { display: block; } /* good */ img { vertical-align: middle; }/* bad */ div { width: 100px; position: absolute; right: 0; } /* good */ div { width: 100px; margin-left: auto; }/* bad */ div:first-of-type :last-child > p ~ * /* good */ div:first-of-type .info/* bad */ img[src$=svg], ul > li:first-child { opacity: 0; } /* good */ [src$=svg], ul > :first-child { opacity: 0; }/* bad */ .bar { color: green !important; } .foo { color: red; } /* good */ .foo.bar { color: green; } .foo { color: red; }/* bad */ li { visibility: hidden; } li:first-child { visibility: visible; } /* good */ li + li { visibility: hidden; }/* bad */ div h1, div p { text-shadow: 0 1px 0 #fff; } /* good */ div { text-shadow: 0 1px 0 #fff; }/* bad */ div { transition: all 1s; top: 50%; margin-top: -10px; padding-top: 5px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; } /* good */ div { transition: 1s; top: calc(50% - 10px); padding: 5px 10px 20px; }/* bad */ :nth-child(2n + 1) { transform: rotate(360deg); } /* good */ :nth-child(odd) { transform: rotate(1turn); }/* bad */ div:hover { animation: move 1s forwards; } @keyframes move { 100% { margin-left: 100px; } } /* good */ div:hover { transition: 1s; transform: translateX(100px); }/* bad */ div { margin: 0px; font-size: .9em; line-height: 22px; transition: 500ms; } /* good */ div { margin: 0; font-size: .9rem; line-height: 1.5; transition: .5s; }/* bad */ div { color: hsl(103, 54%, 43%); } /* good */ div { color: #5a3; }/* bad */ div::before { content: url(white-circle.svg); } /* good */ div::before { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; }/* bad */ div { // position: relative; transform: translateZ(0); } /* good */ div { /* position: relative; */ will-change: transform; }/* Bad CSS */ .selector, .selector-secondary, .selector[type=text] { padding:15px; margin:0px 0px 15px; background-color:rgba(0, 0, 0, 0.5); box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF } /* Good CSS */ .selector, .selector-secondary, .selector[type="text"] { padding: 15px; margin-bottom: 15px; background-color: rgba(0,0,0,.5); box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; }*class应以功能过内容命名，不以表现形式命名，通用且有意义的词
*class与id单词字母小写，多个单词组成时，使用中划线“-”分隔
使用on作为激活状态的class，使用hover作为移上元素（hover）的class
1、定位
2、盒模型
3、关于文字
4、关于颜色，背景
5、其他，如：cursor:pointer
.declaration-order { /*定位 */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* 盒模型 */ display: block; box-sizing: border-box; width: 100px; height: 100px; padding: 10px; border: 1px solid #e5e5e5; border-radius: 3px; margin: 10px; float: right; overflow: hidden; /* 关于文字 */ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; text-align: center; /* 关于颜色，背景 */ background-color: #f5f5f5; color: #fff; opacity: .8; /*其他 */ cursor: pointer; }变量，混合，允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以一些公共的样式规则可以单独在一个less文件中定义，其他地方调用，在做全局样式调整时能很方便的修改
// LESS @color: #4D926F; #header { color: @color; } h2 { color: @color; } /* 生成的 CSS */ #header { color: #4D926F; } h2 { color: #4D926F; } //LESS .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered; } .post a { color: red; .bordered; } /* 生成的 CSS */ #menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; } .post a { color: red; border-top: dotted 1px black; border-bottom: solid 2px black; }将嵌套深度限制在2-3级。对于超过3级的嵌套，给予重新评估。这可以避免出现过于详实的CSS选择器。 避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于20行的嵌套规则出现。
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none } } }有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:
#bundle { .button () { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white } } .tab { ... } .citation { ... } } /*你只需要在 #header a中像这样引入 .button:*/ #header a { color: orange; #bundle > .button; }以上HTML和CSS的规范大部分参考github上的frontend-guidelines及编码规范by@mdo（后面几个自己新增
javascript规范使用的是Standard标准，其好处可点击超链接查看，npm,github等都是使用的此标准。 下文copy的Standard Style的具体规则，配合eslint使用
function hello (name) { console.log('hi', name) }console.log('hello there') $("<div class='box'>")function myFunction () { var result = something() // ✗ avoid }if (condition) { ... } // ✓ ok if(condition) { ... } // ✗ avoidfunction name (arg) { ... } // ✓ ok function name(arg) { ... } // ✗ avoid run(function () { ... }) // ✓ ok run(function() { ... }) // ✗ avoidif (name === 'John') // ✓ ok if (name == 'John') // ✗ avoidif (name !== 'John') // ✓ ok if (name != 'John') // ✗ avoid// ✓ ok var x = 2 var message = 'hello, ' + name + '!' // ✗ avoid var x=2 var message = 'hello, '+name+'!'// ✓ ok var list = [1, 2, 3, 4] function greet (name, options) { ... } // ✗ avoid var list = [1,2,3,4] function greet (name,options) { ... }// ✓ ok if (condition) { // ... } else { // ... }// ✗ avoid if (condition) { // ... } else { // ... }// ✓ ok if (options.quiet !== true) console.log('done')// ✓ ok if (options.quiet !== true) { console.log('done') }// ✗ avoid if (options.quiet !== true) console.log('done')// ✓ ok run(function (err) { if (err) throw err window.alert('done') })// ✗ avoid run(function (err) { window.alert('done') })window.alert('hi') // ✓ ok// ✓ ok var value = 'hello world' console.log(value)// ✗ avoid var value = 'hello world' console.log(value)// ✓ ok var location = env.development ? 'localhost' : 'www.api.com' // ✓ ok var location = env.development ? 'localhost' : 'www.api.com'// ✗ avoid var location = env.development ? 'localhost' : 'www.api.com'// ✓ ok var silent = true var verbose = true// ✗ avoid var silent = true, verbose = true // ✗ avoid var silent = true, verbose = true// ✓ ok while ((m = text.match(expr))) { // ... } // ✗ avoid while (m = text.match(expr)) { // ... }function foo () {return true} // ✗ avoid function foo () { return true } // ✓ okfunction my_function () { } // ✗ avoid function myFunction () { } // ✓ ok var my_var = 'hello' // ✗ avoid var myVar = 'hello' // ✓ okvar obj = { message: 'hello', // ✗ avoid }var obj = { foo: 'foo' ,bar: 'bar' // ✗ avoid } var obj = { foo: 'foo', bar: 'bar' // ✓ ok }console.log ('hello') // ✗ avoid console.log('hello') // ✓ okvar obj = { 'key' : 'value' } // ✗ avoid var obj = { 'key' :'value' } // ✗ avoid var obj = { 'key':'value' } // ✗ avoidvar obj = { 'key': 'value' } // ✓ okfunction animal () {} var dog = new animal() // ✗ avoidfunction Animal () {} var dog = new Animal() // ✓ okfunction Animal () {} var dog = new Animal // ✗ avoid var dog = new Animal() // ✓ okvar person = { set name (value) { // ✗ avoid this.name = value } }var person = { set name (value) { this.name = value }, get name () { // ✓ ok return this.name } }class Dog { constructor () { super() // ✗ avoid } } class Dog extends Mammal { constructor () { super() // ✓ ok } }var nums = new Array(1, 2, 3) // ✗ avoid var nums = [1, 2, 3] // ✓ okfunction foo (n) { if (n <= 0) return arguments.callee(n - 1) // ✗ avoid } function foo (n) { if (n <= 0) return foo(n - 1) }class Dog {} Dog = 'Fido' // ✗ avoidconst score = 100 score = 125 // ✗ avoidif (false) { // ✗ avoid // ... } if (x === 0) { // ✓ ok // ... } while (true) { // ✓ ok // ... }var pattern = /\x1f/ // ✗ avoid var pattern = /\x20/ // ✓ okfunction sum (a, b) { debugger // ✗ avoid return a + b }var name delete name // ✗ avoidfunction sum (a, b, a) { // ✗ avoid // ... } function sum (a, b, c) { // ✓ ok // ... }class Dog { bark () {} bark () {} // ✗ avoid }var user = { name: 'Jane Doe', name: 'John Doe' // ✗ avoid }switch (id) { case 1: // ... case 1: // ✗ avoid }import { myFunc1 } from 'module' import { myFunc2 } from 'module' // ✗ avoid import { myFunc1, myFunc2 } from 'module' // ✓ okconst myRegex = /^abc[]/ // ✗ avoid const myRegex = /^abc[a-z]/ // ✓ okconst { a: {} } = foo // ✗ avoid const { a: { b } } = foo // ✓ okeval( "var result = user." + propName ) // ✗ avoid var result = user[propName] // ✓ oktry { // ... } catch (e) { e = 'new value' // ✗ avoid } try { // ... } catch (e) { const newVal = 'new value' // ✓ ok }Object.prototype.age = 21 // ✗ avoidconst name = function () { getName() }.bind(user) // ✗ avoid const name = function () { this.getName() }.bind(user) // ✓ okconst result = true if (!!result) { // ✗ avoid // ... } const result = true if (result) { // ✓ ok // ... }const myFunc = (function () { }) // ✗ avoid const myFunc = function () { } // ✓ okswitch (filter) { case 1: doSomething() // ✗ avoid case 2: doSomethingElse() } switch (filter) { case 1: doSomething() break // ✓ ok case 2: doSomethingElse() } switch (filter) { case 1: doSomething() // fallthrough // ✓ ok case 2: doSomethingElse() }const discount = .5 // ✗ avoid const discount = 0.5 // ✓ okfunction myFunc () { } myFunc = myOtherFunc // ✗ avoidwindow = {} // ✗ avoidsetTimeout("alert('Hello world')") // ✗ avoid setTimeout(function () { alert('Hello world') }) // ✓ okif (authenticated) { function setAuthUser () {} // ✗ avoid }RegExp('[a-z') // ✗ avoid RegExp('[a-z]') // ✓ okfunction myFunc () /*<NBSP>*/{} // ✗ avoidFoo.prototype.__iterator__ = function () {} // ✗ avoidvar score = 100 function game () { score: 50 // ✗ avoid }label: while (true) { break label // ✗ avoid }function myFunc () { { // ✗ avoid myOtherFunc() } } function myFunc () { myOtherFunc() // ✓ ok }const id = 1234 // ✗ avoid const id = 1234 // ✓ okconst message = 'Hello \ world' // ✗ avoidnew Character() // ✗ avoid const character = new Character() // ✓ okvar sum = new Function('a', 'b', 'return a + b') // ✗ avoidlet config = new Object() // ✗ avoidconst myModule = new require('my-module') // ✗ avoidconst foo = new Symbol('foo') // ✗ avoidconst message = new String('hello') // ✗ avoidconst math = Math() // ✗ avoidconst num = 042 // ✗ avoid const num = '042' // ✓ okconst copyright = 'Copyright \251' // ✗ avoidconst pathToFile = __dirname + '/app.js' // ✗ avoid const pathToFile = path.join(__dirname, 'app.js') // ✓ okconst foo = obj.__proto__ // ✗ avoid const foo = Object.getPrototypeOf(obj) // ✓ oklet name = 'John' let name = 'Jane' // ✗ avoid let name = 'John' name = 'Jane' // ✓ okconst regexp = /test value/ // ✗ avoid const regexp = /test {3}value/ // ✓ ok const regexp = /test value/ // ✓ okfunction sum (a, b) { return result = a + b // ✗ avoid } function sum (a, b) { return (result = a + b) // ✓ ok }name = name // ✗ avoidif (score === score) {} // ✗ avoidif (doSomething(), !!test) {} // ✗ avoidlet undefined = 'value' // ✗ avoidlet fruits = ['apple',, 'orange'] // ✗ avoidconst message = 'Hello ${name}' // ✗ avoid const message = `Hello ${name}` // ✓ okclass Dog extends Animal { constructor () { this.legs = 4 // ✗ avoid super() } }throw 'error' // ✗ avoid throw new Error('error') // ✓ oklet name = undefined // ✗ avoid let name name = 'value' // ✓ okfor (let i = 0; i < items.length; j++) {...} // ✗ avoid for (let i = 0; i < items.length; i++) {...} // ✓ oklet score = val ? val : 0 // ✗ avoid let score = val || 0 // ✓ okfunction doSomething () { return true console.log('never called') // ✗ avoid }try { // ... } catch (e) { // ... } finally { return 42 // ✗ avoid }if (!key in obj) {} // ✗ avoidsum.call(null, 1, 2, 3) // ✗ avoidconst user = { ['name']: 'John Doe' } // ✗ avoid const user = { name: 'John Doe' } // ✓ okclass Car { constructor () { // ✗ avoid } }let message = 'Hell\o' // ✗ avoidimport { config as config } from './config' // ✗ avoid import { config } from './config' // ✓ okuser .name // ✗ avoid user.name // ✓ okwith (val) {...} // ✗ avoidconst user = { name: 'Jane Doe', age: 30, username: 'jdoe86' // ✗ avoid } const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' } // ✓ ok const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' }if (user) { // ✗ avoid const name = getName() } if (user) { const name = getName() // ✓ ok }fn(... args) // ✗ avoid fn(...args) // ✓ okfor (let i = 0 ;i < items.length ;i++) {...} // ✗ avoid for (let i = 0; i < items.length; i++) {...} // ✓ okif (admin){...} // ✗ avoid if (admin) {...} // ✓ okgetName( name ) // ✗ avoid getName(name) // ✓ oktypeof!admin // ✗ avoid typeof !admin // ✓ ok//comment // ✗ avoid // comment // ✓ ok /*comment*/ // ✗ avoid /* comment */ // ✓ okconst message = `Hello, ${ name }` // ✗ avoid const message = `Hello, ${name}` // ✓ okif (price === NaN) { } // ✗ avoid if (isNaN(price)) { } // ✓ oktypeof name === 'undefimed' // ✗ avoid typeof name === 'undefined' // ✓ okconst getName = function () { }() // ✗ avoid const getName = (function () { }()) // ✓ ok const getName = (function () { })() // ✓ okyield* increment() // ✗ avoid yield * increment() // ✓ okif (42 === age) { } // ✗ avoid if (age === 42) { } // ✓ okwindow.alert('hi') // ✗ avoid window.alert('hi'); // ✓ ok** eslint: no-unexpected-multiline **
// ✓ ok ;(function () { window.alert('ok') }()) // ✗ avoid (function () { window.alert('ok') }())// ✓ ok ;[1, 2, 3].forEach(bar) // ✗ avoid [1, 2, 3].forEach(bar)// ✓ ok ;`hello`.indexOf('o') // ✗ avoid `hello`.indexOf('o')备注：上面的写法只能说聪明过头了。
相比更加可读易懂的代码，那些看似投巧的写法是不可取的。
譬如：
;[1, 2, 3].forEach(bar)建议的写法是：
var nums = [1, 2, 3] nums.forEach(bar)ES6 提出了两个新的声明变量的命令：let和const。其中，let完全可以取代var，因为两者语义相同，而且let没有副作用。
在全局环境，不应该设置变量，只应设置常量
好处：
const优于let有几个原因。一个是const可以提醒阅读程序的人，这个变量不应该改变；另一个是const比较符合函数式编程思想，运算不改变值，只是新建值，而且这样也有利于将来的分布式运算；最后一个原因是 JavaScript 编译器会对const进行优化，所以多使用const，有利于提高程序的运行效率，也就是说let和const的本质区别，其实是编译器内部的处理不同。 const声明常量还有两个好处，一是阅读代码的人立刻会意识到不应该修改这个值，二是防止了无意间修改变量值所导致的错误。
使用数组成员对变量赋值时，优先使用解构赋值。
const arr = [1, 2, 3, 4]; // bad const first = arr[0]; const second = arr[1]; // good const [first, second] = arr;函数的参数如果是对象的成员，优先使用解构赋值。
// bad function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; } // good function getFullName(obj) { const { firstName, lastName } = obj; } // best function getFullName({ firstName, lastName }) { }如果函数返回多个值，优先使用对象的解构赋值，而不是数组的解构赋值。这样便于以后添加返回值，以及更改返回值的顺序。
// bad function processInput(input) { return [left, right, top, bottom]; } // good function processInput(input) { return { left, right, top, bottom }; } const { left, right } = processInput(input);对象尽量静态化，一旦定义，就不得随意添加新的属性。如果添加属性不可避免，要使用Object.assign方法。
// bad const a = {}; a.x = 3; // if reshape unavoidable const a = {}; Object.assign(a, { x: 3 }); // good const a = { x: null }; a.x = 3;如果对象的属性名是动态的，可以在创造对象的时候，使用属性表达式定义。
// bad const obj = { id: 5, name: 'San Francisco', }; obj[getKey('enabled')] = true; // good const obj = { id: 5, name: 'San Francisco', [getKey('enabled')]: true, };另外，对象的属性和方法，尽量采用简洁表达法，这样易于描述和书写。
var ref = 'some value'; // bad const atom = { ref: ref, value: 1, addValue: function (value) { return atom.value + value; }, }; // good const atom = { ref, value: 1, addValue(value) { return atom.value + value; }, };使用扩展运算符（...）拷贝数组。
// bad const len = items.length; const itemsCopy = []; let i; for (i = 0; i < len; i++) { itemsCopy[i] = items[i]; } // good const itemsCopy = [...items];使用 Array.from 方法，将类似数组的对象转为数组。
const foo = document.querySelectorAll('.foo'); const nodes = Array.from(foo);立即执行函数可以写成箭头函数的形式。
(() => { console.log('Welcome to the Internet.'); })();那些需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了 this。
// bad [1, 2, 3].map(function (x) { return x * x; }); // good [1, 2, 3].map((x) => { return x * x; }); // best [1, 2, 3].map(x => x * x);简单的、单行的、不会复用的函数，建议采用箭头函数。如果函数体较为复杂，行数较多，还是应该采用传统的函数写法。
注意区分 Object 和 Map，只有模拟现实世界的实体对象时，才使用 Object。如果只是需要key: value的数据结构，使用 Map 结构。因为 Map 有内建的遍历机制。
let map = new Map(arr); for (let key of map.keys()) { console.log(key); } for (let value of map.values()) { console.log(value); } for (let item of map.entries()) { console.log(item[0], item[1]); }总是用 Class，取代需要 prototype 的操作。因为 Class 的写法更简洁，更易于理解。
// bad function Queue(contents = []) { this._queue = [...contents]; } Queue.prototype.pop = function() { const value = this._queue[0]; this._queue.splice(0, 1); return value; } // good class Queue { constructor(contents = []) { this._queue = [...contents]; } pop() { const value = this._queue[0]; this._queue.splice(0, 1); return value; } }使用extends实现继承，因为这样更简单，不会有破坏instanceof运算的危险。
// bad const inherits = require('inherits'); function PeekableQueue(contents) { Queue.apply(this, contents); } inherits(PeekableQueue, Queue); PeekableQueue.prototype.peek = function() { return this._queue[0]; } // good class PeekableQueue extends Queue { peek() { return this._queue[0]; } }一般来说，不要在then方法里面定义失败状态的回调函数(即then的第二个参数)，总是使用catch方法
// bad promise .then(function(data) { // success }, function(err) { // error }); // good promise .then(function(data) { //cb // success }) .catch(function(err) { // error });尽量不要使用i++,尽量使用i+=1;(除了for循环)
1.1 components
1.2 props
1.3 data
1.4 created
1.5 mounted
1.6 activited
1.7 update
1.8 beforeRouteUpdate
1.9 metods
1.10 filter
1.11 computed
1.12 watch
2.1 动宾短语（good：jumpPage、openCarInfoDialog）（bad：go、nextPage、show、open、login）
2.2 ajax 方法以 get、post 开头，以 data 结尾（good：getListData、postFormData）（bad：takeData、confirmData、getList、postForm）
2.3 事件方法以 on 开头（onTypeChange、onUsernameInput）
2.4 init、refresh 单词除外
2.5 尽量使用常用单词开头（set、get、open、close、jump）
2.6 驼峰命名（good: getListData）（bad: get_list_data、getlistData）
3.1 不在 mounted、created 之类的方法写逻辑，取 ajax 数据，
3.2 在 created 里面监听 Bus 事件
原则：每一个vue组件首先必须专注于解决一个单一的问题，独立的，可复用的，微小的和可测试的。 如果你的组件做了太多的事或是变得臃肿，请将其拆成更小的组件并保持单一的原则。
<!-- 推荐 --> <app-header></app-header> <user-list></user-list> <range-slider></range-slider> <!-- 避免 --> <btn-group></btn-group> <!-- 虽然简短但是可读性差. 使用 `button-group` 替代 --> <ui-slider></ui-slider> <!-- ui 前缀太过于宽泛，在这里意义不明确 --> <slider></slider> <!-- 与自定义元素规范不兼容 --><template> <input type="range" v-model="value" :max="max" :min="min"> </template> <script type="text/javascript"> export default { props: { max: { type: Number, // 这里添加了数字类型的校验 default() { return 10; }, }, min: { type: Number, default() { return 0; }, }, value: { type: Number, default() { return 4; }, }, }, }; </script>Vue.js 是一个基于组件的框架。如果你不知道何时创建组件可能会导致以下问题：
首先，尽可能早地尝试构建出诸如模态框、提示框、工具条、菜单、头部等这些明显的（通用型）组件。总之，你知道的这些组件以后一定会在当前页面或者是全局范围内需要。
第二，在每一个新的开发项目中，对于一整个页面或者其中的一部分，在进行开发前先尝试思考一下。如果你认为它有一部分应该是一个组件，那么就创建它吧。
最后，如果你不确定，那就不要。避免那些“以后可能会有用”的组件污染你的项目。它们可能会永远的只是（静静地）待在那里，这一点也不聪明。注意，一旦你意识到应该这么做，最好是就把它打破，以避免与项目的其他部分构成兼容性和复杂性。
// this is comment/* */// bad /* start end */ // good /* here is line 1 here is line 2 */// 初始化value变量为0 var value = 0;// TODO 未处理IE6-8的兼容性 function setOpacity(node, val) { node.style.opacity = val; }文档注释将会以预定格式出现在API文档中。它以“/”开头，以“/”结束，其间的每一行均以“”开头（均与开始符的第一个“”对齐），且注释内容与“”间留一个空格。
/** * 模块说明 * @module 模块名 */ /** * Core模块提供最基础、最核心的接口 * @module Core *//** * 类说明 * @class 类名 * @constructor */@class必须搭配@constructor或@static使用，分别标记非静态类与静态类。
/** * 节点集合类 * @class NodeList * @constructor * @param {ArrayLike<Element>} nodes 初始化节点 *//** * 方法说明 * @method 方法名 * @for 所属类名 * @param {参数类型} 参数名 参数说明 * @return {返回值类型} 返回值说明 */没有指定@for时，表示此函数为全局或模块顶层函数。当函数为静态函数时，必须添加@static；当函数有参数时，必须使用@param；当函数有返回值时，必须使用@return。
/** * 返回当前集合中指定位置的元素 * @method * @for NodeList * @param {Number} [i=0] 位置下标。如果为负数，则从集合的最后一个元素开始倒数 * @return {Element} 指定元素 */ - @param。声明函数参数，必须与@method搭配使用。 - 当参数出现以下情况时，使用对应的格式：[参数名] - 参数有默认值 [参数名 = 默认值]/** * 属性说明 * @property {属性类型} 属性名 */
本文发表于2018年01月20日 12:32
(c)注：本文转载自https://my.oschina.net/u/2306318/blog/1609942，转载目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如有侵权行为，请联系我们，我们会及时删除.
阅读 3631 讨论 0 喜欢 0
避坑！MotionGo就是一款诈骗软件！千万不要用ChatPPT，浪费时间！
宝塔面板使用WWW用户执行计划任务命令 解决laravel日志权限问题 宝塔设置计划任务执行用户
手机微信一键制作透明底文字表情 教你如何让微信表情包背景为透明 自制微信表情包动图 文字表情在线制作
ssh目录权限配置指南 .ssh文件夹及rsa_id.pub等文件正确权限规则
Mac连接亚马逊AWS EC2 远程连接登录不上去 有pem私钥文件依然要输密码 默认密码 教程
PHP工程师必知必会 - Linux系统常用命令 - Linux中的网络管理命令（下）
| 抢先体验 |
|---|
扫码体验 |
| 闪念胶囊 |
|---|
|
你要过得好哇，这样我才能恨你啊，你要是过得不好，我都不知道该恨你还是拥抱你啊。 17:21 2021年04月19日 查看详情 |
|
直抵黄龙府，与诸君痛饮尔。 18:17 2021年03月28日 查看详情 |
|
那时陪伴我的人啊，你们如今在何方。 16:28 2021年03月19日 查看详情 |
|
不出意外的话，我们再也不会见了，祝你前程似锦。 18:05 2021年03月17日 查看详情 |
|
这世界真好，吃野东西也要留出这条命来看看 21:21 2021年03月14日 查看详情 |
| Contact |
|---|
Y2lvbkBjaGluYWNpb24uY24= |