开发规范

为了更好书写可维护的代码,在不管多久以后都能看懂自己写的代码,就需要规范自己的代码。

驼峰式命名方式

大驼峰命名——首字母大写 UserInfo
小驼峰命名——首字母小写 userInfo

文件资源命名

文件名不能有空格。
文件名建议只使用小写字母,不使用大写字母。
为了醒目,某些说明的文件名,可以使用大写字母,例如README。
文件名包含多个单词,建议单词之间用 “-”分隔。
引入资源使用相对路径,不要指定资源的具体协议(http或https),除非两者协议都不可用。

变量命名

小驼峰命名

命名规则: 类型+对象的描述方式,如没有明确的类型,就可以使前缀为名词
array a
boolean b
function f
init i
object o
string s

函数命名

小驼峰命名
命名规则: 前缀为动词
返回值
can 判断是否可以执行某个动作 函数返回boolean true 可执行 false 不可执行
has 判断是都含有某个值 boolean true含有此值 false 不含此值
is 判断是否是某个值 boolean true为某个值 false 不为某个值
get 获取具体单个值 函数返回一个非布尔值
set 设置具体单个值 无返回值,返回是否设置成功或返回链式对象
//是否可以阅读
function canRead(){
return true
}
//获取姓名
function getName(){
return this.name
}

常量

全部大写
规则: 大写字母+下划线来组合命名,多个单词之间用_进行分隔
var URL = 'http://dhejhf.com';
var MAX_COUNT = 100;

类的成员

公共属性: 同变量命名
公共方法: 同函数命名
私有属性: 前缀为下划线_,下划线后面跟公共属性和方法一样的命名方式
私有方法:

function Student(name){
var _name = name //私有属性
//公共方法
this.getName = function (){
return -name
}
}

HTML开发规范
文档规范

文档声明类型:<!DOCTYPE html>
使用文档声明类型是为了防止浏览器开启怪异模式。
如果不写<!DOCTYPE html>,就会开启怪异模式,浏览器就会按照自己的解析方式渲染页面,在不同浏览器下会有不同样式。
如果写入!DOCTYPE html>,就等于开启浏览器标准模式,浏览器会按照W3C标准解析渲染页面。

脚本加载

所有浏览器推荐 js放在下面,css放在上面。
针对不同的兼容需求,那么js放置的位置也可以不一样。
如果只需要兼容ie10+或只在移动端访问,那么可以使用async,将js脚本文件放在<head>内

只在老旧浏览器(ie9-)中,
脚本引用写在 body 结束标签之前,并带上 async 属性。这虽然在老旧浏览器中不会异步加载脚本,但它只阻塞了 body 结束标签之前的 DOM 解析,这就大大降低了其阻塞影响。而在现代浏览器中:
脚本将在 DOM 解析器发现 body 尾部的 script 标签才进行加载,此时加载属于异步加载,不会阻塞 CSSOM(但其执行仍发生在 CSSOM 之后)。
所有浏览器推荐形式:
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>

<script src="main.js" async></script>

</body>
</html>
只兼容现代浏览器推荐:
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="main.js" async></script>
</head>
<body>

</body>
</html>

html只关注内容

html只显示展示内容信息
不要引入一些特定的html结构来解决视觉设计问题
不要讲img元素当做专门用来做视觉设计的元素
样式上的问题应该使用css解决

js规范
不写全局变量

在一般情况下,我们还是少些全局变量,避免命名空间被污染。
为了防止全局变量,一般都是将代码包裹在立即执行函数中,常见一个独立的作用域。立即执行完后立即释放。

变量声明

总是用var来声明变量。
var xx=1;
如果不指定var,变量就会隐式声明为全局变量。
var a=b=0;
等同于:
var a =0
b=0 //如果在全局中都没有找到b,则为隐式的声明为全局变量

js变量提升

js在执行代码时,会先将代码中的声明的变量提升,再执行。

禁止修改对象的原型链
最好不要修改 比如 Object.prototype, Function.prototype, 可能会导致开过程中遇到问题。

css规范
calss 命名规则

命名名称总是反应元素目的和用,或者而是其他通用名称。

基于功能(eg:侧边栏 sidebar)
基于内容 (eg: 内容是个人信息 personalnews)
也就是说 命名体现功能、 内容,不涉及表现样式(颜色 字体 背景等)

css样式可以按照以下顺序排列

1 位置相关的属性,定位
2 盒模型 margin padding width height border display
3 文字相关 字体 字体大小 字体颜色 居中
4 视觉 圆角 背景色 边框颜色

合理使用id

因为id的权重很高,建议不应该用于样式,而是使用class。

css中不使用标签名

遵循结构 行为 表现 分离的原则,应该尽量在css中不出现html标签。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,616评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,020评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,078评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,040评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,154评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,265评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,298评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,072评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,491评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,795评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,970评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,654评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,272评论 3 318
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,985评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,223评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,815评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,852评论 2 351

推荐阅读更多精彩内容

  • 1. CSS的全称是什么? CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(...
    淡然7698阅读 371评论 0 1
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,744评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,644评论 18 139
  • css是层叠样式表,它是网页之皮 本文主要内容: 1. css语法格式(怎么写?) 2. css引入方式(怎么用?...
    饥人谷_喂鱼de猴子阅读 217评论 0 1
  • 做销售的习惯是(买、用、知、说)……云集是一个庞大的生活平台,方便快捷并有货品质量的保证和服务。我自己是从...
    张萍2017阅读 184评论 0 0