前端js 开发规范
<h1>前端js开发规范</h1>
<h2>一、文件头声明规范</h2>
<p>例如<code>../../string.js</code></p>
<pre><code class="language-javascript">/*
* 字符串处理相关
* @autor zyshi
* @createTime 2025-03-07 15:32
* @lastModifyTime null [如果这个文件你新增了方法或者修改了方法需要加上最后的修改时间]
*/
/**
* 自定义填充字符串 主要用于字符串前面补0
* @param {*} str 原始字符串
* @param {*} l 需要格式化的长度
* @param {*} padding 需要填充的字符
* @return str
*/
export function formatString(str, l = 2, padding = &quot;0&quot;) {
str = str.toString();
if (str.length &lt; l) {
str =
Array.from(new Array(l - str.length))
.fill(padding)
.join(&quot;&quot;) + str;
}
return str;
}
</code></pre>
<p>注意事项：
文件头声明需要标注作者，以及初始声明时间，如有需要修改需要添加最后的修改时间</p>
<h2>二、类创建规范</h2>
<p>下面是个实例：</p>
<pre><code class="language-javascript">
// 定义一个私有的变量
const _nameFn = Symbol(1);
/**
* 测试类声明 类声明必须以大写字母开头
*/
export class TestClass {
// 定义私有字段 私有字段只能在类内部访问 也可以采用symbol来做
#testName = &#039;1&#039;;
/**
* 类参数配置
* @param {*} options
*/
constructor(options){
this.ver = &#039;1.1.1&#039;;
// 内部使用的数据都采用下划线开头
this._data = [];
// 给外部使用的数据不使用下划线开头
this.data = [];
this.options = options;
// 可以通过这种方法访问内部私有方法或者函数
console.log(this[_nameFn]());
}
/**
* 通过这种方法也可以创建内部真正的私有方法 _nameFn 为唯一的变量 不对外暴漏
*/
[_nameFn] (){
return this.ver;
}
/**
* 定义静态方法，静态方法需要加前缀ST
*/
static STversion(){
return this.ver
}
/**
* 类内部使用的方法使用_标识 这种只是针对标识 真正实现可以使用symbol来实现
* @param {*} name
*/
_getName(name){
}
/**
* 类外部使用的方法不适用_标识
* @param {*} name
*/
getName(name){
}
}</code></pre>
<p><strong>总结：</strong></p>
<ol>
<li>类声明必须首字母大写</li>
<li>函数声明采用驼峰式命名</li>
<li>内部方法必须以下换线开头</li>
<li>静态方法必须以ST开头</li>
</ol>
<h2>三、辅助函数文件规范</h2>
<p>1、创建工具辅助函数不要放到一个文件内，如果是字符串相关的就命名为string.js，如果是日期处理相关的就命名为date.js,数组相关的就命名为array.js；
2、辅助函数单个函数的代码不可超过200行，超过200行把关键代码抽出来当做函数处理；
3、辅助函数关键代码区域需要添加注释，如函数内部实现有问题，暂时使用需要添加注释,格式为 <code>// TODD 此处代码暂未完全解决问题需要后续处理 @autor shizhouyu @date 2025-02-25 15:36</code>
下面是个实例代码</p>
<pre><code class="language-javascript">../../max.js 保证一个函数只做一件事，不做多余的事情
/**
* 获取最大值
* @param {*} values
* @param {*} valueof
* @returns 最大值
*/
export default function(values, valueof) {
var n = values.length,
i = -1,
value,
max;
if (valueof == null) {
while (++i &lt; n) { // Find the first comparable value.
if ((value = values[i]) != null &amp;&amp; value &gt;= value) {
max = value;
while (++i &lt; n) { // Compare the remaining values.
if ((value = values[i]) != null &amp;&amp; value &gt; max) {
max = value;
}
}
}
}
}
else {
while (++i &lt; n) { // Find the first comparable value.
if ((value = valueof(values[i], i, values)) != null &amp;&amp; value &gt;= value) {
max = value;
while (++i &lt; n) { // Compare the remaining values.
if ((value = valueof(values[i], i, values)) != null &amp;&amp; value &gt; max) {
max = value;
}
}
}
}
}
return max;
}
</code></pre>
<h2>三、vue 编码规范</h2>
<p>1、组件内部方法需要以fn开头，标识这个方法是在组件内部声明的内部方法；
2、如果方法是数据过滤相关命名规范是fn_filterName；
3、如果方法是computed的方法，命名规范是fn_computedName；
4、组件内部样式和布局编码规范采用bem架构，参考css开发规范；
5、组件内部流动布局或者其他横向布局统一采用flex布局来实现，暂不要用grid布局来实现（浏览器兼容问题较多）；</p>
<p>这是实例代码：</p>
<pre><code class="language-javascript">&lt;template&gt;
&lt;button :class=&quot;ub.b()&quot;&gt;
&lt;span :class=&quot;[ub.e(&#039;label&#039;), disabled ? ub.em(&#039;label&#039;, &#039;disabled&#039;) : &#039;&#039;]&quot;&gt;Test Button&lt;/span&gt;
&lt;/button&gt;
&lt;/template&gt;
&lt;script setup&gt;
import { useBem } from &#039;@/hooks&#039; // 引入bem函数
const ub = useBem(&#039;test-button&#039;);
/*
* 定义一个数据模版过滤的方法
*/
const fn_filterDate = ()=&gt;{
// todd
}
/*
* 定义一个用于计算属性的方法
*/
const fn_computedTest = computed(() =&gt; {
const code = useAppStore().code;
return code?.code;
});
/*
* 定义一个普通的操作函数
*/
const fn_alert = ()=&gt;{
// todd
}
// 定义props
defineProps({
disabled: {
type: Boolean,
default: false
}
})
&lt;/script&gt;
&lt;style lang=&quot;scss&quot;&gt;
@use &#039;@/styles/mixins.scss&#039; as *; // 这里的mixins.scss 就是我们上面写的scss函数
@include b(test-button) {
background: green;
@include e(label) {
color: red;
@include m(disabled) {
color: gray;
}
}
}
&lt;/style&gt;</code></pre>