关于前端:前端开发规范

29次阅读

共计 714 个字符,预计需要花费 2 分钟才能阅读完成。

一、我的项目目录构造

src ---
   assets --- 动态资源文件
        js
        css
        images --- 按模块新建文件夹进行图片分类   
   components --- 全局公共组件
   http --- 申请文件
       api.js --- 接口寄存
       http.js --- 申请办法封装
       url --- 测试 / 在线地址
   jsonData --- 本地 json 数据
   router --- 路由文件
   store ---vuex 数据文件
   utils --- 公共办法 / 组件注册处
      common.js --- 模块办法(大量用到的,没必要绑定到实例上,减少我的项目的累赘)index.js --- 全局办法 / 组件 / 指令注册处
   views --- 页面模块(按文件分类模块)

二、命名形式
类 /id 名:以模块类型 或 构造形式命名,多意义以“-”连贯
示例
1、模块形式 menu / banner / home-banner
2、构造形式 main / wrap / box / left-box / top-wrap

办法名
体现具体意思恪守“驼峰命名法”形式,可翻译成单词进行驼峰连贯
示例:getHomeList() / setTableFomat() / selectType()
对应:获取首页列表 / 设置表格格局 / 类型切换
Tips:办法头部增加正文,便于别人了解及疾速定位

变量名
同上应用“驼峰命名法”
1、常量全大写,多意义用下划线连贯;
2、多个类名防止多行申明,采纳 ES6 申明形式:
示例:

let [str , obj , num] = ['字符串' , {} , 0 ]

三、模块、子组件划分
模块中蕴含多个组块,划分成子组件引入应用,以便于后续保护防止代码臃肿。

四、css 应用 sass
一个 css 代码块被应用屡次,提取进去,采纳继承形式应用,便于保护。

Author:LiangShun
Version:1.0

正文完
 0