前端开发规范

篮宝石 發表於 2021-7-9 13:51:00

<pre>1.缩进：前端代码应当采用空格而非 tab 进行缩进，每次缩进为 2 个空格。 </pre>
<pre>2.文件名命名规范 </pre>
<pre>1）文件名称统一用小写的英文字母、数字和下划线的组合如：node_modules(除了模块文件以外) 如： </pre>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">├── systemSetting // document
│ ├── systemSetting.vue // vue
│ ├── systemSetting.js // js
│ ├── systemSetting.scss // scss
</pre>
</div>
　
2）文件和目录使用小驼峰命名，尽量使用名词，如：eMall、validator.js
<pre>3）css文件命名：后缀.css。通用common.css，初始化base.css，首页index.css，其他页面按照对应的html命名 4）Js文件命名：英文命名，后缀.js.通用common.js，初始化base.js。其他页面按照对应的html命</pre>
<pre></pre>
<pre>3.CSS规范 </pre>
<pre>1）尽可能将所有css写在外部样式表里面。 2）不要在外部样式表里面利用@important导入其他css文件。 3）避免使用css表达式。 4）非必要情况下不要使用元素标签名和ID或者class组合 5）选择器的顺序应与元素保持一致。 6）属性声明的顺序：遵循先布局后样式，特殊地，伪类元素的content应放于最前面。参考顺序：定位→布局→盒子→尺寸→文本排版→视觉外观。 定位：position（包括top、right、bottom、left、z-index）、float、clear等； 布局：display（包括vertical-align、弹性布局的flex-direction、align-items等）、overflow等； 盒子：box-sizing、margin、padding、border等； 尺寸：width、height、line-height等； 文本排版：font、text-align、white-space等； 视觉外观：transform、color、border-radius、transition、background等；</pre>
<pre></pre>
<pre>4.CSS预处理器(scss) </pre>
<pre>1) 使用嵌套选择器，缩进2个空格 2) 变量、宏等命名, 变量、宏、继承、占位符统一使用-分隔短语，函数使用首字母小写的驼峰。例如： </pre>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">$warn-color:#f30; //错误提示颜色
 //文字超出一行显示省略号
 %no-break {
 ...
 }
 //px转rem
 @function pxToRem($px) {
 ...
 }
</pre>
</div>
<pre></pre>
　　
<pre> 3）选择器顺序遵循先结构后声明, 参考顺序：当前选择器属性 ->伪元素-> 子选择器->伪类->声明样式。 </pre>
<pre>5.javaScript规范 </pre>
<pre>1）变量前缀应该使用名词、名字体现所属类型的小驼峰格式命名。例如：dataType、menuVisible 2）函数前缀应该使用动词的小驼峰格式命名。常见开始单词有get（获取）、set（设置）、is（判断）、load（加载）、calc（计算）、handle（处理）。例如：isEmpty、calcAge； 3）常量使用全大写和_命名。例如：var MAX_COUNT = 10; 4）构造函数大驼峰式命名法，首字母大写。 5）类成员，公共属性和方法，跟变量和函数的命名一样；私有属性和方法，前缀为_(下划线)，后面跟公共属性和方法一样的命名方式。 6）代码提交前去掉console、debugger。 7）使用字面量创建对象、数组 8）除需要转义的情况外，字符串统一使用单引号，例如： console.log('hello there') $("<div class='box'>") 9）检查 NaN 的正确姿势是使用 isNaN() </pre>
<pre>6.ES6规范 </pre>
<pre>1）块级作用域使用let取代var。 2）全局常量和线程安全推荐const。 3）模块使用import取代require。 4）使用模板字符串代替字符串连接。例如： let msg = `金额必须在${min}和${max}之内！`; 5）建议使用箭头函数</pre>
<pre></pre>
<pre>7.vue规范 </pre>
<pre>1) 组件命名:使用短横线或者首字母大写方式命名。例如： Vue.component('test-component-name',{/*......*/}) 2）v-on、v-bind指定要求使用简写 </pre>
<pre>8.目录结构命名规范 </pre>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;">├── build // 构建相关
 ├── public // 配置相关
 ├── src // 源代码
 │ ├── api // 所有请求
 │ ├── assets // 主题字体等静态资源
 │ ├── components // 全局公用组件
 │ ├── directive // 全局指令
 │ ├── filtres // 全局 filter
 │ ├── icons // 项目所有 svg icons
 │ ├── lang // 国际化 language
 │ ├── mock // 项目mock 模拟数据
 │ ├── router // 路由
 │ ├── store // 全局 store管理
 │ ├── styles // 全局样式
 │ ├── utils // 全局公用方法
 │ ├── vendor // 公用vendor
 │ ├── views // view
 │ │ ├── systemSetting // document
 │ │ │ ├── systemSetting.vue // vue
 │ │ │ ├── systemSetting.js // js
 │ │ │ ├── systemSetting.scss // scss
 │ ├── App.vue // 入口页面
 │ ├── main.js // 入口加载组件初始化等
 │ └── permission.js // 权限管理
 ├── static // 第三方不打包资源
 │ └── Tinymce // 富文本
 ├── .babelrc // babel-loader 配置
 ├── eslintrc.js // eslint 配置项
 ├── .gitignore // git 忽略项
 ├── favicon.ico // favicon图标
 ├── index.html // html模板
 └── package.json // package.json
</pre>
</div>
　　
<pre>9.this的指向命名统一为_this;</pre>
<pre>10.接口地址统一规范为：以一个菜单栏为标准，该菜单栏下所有页面接口都放在同一个js文件。</pre>
<pre> </pre> 
来源：https://www.cnblogs.com/vicky-li/p/14990223.html

頁: [1]

琼殿技术论坛's Archiver

前端开发规范