龙之向导外贸网站网址,抖音搜索关键词推广,东莞seo优化平台,大型门户网站最担心的威胁是文章目录 前言命名规范项目命名目录命名文件命名命名严谨性 HTML 书写规范结构、样式、行为分离缩进文件编码语义化IE 兼容模式viewport为移动端设备优化#xff0c;设置可见区域的宽度和初始缩放比例iOS 图标favicon#xff08;网站图标#xff0c;移动端默认可用于添加到桌… 文章目录 前言命名规范项目命名目录命名文件命名命名严谨性 HTML 书写规范结构、样式、行为分离缩进文件编码语义化IE 兼容模式viewport为移动端设备优化设置可见区域的宽度和初始缩放比例iOS 图标favicon网站图标移动端默认可用于添加到桌面一律使用小写元素名关闭所有 HTML 元素Class 与 ID关闭空的 HTML 元素使用小写属性名属性值图片属性空格和等号空行和缩进样式表在 HTML 中的 script 标签省略外链资源 URL 协议部分 CSS 书写规范代码组织Class 和 ID类选择器口诀声明顺序引号使用媒体查询Media query的位置不要使用 import链接的样式顺序使用 vw 作为单位时的简便计算 JavaScript 书写规范命名块级作用域强类型检查变量函数条件语句字符串解构赋值数组对象 Vue 开发相关规范组件规范1、组件名为多个单词2、组件文件名为 pascal-case 格式3、基础组件文件名为 base 开头使用完整单词而不是缩写4、和父组件紧密耦合的子组件应该以父组件名作为前缀命名5、在 Template 模版中使用组件应使用 PascalCase 模式并且使用自闭合组件6、组件的 data 必须是一个函数7、Prop 定义应该尽量详细8、为组件样式设置作用域使用 scoped 属性9、如果特性元素较多应该主动换行 指令都使用缩写形式标签顺序保持一致必须为 v-for 设置键值 keyv-show 与 v-if 选择Vue Router 规范1、页面跳转数据传递使用路由参数2、使用路由懒加载延迟加载机制3、router 中的命名规范4、router 中的 path 命名规范5、router 规范 service 目录规范其他1、尽量不要手动操作 DOM2、删除无用代码因使用了 Git/SVN 版本管理应及时一些调试代码及无用弃用的代码 前言
现代软件架构的复杂性需要协同开发完成如何高效地协同呢无规矩不成方圆无规范难以协同比如制订交通法规表面上是要限制行车权实际上是保障公众的人身安全。对软件来说适当的规范和标准绝不是消灭代码内容的创造性、优雅性而是限制过度个性化以一种普遍认可的统一方式一起做事提升协作效率降低沟通成本。代码的字里行间流淌的是软件系统的血液质量的提升是尽可能少踩坑杜绝踩重复的坑切实提升系统稳定性码出质量。 命名规范
项目命名
全部采用小写方式 以中划线分隔。
正例mall-management-system 反例mall_management-system | mallManagementSystem
目录命名
全部采用小写方式 以中划线分隔有复数结构时要采用复数命名法 缩写不用复数
正例 scripts | styles | components | images | utils | layouts | demo-styles | demo-scripts | img | doc 反例 script | style | demo_scripts | demoStyles | imgs | docs
【特殊】VUE 的项目中的 components 中的组件目录使用 kebab-case 命名
正例 head-search | page-loading | authorized | notice-icon 反例 HeadSearch | PageLoading
【特殊】VUE 的项目中的除 components 组件目录外的所有目录也使用 kebab-case 命名
正例 page-one | shopping-car | user-management 反例 ShoppingCar | UserManagement
文件命名
全部采用小写方式 以中划线分隔
正例 render-dom.js / signup.css / index.html / company-logo.png 反例 renderDom.js / UserManagement.html
命名严谨性
代码中的命名严禁使用拼音与英文混合的方式更不允许直接使用中文的方式。 说明正确的英文拼写和语法可以让阅读者易于理解避免歧义。
! 注意即使纯拼音命名方式也要避免采用
正例henan | luoyang | rmb 等国际通用的名称可视同英文。 反例DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 3
! 杜绝完全不规范的缩写避免望文不知义反例AbstractClass“缩写”命名成 AbsClasscondition“缩写”命名成 condi此类随意缩写严重降低了代码的可阅读性。
HTML 书写规范
结构、样式、行为分离
尽量确保文档和模板只包含 HTML 结构样式都放到样式表里行为都放到脚本里。
缩进
统一两个空格缩进总之缩进统一即可不要使用 Tab 或者 Tab、空格混搭。
文件编码
使用不带 BOM 的 UTF-8 编码。在 HTML 中指定编码 meta charsetutf-8 无需使用 charset 指定样式表的编码它默认为 UTF-8
语义化
没有 CSS 的 HTML 是一个语义系统而不是 UI 系统。
通常情况下每个标签都是有语义的此外语义化的 HTML 结构有助于机器搜索引擎理解另一方面多人协作时能迅速了解开发者意图。
IE 兼容模式
优先使用最新版本的 IE 和 Chrome 内核
meta http-equidX-UI-Compatible contentIEedge,chrome1 /viewport
一般指的是浏览器窗口内容区的大小不包含工具条、选项卡等内容
viewport 是用户网页的可视区域。
手机浏览器是把页面放在一个虚拟的窗口viewport中通常这个虚拟的窗口viewport比屏幕宽这样就不用把每个网页挤到很小的窗口中这样会破坏没有针对手机浏览器优化的网页的布局用户可以通过平移和缩放来看网页的不同部分。
width: 浏览器宽度输出设备中的页面可见区域宽度device-width: 设备分辨率宽度输出设备的屏幕可见宽度initial-scale: 初始缩放比例minimum-scale允许用户缩放到的最小比例。maximum-scale: 最大缩放比例user-scalable用户是否可以手动缩放。
为移动端设备优化设置可见区域的宽度和初始缩放比例
metanameviewportcontentwidthdevice-width, initial-scale1 user-scalableno
/iOS 图标
apple-touch-icon 图片自动处理成圆角和高光等效果;apple-touch-icon-precomposed 禁止系统自动添加效果直接显示设计原图;
meta nameapple-mobile-web-app-capable contentyes /
meta nameapple-mobile-web-app-status-bar-style contentblack /
linkrelapple-touch-icon-precomposedsizes152x152hrefgitbook/images/apple-touch-icon-precomposed-152.png
/favicon网站图标移动端默认可用于添加到桌面
在未指定 favicon 时大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问避免 404必须遵循以下两种种方法之一
在 Web Server 根目录放置 favicon.ico 文件使用 link 指定 faviconSPA 推荐直接使用 base64, 多页模式直接使用相对路径的 ico 文件
linkrelshortcut iconhrefgitbook/images/favicon.icotypeimage/x-icon
/一律使用小写元素名
推荐使用小写字母
混合了大小写的风格是非常糟糕的。开发人员通常使用小写 (类似 XHTML)。小写风格看起来更加清爽。小写字母容易编写。
!-- 推荐 --
sectionp这是一个段落。/p
/section/* 推荐 */
color: #d5d5d5;
/* 不好 */
/* COLOR: #d5d5d5; */关闭所有 HTML 元素
在 HTML5 中, 你不一定要关闭所有元素 (例如 p 元素)但我们建议每个元素都要添加关闭标签。
自闭合self-closing标签无需闭合 ( 例如 img input br hr 等 )可选的闭合标签closing tag需闭合 ( 例如 或 ) 尽量减少标签数量
Class 与 ID
class 应以功能或内容命名不以表现形式命名class 与 id 单词字母小写多个单词组成时采用中划线-分隔使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class
关闭空的 HTML 元素
在 HTML5 中, 空的 HTML 元素必须关闭
!-- 我们可以这么写 --
meta charsetutf-8 /目前在HTML中有以下这些空元素 area base br col colgroup command embed hr img input keygen link meta param source track wbr 使用小写属性名
HTML5 属性名允许使用大写和小写字母但我们要求使用小写字母属性名
同时使用大小写是非常不好的习惯。开发人员通常使用小写 (类似 XHTML)。小写风格看起来更加清爽。小写字母容易编写。
属性值
HTML5 属性值可以不用引号但是我们要求必须使用引号
如果属性值含有空格需要使用引号。混合风格不推荐的建议统一风格。属性值使用引号易于阅读。
图片属性
图片通常使用 alt 属性。 在图片不能显示时它能替代图片显示。
定义好图片的尺寸在加载时可以预留指定空间减少闪烁。
空格和等号
等号前后必须使用空格
!-- 推荐 --
link relstylesheet hrefstyles.css /
!-- 不推荐 --
link rel\ \ stylesheet href\ \ styles.css /空行和缩进
为每个逻辑功能块添加空行这样更易于阅读。缩进使用两个空格不建议使用 TAB。比较短的代码间不要使用不必要的空行和缩进。
样式表
样式表使用简洁的语法格式 ( type 属性不是必须的)
link relstylesheet hrefstyles.css /内嵌样式规则
将左花括号与选择器放在同一行。左花括号与选择器间添加一个空格。使用两个空格来缩进。冒号与属性值之间添加一个空格。逗号和符号之后使用一个空格。每个属性与值结尾都要使用分号。只有属性值包含空格时才使用引号。右花括号放在新的一行。
p.into {font-family: Verdana;font-size: 16em;
}在 HTML 中的 script 标签
标签的 type 属性不是必须的请加上 defer 属性
省略外链资源 URL 协议部分
省略外链资源图片及其它媒体资源URL 中的 http / https 协议使 URL 成为相对地址避免 Mixed Content 问题减小文件字节数。
其它协议ftp 等的 URL 不省略。
CSS 书写规范
代码组织
以组件为单位组织代码段制定一致的注释规范组件块和子组件块以及声明块之间使用一空行分隔子组件块之间三空行分隔如果使用了多个 CSS 文件将其按照组件而非页面的形式分拆因为页面会被重组而组件只会被移动
良好的注释是非常重要的。请留出时间来描述组件component的工作方式、局限性和构建它们的方法。不要让你的团队其它成员 来猜测一段不通用或不明显的代码的目的。
Class 和 ID
使用语义化、通用的命名方式使用连字符 - 作为 ID、Class 名称界定符不要驼峰命名法和下划线避免选择器嵌套层级过多尽量少于 3 级避免选择器和 Class、ID 叠加使用
出于性能考量在没有必要的情况下避免元素选择器叠加 Class、ID 使用。
元素选择器和 ID、Class 混合使用也违反关注分离原则。如果 HTML 标签修改了就要再去修改 CSS 代码不利于后期维护。
类选择器口诀
样式点定义结构类class调用一个或多个开发最常用
类选择器使用.进行标识后面紧跟类名自定义可以理解为给这个标签起一个名字长名称或者词组可以使用中横线来为选择器命名不要使用纯数字、中文等命名尽量使用英文字母来表示命名要有意义尽量使别人一眼就知道这个类名的目的
声明顺序
相关属性应为一组推荐的样式编写顺序保证更好的可读性和可扫描重要
PositioningBox modelTypographicVisual
由于定位positioning可以从正常的文档流中移除元素并且还能覆盖盒模型box model相关的样式因此排在首位。盒模型决定了组件的尺寸和位置因此排在第二位。 其他属性只是影响组件的内部inside或者是不影响前两组属性因此排在后面。 作为最佳实践我们应该遵循以下顺序应该按照下表的顺序
结构性属性
displayposition, left, top, rightoverflow, float, clearmargin, padding
表现性属性
background, borderfont, text
引号使用
url() 、属性选择符、属性值使用双引号。
媒体查询Media query的位置
将媒体查询放在尽可能相关规则的附近。不要将他们打包放在一个单一样式文件中或者放在文档底部。如果你把他们分开了将来只会被大家遗忘。
不要使用 import
与 link 相比import 要慢很多不光增加额外的请求数还会导致不可预料的问题。
替代办法
使用多个 元素通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件其他 CSS 文件合并工具
链接的样式顺序
a:link - a:visited - a:hover - a:activeLoVeHAte
选择字体
在 Web 上应用字体是一门技术同时也是一门艺术. 由于计算机历史发展的原因西文有大量优秀的字体可供选择可对于中文来说就是一项挑战. 主流操作系统提供的本地中文字体极少另一方面中文字体组成的特殊性其体积过于庞大无法良好地使用 webfont. 所以编写健壮的 font-family 是一件需要深思熟虑的事情.
使用 vw 作为单位时的简便计算
以 iphone6 为标准的 750*1334px 的设计稿为例在 scss 中使用如下方法可以直接使用设计稿上面的标志快速编写 css,免于转换计算
function vw($px) {return ($px / 750) * 100vw;
}div {width: vw(101);
}JavaScript 书写规范
命名 采用小写驼峰命名 lowerCamelCase代码中的命名均不能以下划线也不能以下划线或美元符号结束。 Bad: _name | name_ | name$; 方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格必须遵从驼峰形式。 Good: localValue | getHttpMessage() | inputUserId 常量命名全部大写单词间用下划线隔开力求语义表达完整清楚不要嫌名字长。 例子: Good: MAX_STOCK_COUNT; Bad: MAX_COUNT
! 其中 method 方法命名强调 动词 或者 动词名词 形式 附 函数方法常用的动词(点击展开):
// get 获取/set 设置,
// add 增加/remove 删除
// create 创建/destory 移除
// start 启动/stop 停止
// open 打开/close 关闭,
// read 读取/write 写入
// load 载入/save 保存,
// create 创建/destroy 销毁
// begin 开始/end 结束,
// backup 备份/restore 恢复
// import 导入/export 导出,
// split 分割/merge 合并
// inject 注入/extract 提取,
// attach 附着/detach 脱离
// bind 绑定/separate 分离,
// view 查看/browse 浏览
// edit 编辑/modify 修改,
// select 选取/mark 标记
// copy 复制/paste 粘贴,
// undo 撤销/redo 重做
// insert 插入/delete 移除,
// add 加入/append 添加
// clean 清理/clear 清除,
// index 索引/sort 排序
// find 查找/search 搜索,
// increase 增加/decrease 减少
// play 播放/pause 暂停,
// launch 启动/run 运行
// compile 编译/execute 执行,
// debug 调试/trace 跟踪
// observe 观察/listen 监听,
// build 构建/publish 发布
// input 输入/output 输出,
// encode 编码/decode 解码
// encrypt 加密/decrypt 解密,
// compress 压缩/decompress 解压缩
// pack 打包/unpack 解包,
// parse 解析/emit 生成
// connect 连接/disconnect 断开,
// send 发送/receive 接收
// download 下载/upload 上传,
// refresh 刷新/synchronize 同步
// update 更新/revert 复原,
// lock 锁定/unlock 解锁
// check out 签出/check in 签入,
// submit 提交/commit 交付
// push 推/pull 拉,
// expand 展开/collapse 折叠
// begin 起始/end 结束,
// start 开始/finish 完成
// enter 进入/exit 退出,
// abort 放弃/quit 离开
// obsolete 废弃/depreciate 废旧,
// collect 收集/aggregate 聚集块级作用域
let 取代 var在 let 和 const 之间建议优先使用 const尤其是在全局环境不应该设置变量只应设置常量。
强类型检查 代替
0 false; // true
0 false; // false
2 2; // true
2 2; // false// 例子
const value 500;
if (value 500) {console.log(value);
}if (value 500) {console.log(value);
}变量
1、给变量命名时应该要使变量名具有代表意图的象征使人易于搜索并且容易理解。
Bad:
let daysSLV 10;
let y new Date().getFullYear();let ok;
if (user.age 30) {ok true;
}Good:
const MAX_AGE 30;
let daysSinceLastVisit 10;
let currentYear new Date().getFullYear();
...
const isUserOlderThanAllowed user.age MAX_AGE;
2、不要在变量名中增加没必要额外的单词
Bad:
let nameValue;
let theProduct;Good:
let name;
let product;3、不要强制记忆变量名的上下文
Bad:
const users [John, Marco, Peter];
users.forEach((u) {doSomething();doSomethingElse();// ...register(u);
});Good:
const users [John, Marco, Peter];
users.forEach((user) {doSomething();doSomethingElse();// ...register(user);
});4、变量名不要加上下文重复的单词
Bad:
const user {userName: John,userSurname: Doe,userAge: 28
};
...
user.userName;Good:
const user {name: John,surname: Doe,age: 28
};
...
user.name;函数
1、函数名应该是动词或者短语代表某种行为描述它们在做什么
Bad:
function notif(user) {// ...
}Good:
function notifyUser(emailAddress) {// ...
}2、避免使用大量的参数理想的情况就是用两个或者更少的参数。参数越少测试就越容易
Bad:
function getUsers(fields, fromDate, toDate) {// implementation
}Good:
function getUsers({ fields, fromDate, toDate }) {// implementation
}getUsers({fields: [name, surname, email],fromDate: 2019-01-01,toDate: 2019-01-18
});3、一个函数应该做一件事避免在一个函数中执行多个操作。
Bad:
function notifyUsers(users) {users.forEach((user) {const userRecord database.lookup(user);if (userRecord.isVerified()) {notify(user);}});
}Good:
function notifyVerifiedUsers(users) {users.filter(isUserVerified).forEach(notify);
}function isUserVerified(user) {const userRecord database.lookup(user);return userRecord.isVerified();
}4、使用 Object.assign 设置默认对象。
Bad:
const shapeConfig {type: cube,width: 200,height: null
};
function createShape(config) {config.type config.type || cube;config.width config.width || 250;
}
createShape(shapeConfig);Good:
const shapeConfig {type: cube,width: 200// ...
};function createShape(config) {config Object.assign({type: cube,width: 250// ...},config);// ...
}createShape(shapeConfig);5、不要使用标志记作为参数因为它们告诉你该函数正在做的比它应该做的更多。
Bad:
function createFile(name, isPublic) {if (isPublic) {fs.create(./public/${name});} else {fs.create(name);}
}Good:
function createFile(name) {fs.create(name);
}function createPublicFile(name) {createFile(./public/${name});
}6、不要污染全局变量。如果需要扩展现有对象请使用 ES6 类和继承而不是在现有对象的原型链上创建函数
Bad:
Array.prototype.myFunc function myFunc() {// ...
};Good:
class SuperArray extends Array {myFunc() {// ...}
}7、重要函数或者类等都要添加头描述
条件语句
1、使用条件语句尽量短点。这可能是微不足道的但值得一提。此方法仅用于布尔值并且如果您确定该值不是未定义的或为 null。
Bad:
if (isValid true) {// ...
}if (isValid false) {// ...
}Good:
if (isValid) {// ...
}if (!isValid) {// ...
}2、尽可能避免 switch 分支请改用多态和继承。
字符串
1、应使用数组保存字符串片段使用时调用 join 方法。避免使用或的方式拼接较长的字符串每个字符串都会使用一个小的内存片段过多的内存片段会影响性能
2、静态字符串一律使用单引号或反引号不使用双引号。动态字符串使用反引号。
解构赋值
1、使用数组成员对变量赋值时优先使用解构赋值。
Bad:
const arr [1, 2, 3, 4];const first arr[0];
const second arr[1];Good:
const [first, second] arr;2、函数的参数如果明确是对象的成员优先使用解构赋值。
3、如果函数返回多个值优先使用对象的解构赋值而不是数组的解构赋值。这样便于以后添加返回值以及更改返回值的顺序。
4、不要在函数体内使用 arguments 变量使用扩展运算符...代替。
数组
1、使用扩展运算符...拷贝数组。使用Array.from方法将类似数组的对象转为数组。
const a1 [1, 2, 3];
const b1 [...a1];const h3List Array.from(document.querySelectorAll(h3));2、如果单纯判断每个数组元素存在。使用Array.includes方法。
const a1 [1, 2, 3];
const b1 [...a1];const h3List Array.from(document.querySelectorAll(h3));对象
1、尽量不要使用 new 命令改用 Object.create() 或者对象字面量
// 对象字面量
const lang { name: Javascript };const lang Object.create({ name: JavaScript });Vue 开发相关规范
vue 项目规范以 Vue 官方规范 https://cn.vuejs.org/v2/style-guide/ 中的 A 规范为基础在其上面进行项目开发故所有代码均遵守该规范。
! 请仔细阅读 Vue 官方规范切记此为第一步。
组件规范
1、组件名为多个单词
Good:
export default {name: TodoItem// ...
};Bad:
export default {name: Todo,// ...
}
export default {name: todo-item,// ...
}2、组件文件名为 pascal-case 格式
Good:
components/|- my-component.vueBad:
components/|- myComponent.vue|- MyComponent.vue3、基础组件文件名为 base 开头使用完整单词而不是缩写
Good:
components/|- base-button.vueBad:
components/|- MyButton.vue4、和父组件紧密耦合的子组件应该以父组件名作为前缀命名
Good:
components/|- todo-list.vue|- todo-list-item.vue|- todo-list-item-button.vue|- user-profile-options.vue 完整单词Bad:
components/|- TodoList.vue|- TodoItem.vue|- TodoButton.vue|- UProfOpts.vue 使用了缩写5、在 Template 模版中使用组件应使用 PascalCase 模式并且使用自闭合组件
Good:
!-- 在单文件组件、字符串模板和 JSX 中 --
MyComponent /
Rowtable :columndata//RowBad:
my-component / rowtable :columndata//row6、组件的 data 必须是一个函数
当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)它的值必须是返回一个对象的函数。 因为如果直接是一个对象的话子组件之间的属性值会互相影响。
7、Prop 定义应该尽量详细
必须使用 camelCase 驼峰命名必须指定类型必须加上注释表明其含义必须加上 required 或者 default两者二选其一如果有业务需要必须加上 validator 验证
Good:
props: {// 组件状态用于控制组件的颜色status: {type: String,required: true,validator: function (value) {return [succ,info,error].indexOf(value) ! -1}},// 用户级别用于显示皇冠个数userLevel{type: String,required: true}
}8、为组件样式设置作用域使用 scoped 属性
9、如果特性元素较多应该主动换行
Good:
MyComponentfooabarbbazcfooabarbbazcfooabarbbazc
/指令都使用缩写形式
指令推荐都使用缩写形式(用 : 表示 v-bind: 、用 表示 v-on: 和用 # 表示 v-slot:) Good:
inputinputonInputfocusonFocusBad:
inputv-on:inputonInputfocusonFocus标签顺序保持一致
// 保持以下顺序
template.../template
script.../script
style.../style必须为 v-for 设置键值 key
v-show 与 v-if 选择
如果运行时需要非常频繁地切换使用 v-show 如果在运行时条件很少改变使用 v-if。
Vue Router 规范
1、页面跳转数据传递使用路由参数
页面跳转例如 A 页面跳转到 B 页面需要将 A 页面的数据传递到 B 页面推荐使用 路由参数进行传参而不是将需要传递的数据保存 vuex然后在 B 页面取出 vuex 的数据因为如果在 B 页面刷新会导致 vuex 数据丢失导致 B 页面无法正常显示数据。
let id 123;
this.$router.push({ name: userCenter, query: { id } });2、使用路由懒加载延迟加载机制
3、router 中的命名规范
path、childrenPoints 命名规范采用 kebab-case 命名规范尽量 vue 文件的目录结构保持一致因为目录、文件名都是 kebab-case这样很方便找到对应的文件
name 命名规范采用 KebabCase 命名规范且和 component 组件名保持一致因为要保持keep-alive特性keep-alive按照 component 的name进行缓存所以两者必须高度保持一致
{path: /n/task-calling,component: _import(tasks/calling/index),name: taskCalling,desc: 外呼下单,},4、router 中的 path 命名规范
path 除了采用 kebab-case 命名规范以外必须以 / 开头即使是 children 里的 path 也要以 / 开头
目的经常有这样的场景某个页面有问题要立刻找到这个 vue 文件如果不用以/开头path 为 parent 和 children 组成的可能经常需要在 router 文件里搜索多次才能找到而如果以/开头则能立刻搜索到对应的组件
5、router 规范
router 目录应根据项目进行业务分层进行模块拆分并尽量与 views 模块保持一致。
// router/index.js
import Router from vue-router;
import tasks from ./modules/tasks;
import sys from ./modules/sys;
import business from ./modules/business;
import workbench from ./modules/workbench;// 路由定义使用说明:
// 代码中路由统一使用name属性跳转
const router new Router({mode: hash,routes: [{path: /404,component: _import(error/404),name: 404,desc: 404未找到,},{path: /login,component: _import(login/index),name: login,desc: 登录,},{path: /,component: _import(home/index),name: home,},/*---- 系统管理 ------------------------------------------------------------- */...sys,/*---- 业务管理 ------------------------------------------------------------- */...business,/*---- 个人工作台 ------------------------------------------------------------- */...workbench,/*---- 任务执行 ------------------------------------------------------------- */...tasks,]
};service 目录规范
service 目录存放与后端接口相关的模块包括接口路径定义请求相关设置。接口定义必须按照后端结构进行定义。
// 实例
export const common {captcha: captcha.jpg,login: sys/login,logout: sys/logout
};export const sys {user: {list: sys/user/list,info: sys/user/info,updatePassword: sys/user/password,add: sys/user/save,update: sys/user/update,del: sys/user/delete,getUserInfo: sys/user/getUserInfo},menu: {nav: sys/menu/nav,select: sys/menu/select,list: sys/menu/list,info: sys/menu/info,add: sys/menu/save,update: sys/menu/update,del: sys/menu/delete}
};其他
1、尽量不要手动操作 DOM
2、删除无用代码因使用了 Git/SVN 版本管理应及时一些调试代码及无用弃用的代码
