此文为本人记录文,记录在开发过程中一些注意事项和他人建议,不定时更新。
(适用于:初踏入前端开发行业人群)
1、注释
html中:
<body>
<!--header一般用于LOGO,导航nav body用于页面的主要部分 footer底部,如友情链接,网站基本信息 goTop有的网页有跳转到最上面的模块-->
<!-- start header-->
<!-- end header-->
<!-- start body-->
<!-- end body-->
<!-- start goTop-->
<!-- start footer-->
</body>
css中也同样需要标注当前是某个模块
每个模块注释
/*
XXXXXXX(功能)
XXX(人名)
2015-11-11(时间)
*/
2、css放在HTML上面,JS代码放在HTML下面。
避免加载html时出现无样式。先将网页呈现给用户,再来加载页面的脚本。避免JS阻塞网页的呈现导致页面的空白。
3、代码格式化(同级进行对齐,一般缩进用TAB键)
4、行为操作相关
例如全选按钮,通过判断全选按钮是否被选择来实现全选和取消,而不要通过一个变量。
5、需要使用变量时
不要直接if(glength==2)
而是
var startlength=2;
if( glength == startlength ) 这样判断中含有意义,有利于维护
6、变量命名时以他的英文或相关单词命名,让人一看就知道这个变量的作用。
7、if(){
}
或if()
{
}
两种写法都可以,但是同个项目中,代码要统一
8、不要放一堆全局变量在外面,如果要使用全局变量,应使用不同命名空间。
(在JS中,一切都是对象)
var obj1={
a:1,
b:2,
};
多个JS时:
obj1.str={};
obj1.str.a=2;
obj1.str.b=2;
obj1.str1={};
obj1.str1.a=4;
(具体命名空间用法看本人另一篇文章《JS中避免命名冲突》)
7、CSS文件或JS文件,采用common.css+html名.css/common.js+html名.css。
8、有多级代码时,按层级读取。
通常都是先收起,然后按照用户打开哪个部分,再加载哪个部分,
9、动态加载仅加载需要经常变化的内容,对于固定的内容,直接使用HTML。动态加载会导致速度变慢。
10、不要套多标签嵌套,规范嵌套行为。
(具体查看本人另一篇文章《HTML标签嵌套规则》)
11、对于规则的数据,使用表格,增删改查方便,有利于后台人员开发。
12、JS动态生成的元素,绑定事件需要on。
JQ1.7版本以前使用live(),已被弃用。
无效时,测试:
$("body").on("click",".cancel",function(){
alert(1);
alert(this.index());
})
一般原因,元素的所在范围错误。
注意:我们在查找某个元素的时候,$("#ulid")的范围越小越容易被找到。
但是,不能选择后来才生成元素作为判断的范围,否则浏览器会找不到。
13、项目完成后进行代码的压缩。
JS压缩工具:Packer YUI Compressor
做法:去掉空格和换行,去掉注释,将复杂变量名替换成简单变量名。
14、a标签的写法,需要加上target属性
<a href="#" target="_self"></a>
_blank | 在新窗口中打开被链接文档。 |
_self | 默认。在相同的框架中打开被链接文档。 |
_parent | 在父框架集中打开被链接文档。 |
_top | 在整个窗口中打开被链接文档。 |
framename | 在指定的框架中打开被链接文档。 |
有时候也加title属性 <a href="#" target="_self" title="登录">登录</a>
title鼠标上移时,显示该链接的文本注释(用在登录注册?)
15、javascript:void(0)/javascript:;
当某个链接,需要指定其他事件操作,而不要跳转的时候
href="javascript:void(0);"
如: <a href="javascript:void(0);" title="在线客服">在线客服</a>
16、HTML 中最好不要将无内容元素的标签闭合,例如:使用 <br> 而非 <br />
17、一般来说,数据存在一个方法内部,使用完了就扔掉。
18、input搜索框,如果不打算提交和刷新,不要用form。