简介
为了方便查询修改静态资源,故以三端(PC端、APP端、WAP端)的模块为准,要修改三端统一修改,以便信息统一,请知悉~~
PC端访问地址:http://www.niwodai.com/index.do?method=tg&artId= ID
移动端访问地址:https://m.niwodai.com/index.do?method=acReg&artId= ID
理财端-新手启航
模块名称 | 页面名称 | APP | WAP | PC | 备注说明 |
---|---|---|---|---|---|
新手起航 | 新手启航 | 3800000549111182 | 3800001227739920 | WAP端需归到APP,请知悉~ | |
嘉财有道 | 3800001651551391 | 3800000518862250 | 暂无 | WAP端需归到APP,请知悉~ | |
安全保障 | 1823227140863387 | 1823227140863387 | 3800001227747339 | ||
债权投资 | 3800001651553691 | 3800000446879845 | |||
为什么在你我贷投资 | 5820160000007999 | 暂无 | 3800001227704802 | ||
新手福利 | 3800001221682221 | 暂无 | 暂无 | ||
资金安全 | 3800000518857541 | 3800000518838902 | |||
关于你我贷 | 3800000518863757 |
理财端-运营位
模块名称 | 页面名称 | APP | WAP | PC | 备注说明 |
---|---|---|---|---|---|
产品之运营位 | 新手专享30 | 3800000488693677 | 同APP | 3800000488680062 | WAP端已同一到APP,请知悉~ |
新手专享90 | 5820160000010301 | 同APP | 5820160000010299 | ||
月月升 | 1823227250661222 | 同APP | 1823227250395213 | ||
季季丰 | 1823227250661542 | 同APP | 1823227250471785 | ||
双季赢 | 1823227250662178 | 同APP | 1823227250475911 | ||
嘉利宝 | 1823227250662178 | 同APP | 1823227250496809 | ||
嘉财宝 | 5820160000006175 | 同APP | 5820160000006168 | ||
月月盈 | 1823227250662225 | 1823227250477379 | |||
理财宝 | |||||
体验金 |
理财端-服务介绍
模块名称 | 页面名称 | APP | WAP | PC | 备注说明 |
---|---|---|---|---|---|
产品之服务介绍 | 新手专享30 | 5820160000003231 | 同APP | 5820160000004212 | WAP端已同一到APP,请知悉~ |
新手专享90 | 5820160000008991 | 同APP | 5820160000008986 | ||
月月升 | 5820160000003221 | 同APP | 5820160000004216 | ||
季季丰 | 5820160000003223 | 同APP | 5820160000004402 | ||
双季赢 | 5820160000003225 | 同APP | 5820160000004406 | ||
嘉利宝 | 5820160000003229 | 同APP | 5820160000004414 | ||
嘉财宝 | 5820160000005981 | 同APP | 5820160000005969 | ||
月月盈 | 5820160000003227 | 同APP | 5820160000004410 | ||
理财宝 | |||||
体验金 |
理财端-安全保障
模块名称 | 页面名称 | APP | WAP | PC | 备注说明 |
---|---|---|---|---|---|
产品之安全保障 | 新手专享30 | 5820160000004265 | 同APP | 5820160000004214 | WAP端已同一到APP,请知悉~ |
新手专享90 | 5820160000008993 | 同APP | 5820160000008988 | ||
月月升 | 5820160000004255 | 同APP | 5820160000004218 | ||
季季丰 | 5820160000004257 | 同APP | 5820160000004404 | ||
双季赢 | 5820160000004259 | 同APP | 5820160000004408 | ||
嘉利宝 | 5820160000004263 | 同APP | 5820160000004416 | ||
嘉财宝 | 5820160000005988 | 同APP | 5820160000005971 | ||
月月盈 | 5820160000004261 | 同APP | 5820160000004412 | ||
理财宝 | |||||
体验金 |
理财端-充值提现
模块名称 | 页面名称 | APP | WAP | PC | 备注说明 |
---|---|---|---|---|---|
充值&提现 | 快捷全部银行 | 3800001928554288 | 同APP | 暂无 | PC端在开那边,知悉~~~ |
京东全部银行 | 3800001928314454 | 同APP | 暂无 | ||
限额说明 | 3800001928522529 | 同APP | 暂无 | ||
提现说明 | 5820160000009096 | 同APP | 暂无 |
理财端-会员等级
模块名称 | 页面名称 | APP | WAP | PC | 备注说明 |
---|---|---|---|---|---|
会员等级 | 会员权益 | /Public/Static/nwd/wap/member/index.html | 同APP | 暂无 | 三端可考虑统一存放,沟通协调中~~ |
会员说明 | /Public/Static/nwd/wap/member/Vipabout.html | 同APP | 5820160000008692 | ||
积分养成 | 5820160000007197 | 同APP | 暂无 | ||
积分规则 | 3800000692335390 | 同APP |
信息披露
模块名称 | 页面名称 | APP | WAP | PC | 备注说明 |
---|---|---|---|---|---|
信息披露 | 公司简介 | /Public/Static/nwd/website/wap/disclosure/page.html | 暂无 | /Public/Static/nwd/website/pc/disclosure/index.html | WAP与APP可同步 |
产品信息 | /Public/Static/nwd/website/wap/disclosure/proshow.html | 暂无 | /Public/Static/nwd/website/pc/disclosure/proshow.html | ||
风控体系 | /Public/Static/nwd/website/wap/disclosure/windcontrolsystem.html | /Public/Static/nwd/website/pc/disclosure/windcontrolsystem.html | |||
安全体系 | /Public/Static/nwd/website/wap/disclosure/fundsecurity.html | /Public/Static/nwd/website/pc/disclosure/fundsecurity.html | |||
实时数据 | /Public/Static/nwd/website/wap/disclosure/report.html | /Public/Static/nwd/website/pc/disclosure/data.html | |||
运营报告 | /Public/Static/nwd/website/wap/disclosure/responsibility.html | /Public/Static/nwd/website/pc/disclosure/report.html | |||
大事记 | 暂无 | /Public/Static/nwd/website/pc/disclosure/event.html | |||
审计报告 | 暂无 | /Public/Static/nwd/website/pc/disclosure/auditreport.html | |||
关于我们 | 暂无 | /Public/Static/nwd/website/pc/disclosure/speech.html | |||
社会责任 | /Public/Static/nwd/website/wap/disclosure/responsibility.html | 暂无 | |||
人文关怀 | /Public/Static/nwd/website/wap/disclosure/employee.html | 暂无 | |||
合作伙伴 | /Public/Static/nwd/website/wap/disclosure/cooperative.html | 暂无 | |||
招贤纳士 | 暂无 | http://niwodai.gllue.me/ | |||
联系我们 | /Public/Static/nwd/website/wap/disclosure/contact.html | 暂无 |
常规活动
模块名称 | 页面名称 | APP | WAP | PC | 备注说明 | |
---|---|---|---|---|---|---|
常规活动 | 推荐有奖 | 推荐有奖主页 | 5820160000014831 &type=app | 5820160000014831 &type=wap | 5820160000014842 | WAP和APP根据参数来定 |
注册页 | 5820160000015243 | 5820160000014858 | ||||
有奖任务 | 花积分 | https://app-api.niwodai.com/v4.0/mobile/webview/luckdraw/luckDrawIndex ?uid=1850212735544667&sign=b7465495b293653667800ff4e7087108&key=58 |
暂无 | 暂无 | ||
日日赢 | 5820160000013543 | |||||
积分兑换 | 暂无 | 暂无 | 暂无 | |||
会员日抽奖(未开始) | 5820160000017319 | 暂无 | 暂无 | |||
会员日抽奖(当天) | 5820160000017310 | 暂无 | 暂无 | |||
会员日分享 | 5820160000017304 | 暂无 | 暂无 | |||
任务列表() | 开发中 | 开发中 |
协议
模块名称 | 页面名称 | 移动端(APP、WAP) | PC | 备注说明 | |
---|---|---|---|---|---|
协议 | 理财 | 注册协议 | 3800000704969078 | 同APP | 三端统一 |
新手专享30 | /Public/Static/nwd/website/agreement/nwd_service_csd.html | 同APP | |||
新手专享90 | /Public/Static/nwd/website/agreement/nwd_service_newuser.html | 同APP | |||
月月升 | /Public/Static/nwd/website/agreement/nwd_service_yys.html | 同APP | |||
季季丰 | /Public/Static/nwd/website/agreement/nwd_service_jjf.html | 同APP | |||
双季赢 | /Public/Static/nwd/website/agreement/nwd_service_sjy.html | 同APP | |||
嘉利宝 | /Public/Static/nwd/website/agreement/nwd_service_jlb.html | 同APP | |||
嘉薪宝 | /Public/Static/nwd/website/agreement/nwd_service_jxb.html | 同APP | |||
嘉财宝 | /Public/Static/nwd/website/agreement/nwd_service_jsb.html | 同APP | |||
风险告知书 | /Public/Static/nwd/website/agreement/nwd_service_safe.html | 同APP | |||
嘉速贷 | 借款协议、信用咨询及管理服务协议之附件 | /Public/Static/nwd/website/agreement/jsd/nwd_service_jsd_xiey.html | 同APP | ||
借款协议 | /Public/Static/nwd/website/agreement/jsd/nwd_service_jsd_xiey_1.html | 同APP | |||
信用咨询协议 | /Public/Static/nwd/website/agreement/jsd/nwd_service_jsd_xinyong.html | 同APP | |||
嘉卡贷 | 借款协议 | /Public/Static/nwd/website/agreement/online/jkd/nwd_service_jkd_xieyi_1.html | 同APP | ||
信用咨询管理协议 | /Public/Static/nwd/website/agreement/online/jkd/nwd_service_jkd_xinyong_1.html | 同APP | |||
嘉英贷 | 借款协议 | /Public/Static/nwd/website/agreement/online/jyd/nwd_service_jyd_xieyi_1.html | 同APP | ||
信用咨询管理协议 | /Public/Static/nwd/website/agreement/online/jyd/nwd_service_jyd_xinyong_1.html | 同APP | |||
秒啦 | 借款协议 | /Public/Static/nwd/website/agreement/online/ml/nwd_service_ml_xieyi_1.html | 同APP | ||
信用咨询管理协议 | /Public/Static/nwd/website/agreement/online/ml/nwd_service_ml_xinyong_1.html | 同APP | |||
嘉系列 (房车英保) |
借款协议 | /Public/Static/nwd/website/agreement/online/line/nwd_service_online_xieyi_1.html | 同APP | ||
信用咨询管理协议 | /Public/Static/nwd/website/agreement/online/line/nwd_service_online_xinyong_1.html | 同APP | |||
协议附件 | /Public/Static/nwd/website/agreement/online/enclosure/nwd_service_xieyi.html | 同APP | |||
宅抵贷(对私) | 借款协议 | /Public/Static/nwd/website/agreement/online/zdd_s/nwd_service_zdd_xieyi01.html | 同APP | ||
信用咨询协议 | /Public/Static/nwd/website/agreement/online/zdd_s/nwd_service_zdd_xinyong.html | 同APP | |||
协议附件 | /Public/Static/nwd/website/agreement/online/zdd_s/nwd_service_fyd_xieyi.html | 同APP | |||
宅抵贷(对公) | 借款协议 | /Public/Static/nwd/website/agreement/online/zdd_g/nwd_service_zdd_xieyi01.html | 同APP | ||
信用咨询协议 | /Public/Static/nwd/website/agreement/online/zdd_g/nwd_service_zdd_xinyong.html | 同APP | |||
协议附件 | /Public/Static/nwd/website/agreement/online/zdd_g/nwd_service_fyd_xieyi.html | 同APP | |||
精英贷 | 借款协议 | /Public/Static/nwd/website/agreement/online/line/nwd_service_online_xieyi_1.html | 同APP | ||
信用咨询协议 | /Public/Static/nwd/website/agreement/online/jyd_new/nwd_service_jyd_xinyong.html | 同APP | |||
协议附件 | /Public/Static/nwd/website/agreement/online/jyd_new/nwd_service_jyd_xieyi.html | 同APP | |||
X贷 | 借款协议 | /Public/Static/nwd//website/agreement/online/xd/xd_confirm_manager.html | 同APP | ||
信用咨询与管理服务协议 | /Public/Static/nwd//website/agreement/online/xd/xd_confirm_loan.html | 同APP | |||
秒短期 | 借款协议(秒短期) | /Public/Static/nwd/website/agreement/mdq/nwd_service_mdq_xieyi.html | 同APP | ||
信用咨询与管理服务协议 | /Public/Static/nwd/website/agreement/mdq/nwd_service_mdq_xinyong.html | 同APP | |||
债权转让 | 宅抵贷(协议) | /Public/Static/nwd/website/agreement/online/zdd/nwd_service_zdd_xieyi_1.html | 同APP | ||
房易贷(协议) | /Public/Static/nwd/website/agreement/online/xyd/nwd_service_zdd_xinyong_1.html | 同APP | |||
B2B | 南粤银行(信用协议) | /Public/Static/nwd/website/agreement/online/bank/xinyong_nanao.html | 同APP | ||
盘县银行(信用协议) | /Public/Static/nwd/website/agreement/online/bank/xinyong_panxian.html | 同APP | |||
瑞丰银行-借款合同 | /Public/Static/nwd/website/agreement/online/rf/nwd_service_rf_jiekuan.html | 同APP | |||
瑞丰银行-信用咨询与服务协议 | /Public/Static/nwd/website/agreement/online/rf/nwd_service_rf_xinyong.html | 同APP | |||
征信授权协议 | 授权书 | /Public/Static/nwd//website/agreement/online/shouquan/nwd_service_shouquanshu.html | 同APP | ||
授权协议 | /Public/Static/nwd/website/agreement/bank/nwd_service_user.html | 同APP | |||
资金账户三方协议 | /Public/Static/nwd/website/agreement/bank/nwd_service_bank.html | 同APP | |||
I复贷 | 借款协议 | /Public/Static/nwd/website/agreement/online/ifudai/nwd_ifudai_jiekuan.html | 同APP | ||
信用咨询及管理服务协议 | /Public/Static/nwd/website/agreement/online/ifudai/nwd_ifudai__xinyong_1.html | 同APP |
短链&APP(schema)
模块名称 | 页面名称 | APP | WAP | PC | 备注说明 | |
---|---|---|---|---|---|---|
短链 APP(schema) |
理财产品 | 新手专享30 | niwodai://intebid/detail?periodSign=M1 | /financial/financial_CSD.html | /financial/financial_CSD.html | |
新手专享90 | niwodai://intebid/detail?periodSign=M301 | /financial/financial_CSJ.html | /financial/financial_CSJ.html | |||
月月升 | niwodai://intebid/detail?periodSign=J1 | /financial/financial_H.html | /financial/financial_H.html | |||
季季丰 | niwodai://intebid/detail?periodSign=M3 | /financial/financial_D.html | /financial/financial_D.html | |||
双季赢 | niwodai://intebid/detail?periodSign=M6 | /financial/financial_G.html | /financial/financial_G.html | |||
嘉利宝 | niwodai://intebid/detail?periodSign=M12 | /financial/financial_F.html | /financial/financial_F.html | |||
嘉财宝 | niwodai://intebid/detail?periodSign=M18 | /intebid/inteBid_JCB.html | /intebid/inteBid_JCB.html | |||
月月盈 | niwodai://newestFinancialDetails?product_num=3 | |||||
嘉薪宝 | niwodai://salaryTreasure/customize 5820160000016224(宣传页) |
/Public/Static/nwd/app/5.0/product/product_jxb.html (介绍页) 5820160000017357(宣传页) |
/Public/Static/nwd/website/pc/product/jxb/proshow_jxb.html 5820160000016221(宣传页) |
|||
体验金 | niwodai://newestFinancialDetails?product_num=7 | /TYB/moneyTreasureDetail.do | /LCB/moneyTreasureDetail.do | |||
APP单页 | APP主页(精选页) | niwodai://homeMainPage | 暂无 | 暂无 | ||
理财页面 | niwodai://wantInvers | 暂无 | 暂无 | |||
理财页面 - 嘉财有道 | niwodai://jiacaiTypeList | 暂无 | 暂无 | |||
理财页面 - 债权列表 | niwodai://loanList | 暂无 | 暂无 | |||
理财页面 - 转让专区 | niwodai://transferList | 暂无 | 暂无 | |||
账户信息 | niwodai://userInfo | 暂无 | 暂无 | |||
实名认证页面 | niwodai://realNameIdentity | 暂无 | 暂无 | |||
银行卡管理页面 | niwodai://bankcardManagement | 暂无 | 暂无 | |||
绑定银行卡 | niwodai://bandBankCard | 暂无 | 暂无 | |||
总资产 | niwodai://netWealth | 暂无 | 暂无 | |||
账户余额 | niwodai://accountBalance | 暂无 | 暂无 | |||
有奖任务 | niwodai://prizeTask | 暂无 | 暂无 | |||
我的奖品 | niwodai://myPrize | 暂无 | 暂无 | |||
体验卡激活 | niwodai://activeExperienceCard | 暂无 | 暂无 | |||
我的积分 | niwodai://myCredits | 暂无 | 暂无 | |||
在线客服页面 | niwodai://onlineService | /Public/Static/nwd/app/customerService/ customerService.html |
||||
其他 | 小米应用市场 | 5820160000014619 | ||||
APP下载页 | 5820160000006490 | 同APP | 5820160000008230 | |||
APP解锁页 | 5820160000008062 | 暂无 | 暂无 | |||
APP底部菜单配置 | 5820160000009064 | 暂无 | 暂无 | |||
风险评测 | 暂无 | 暂无 | 暂无 | |||
理财列表 | 嘉薪宝入口 | 5820160000015915 |
||||
APP首页 | 精选阅读 | 3800000549111182 | 暂无 | 暂无 | ||
安全保障 | 1823227140863387 | 暂无 | 暂无 | |||
安全存管 | 5820160000010349 | 暂无 | 暂无 | |||
会员介绍 | 5820160000010896 | 暂无 | 暂无 | |||
公司简介 | 5820160000007999 | 暂无 | 暂无 |
PC端单页面
模块名称 | 页面名称 | 移动端(APP、WAP) | PC | 备注说明 | |
---|---|---|---|---|---|
PC端单页面 | 网站底部 | 首页底部 | 暂无 | 3800001595108516 | 仅PC端单页 |
账户中心底部 | 暂无 | 3800001595116609 | |||
二级页面底部 | 暂无 | 3800001595112905 | |||
首页 | 交易数据模块 | 暂无 | 5820160000013198 | ||
logo右侧广告位 | 暂无 | 3800000031637701 | |||
新手右侧广告位 | 暂无 | 3800001165348840 | |||
资金安全 | 暂无 | 3800001595076861 | |||
关于我们 | 公司简介 | 暂无 | 1836469356404191 | ||
联系我们 | 暂无 | 1836469356530064 | |||
登录 | 左侧广告位(理财) | 暂无 | 3800001534892195 | ||
左侧运营位(借款) | 暂无 | 5820160000011076 | |||
左侧运营位(企业) | 暂无 | ||||
注册 | 左侧广告位(理财) | 暂无 | 3800001420663673 | ||
左侧运营位(借款) | 暂无 | ||||
左侧运营位(企业) | 暂无 | 5820160000015802 |
下载短链
模块名称 | 页面名称 | APP | 短联地址 | 备注说明 |
---|---|---|---|---|
下载APP 打开相对应页 |
优选列表页 | /Public/Static/nwd/app/downLoadApp/jiacaiTypeList.html | ||
债权列表页 | /Public/Static/nwd/app/downLoadApp/loanList.html | |||
转让专区页 | /Public/Static/nwd/app/downLoadApp/transferList.html | |||
优惠券页面 | /Public/Static/nwd/app/downLoadApp/myGift.html | |||
财神道详情页 | /Public/Static/nwd/app/downLoadApp/CSD.html | |||
嘉利宝详情页 | /Public/Static/nwd/app/downLoadApp/financial_F.html | |||
月月盈详情页 | /Public/Static/nwd/app/downLoadApp/financial_E.html | |||
双季盈详情页 | /Public/Static/nwd/app/downLoadApp/financial_G.html | |||
季季丰详情页 | /Public/Static/nwd/app/downLoadApp/financial_D.html | |||
月月升详情页 | /Public/Static/nwd/app/downLoadApp/financial_H.html | |||
体验宝详情页 | /Public/Static/nwd/app/downLoadApp/moneyTreasureDetail.html | |||
嘉财有道持有列表 | /Public/Static/nwd/app/downLoadApp/myLending.html | |||
共用下载页(UED专用) | 5820160000006494&nwd_ext_aid=3000001261458336&source_id= |
代码规范
统一样式规则在团队协作中能够保证代码格式清楚、保证清晰的继承关系
目录规范
src 源文件所在地。开发过程中的各种CSS和JS源文件都往这里面放。
│ .gitignore
│ gulpfile.js gulp配置
│ package-lock.json
│ package.json 项目配置
│ webpack.config.js webpack配置
│
├─images
│ ├─carousel
│ ├─checkradio
│ ├─common
│ ├─dialog
│ ├─logo
│ ├─select
│ ├─steps
│ ├─tooltip
│ └─validate
├─node_modules 自动生成文件
├─sass sass配置
├─scripts
│ ├─components 组件js
│ │ checkbox.js checkbox 组件
│ │ class.js 组件类
│ │ define.js 组件定义
│ │ dialog.js 弹窗组件
│ │ placeholder.js placeholder组件
│ │ select.js select组件
│ │ tabs.js tabs组件
│ │ tooltip.js tooltip组件
│ │
│ ├─entry
│ │ main.js 入口文件 即每个项目独立的文件
│ │
│ └─libs
│ jquery-1.7.2.min.js
│ require.js
│ sea.js
│
├─styles
│ ├─common
│ │ base.css
│ │
│ ├─components
│ │ carousel.css
│ │ checkradio.css
│ │ dialog.css
│ │ tabs.css
│ │ tooltip.css
│ │ validate.css
│ │
│ └─pages
├─libthird 第三方的 CSS、JS 和字体文件都存放到这里。
│ ├─fonts
│ ├─scripts
│ └─styles
├─test 测试
├─dist 目标文件所在地。上线前通过工具生成的CSS和JS目标文件都输出到这里。
└─views
index.html
CSS规范
1 样式表编码
团队约定
1.样式文件必须写上 @charset 规则,并且一定要在样式文件的第一行首个字符位置开始写,编码名用 “UTF-8”
2.@charset ""; 一定要写上,并且用小写字母,不能出现转义符
2.@charset ""; 一定要写上,并且用小写字母,不能出现转义符
推荐:
@charset "UTF-8";
/**
*
* @authors Your Name (you@example.org)
* @date 2017-07-31 13:16:24
* @version $Id$
*/
.nwd {
}
2 命名规范
从类名可以清晰区分出其功能作用,使页面结构清晰【命名空间、标识符】;
以组件、模块的思想去写一个区块的结构,强化结构的模块化【模块思想、基类、子类、扩展类】;
减少多人合作、项目耦合等情况下的命名冲突【命名空间】;
以组件、模块的思想去写一个区块的结构,强化结构的模块化【模块思想、基类、子类、扩展类】;
减少多人合作、项目耦合等情况下的命名冲突【命名空间】;
2.1 区块命名
团队约定
一般可以划分为头部、身体和尾部
推荐:
.nwd-btn_lg {
width: 120px;
}
.nwd-btn__sm {
width: 100px;
}
2.2 图片命名
团队约定
图标:以ico作为命名空间,例如:.icon_close 等;
LOGO:以logo作为命名空间,例如:.logo_nwd 等;
内容图像:以img作为命名空间,例如:.img_user 等;
LOGO:以logo作为命名空间,例如:.logo_nwd 等;
内容图像:以img作为命名空间,例如:.img_user 等;
推荐:
/*图标*/
.icon_close {
}
/*LOGO*/
.logo_nwd {
}
/*内容图像*/
.img_user {
}
3 代码风格
团队约定
统一使用展开格式书写样式
推荐:
.nwd {
width: 100px;
display: block;
}
3.1 url()
团队约定
url() 函数中的路径不加引号;
推荐:
.selector {
background: url(bg.png);
}
不推荐:
.selector {
background: url("bg.png");
}
3.2 颜色
团队约定
RGB颜色值必须使用十六进制记号形式 #rrggbb,不允许使用 rgb(),带有alpha的颜色信息可以使用 rgba();颜色值不允许使用命名色值;【建议】 颜色值中的英文字符采用小写,至少要保证同一项目内一致;
推荐:
.selector {
box-shadow: 0 0 2px rgba(0, 128, 0, .3);
border-color: #008000;
color: #999;
}
不推荐:
.selector {
box-shadow: 0 0 2px rgba(0,128,0,.3);
border-color: rgb(0, 128, 0);
color: gray;
}
3.3 2D位置
团队约定
必须同时给出水平和垂直方向的位置;2D 位置初始值为 0% 0%,但在只有一个方向的值时,另一个方向的值会被解析为 center。为避免理解上的困扰,应同时给出两个方向的值。 background-position属性值的定义
推荐:
.selector {
background-position: center top;
}
不推荐:
.selector {
background-position: top;
}
3.4 数值
团队约定
当数值为 0 - 1 之间的小数时,省略整数部分的 0;
推荐:
.selector {
opacity: .8;
}
不推荐:
.selector {
opacity: 0.8;
}
3.5 字体族
团队约定
font-family 应当遵循以下顺序:
西文字体在前,中文字体在后;
效果佳 (质量高/更能满足需求) 的字体在前,效果一般的字体在后的顺序编写;
最后必须指定一个通用字体族( serif / sans-serif );
font-family 不区分大小写,但在同一个项目中,同样的 Family Name 大小写必须统一;
西文字体在前,中文字体在后;
效果佳 (质量高/更能满足需求) 的字体在前,效果一般的字体在后的顺序编写;
最后必须指定一个通用字体族( serif / sans-serif );
font-family 不区分大小写,但在同一个项目中,同样的 Family Name 大小写必须统一;
推荐:
body {
font-family: Arial, sans-serif;
}
h1 {
font-family: Arial, "Microsoft YaHei", sans-serif;
}
不推荐:
body {
font-family: arial, sans-serif;
}
h1 {
font-family: Arial, 'Microsoft YaHei', sans-serif;
}
3.6 字重
团队约定
font-weight 属性必须使用数值方式描述;
CSS 的字重分 100 – 900 共九档,但目前受字体本身质量和浏览器的限制,实际上支持 400 和 700 两档,分别等价于关键词 normal 和 bold。
浏览器本身使用一系列启发式规则来进行匹配,在 >700 时一般匹配字体的 Regular 字重,>=700 时匹配 Bold 字重。
但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见此表),故使用数值描述增加了灵活性,也更简短。
CSS 的字重分 100 – 900 共九档,但目前受字体本身质量和浏览器的限制,实际上支持 400 和 700 两档,分别等价于关键词 normal 和 bold。
浏览器本身使用一系列启发式规则来进行匹配,在 >700 时一般匹配字体的 Regular 字重,>=700 时匹配 Bold 字重。
但已有浏览器开始支持 =600 时匹配 Semibold 字重 (见此表),故使用数值描述增加了灵活性,也更简短。
推荐:
/* Better */
.selector {
font-weight: 700;
}
不推荐:
.selector {
font-weight: bold;
}
3.7 代码大小写
团队约定
样式选择器,属性名,属性值关键字全部使用小写字母书写,属性字符串允许使用大小写。
推荐:
.nwd {
display: block;
}
不推荐:
.nwd {
display: BLOCK;
}
4 代码缩进
团队约定
统一使用四个空格进行代码缩进,使得各编辑器表现一致(各编辑器有相关配置),每个属性声明末尾都要加分号;
推荐:
.nwd {
width: 100%;
height: 100%;
}
5 代码易读性
团队约定
左括号与类名之间一个空格,冒号与属性值之间一个空格
推荐:
.nwd {
width: 100%;
}
不推荐:
.nwd{
width: 100%;
}
逗号分隔的取值,逗号之后一个空格
推荐:
.nwd {
box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}
不推荐:
.nwd {
box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}
为单个css选择器或新申明开启新行
推荐:
.nwd,
.nwd a,
.nwd p {
color: #ff0;
}
不推荐:
.nwd,.nwd a,.nwd p {
color: #ff0;
}
属性值十六进制数值能用简写的尽量用简写
推荐:
.nwd {
color: #fff;
}
不推荐:
.nwd {
color: #ffffff;
}
不要为 0 指明单位
推荐:
.nwd {
margin: 0 10px;
}
不推荐:
.nwd {
margin: 0px 10px;
}
css属性值需要用到引号时,统一使用单引号
推荐:
.nwd {
font-family: 'Microsoft Yahei';
}
不推荐:
.nwd {
font-family: "Microsoft Yahei";
}
6 属性书写顺序
团队约定
建议遵循以下顺序:
1.布局定位属性:display / position / float / clear / visibility / overflow
2.自身属性:width / height / margin / padding / border / background
3.文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
4.其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
1.布局定位属性:display / position / float / clear / visibility / overflow
2.自身属性:width / height / margin / padding / border / background
3.文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word
4.其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
推荐:
.nwd {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 0 10px;
font-family: 'Microsoft Yahei','\5FAE\8F6F\96C5\9ED1',Arial,'Hiragino Sans GB','\5B8B\4F53';
}
7 CSS3浏览器私有前缀写法
团队约定
CSS3 带私有前缀的属性由长到短排列,按冒号位置对齐;标准属性放在最后,按冒号对齐方便阅读与编辑。
推荐:
.selector {
-webkit-transition: color .2s ease-in 0;
-moz-transition: color .2s ease-in 0;
transition: color .2s ease-in 0;
}
8 注释
8.1 单行注释
团队约定
注释内容第一个字符和最后一个字符都是一个空格字符,单独占一行,行与行之间相隔一行
推荐:
/*Comment Text*/
.nwd {
display: block;
}
不推荐:
.nwd {
display: block;/*Comment Text*/
}
8.2 模块注释
团队约定
注释内容第一个字符和最后一个字符都是一个空格字符,/* 与 模块信息描述占一行,多个横线分隔符-与*/占一行,行与行之间相隔两行
推荐:
/* Module A
---------------------------------------------------------------- */
.nwd_a {}
/* Module B
---------------------------------------------------------------- */
.nwd_b {}
不推荐:
/* Module A ---------------------------------------------------- */
.nwd_a {}
/* Module B ---------------------------------------------------- */
.nwd_b {}
8.3 文件注释
团队约定
文件顶部必须包含文件注释,用 @file 标识文件说明。星号要一列对齐,星号与内容之间必须保留一个空格,标识符冒号与内容之间必须保留一个空格;
1.@update为可选项,建议每次改动都更新一下;
2.当该业务项目主要由固定的一个或多个人负责时,需要添加@author标识,一方面是尊重劳动成果,另一方面方便在需要时快速定位责任人;
1.@update为可选项,建议每次改动都更新一下;
2.当该业务项目主要由固定的一个或多个人负责时,需要添加@author标识,一方面是尊重劳动成果,另一方面方便在需要时快速定位责任人;
推荐:
/**
* @file: 文件概要描述
* @author: author-name(mail-name@domain.com)
* author-name2(mail-name2@domain.com)
* @update: 2015-04-29 00:02:45
*/
9 常用查询语句
团队约定
判断设备横竖屏
推荐:
/* 横屏 */
@media all and (orientation :landscape) {
}
/* 竖屏 */
@media all and (orientation :portrait) {
}
判断设备宽高
推荐:
/* 设备宽度大于 320px 小于 640px */
@media all and (min-width:320px) and (max-width:640px) {
}
判断设备像素比
推荐:
/* 设备像素比为 1 */
@media only screen and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-pixel-ratio: 1) {
}
/* 设备像素比为 1.5 */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
}
/* 设备像素比为 2 */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
}
10 常用设备设置
团队约定
iPhones
推荐:
/* ----------- iPhone 4 and 4S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- iPhone 6+ ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3) {
}
/* Portrait */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media only screen
and (min-device-width: 414px)
and (max-device-width: 736px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: landscape) {
}
Galaxy Phones
推荐:
/* ----------- Galaxy S3 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2) {
}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 2)
and (orientation: landscape) {
}
/* ----------- Galaxy S4 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
/* ----------- Galaxy S5 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3) {
}
/* Portrait */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: portrait) {
}
/* Landscape */
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 3)
and (orientation: landscape) {
}
复制成功
js规范
1 代码风格
1.1 缩进
团队约定
【强制】 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。
【强制】 switch 下的 case 和 default 必须增加一个缩进层级。
【强制】 switch 下的 case 和 default 必须增加一个缩进层级。
推荐:
switch (variable) {
case '1':
// do...
break;
case '2':
// do...
break;
default:
// do...
}
不推荐:
switch (variable) {
case '1':
// do...
break;
case '2':
// do...
break;
default:
// do...
}
1.2 空格
团队约定
【强制】 二元运算符两侧必须有一个空格,一元运算符与操作对象之间不允许有空格。
推荐:
var a = !arr.length;
a++;
a = b + c;
【强制】 用作代码块起始的左花括号 { 前必须有一个空格。
推荐:
if (condition) {
}
while (condition) {
}
function funcName() {
}
不推荐:
if (condition){
}
while (condition){
}
function funcName(){
}
【强制】 if / else / for / while / function / switch / do / try / catch / finally 关键字后,必须有一个空格。
推荐:
if (condition) {
}
while (condition) {
}
(function () {
})();
不推荐:
if(condition) {
}
while(condition) {
}
(function() {
})();
【强制】 在对象创建时,属性中的 : 之后必须有空格,: 之前不允许有空格。
推荐:
var obj = {
a: 1,
b: 2,
c: 3
};
不推荐:
var obj = {
a : 1,
b:2,
c :3
};
【强制】 函数声明、具名函数表达式、函数调用中,函数名和 ( 之间不允许有空格。
推荐:
function funcName() {
}
var funcName = function funcName() {
};
funcName();
不推荐:
function funcName () {
}
var funcName = function funcName () {
};
funcName ();
【强制】 , 和 ; 前不允许有空格。
推荐:
callFunc(a, b);
不推荐:
callFunc(a , b) ;
【强制】 在函数调用、函数声明、括号表达式、属性访问、if / for / while / switch / catch 等语句中,() 和 [] 内紧贴括号部分不允许有空格。
推荐:
callFunc(param1, param2, param3);
save(this.list[this.indexes[i]]);
needIncream && (variable += increament);
if (num > list.length) {
}
while (len--) {
}
不推荐:
callFunc( param1, param2, param3 );
save( this.list[ this.indexes[ i ] ] );
needIncreament && ( variable += increament );
if ( num > list.length ) {
}
while ( len-- ) {
}
【强制】 单行声明的数组与对象,如果包含元素,{} 和 [] 内紧贴括号部分不允许包含空格。
解释:
声明包含元素的数组与对象,只有当内部元素的形式较为简单时,才允许写在一行。元素复杂的情况,还是应该换行书写。 示例:
解释:
声明包含元素的数组与对象,只有当内部元素的形式较为简单时,才允许写在一行。元素复杂的情况,还是应该换行书写。 示例:
推荐:
var arr1 = [];
var arr2 = [1, 2, 3];
var obj1 = {};
var obj2 = {name: 'obj'};
var obj3 = {
name: 'obj',
age: 20,
sex: 1
};
不推荐:
var arr1 = [ ];
var arr2 = [ 1, 2, 3 ];
var obj1 = { };
var obj2 = { name: 'obj' };
var obj3 = {name: 'obj', age: 20, sex: 1};
1.3 换行
团队约定
【强制】 每个独立语句结束后必须换行。
【强制】 每行不得超过 120 个字符。
解释:
超长的不可分割的代码允许例外,比如复杂的正则表达式。长字符串不在例外之列。
【强制】 运算符处换行时,运算符必须在新行的行首。
【强制】 每行不得超过 120 个字符。
解释:
超长的不可分割的代码允许例外,比如复杂的正则表达式。长字符串不在例外之列。
【强制】 运算符处换行时,运算符必须在新行的行首。
推荐:
if (user.isAuthenticated()
&& user.isInRole('admin')
&& user.hasAuthority('add-admin')
|| user.hasAuthority('delete-admin')
) {
// Code
}
var result = number1 + number2 + number3
+ number4 + number5;
不推荐:
if (user.isAuthenticated() &&
user.isInRole('admin') &&
user.hasAuthority('add-admin') ||
user.hasAuthority('delete-admin')) {
// Code
}
var result = number1 + number2 + number3 +
number4 + number5;
【强制】 在函数声明、函数表达式、函数调用、对象创建、数组创建、for语句等场景中,不允许在 , 或 ; 前换行。
推荐:
var obj = {
a: 1,
b: 2,
c: 3
};
foo(
aVeryVeryLongArgument,
anotherVeryLongArgument,
callback
);
不推荐:
var obj = {
a: 1
, b: 2
, c: 3
};
foo(
aVeryVeryLongArgument
, anotherVeryLongArgument
, callback
);
【建议】 不同行为或逻辑的语句集,使用空行隔开,更易阅读。
推荐:
// 仅为按逻辑换行的示例,不代表setStyle的最优实现
function setStyle(element, property, value) {
if (element == null) {
return;
}
element.style[property] = value;
}
【建议】 在语句的行长度超过 120 时,根据逻辑条件合理缩进。
推荐:
// 较复杂的逻辑条件组合,将每个条件独立一行,逻辑运算符放置在行首进行分隔,或将部分逻辑按逻辑组合进行分隔。
// 建议最终将右括号 ) 与左大括号 { 放在独立一行,保证与 if 内语句块能容易视觉辨识。
if (user.isAuthenticated()
&& user.isInRole('admin')
&& user.hasAuthority('add-admin')
|| user.hasAuthority('delete-admin')
) {
// Code
}
// 按一定长度截断字符串,并使用 + 运算符进行连接。
// 分隔字符串尽量按语义进行,如不要在一个完整的名词中间断开。
// 特别的,对于HTML片段的拼接,通过缩进,保持和HTML相同的结构。
var html = '' // 此处用一个空字符串,以便整个HTML片段都在新行严格对齐
+ '<article>'
+ '<h1>Title here</h1>'
+ '<p>This is a paragraph</p>'
+ '<footer>Complete</footer>'
+ '</article>';
// 也可使用数组来进行拼接,相对 + 更容易调整缩进。
var html = [
'<article>',
'<h1>Title here</h1>',
'<p>This is a paragraph</p>',
'<footer>Complete</footer>',
'</article>'
];
html = html.join('');
// 当参数过多时,将每个参数独立写在一行上,并将结束的右括号 ) 独立一行。
// 所有参数必须增加一个缩进。
foo(
aVeryVeryLongArgument,
anotherVeryLongArgument,
callback
);
// 也可以按逻辑对参数进行组合。
// 最经典的是baidu.format函数,调用时将参数分为“模板”和“数据”两块
baidu.format(
dateFormatTemplate,
year, month, date, hour, minute, second
);
// 当函数调用时,如果有一个或以上参数跨越多行,应当每一个参数独立一行。
// 这通常出现在匿名函数或者对象初始化等作为参数时,如setTimeout函数等。
setTimeout(
function () {
alert('hello');
},
200
);
order.data.read(
'id=' + me.model.id,
function (data) {
me.attchToModel(data.result);
callback();
},
300
);
// 链式调用较长时采用缩进进行调整。
$('#items')
.find('.selected')
.highlight()
.end();
// 三元运算符由3部分组成,因此其换行应当根据每个部分的长度不同,形成不同的情况。
var result = thisIsAVeryVeryLongCondition
? resultA : resultB;
var result = condition
? thisIsAVeryVeryLongResult
: resultB;
// 数组和对象初始化的混用,严格按照每个对象的 { 和结束 } 在独立一行的风格书写。
var array = [
{
// ...
},
{
// ...
}
];
【建议】 对于 if...else...、try...catch...finally 等语句,推荐使用在 } 号后添加一个换行 的风格,使代码层次结构更清晰,阅读性更好。
推荐:
if (condition) {
// some statements;
}
else {
// some statements;
}
try {
// some statements;
}
catch (ex) {
// some statements;
}
1.4 语句
团队约定
【强制】 不得省略语句结束的分号。
【强制】 在 if / else / for / do / while 语句中,即使只有一行,也不得省略块 {...}。
【强制】 在 if / else / for / do / while 语句中,即使只有一行,也不得省略块 {...}。
推荐:
if (condition) {
callFunc();
}
不推荐:
if (condition) callFunc();
if (condition)
callFunc();
【强制】 函数定义结束不允许添加分号。
推荐:
function funcName() {
}
不推荐:
function funcName() {
};
【强制】 如果是函数表达式,分号是不允许省略的。
推荐:
var funcName = function () {
};
1.5 命名
团队约定
【强制】 变量 使用 Camel命名法。
推荐:
var loadingModules = {};
【强制】 常量 使用 全部字母大写,单词间下划线分隔 的命名方式。
推荐:
var HTML_ENTITY = {};
【强制】 函数 使用 Camel命名法。
推荐:
function stringFormat(source) {
}
【强制】 函数的 参数 使用 Camel命名法。
推荐:
function hear(theBells) {
}
【强制】 类 使用 Pascal命名法。
推荐:
function TextNode(options) {
}
【强制】 类的 方法 / 属性 使用 Camel命名法。
推荐:
function TextNode(value, engine) {
this.value = value;
this.engine = engine;
}
TextNode.prototype.clone = function () {
return this;
};
【强制】 枚举变量 使用 Pascal命名法,枚举的属性 使用 全部字母大写,单词间下划线分隔 的命名方式。
推荐:
var TargetState = {
READING: 1,
READED: 2,
APPLIED: 3,
READY: 4
};
【强制】 命名空间 使用 Camel命名法。
推荐:
equipments.heavyWeapons = {};
【强制】 由多个单词组成的缩写词,在命名中,根据当前命名法和出现的位置,所有字母的大小写与首字母的大小写保持一致。
推荐:
function XMLParser() {
}
function insertHTML(element, html) {
}
var httpRequest = new HTTPRequest();
【强制】 类名 使用 名词。
推荐:
function Engine(options) {
}
【建议】 函数名 使用 动宾短语。
推荐:
function getStyle(element) {
}
【建议】 boolean 类型的变量使用 is 或 has 开头。
推荐:
var isReady = false;
var hasMoreCommands = false
【建议】 Promise对象 用 动宾短语的进行时 表达。
推荐:
var loadingData = ajax.get('url');
loadingData.then(callback);
2 注释
2.1 文件注释
团队约定
【强制】 文件顶部必须包含文件注释,用 @file 标识文件说明。
推荐:
/**
* @file Describe the file
*/
【建议】 文件注释中可以用 @author 标识开发者信息。
解释:
开发者信息能够体现开发人员对文件的贡献,并且能够让遇到问题或希望了解相关信息的人找到维护人。通常情况文件在被创建时标识的是创建者。随着项目的进展,越来越多的人加入,参与这个文件的开发,新的作者应该被加入 @author 标识。 @author 标识具有多人时,原则是按照 责任 进行排序。通常的说就是如果有问题,就是找第一个人应该比找第二个人有效。比如文件的创建者由于各种原因,模块移交给了其他人或其他团队,后来因为新增需求,其他人在新增代码时,添加 @author 标识应该把自己的名字添加在创建人的前面。 @author 中的名字不允许被删除。任何劳动成果都应该被尊重。 业务项目中,一个文件可能被多人频繁修改,并且每个人的维护时间都可能不会很长,不建议为文件增加 @author 标识。通过版本控制系统追踪变更,按业务逻辑单元确定模块的维护责任人,通过文档与wiki跟踪和查询,是更好的责任管理方式。 对于业务逻辑无关的技术型基础项目,特别是开源的公共项目,应使用 @author 标识。
解释:
开发者信息能够体现开发人员对文件的贡献,并且能够让遇到问题或希望了解相关信息的人找到维护人。通常情况文件在被创建时标识的是创建者。随着项目的进展,越来越多的人加入,参与这个文件的开发,新的作者应该被加入 @author 标识。 @author 标识具有多人时,原则是按照 责任 进行排序。通常的说就是如果有问题,就是找第一个人应该比找第二个人有效。比如文件的创建者由于各种原因,模块移交给了其他人或其他团队,后来因为新增需求,其他人在新增代码时,添加 @author 标识应该把自己的名字添加在创建人的前面。 @author 中的名字不允许被删除。任何劳动成果都应该被尊重。 业务项目中,一个文件可能被多人频繁修改,并且每个人的维护时间都可能不会很长,不建议为文件增加 @author 标识。通过版本控制系统追踪变更,按业务逻辑单元确定模块的维护责任人,通过文档与wiki跟踪和查询,是更好的责任管理方式。 对于业务逻辑无关的技术型基础项目,特别是开源的公共项目,应使用 @author 标识。
推荐:
/**
* @file Describe the file
* @author author-name(mail-name@domain.com)
* author-name2(mail-name2@domain.com)
*/
2.1 命名空间注释
团队约定
【建议】 命名空间使用 @namespace 标识。
推荐:
/**
* @namespace
*/
var util = {};
2.2 类注释
团队约定
【建议】 使用 @class 标记类或构造函数。
解释:
对于使用对象 constructor 属性来定义的构造函数,可以使用 @constructor 来标记。
解释:
对于使用对象 constructor 属性来定义的构造函数,可以使用 @constructor 来标记。
推荐:
/**
* 描述
*
* @class
*/
function Developer() {
// constructor body
}
【建议】 使用 @extends 标记类的继承信息。
推荐:
/**
* 描述
*
* @class
* @extends Developer
*/
function Fronteer() {
Developer.call(this);
// constructor body
}
util.inherits(Fronteer, Developer);
【强制】 使用包装方式扩展类成员时, 必须通过 @lends 进行重新指向。
解释:
没有 @lends 标记将无法为该类生成包含扩展类成员的文档。
解释:
没有 @lends 标记将无法为该类生成包含扩展类成员的文档。
推荐:
/**
* 类描述
*
* @class
* @extends Developer
*/
function Fronteer() {
Developer.call(this);
// constructor body
}
util.extend(
Fronteer.prototype,
/** @lends Fronteer.prototype */{
_getLevel: function () {
// TODO
}
}
);
【强制】 类的属性或方法等成员信息使用 @public / @protected / @private 中的任意一个,指明可访问性。
解释:
生成的文档中将有可访问性的标记,避免用户直接使用非 public 的属性或方法。
解释:
生成的文档中将有可访问性的标记,避免用户直接使用非 public 的属性或方法。
推荐:
/**
* 类描述
*
* @class
* @extends Developer
*/
var Fronteer = function () {
Developer.call(this);
/**
* 属性描述
*
* @type {string}
* @private
*/
this._level = 'T12';
// constructor body
};
util.inherits(Fronteer, Developer);
/**
* 方法描述
*
* @private
* @return {string} 返回值描述
*/
Fronteer.prototype._getLevel = function () {
};
2.3 函数/方法注释
团队约定
【强制】 函数/方法注释必须包含函数说明,有参数和返回值时必须使用注释标识。
【强制】 参数和返回值注释必须包含类型信息和说明。
【建议】 当函数是内部函数,外部不可访问时,可以使用 @inner 标识。
【强制】 参数和返回值注释必须包含类型信息和说明。
【建议】 当函数是内部函数,外部不可访问时,可以使用 @inner 标识。
推荐:
/**
* 函数描述
*
* @param {string} p1 参数1的说明
* @param {string} p2 参数2的说明,比较长
* 那就换行了.
* @param {number=} p3 参数3的说明(可选)
* @return {Object} 返回值描述
*/
function foo(p1, p2, p3) {
var p3 = p3 || 10;
return {
p1: p1,
p2: p2,
p3: p3
};
}
【强制】 对 Object 中各项的描述, 必须使用 @param 标识。
推荐:
/**
* 函数描述
*
* @param {Object} option 参数描述
* @param {string} option.url option项描述
* @param {string=} option.method option项描述,可选参数
*/
function foo(option) {
// TODO
}
【建议】 重写父类方法时, 应当添加 @override 标识。如果重写的形参个数、类型、顺序和返回值类型均未发生变化,可省略 @param、@return,仅用 @override 标识,否则仍应作完整注释。
解释: 简而言之,当子类重写的方法能直接套用父类的方法注释时可省略对参数与返回值的注释。
解释: 简而言之,当子类重写的方法能直接套用父类的方法注释时可省略对参数与返回值的注释。
推荐:
/**
* 函数描述
*
* @param {Object} option 参数描述
* @param {string} option.url option项描述
* @param {string=} option.method option项描述,可选参数
*/
function foo(option) {
// TODO
}
2.4 事件注释
团队约定
【强制】 必须使用 @event 标识事件,事件参数的标识与方法描述的参数标识相同。
/**
* 值变更时触发
*
* @event
* @param {Object} e e描述
* @param {string} e.before before描述
* @param {string} e.after after描述
*/
onchange: function (e) {
}
【强制】 在会广播事件的函数前使用 @fires 标识广播的事件,在广播事件代码前使用 @event 标识事件。
【建议】 对于事件对象的注释,使用 @param 标识,生成文档时可读性更好。
【建议】 对于事件对象的注释,使用 @param 标识,生成文档时可读性更好。
/**
* 点击处理
*
* @fires Select#change
* @private
*/
Select.prototype.clickHandler = function () {
/**
* 值变更时触发
*
* @event Select#change
* @param {Object} e e描述
* @param {string} e.before before描述
* @param {string} e.after after描述
*/
this.fire(
'change',
{
before: 'foo',
after: 'bar'
}
);
};
2.5 常量注释
团队约定
【强制】 常量必须使用 @const 标记,并包含说明和类型信息。
推荐:
/**
* 常量说明
*
* @const
* @type {string}
*/
var REQUEST_URL = 'myurl.do';
2.6 细节注释
团队约定
对于内部实现、不容易理解的逻辑说明、摘要信息等,我们可能需要编写细节注释。
【建议】 细节注释遵循单行注释的格式。说明必须换行时,每行是一个单行注释的起始。
【建议】 细节注释遵循单行注释的格式。说明必须换行时,每行是一个单行注释的起始。
推荐:
function foo(p1, p2) {
// 这里对具体内部逻辑进行说明
// 说明太长需要换行
for (...) {
....
}
}
【强制】 有时我们会使用一些特殊标记进行说明。特殊标记必须使用单行注释的形式。下面列举了一些常用标记:
解释:
TODO: 有功能待实现。此时需要对将要实现的功能进行简单说明。
FIXME: 该处代码运行没问题,但可能由于时间赶或者其他原因,需要修正。此时需要对如何修正进行简单说明。
HACK: 为修正某些问题而写的不太好或者使用了某些诡异手段的代码。此时需要对思路或诡异手段进行描述。 XXX: 该处存在陷阱。此时需要对陷阱进行描述。
解释:
TODO: 有功能待实现。此时需要对将要实现的功能进行简单说明。
FIXME: 该处代码运行没问题,但可能由于时间赶或者其他原因,需要修正。此时需要对如何修正进行简单说明。
HACK: 为修正某些问题而写的不太好或者使用了某些诡异手段的代码。此时需要对思路或诡异手段进行描述。 XXX: 该处存在陷阱。此时需要对陷阱进行描述。
3 语言特性
3.1 变量
团队约定
【强制】 变量在使用前必须通过 var 定义。
不通过 var 定义变量将导致变量污染全局环境。
不通过 var 定义变量将导致变量污染全局环境。
推荐:
var name = 'MyName';
不推荐:
name = 'MyName';
【强制】 每个 var 只能声明一个变量。
解释:
一个 var 声明多个变量,容易导致较长的行长度,并且在修改时容易造成逗号和分号的混淆。
解释:
一个 var 声明多个变量,容易导致较长的行长度,并且在修改时容易造成逗号和分号的混淆。
推荐:
var hangModules = [];
var missModules = [];
var visited = {};
建议:
var hangModules = [],
missModules = [],
visited = {};
3.2 条件
团队约定
【强制】 在 Equality Expression 中使用类型严格的 ===。仅当判断 null 或 undefined 时,允许使用 == null。
解释:
使用 === 可以避免等于判断中隐式的类型转换。
解释:
使用 === 可以避免等于判断中隐式的类型转换。
推荐:
if (age === 30) {
// ......
}
不推荐:
if (age == 30) {
// ......
}
【建议】 尽可能使用简洁的表达式。
解释:
使用 === 可以避免等于判断中隐式的类型转换。
解释:
使用 === 可以避免等于判断中隐式的类型转换。
推荐:
// 字符串为空
// good
if (!name) {
// ......
}
不推荐:
if (name === '') {
// ......
}
推荐:
// 字符串非空
// good
if (name) {
// ......
}
不推荐:
if (name !== '') {
// ......
}
推荐:
// 数组非空
if (collection.length) {
// ......
}
不推荐:
if (collection.length > 0) {
// ......
}
推荐:
// 布尔不成立
if (!notTrue) {
// ......
}
不推荐:
if (notTrue === false) {
// ......
}
推荐:
// null 或 undefined
if (noValue == null) {
// ......
}
不推荐:
if (noValue === null || typeof noValue === 'undefined') {
// ......
}
【建议】 按执行频率排列分支的顺序。
解释:
按执行频率排列分支的顺序好处是:
阅读的人容易找到最常见的情况,增加可读性。
提高执行效率。 【建议】 对于相同变量或表达式的多值条件,用 switch 代替 if。
解释:
按执行频率排列分支的顺序好处是:
阅读的人容易找到最常见的情况,增加可读性。
提高执行效率。 【建议】 对于相同变量或表达式的多值条件,用 switch 代替 if。
推荐:
switch (typeof variable) {
case 'object':
// ......
break;
case 'number':
case 'boolean':
case 'string':
// ......
break;
}
不推荐:
var type = typeof variable;
if (type === 'object') {
// ......
}
else if (type === 'number' || type === 'boolean' || type === 'string') {
// ......
}
【建议】 如果函数或全局中的 else 块后没有任何语句,可以删除 else。
推荐:
function getName() {
if (name) {
return name;
}
return 'unnamed';
}
不推荐:
function getName() {
if (name) {
return name;
}
else {
return 'unnamed';
}
}
3.3 循环
团队约定
【建议】 不要在循环体中包含函数表达式,事先将函数提取到循环体外。
解释:
循环体中的函数表达式,运行过程中会生成循环次数个函数对象。
解释:
循环体中的函数表达式,运行过程中会生成循环次数个函数对象。
推荐:
function clicker() {
// ......
}
for (var i = 0, len = elements.length; i < len; i++) {
var element = elements[i];
addListener(element, 'click', clicker);
}
不推荐:
for (var i = 0, len = elements.length; i < len; i++) {
var element = elements[i];
addListener(element, 'click', function () {});
}
【建议】 对循环内多次使用的不变值,在循环外用变量缓存。
推荐:
var width = wrap.offsetWidth + 'px';
for (var i = 0, len = elements.length; i < len; i++) {
var element = elements[i];
element.style.width = width;
// ......
}
不推荐:
for (var i = 0, len = elements.length; i < len; i++) {
var element = elements[i];
element.style.width = wrap.offsetWidth + 'px';
// ......
}
【建议】 对有序集合进行遍历时,缓存 length。
解释:
虽然现代浏览器都对数组长度进行了缓存,但对于一些宿主对象和老旧浏览器的数组对象,在每次 length 访问时会动态计算元素个数,此时缓存 length 能有效提高程序性能。
解释:
虽然现代浏览器都对数组长度进行了缓存,但对于一些宿主对象和老旧浏览器的数组对象,在每次 length 访问时会动态计算元素个数,此时缓存 length 能有效提高程序性能。
推荐:
for (var i = 0, len = elements.length; i < len; i++) {
var element = elements[i];
// ......
}
【建议】 对有序集合进行顺序无关的遍历时,使用逆序遍历。
解释:
逆序遍历可以节省变量,代码比较优化。
解释:
逆序遍历可以节省变量,代码比较优化。
推荐:
var len = elements.length;
while (len--) {
var element = elements[len];
// ......
}
3.4 类型
3.4.1 类型检测
团队约定
【建议】 类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null。
推荐:
// string
typeof variable === 'string'
// number
typeof variable === 'number'
// boolean
typeof variable === 'boolean'
// Function
typeof variable === 'function'
// Object
typeof variable === 'object'
// RegExp
variable instanceof RegExp
// Array
variable instanceof Array
// null
variable === null
// null or undefined
variable == null
// undefined
typeof variable === 'undefined'
3.4.2 类型转换
团队约定
【建议】 转换成 string 时,使用 + ''。
推荐:
num + '';
不推荐:
new String(num);
num.toString();
String(num);
【建议】 转换成 number 时,通常使用 +。
推荐:
+str;
不推荐:
Number(str);
【建议】 string 转换成 number,要转换的字符串结尾包含非数字并期望忽略时,使用 parseInt。
推荐:
var width = '200px';
parseInt(width, 10);
【强制】 使用 parseInt 时,必须指定进制。
推荐:
parseInt(str, 10);
不推荐:
parseInt(str);
【建议】 转换成 boolean 时,使用 !!。
推荐:
var num = 3.14;
!!num;
【建议】 number 去除小数点,使用 Math.floor / Math.round / Math.ceil,不使用 parseInt。
推荐:
var num = 3.14;
Math.ceil(num)
不推荐:
var num = 3.14;
parseInt(num, 10);
3.5 字符串
团队约定
【强制】 字符串开头和结束使用单引号 '。
解释:
输入单引号不需要按住 shift,方便输入。
实际使用中,字符串经常用来拼接 HTML。为方便 HTML 中包含双引号而不需要转义写法。
解释:
输入单引号不需要按住 shift,方便输入。
实际使用中,字符串经常用来拼接 HTML。为方便 HTML 中包含双引号而不需要转义写法。
推荐:
var str = '我是一个字符串';
var html = '<div class="cls">拼接HTML可以省去双引号转义</div>';
【建议】 使用 数组 或 + 拼接字符串。
解释:
使用 + 拼接字符串,如果拼接的全部是 StringLiteral,压缩工具可以对其进行自动合并的优化。所以,静态字符串建议使用 + 拼接。
在现代浏览器下,使用 + 拼接字符串,性能较数组的方式要高。
如需要兼顾老旧浏览器,应尽量使用数组拼接字符串。
解释:
使用 + 拼接字符串,如果拼接的全部是 StringLiteral,压缩工具可以对其进行自动合并的优化。所以,静态字符串建议使用 + 拼接。
在现代浏览器下,使用 + 拼接字符串,性能较数组的方式要高。
如需要兼顾老旧浏览器,应尽量使用数组拼接字符串。
推荐:
// 使用数组拼接字符串
var str = [
// 推荐换行开始并缩进开始第一个字符串, 对齐代码, 方便阅读.
'<ul>',
'<li>第一项</li>',
'<li>第二项</li>',
'</ul>'
].join('');
// 使用 + 拼接字符串
var str2 = '' // 建议第一个为空字符串, 第二个换行开始并缩进开始, 对齐代码, 方便阅读
+ '<ul>',
+ '<li>第一项</li>',
+ '<li>第二项</li>',
+ '</ul>';
【建议】 复杂的数据到视图字符串的转换过程,选用一种模板引擎。
使用模板引擎有如下好处:
在开发过程中专注于数据,将视图生成的过程由另外一个层级维护,使程序逻辑结构更清晰。
优秀的模板引擎,通过模板编译技术和高质量的编译产物,能获得比手工拼接字符串更高的性能。
artTemplate: 体积较小,在所有环境下性能高,语法灵活。
dot.js: 体积小,在现代浏览器下性能高,语法灵活。
etpl: 体积较小,在所有环境下性能高,模板复用性高,语法灵活。
handlebars: 体积大,在所有环境下性能高,扩展性高。
hogon: 体积小,在现代浏览器下性能高。
nunjucks: 体积较大,性能一般,模板复用性高。
使用模板引擎有如下好处:
在开发过程中专注于数据,将视图生成的过程由另外一个层级维护,使程序逻辑结构更清晰。
优秀的模板引擎,通过模板编译技术和高质量的编译产物,能获得比手工拼接字符串更高的性能。
artTemplate: 体积较小,在所有环境下性能高,语法灵活。
dot.js: 体积小,在现代浏览器下性能高,语法灵活。
etpl: 体积较小,在所有环境下性能高,模板复用性高,语法灵活。
handlebars: 体积大,在所有环境下性能高,扩展性高。
hogon: 体积小,在现代浏览器下性能高。
nunjucks: 体积较大,性能一般,模板复用性高。
3.6 对象
团队约定
【强制】 使用对象字面量 {} 创建新 Object。
推荐:
var obj = {};
不推荐:
var obj = new Object();
【强制】 对象创建时,如果一个对象的所有 属性 均可以不添加引号,则所有 属性 不得添加引号。
推荐:
var info = {
name: 'someone',
age: 28
};
【强制】 对象创建时,如果任何一个 属性 需要添加引号,则所有 属性 必须添加 '。
解释:
如果属性不符合 Identifier 和 NumberLiteral 的形式,就需要以 StringLiteral 的形式提供。
解释:
如果属性不符合 Identifier 和 NumberLiteral 的形式,就需要以 StringLiteral 的形式提供。
推荐:
var info = {
'name': 'someone',
'age': 28,
'more-info': '...'
};
不推荐:
var info = {
name: 'someone',
age: 28,
'more-info': '...'
};
【强制】 不允许修改和扩展任何原生对象和宿主对象的原型。
推荐:
// 以下行为绝对禁止
String.prototype.trim = function () {
};
【建议】 属性访问时,尽量使用 .。
属性名符合 Identifier 的要求,就可以通过 . 来访问,否则就只能通过 [expr] 方式访问。
通常在 JavaScript 中声明的对象,属性命名是使用 Camel 命名法,用 . 来访问更清晰简洁。部分特殊的属性(比如来自后端的JSON)
,可能采用不寻常的命名方式,可以通过 [expr] 方式访问。
属性名符合 Identifier 的要求,就可以通过 . 来访问,否则就只能通过 [expr] 方式访问。
通常在 JavaScript 中声明的对象,属性命名是使用 Camel 命名法,用 . 来访问更清晰简洁。部分特殊的属性(比如来自后端的JSON)
,可能采用不寻常的命名方式,可以通过 [expr] 方式访问。
推荐:
info.age;
info['more-info'];
【建议】 for in 遍历对象时, 使用 hasOwnProperty 过滤掉原型中的属性。
推荐:
var newInfo = {};
for (var key in info) {
if (info.hasOwnProperty(key)) {
newInfo[key] = info[key];
}
}
3.7 数组
团队约定
【强制】 使用数组字面量 [] 创建新数组,除非想要创建的是指定长度的数组。
推荐:
var arr = [];
不推荐:
var arr = new Array();
【强制】 遍历数组不使用 for in。
解释:
数组对象可能存在数字以外的属性, 这种情况下 for in 不会得到正确结果.
解释:
数组对象可能存在数字以外的属性, 这种情况下 for in 不会得到正确结果.
推荐:
var arr = ['a', 'b', 'c'];
arr.other = 'other things'; // 这里仅作演示, 实际中应使用Object类型
// 正确的遍历方式
for (var i = 0, len = arr.length; i < len; i++) {
console.log(i);
}
// 错误的遍历方式
for (i in arr) {
console.log(i);
}
【建议】 不因为性能的原因自己实现数组排序功能,尽量使用数组的 sort 方法。
解释:
自己实现的常规排序算法,在性能上并不优于数组默认的 sort 方法。以下两种场景可以自己实现排序:
需要稳定的排序算法,达到严格一致的排序结果。
数据特点鲜明,适合使用桶排
解释:
自己实现的常规排序算法,在性能上并不优于数组默认的 sort 方法。以下两种场景可以自己实现排序:
需要稳定的排序算法,达到严格一致的排序结果。
数据特点鲜明,适合使用桶排
3.8 函数
3.8.1 函数长度
团队约定
【建议】 一个函数的长度控制在 50 行以内。
解释:
将过多的逻辑单元混在一个大函数中,易导致难以维护。一个清晰易懂的函数应该完成单一的逻辑单元。复杂的操作应进一步抽取,通过函数的调用来体现流程。
特定算法等不可分割的逻辑允许例外。
将过多的逻辑单元混在一个大函数中,易导致难以维护。一个清晰易懂的函数应该完成单一的逻辑单元。复杂的操作应进一步抽取,通过函数的调用来体现流程。
特定算法等不可分割的逻辑允许例外。
推荐:
function syncViewStateOnUserAction() {
if (x.checked) {
y.checked = true;
z.value = '';
}
else {
y.checked = false;
}
if (!a.value) {
warning.innerText = 'Please enter it';
submitButton.disabled = true;
}
else {
warning.innerText = '';
submitButton.disabled = false;
}
}
// 直接阅读该函数会难以明确其主线逻辑,因此下方是一种更合理的表达方式:
function syncViewStateOnUserAction() {
syncXStateToView();
checkAAvailability();
}
function syncXStateToView() {
if (x.checked) {
y.checked = true;
z.value = '';
}
else {
y.checked = false;
}
}
function checkAAvailability() {
if (!a.value) {
displayWarningForAMissing();
}
else {
clearWarnignForA();
}
}
3.8.2 参数设计
团队约定
【建议】 一个函数的参数控制在 6 个以内。
解释:
除去不定长参数以外,函数具备不同逻辑意义的参数建议控制在 6 个以内,过多参数会导致维护难度增大。
【建议】 通过 options 参数传递非数据输入型参数。
解释:
有些函数的参数并不是作为算法的输入,而是对算法的某些分支条件判断之用,此类参数建议通过一个 options 参数传递。
解释:
除去不定长参数以外,函数具备不同逻辑意义的参数建议控制在 6 个以内,过多参数会导致维护难度增大。
【建议】 通过 options 参数传递非数据输入型参数。
解释:
有些函数的参数并不是作为算法的输入,而是对算法的某些分支条件判断之用,此类参数建议通过一个 options 参数传递。
推荐:
/**
* 移除某个元素
*
* @param {Node} element 需要移除的元素
* @param {boolean} removeEventListeners 是否同时将所有注册在元素上的事件移除
*/
function removeElement(element, removeEventListeners) {
element.parent.removeChild(element);
if (removeEventListeners) {
element.clearEventListeners();
}
}
可以转换为下面的签名:
推荐:
/**
* 移除某个元素
*
* @param {Node} element 需要移除的元素
* @param {Object} options 相关的逻辑配置
* @param {boolean} options.removeEventListeners 是否同时将所有注册在元素上的事件移除
*/
function removeElement(element, options) {
element.parent.removeChild(element);
if (options.removeEventListeners) {
element.clearEventListeners();
}
}
3.9 面向对象
团队约定
【强制】 类的继承方案,实现时需要修正 constructor。
解释:
通常使用其他 library 的类继承方案都会进行 constructor 修正。如果是自己实现的类继承方案,需要进行 constructor 修正。
解释:
通常使用其他 library 的类继承方案都会进行 constructor 修正。如果是自己实现的类继承方案,需要进行 constructor 修正。
推荐:
/**
* 构建类之间的继承关系
*
* @param {Function} subClass 子类函数
* @param {Function} superClass 父类函数
*/
function inherits(subClass, superClass) {
var F = new Function();
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass;
}
【建议】 声明类时,保证 constructor 的正确性。
推荐:
function Animal(name) {
this.name = name;
}
// 直接prototype等于对象时,需要修正constructor
Animal.prototype = {
constructor: Animal,
jump: function () {
alert('animal ' + this.name + ' jump');
}
};
// 这种方式扩展prototype则无需理会constructor
Animal.prototype.jump = function () {
alert('animal ' + this.name + ' jump');
};
【建议】 属性在构造函数中声明,方法在原型中声明。
解释:
原型对象的成员被所有实例共享,能节约内存占用。所以编码时我们应该遵守这样的原则:原型对象包含程序不会修改的成员,如方法函数或配置项。
解释:
原型对象的成员被所有实例共享,能节约内存占用。所以编码时我们应该遵守这样的原则:原型对象包含程序不会修改的成员,如方法函数或配置项。
推荐:
function TextNode(value, engine) {
this.value = value;
this.engine = engine;
}
TextNode.prototype.clone = function () {
return this;
};