文档章节

前端开发个人规范持续更新

linsk1998
 linsk1998
发布于 01/01 11:33
字数 637
阅读 18
收藏 0

这是个人多年来的总结,能想到的先写,后面有想到再补充

HTML

button标签必须设置type属性

<button>按钮</button><!--BAD-->
<button type="button">按钮</button><!--GOOD-->

表单动作应当在submit事件中,不应当在按钮的click事件中

<form action="doSomeThing.do" method="post"><!--BAD-->
	<input type="text" name="word"/>
	<button type="button" onclick="validate() && this.form.submit()">提交</button>
</form>
<form action="doSomeThing.do" method="post" onsubmit="return validate(this.form)"><!--GOOD-->
	<input type="text" name="word"/>
	<button type="submit">提交</button>
</form>

按钮应当使用button标签或a标签,不要用div标签。样式用框架的。

<div class="btn btn-primary">按钮</div><!--BAD-->
<button type="button" class="btn btn-primary">按钮</button><!--GOOD-->
<a href="javascript:void 0" class="btn btn-primary">按钮</a><!--GOOD-->

文章内容应当放进article标签中

<div class="layout"><!--BAD-->
	<h1>BAD<h1>
	<p>asd ewqr xcv fgh zc ytyutyu asdxc ewrwer. asdasd rtyfthfg czxczxc wersefs asdxc.</p>
</div>
<div class="layout"><!--GOOD-->
	<article>
		<h1>GOOD<h1>
		<p>asd ewqr xcv fgh zc ytyutyu asdxc ewrwer. asdasd rtyfthfg czxczxc wersefs asdxc.</p>
	</article>
</div>

HTML注释两边应当用2个减号,避免使用中文

<!-------------------------这个注释会有坑------------>
<!--GOOD-->

 

CSS

设置了width或height时,应当设置overflow。

#div1{/*BAD*/
	height:100px;
}
#div2{/*GOOD*/
	height:100px;
	overflow:auto;
}

设置overflow,一般要设置了width或height.

/*BAD*/
#outter1{
	width:1000px;
	padding:50px;
}
#inner1{
	overflow:hidden;
}
/*GOOD*/
#outter2{
	width:1000px;
}
#inner2{
	width:90%;
	overflow:hidden;
	margin:0 auto;
}

CSS HACK应当在知道布局问题的情况下才能使用

<!DOCTYPE html>
<html>
	<head>
		<style>
			*,*:before,*:after{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
			/*BAD*/
			div{ width:200px; *width:140px; padding:30px; background:#FFCCCC;}
		</style>
	</head>
	<body>
		<div>Hello, world!</div>
	</body>
</html>
<!--DO NOT DELETE THIS COMMENT-->
<!DOCTYPE html>
<html>
	<head>
		<style>
			*,*:before,*:after{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
			/*GOOD*/
			div{ width:200px; padding:30px; background:#FFCCCC;}
		</style>
	</head>
	<body>
		<div>Hello, world!</div>
	</body>
</html>

不要清除全局的padding和margin

/*BAD*/
*{ margin:0; padding:0;}
/*GOOD*/
body,dd,dl{ margin:0; padding:0;}

 

JavaScript

函数赋值要匿名

/*BAD*/
var Clazz=function URL(){
	/*...*/
};
/*GOOD*/
var Clazz=function(){
	/*...*/
};

进行提交时,应当禁用提交按钮

<form action="doSomeThing.do" method="post" onsubmit="this.submit.disabled=true; return validate(this.form)"><!--GOOD-->
	<input type="text" name="word"/>
	<button type="submit" name="submit">提交</button>
</form>

使用键值对如果键是不确定的,应当使用Map而不是Object

//BAD
var cache={};
function getCache(key){
	return cache[key];//Error 没有考虑toString等特殊情况
}
function hasCache(key){
	return key in cache[key];//Error 没有考虑toString等特殊情况
}
function setCache(key,value){
	cache[key]=value;
}
//GOOD
var cache=new Map();
function getCache(key){
	return cache.get(key);
}
function hasCache(key){
	return cache.has(key);
}
function setCache(key,value){
	cache.set(key,value);
}

 

© 著作权归作者所有

共有 人打赏支持
linsk1998

linsk1998

粉丝 1
博文 19
码字总数 5886
作品 2
东城
私信 提问
java web全栈漫谈

一个项目从需求确认到上线,生命周期其实还是挺长的。作为一般公司的话,分工是比较具体的,比如从需求分析师,产品经理,美工,前端,后端再到运维,每个工种都有,但如果要全栈的话,还是要...

tomzhao
2016/10/16
190
2
前端开发文档(参考手册,开源书籍)

前端开发文档 前端开发文档包含前端技术(HTML.CSS,JS)的参考手册,前端编码规范,以及整理前端开源的一些书籍。 访问地址:http://f2edocs.com 当前版本 V0.1 持续更新中... 参考、使用的项目...

郭小铭
2015/10/07
290
2
flutter 开发者帮助 APP - flutter-go

Flutter Go 帮助开发者快速上手 Flutter 内部测试中,1.0 正式版将于 2月 20日 发布。 版本更新历史 按时间顺序,展示重要的提交更新内容。 地址 开发规范 由于类似 javascript, java, object...

匿名
02/15
0
0
前端开发-学习资料库

前端开发-学习资料库 包含前端技术参考手册,前端编码规范,前端博客及社区,前端面试题,以及整理前端开源的一些开源书籍。 http://f2edocs.com 持续更新中... 参考、使用的项目 ECMAScript...

郭小铭
2015/12/01
170
0
美团网-北京急招职位更新

更多职位信息请见:http://blog.sina.com.cn/u/1984808834 1.java高级工程师 工作职责: 主持系统建模和架构设计; 从事底层框架、核心部分代码的编写; 指导并带领初级工程师共同完成开发任...

molica
2012/05/18
1K
8

没有更多内容

加载失败,请刷新页面

加载更多

mybatis缓存的装饰器模式

一般在开发生产中,对于新需求的实现,我们一般会有两种方式来处理,一种是直接修改已有组件的代码,另一种是使用继承方式。第一种显然会破坏已有组件的稳定性。第二种,会导致大量子类的出现...

算法之名
昨天
11
0
单元测试

右键方法 Go To --> Test,简便快速生成测试方法。 相关注解 @RunWith(SpringRunner.class) 表示要在测试环境中跑,底层实现是 jUnit测试工具。 @SpringBootTest 表示启动整个 Spring工程 @A...

imbiao
昨天
2
0
欧拉公式

欧拉公式表达式 欧拉公式的几何意 cosθ + j sinθ 是个复数,实数部分也就是实部为 cosθ ,虚数部分也就是虚部为 j sinθ ,对应复平面单位圆上的一个点。 根据欧拉公式和这个点可以用 复指...

sharelocked
昨天
4
0
burpsuite无法抓取https数据包

1.将浏览器和burpsuite的代理都设置好 2.在浏览器地址栏输入: http://burp 3.下载下面的证书,并将证书导入浏览器 cacert.der

Frost729
昨天
2
0
JeeSite4.x 消息管理、消息推送、消息提醒

实现统一的消息推送接口,包含PC消息、短信消息、邮件消息、微信消息等,无需让所有开发者了解消息是怎么发送出去的,只需了解消息发送接口即可。 所有推送消息均通过 MsgPushUtils 工具类发...

ThinkGem
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部