WEB学习笔记4-前端代码基本命名规法和格式规范
1.HTML命名规范及格式规范
标签名和属性应该都小写，虽然HTML代码不区分大小写；属性值应该用双引号闭合。
<IMG src=demo.jpg alt='test'/>(N)
<img src=demo.jpg alt="test"/>(Y)
给所有的关键元素定义元素的id和class,便于和CSS、javascript交互。推荐做法：根据语义和DOM树的层级关系来定义合适的名称，名称中全部使用小写，id名称中的关键词使用下划线（_）连接，class的关键词用中划线（-）连接，这样可以最大限度的保证命名不重复。
不推荐示例：
<div id="Reader">
<div id="introduce"class="introduce">
...
</div>
</div>(N)
推荐示例：
<div id="Reader">
<div id="Reader_introduce" class="Reader-introduce">
...
</div>
</div>
如果class名称仅座位javascript调用的“钩子”，则可在名称中添加“js”前缀，如下
<ul id="js_reader_memu">
<li class="memu-toc js-active">Toc</li>
<li class="memu-store js-active">Store</li>
<li class="memu-library">Library</li>
<li class="memu-news">News</li>
</ul>
HTML代码层级缩进为4个空格，如果元素中包含子元素，则此元素对应的起始标签和闭合标签分别独占用一行
不推荐示例：
<ul>
<li> item1</li><li>item2</li>
<li>item3</li><li>item4</li></ul>
推荐示例：
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
给HTML代码添加必要的注释。可以在页面的公共部分（页面的头部、尾部以及侧边栏等）、页面经常变化的部分（如广告栏）以及需要后端代码注入的部分添加注释。注释添加的位置在要注释的代码上单独占用一行，不要再代码行的后面直接添加，例如：
<body>
<!--main header-->
<div id="reader_head">
...
</div>
<!--动态绑定列表：toc-->
<ul id="reader_content_toc">
</ul>
...
</div>
</body>
2.CSS命名规范及格式规范
推荐的CSS类的命名规则和元素的id命名规范相似，只是组成类名称的关键字的连接符为中划线（-）
.reader-content-title{
...
}
为了避免重复，命名时，取父元素的class名作为前缀
/*父元素的样式声明*/
.reader-content{
...
}
/*子元素的class名称以父元素中的class名称作为前缀*/
.reader-content-body{
...
}
在css样式定义中，左大括号放置在选择器的同一行，并和选择器之间添加一个空格分隔，在保证可读性的基础上，缩短代码的行数；在样式声明中，属性名称和值之间用一个空格分隔，提高代码可读性。
不推荐示例：
.reader-content-title
{
backgrond:#FFF;
...
}
推荐示例：
.reader-content-title{
background:#FFF;
...
}
多个选择器具有相同的样式声明时，每个选择器应该独占一行，便于阅读和维护
不推荐示例：
h1,h2,h3{
font-weight:normal;
line-height:1.2;
}
推荐示例：
h1,
h2,
h3{
font-weight:normal;
line-height:1.2;
}
使用CSS美化工具做样式声明排序的工作
示例代码：
.reader-content-title{
background:#FFF;
boder:1px solid;
-moz-border-radius:4px;
-webkit-boeder-radius:4px;
border-radius:4px;
color:black;
text-align:center;
}
样式定义按照模块来分组，相同的模块的样式定义放在一起，不同的模块定义之间用一个空行分隔；
示例代码：
/*reader header*/
.reader-header-title{
...
}
.reader-header-introduce{
...
}
/*reader footer*/
.reader-footer-copyright{
...
}
.reader-footer-links{
...
}
在CSS中添加注释，主要分为，两种类型，文件头部的文件信息注释和正文中的解释说明性注释。文件信息一般包括文件版本，版本信息以及作者等；解释性说明性注解，有给模块的注释性和单独给选择器的注释，模块的注释则需添加注释表明模块样式定义的开始和结束，CSS选择器的注释需要添加在选择器的上一行，而不是的选择器相同一行。
示例代码：
/*注释规范说明：文件头部的文件信息注释*/
/*!
*reader content v1.0
*
*Copyright 2012
*Dual licensed under the MIT or GPL Version 2 licensed
*
*Desighned and built by dangjian
*
*/
/*注释规范说明：模块样式定义的开始和结束*/
/*content containers start*/
/*注释规范说明：注释需要添加在选择器的上一行，而不是和选择器相同的一行*/
/*content title*/
.reader-content-title{
...
}
/*content containers end*/
3.javascript命名规范及格式规范
javascript局部变量命名采用首字母小写，其他字母大写的方式命名，命名时建议采用有意义的单词命名，不推荐使用标示变量类型的前缀，如int，str,obj等。
//不推荐使用：变量命名首字母大写
var ReaderBookMark='bookmark'
//不推荐使用：变量命名意义不明确
var object={};
//不推荐使用：变量命名以类型作为前缀
var strName='Note'
//不推荐使用：变量命名使用语义不明确的缩写
var newNT=function(){
...
}
//推荐示例：变量命名语义明确
var bookmarkDefaultTitle='UntitleBookmark'
公有接口的命名为首字母大写，私有接口的命名为首字母小写
示例代码：
Reader.Contect=function{
//私有变量
var info,title;
//私有方法
var getContent=function(){
...
}
return{
//公有方法
SetTitle:function(contentTitle){
title=contentTitle;
},
//公有属性
ContentInfo:info
}
}()
JQuery框架在项目中使用广泛，推荐给JQuery类型变量添加“$”作为前缀
示例代码
var $tocTitle=$('.reader-toc-title')
左大括号应该在行的结束位置，而不应该单独一行，因为这样增加了不必要的行数。应该一直使用大括号括起逻辑块，即使逻辑块只有一行，也应该用大括号括起来，以便提高代码的可读性和可维护性。
示例代码
//左大括号应该在行的结束位置，而不应该单独一行
for（var i=0;i<100,i++）{
doSomething(i);
}
//应该一直使用大括号括起逻辑块，即使逻辑只有一行，
var isFound=false;
if(statement){
isFound=true;
}
JavaScript中可以用单引号或者双引号定义字符串，但是因为习惯于定义HTML的元素属性值时使用双引号，而JavaScript中又经常包含HTML代码，所以字符串定义使用单引号也可方便于在字符串内部包含含有双引号的HTML代码。
示例代码：
var content='<span id="main_content">...';
空格的作用是提高代码的可读性，在函数参数的逗号后面使用一个空格，在操作符前后各使用一个空格，另外，使用一个空行来区分业务逻辑段
示例代码：
doSomething(myChar , 0 , 1);
where(x===y){
...
}
javascript语句结束时，应该添加一个分号。
javascript代码中，如果注释未占有多行，那么建议使用//，不推荐使用/**/。注释应单独占一行，而不是写在和代码相同一行的右边。哦CSS代码的注释规范相似，javascript代码的注释主要也是文件信息注释和代码逻辑注释
WEB学习笔记4-前端代码基本命名规法和格式规范的更多相关文章
- [原创]java WEB学习笔记66：Struts2 学习之路--Struts的CRUD操作( 查看 / 删除/ 添加) 使用 paramsPrepareParamsStack 重构代码 ，PrepareInterceptor拦截器，paramsPrepareParamsStack 拦截器栈
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- [原创]java WEB学习笔记95：Hibernate 目录
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- java web 学习笔记 编码问题总结
java web 学习笔记 编码问题总结 1.非form表单中提交的中文参数---------------------------传递给Servlet服务器时,默认以iso-8859-1解码 ...
- Java Web 学习笔记 1
Java Web 学习笔记 1 一.Web开发基础 1-1 Java Web 应用开发概述 1.1.1 C/S C/S(Client/Server)服务器通常采用高性能的PC机或工作站,并采用大型数据 ...
- jQuery 学习笔记：jQuery 代码结构
jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...
- Java Web学习笔记之---EL和JSTL
Java Web学习笔记之---EL和JSTL (一)EL (1)EL作用 Expression Language(表达式语言),目的是代替JSP页面中复杂的代码 (2)EL表达式 ${变量名} ( ...
- JAVA Web学习笔记
JAVA Web学习笔记 1.JSP (java服务器页面) 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . JSP全名为Java Server Pages,中文名叫java服务器 ...
- Vue学习笔记-vue-element-admin 前端学习
一 使用环境 开发系统: windows 后端IDE: PyCharm 前端IDE: VSCode 数据库: msyql,navicat 编程语言: python3.7 (Windows x86- ...
- [原创]java WEB学习笔记75：Struts2 学习之路-- 总结 和 目录
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
随机推荐
- Dynamic CRM工作流流程实战
前言在研究了MSCRM中插件的使用之后,不可避免需要研究工作流,工作流在各种营销系统中都举足轻重. 关于工作流功能:使用工作流可在后台实现业务流程自动化.类别:分为后台工作流(异步)和实时工作流(同步 ...
- 关于ckeditor5设置高度
在管理端模板AdminBSBMaterialDesign-master里发现一个比百度编辑器看起来更高大上的编辑器:ckeditor.模板中使用的是版本4,自己在官网上下载了最新版本.在之前的版本,使 ...
- BAT面试官告诉你如何回答你的职业规划
前言(Why) 在面试中不论是在一面二面三面这种技术面,还是在最后的hr面,经常会被人问及,"谈谈你的职业规划"这种问题,我们回答的很可能会给我们的面试表现加分,如果回答地不好,对 ...
- 封装一个redis操作类来操作hash格式
最近项目要用redis,依然是基于tp3.2. 发现thinkphp3.2自带的缓存类并不好使用,就自己封装了一个 目前只支持hash格式,其他数据类型的操作后面用到的时候再补充 <?php / ...
- Android Studio中使用Git进行代码管理（分支、合并）
打开Android Studio选择,选择从Git检出代码 也可以从VCS如下点击 去远程仓库复制地址,这里以码云Gitee第三方代码托管为例,类似Github的界面,点击右边复制项目地址 填一下配置 ...
- Oracle 11g 单实例到单实例OGG同步实施文档-EXPDP初始化
Oracle 11g 单实例到单实例OGG同步实施文档-EXPDP初始化 2018-06-07 00:446470原创GoldenGate 作者: leo 本文链接:https://www.cndba ...
- dockerfile编辑时常用的sed命令，用来修改配置文件。
sed 替换部分文件内容 随着使用,会逐步更新. #替换整行sed '/mengqingbo/c lanqiuxiaozi="FALSE"' fileName #匹配行前加sed ...
- vim常用指令
命令历史 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令. 启动vim 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filename 打开vim ...
- Windows浏览器无法连接VM虚拟机Centos并打开nginx页面
装的是centos6.7minimal版本,搜了下,需要关闭防火墙 于是 yum install iptables 然后关闭防火墙 service iptables stop 再打开浏览器,成功进入页 ...
- 小飞侠带你精通Python网络编程系列04-Python内置的数据类型
在Python中有以下几种标准的内置数据类型: 1.NoneType: The Null object--空对象2.Numerics(数值): int-整数, long-长整数, float-浮点数, ...