Vue前端开发命名规范 - 版本历史

2019年7月23日 (二) 03:45 Leon

2019-07-23T03:45:33Z

2019年7月23日 (二) 03:44 Leon

2019-07-23T03:44:46Z

2019年7月23日 (二) 03:43 Leon

2019-07-23T03:43:39Z

2019年7月23日 (二) 03:43 Leon

2019-07-23T03:43:06Z

2019年7月23日 (二) 03:42 Leon

2019-07-23T03:42:41Z

2019年7月23日 (二) 03:41 Leon

2019-07-23T03:41:38Z

2019年7月23日 (二) 03:40 Leon

2019-07-23T03:40:38Z

2019年7月23日 (二) 03:39 Leon

2019-07-23T03:39:25Z

2019年7月23日 (二) 03:38 Leon

2019-07-23T03:38:18Z

2019年7月23日 (二) 03:34 Leon

2019-07-23T03:34:48Z

@@ 第14行： / 第14行： @@
 TpTenderFileMakeMain.vue
-* 3.文件夹的名字如果是多个单词 使用 - 连接
+* 3.文件夹的名字如果是多个单词 使用 - 连接 如下：
 ==单文件组件的顶级元素顺序==

←上一版本		2019年7月23日 (二) 03:44的版本
第16行：		第16行：
	* 3.文件夹的名字如果是多个单词使用 - 连接		* 3.文件夹的名字如果是多个单词使用 - 连接
	如下：		如下：
−	~~<syntaxhighlight lang="javascript">~~
−	~~[[文件:20190425.png\|左]]~~
−	~~</syntaxhighlight>~~
−
−
−
−
−
−
−
−
−
−
−
−
−
−
−

		+	[[文件:20190425.png\|中]]

@@ 第15行： / 第15行： @@
 * 3.文件夹的名字如果是多个单词 使用 - 连接
-*如下：
+如下：
 [[文件:20190425.png|左]]
+</syntaxhighlight>

@@ 第16行： / 第16行： @@
 * 3.文件夹的名字如果是多个单词 使用 - 连接
 *如下：
-[[文件:20190425.png|缩略图]]
+[[文件:20190425.png|左]]

@@ 第16行： / 第16行： @@
 * 3.文件夹的名字如果是多个单词 使用 - 连接
 *如下：
-[[文件:20190425.png|缩略图|左]]
+[[文件:20190425.png|缩略图]]

←上一版本		2019年7月23日 (二) 03:41的版本
第17行：		第17行：
	*如下：		*如下：
	[[文件:20190425.png\|缩略图\|左]]		[[文件:20190425.png\|缩略图\|左]]
		+
		+

@@ 第1行： / 第1行： @@
 ==命名规范==
-*1.组件名
+* 1.组件名
 组件名为多个单词，使用驼峰命名法。
 <syntaxhighlight lang="javascript">
@@ 第8行： / 第8行： @@
+}
 </syntaxhighlight>
-*2.组件文件
+* 2.组件文件
 文件的名字如果是多个单词，使用驼峰命名法。
@@ 第14行： / 第14行： @@
 TpTenderFileMakeMain.vue
-.文件夹的名字如果是多个单词 使用 - 连接
+* 3.文件夹的名字如果是多个单词 使用 - 连接
 *如下：
 [[文件:20190425.png|缩略图|左]]
-−
 ==单文件组件的顶级元素顺序==
 <syntaxhighlight lang="vue">
@@ 第65行： / 第80行： @@
 ==JavaScript==
-.var / let / const
+* 1.var / let / const
 建议不再使用 var，而使用 let / const，优先使用 const。任何一个变量的使用都要提前申明，除了 function 定义的函数可以随便放在任何位置。
-.引号
+* 2.引号
 建议不再使用双引号，静态字符串使用单引号，动态字符串使用反引号衔接。
@@ 第77行： / 第92行： @@
 const bar = `${foo}，前端工程师`
 </syntaxhighlight>
-.函数
+* 3.函数
 匿名函数统一使用箭头函数，多个参数/返回值时优先使用对象的结构赋值。
@@ 第89行： / 第104行： @@
 函数名统一使用驼峰命名，以大写字母开头申明的都是构造函数，使用小写字母开头的都是普通函数，也不该使用 new 操作符去操作普通函数。
-.对象
+* 4.对象
 建议使用扩展运算符拷贝对象而不是 Object.assign(target, ...sources)。
@@ 第116行： / 第131行： @@
 </syntaxhighlight>
-.eval
+* 5.eval
 避免使用 eval，如要进行字符串转化为对象，最好使用浏览器的内置方法来解析 JSON 数据，以确保代码的安全性和数据的合法性。如果浏览器不支持 JSON.parse()，你可以使用 JSON.org 所提供的库。如果不得不使用 eval()，可以尝试用 new Function() 来代替，在 new Function() 中运行的代码会在一个局部函数作用域内执行，因此源码中定义的变量不会自动变成全局变量。

@@ 第2行： / 第2行： @@
 .组件名
 组件名为多个单词，使用驼峰命名法。
+<syntaxhighlight lang="javascript">
 // 示例
 export default {
      name: 'TpTenderFileMakeMain'
+}
+</syntaxhighlight>
 .组件文件
 文件的名字如果是多个单词，使用驼峰命名法。
 // 正例
 TpTenderFileMakeMain.vue
 .文件夹的名字如果是多个单词 使用 - 连接
-*如下：
+如下：
 [[文件:20190425.png|缩略图|左]]
 ==单文件组件的顶级元素顺序==
 // 正例
 <template>
@@ 第28行： / 第31行： @@
 /* CSS */
 </style>
+</syntaxhighlight>
 ==vue 暴露方法顺序==
 暴露出去的部分，要按顺序：
+<syntaxhighlight lang="javascript">
 export default {
 	name: 'index',                            名称
@@ 第48行： / 第51行： @@
 	destroyed(){}                             销毁完成
+}
+</syntaxhighlight>
 ==v-for==
 在执行 v-for 遍历的时候，总是应该带上 key 值使更新 DOM 时渲染效率更高。
 // 正例
 <ul>
      <li v-for="item in list" :key="item.id">
@@ 第57行： / 第61行： @@
      </li>
 </ul>
 ==JavaScript==
 .var / let / const
@@ 第66行： / 第72行： @@
 建议不再使用双引号，静态字符串使用单引号，动态字符串使用反引号衔接。
 // 正例
 const foo = '后除'
 const bar = `${foo}，前端工程师`
+</syntaxhighlight>
 .函数
 匿名函数统一使用箭头函数，多个参数/返回值时优先使用对象的结构赋值。
 // 正例
 function getPersonInfo ({name, sex}) {
@@ 第78行： / 第86行： @@
      return {name, gender}
+}
 函数名统一使用驼峰命名，以大写字母开头申明的都是构造函数，使用小写字母开头的都是普通函数，也不该使用 new 操作符去操作普通函数。
@@ 第83行： / 第92行： @@
 建议使用扩展运算符拷贝对象而不是 Object.assign(target, ...sources)。
 // 正例
 const foo = {a: 0, b: 1}
 const bar = {...foo, c: 2}
 对象尽量静态化，添加新属性使用 Object.assign(target, ...sources)。
 // 正例
 const foo = {a: 3}
 Object.assign(foo, {b: 4})
 若有遍历对象的需求，优先使用 Map 结构
 // 正例
 const myMap = new Map([])
@@ 第98行： / 第114行： @@
      // ...
+}
 .eval
 避免使用 eval，如要进行字符串转化为对象，最好使用浏览器的内置方法来解析 JSON 数据，以确保代码的安全性和数据的合法性。如果浏览器不支持 JSON.parse()，你可以使用 JSON.org 所提供的库。如果不得不使用 eval()，可以尝试用 new Function() 来代替，在 new Function() 中运行的代码会在一个局部函数作用域内执行，因此源码中定义的变量不会自动变成全局变量。