当前位置: 首页 > Web前端 > HTML5

[规范]前端开发规范1.0

时间:2023-04-05 18:56:24 HTML5

1.项目目录结构src---assets---静态资源文件jscssimages---imagesclassificationbynewfolderofmodulescomponents---globalpubliccomponentshttp--请求文件api.js---接口存储http.js---请求方式封装url---测试/在线地址jsonData---本地json数据router---路由文件存储---vuex数据文件utils---公共方法/组件注册common.js---模块方法(少量使用,无需绑定实例,增加项目负担)index.js---全局方法/组件/directiveregistryviews---页面模块(按文件分类的模块)Tips:将模块标题注释写在组件头部,方便别人快速定位。2.命名方式Class/idname:按模块类型或结构方式命名,多义带“-”连接示例1.模块方式menu/banner/home-banner2.结构方式main/wrap/box/left-box/top-wrap方法名体现具体含义,符合“驼峰命名法”的方法,可以翻译成驼峰连接的话例:getHomeList()/setTableFomat()/selectType()对应:获取首页列表/settableformat/typeswitchingTips:在方法头部添加注释,方便别人理解和快速定位变量名。使用上面的“驼峰案例”。1、常量全部大写,多重含义用下划线连接;2.多个类名避免多行声明,使用ES6声明:例子:let[str,obj,num]=['string',{},0]3.模块和子组件划分模块包含多个重复块,分成子组件进行介绍和使用,方便后续维护,避免代码臃肿。四、css使用sass一个css代码块被多次使用,提取出来,继承使用,易于维护。支持建议:前端开发中常用的那些缩写>>>作者:梁顺版本:1.0