前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >适用于小团队的前端规范示例

适用于小团队的前端规范示例

作者头像
用户5997198
发布2019-10-31 14:40:40
8080
发布2019-10-31 14:40:40
举报
文章被收录于专栏:蚂蚁开源社区

前端规范

适用于前端开发团队规范为参考规范,不全是硬性要求,统一团队编码规范和风格。让所有代码都是有规可循的,并且能够获得沉淀,减少重复劳动。

访问地址:http://ku.zzfriend.com/yanshi/qianduanguifan/(点击阅读原文可下载

演示:

示例:

书写规范

2.1样式与内容分离

2.1.1项目结构

---

|---- index.html 入口页

|---- js/ JS //具体见JS细化结构

|---- css/ CSS //具体见CSS细化结构

2.1.2修正步骤约定

index.html全部样式附件于注:此时文件中不包含任何一个id =“ xxx”class="xxx"

为上一步书写CSS样式

[至此重构完成]

开始书写js交互文件,使用ID和定位Class被操作句柄

向代码中需要的地方添加及[至此交互效果完成]index.htmlid="xxx"data-xxx="xxx"

2.1.3命名规范

文件及文件夹:全部英文小写字母+数字或连接符“ -,_”,不可出现其他字符如:../css/style.css, jquery.1.x.x.js

文件:调用文件需包含版本号,压缩文件需包含关键字,其他插件则可不包含如:/libsmin/libs/jquery.1.9.1.js /libs/modernizr-1.7.min.js fileuploader.js plugins.js

ID:加利福尼亚命名法&小驼峰式命名法

如:firstName topBoxList footerCopyright

类别:[减号连接符]

如:top-item main-box box-list-item-1

尽量使用语义明确的单词命名,避免left bottom等方位性的单词

2.1.4格式和编码

文本文件:UTF-8 (无BOM)编码.xxx

图片文件:(PNG-24)(压缩率8-12).png .jpg

动态图片:.gif

压缩文件:.tar.gz .zip

2.2 CSS细化规范

......更多请点击阅读原文下载查看

推荐阅读:

【怎样防止代码被抄袭】浅谈前端代码加密

前端设计开发常用命名规则

前端开发常用css动画代码(自己收藏用)

作者 | 大神神码 | 蚂蚁开源社区大神,资深前端工程师

觉得文章不错,点下在看

点击阅读原文,演示/下载demo源码

↓↓↓↓

http://bbs.zzfriend.com/thread-13675-1-1.html

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-10-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 蚂蚁大喇叭 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档