《Vue前端开发手册》.docxVIP

《 《Vue前端开发手册》2022年-澎3年(可修改编辑) 序言 为了统一前端的技术栈问题，技术开发二部规定开发技术必须以Vue为主。 为了更好的规范公司的前端框架，现以我前端架构师为主，编写以下开发规范，如有不当的地方，欢迎批评教育并慢慢改善该开发文档，谢 谢合作。 我们在做产品不只是实现功能，还要考虑到以后的优化升级，那么就需要一套标准的代码规范，使得代码易懂，养成代码规范的习惯，有助 于程序员自身的成长。那么我们现在就来谈谈，前端代码的规范。 一、编码规范 1、 样式文件命名说明 注：【css处理程序统一使用stylus,并放在“src/common/stylus"目录下】 重置样式：reset.stylus 基础布局样式：base.stylus 公共样式：public.stylus 变量样式：variable.stylus icon样式：icon.stylus 混合类型(函数样式)：mixin.stylus 2、 样式规范化 连字符CSS选择器命名规范 长名称或词组可以使用“中横线”来为选择器命名。不建议使用下划线来命名CSS选择器，例：class=”page index”。 使用16进制表示颜色值，除非表示的是透明度，例：#F62AB5 以下常用的cs s命名规则； hd、 bd、 ft、 tit、 ent、 desc、 info、 left-bar、 search-bar 3、 文件目录 存放其它图片文件夹命名规范：imgaes 存放广告图的文件夹banner 文件名应该全部小写，多个单词以下划线分开 JS文件：驼峰命名方式，首字母小写，例：getUserlnfo.js 确保文档或模板中只包含html，把用到的样式都写到样式表文件中，把脚本都写到s文件中，采用外链引入形式，使页面的结构与行为 分离。 4、 Javascript (1)因vue脚手架有自动编译的功能，为了代码的整洁，每行s代码不必带“；”作为结束，但需遵循一个语句一行的编码方式； 5、 命名规范 文件命名：以英文命名，后缀为js，例：(共用)common.js，其他命名可根据模块需求命名； 变量命名：驼峰式命名，原生JavaScript变量要求是纯英文字母，首字母须小写，变量集中声明，避免全局变量 类命名：首字母大写，驼峰式命名。eg: Studentinfo、Userinfo、ProductInfo； 2022 2022年-2023年(可修改编辑) 函数命名：首字母小写驼峰式命名。eg: getUserInfo; 命名语义化，尽可能利用英文单词或其缩写。 常量：必须采用全大写的命名，且单词见分割，常量通常用于ajax请求url,和一些不会改变的数据; 命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词。 例：const MAX_LENGTH = 20;const URL = '' 变量：必须采用小驼峰式命名法，例:let maxCount = 10; 6、项目命名 全部采用小写方式，以下划线分隔。例：my_project_name 7、函数 命名方法：小驼峰式命名法； 命名规范：前缀应当为动词； 命名建议：可使用常见动词约定。 动词 含义 返回值 can 判断是否可执行某个动 作(权限) 函数返回一个布尔值。true：可执行；false：不 可执行 has 判断是否含有某个值 函数返回一个布尔值。true:含有此值；false： 不含有此值 is 判断是否为某个值 函数返回一个布尔值。true：为某个值；false： 不为某个值 get 获取某个值 函数返回一个非布尔值 set 设置某个值 无返回值、返回是否设置成功或者返回链式对 象 load 加载某些数据 无返回值或者返回是否加载完成的结果 8、 类&构造函数 命名方法：大驼峰式命名法，首字母大写；例：Person 命名规范：前缀为名称。 示例： class Person { public name: string; constructor(name) { = name; } } const person = new Person('mevyn'); 9、 类的成员 类的成员包含： 公共属性和方法：跟变量和函数的命名一样。 私有属性和方法：前缀为_(下划线)，后面跟公共属性和方法一样的命名方式。 示例： class Person { 7 7 . + +. 2022年-2023年(可修改编辑) private _name: string; constructor() { } //公共方法 getName() { return this._name; } //公共方法 setName(name) { this._name = name; } } const person = new Pe