多开发人员认为擅长设计是一种天生的能力，而创造力是与生俱来的。但是设计是一项可以像其他任何东西一样学习的技能。你不必天生就可以创建一个漂亮的网站的艺术家，这需要实践。在身边的小伙伴的博客，自己的网站来看，很多人都是用了开源后台的网站模板，熟不知局限太大，自己想要的内容板式也要跟着模板走，越往后看着自己的站点越不顺眼，没有一点成就感。

本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

为什么要自己设计？

当您可以使用Bootstrap之类的UI库或预制模板时，为什么要自己设计？以下是设计网站的一些好处。

●①在人群中脱颖而出。许多开发人员博客都使用类似的模板，很容易看出它不是自己设计的。如果个人网站的目的是展示你的能力，那么使用模板可能会降低别人对你的肯定，自己设计的独特风格，让你站点在众多的站点中脱颖而出。

●②练习技巧。设计它会帮助你练习设计原则，工具，HTML和CSS。你将更容易开发用户界面并将其引入网络。设计出独特且符合现代潮流的个人站点。

以前接私活的时候，不会设计页面，搬运其它站点页面，导致自己修改图片和部分页面的时候，不会使用工具，设计出来的页面死板不灵活，客户不满意，自己看了也觉得很普通，没有给你心意的感觉。

●③更好的应用程序性能。你的网站将是轻量级的，并且使用自定义CSS会具有更好的性能。如果要包括UI库或模板，则它可能包含大量代码，以涵盖您未使用的各种可能的自定义。如果未使用的代码发送给用户，则会对你网站的性能产生负面影响。加载慢，打开网页慢，被很多人不接受。

●④发展职业技能。在Web开发角色中，你可能不必从头开始实现完整的网站设计，但是你应该能够制作与现代设计一致的外观精美的界面。成为“全栈开发人员”通常意味着精通后端语言或前端JavaScript框架，同时能够熟悉设计，产品方面的知识。全栈开发人员应具有一些基本的设计知识，并能够为用户提供一致的体验。当然从中学习到很多的技能知识，这是毋庸置疑的。

●⑤可能会很有趣。创造出令自己感到骄傲的东西是一种有趣的经历。如果您花一些时间练习它，琢磨它，打造出属于自己的页面，岂不是更好，生活中发现美是一件很美好的事，但我觉得创造美更让人觉得骄傲。

开始设计你的网站，不要直接写页面，从代码里设计页面。很难从代码编辑器中可视化设计，我建议先使用可视化设计工具，然后将结果转换为代码。现在有一些快速的代码生成模板，我觉得小项目可以用一下，就比如说我们的个人站点，大型项目追求性能，就不合适了。

▲制作界面原型的软件，我最喜欢的是 Balsamiq Mockups，一个手绘风格的、轻量级的小软件。我喜欢它的理由是：

• 快——它能让我以最快的速度把界面原型画出来。
• 手绘风格——用它画出来的界面是不折不扣手绘风格，很酷。
• 都是现成的——它已经内置了常用的控件和图标，基本够用了。

开始你的表演

●①创建线框

第一步是创建站点的低保真线框。创建线框有助于在添加视觉设计和内容之前建立页面的结构。线框不必很漂亮，它应该专注于内容的布局。您可以手工绘制它，也可以使用设计工具的基本功能。

为了创建线框，我喜欢将设计视为一系列矩形。网页上的元素是从上到下流动的矩形块。从矩形开始不需要任何艺术才能。

●②网站结构

放置在线框中的元素由您决定。您可以考虑添加导航栏，页眉，博客文章和页脚。您可能不需要所有的这些内容，可以将其保留为基本内容，以后再添加。确定要包括的内容并将这些部分合并到线框中。如果你在布局这块遇到问题，可以查看一个类似的网站，模仿网站内容的结构，然后对其进行修改以适合你的需求。

线框不一定是完美的。在拥有合适位置的网站结构之后，就可以转向视觉设计。

●③应用视觉设计

要将低保真线框转换为设计，可以使用免费的设计工具，例如 Figma（下一代的设计神器）。如果你从未使用过设计程序，你也可以用ps来实现，不过会有点慢，但在国内我还没有找到类似 Figma 这么好用的工具。

●④实施布局

首先，创建一个空白画布以代表空白浏览器页面。通过为内容创建容器，在设计工具中实现线框。我建议先从黑白开始，以便你可以专注于布局。

优化您的布局，以使元素大小适当，对齐并在它们之间留出空间。

●⑤添加部分和占位符内容

在看起来像一个网站之后，使其看起来更漂亮。通过弄清楚是什么使布局看起来有吸引力，可以模仿其他网站的逼格样式来添加到自己的网站。

在此阶段，请考虑形状，大小，边界和阴影。用你喜欢的样式逐渐升级基本矩形。

●⑥更新版式

字体和间距的设计对美观大有帮助。如果排版得当，即使是简单的设计也可以是高质量的。同样，你可以模仿另一个网站或搜索字体和字体资源，以将其纳入你的设计中。但是一定要注意版权。

记得有家企业，不管字体版权问题，在自家网站使用方正字体，被告侵权，这是需要赔偿的。

●⑦给它上色

接下来，为站点添加颜色。通过建立品牌来赋予网站特色。考虑一下你希望网站如何吸引读者。如果你希望它看起来干净且极少，请选择不太亮的颜色，渐变保持微妙，并选择易于阅读的字体。如果你希望它看起来有趣，请选择明亮的颜色，使用鲜艳的渐变，应用背景纹理，使用圆形元素，然后选择醒目的字体。

添加颜色似乎令人生畏，但你无需了解颜色原理即可。如果您的设计是从黑白开始的，则可以选择一种单色来强调元素，以赋予设计生命。如果你想超越此范围，建议您选择一种或两种您喜欢的颜色，然后使用该颜色的不同亮度变化。这有助于创建一个具有凝聚力的主题，而不必成为色彩专家。选择背景色和前景色时，请通过检查颜色对比来牢记可读性。

例如，将深蓝色设置为背景，然后将较浅的蓝色设置为文本。对于白色背景色，可以将蓝色的中等亮度用作标题。

将颜色合并到设计中后，请继续检查总体设计感并进行调整。

●⑧注意细节

在设计时，你应该退后一步来查看整个设计并进行完善。通过用简单的语言描述您所看到的内容来批判你的设计，然后将该陈述转换为需要解决的技术问题。

1. 看起来紧凑吗？增加填充和边距。
2. 文字难读？选择更清晰的字体或增加字体大小。增加背景和前景之间的颜色对比度。
3. 内容难识别？添加具有较高字体粗细的标题。在标题和段落之间添加更多间距。
4. 看起来草率或不一致？在水平和垂直的直线上对齐元素。在设计程序中设置指南可以帮助确保元素正确对齐。调整填充和边距，以保持垂直方向上一致的间距。通过建立标题和段落的字体和大小来使文本一致。避免文本变化太多。确保所有颜色都符合你的调色板。

完成设计后，就可以开始将其转换为代码

●①创建HTML结构

Github上有个项目是 pix2code ，它可以直接将页面生成HTML结构并附加CSS代码，已经开源了，感兴趣的可以去看看，确实很吊。

国内暂时还没有这样的项目，想搞拖拽开发的老板真是不少，但没见过谁家真正做出来了，做不出来肯定不是技术不能实现，拖拽的本质是在组件库基础上加了一层交互界面，所以组件化是拖拽开发的第一步，剩下的其实就是"layoutit"了，但要真正落地，就有很多限制。

可拖拽的组件应该是封装了控制层和视图层的，原则上耦合越低越好，内聚越高越好，自己浑然一体最好，只对外暴露配置项，也就是说将一个组件拖拽到界面上之后，得有一个动态生成配置面板的机制，"layoutit"也有一个简单的配置机制，但远远不是生产级别的，这里可以统一约定一个规则，让组件的配置项可以被读取，也可以按组件枚举，硬做到界面上，都可以，都有优缺点；

互相依赖的组件之间的数据交互会有问题，因为各组件的输入输出不可能完全一致，也就做不到依赖组件之间无缝接入，常规开发中开发者会手动做一些"适配"工作，比如将A组件的输出剪裁或修饰一下传给B组件，但现在是搞拖拽，这个数据修饰没法做了，可以修改组件做到可以互相适配，或者一步到位在拖拽系统上做一套数据修饰的中间功能，让操作者自己适配，都可以，都有很大的缺点。

所以在这里我们也只好一步步的自己切页面了，尽可能是响应式的，同时按设计稿填充的内容在HTML结构填充元素。

●②小技巧

将布局变成完整的设计时，我喜欢考虑将设计从上到下划分为多个部分的水平线。顶部的导航栏可能是第一个切片。中间的可能是一个切片，底部的是一个切片，我会将他们用明显的线条区分开来，使用不用的颜色，美观而又清晰。

一般在企业的工作的时候，都是设计师给设计稿，叮嘱效果，我们按照设计师的稿子从头到下附带交互效果直接切页面，

●③后续步骤

页面设计完成并用代码制作了个人网站，接下来配置后台和网站在服务器的部署了，这里我们使用SiteServer CMS 内容管理系统来作为我们网站的后台。如何使用，点击阅读更多，既然是自己设计网站，我们就不理会它里面的免费模板了。

至于后期的网站速度优化，代码优化之前我也提过了，写过文章详细说明过，大家也可以看一下。

你不知道的「前端性能优化」知识，我都给你总结好了

网站打开速度慢，这些是关键，不要以为不重要

总结

通过自己设计和代码编写，以及后期的上线，你将会学到这些。

• 自己设计网站将帮助你练习设计技巧，并让你的网站脱颖而出
• 创建线框以构造内容和功能
• 使用设计工具将线框变成视觉设计。从您喜欢的设计中获取灵感
• 对页面的HTML结构进行编码，以帮助了解需要使用哪些CSS来转换这些元素
• 使用CSS设置页面样式以完善匹配你的设计
• 通过部署，将其用作实践项目或继续改进设计，将其提升到一个新的水平

有没有正在自己设计搭建站点的小伙伴啊？或者感觉自己公司的设计师无非就是模仿还是模仿，不管设计啥都千篇一律的？一起交流下。

TML配置

• 文件应以“”首行顶格开始，推荐使用“”。
• 必须申明文档的编码charset，并且使用UTF-8编码。
• 移动端必须使用 viewport 适配
• 页面title是极为重要的不可缺少的一项。

以下是一个标准的html结构

html复制代码<!DOCTYPE html>
<html>
  <head>
    <!-- 必须声明 utf-8 编码格式 -->
    <meta charset="utf-8">
    <!-- 页面标题不能为空 -->
    <title>京东商城:商家后台</title>
    <!-- 移动端必须使用 viewport 适配需要, PC 看场景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
     
    <!-- 样式文件 以外链形式在此处引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
  </head>
  <body>
    <!-- 页面主体 -->
    <div class="warp">
      <header>顶部内容区域，比如：菜单头</header>
      <div class="content">主内容区域</div>
      <footer>顶部页尾区域，比如：备案号</footer>
    </div>
     
    <!-- js文件 在此处引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

主框架(jQuery,vue,react,angular等) 避免混合使用

避免多个框架混合使用，在同一个工程里面要保持主框架的一致性，多框架同时使用会造成代码混乱，后期会变得越来越难维护。

Css开发规范

1、全局样式禁止使用!important

2、避免使用导入式引入css样式文件；

css复制代码<style type="text/css">
  @import url(./demo.css);
</style>

未使用的js/css禁止引用

历史页面会有一些功能下线，在去除页面初始化的js语句的同时，也要将依赖的js文件删除，避免资源加载浪费

文件必须使用gzip压缩

开启Gzip压缩功能， 可以使网站的css、js 、xml、html 文件在传输时进行压缩，提高访问速度

api接口中，无用字段占传输比例30%以上时，删除无用字段

在开发过程中，发现无用字段占传输比例30%以上时，请进行返回数据的删减，加快数据请求速度

关于图片压缩

上传图片之前一定要做图片的无损压缩，节省网络流量,推荐网站tinypng

HTML的标准结构

html复制代码<!DOCTYPE html>
<html>
  <head>
    <!-- 必须声明 utf-8 编码格式 -->
    <meta charset="utf-8">
    <!-- keywords 关键词 和 Description 页面描述 便于搜索引擎检索，不强制使用 -->
    <meta name="Keywords" Content=”关键词1,关键词2,关键词3,关键词4″>
    <meta name="Description" Content=”页面描述″>
    <!-- 移动端必须使用 viewport 适配需要, PC 看场景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <!-- 推荐手动引入指定路径 favicon  -->
    <link rel="shortcut icon" href="path/to/favicon.ico">
    <!-- 样式文件必须以外链形式在此处引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
    <!-- 内联样式 -->
    <style type="text/css">
      .warp {
        margin: 0;
        padding: 0;
      }
    </style> -->
    <!-- 页面标题不能为空 -->
    <title>页面标题</title>
  </head>
  <body>
  <!-- 页面主体 -->
    <div class="warp">
    <header>顶部内容区域，比如：菜单头</header>
    <div class="content">主内容区域</div>
    <footer>顶部页尾区域，比如：备案号</footer>
    </div>
 
    <!-- JavaScript 文件在此处引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

• 不同模块区域可使用简要备注标识模块内容
• HTML 标签语义化使结构清晰，比如：
• CSS 外链引入必须放在 中
• JS 外链引入必须放在中
• 省略图像、媒体文件、样式表和脚本等嵌入式资源 URL 协议头部声明 ( http:// , https:// )，用//代替。
• favicon 在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：1。在 Web Server 根目录放置 favicon.ico 文件，2。使用 link 指定 favicon

HTML标签使用守则

标签小写

原生 HTML 标签元素小写使用，自定义组件使用小驼峰命名（自定义标签避免和原生标签同名）

html复制代码<!-- 错误 ❌ -->
<DIV></DIV>
<SPAN></SPAN>  
 
<!-- 正确 ✅ -->
<div></div>  
<p></p> 
 
<!-- 自定义组件 -->
<shareDialog><shareDialog/>

套用规则

禁止在行内元素中嵌套块级元素❗️

html复制代码<!-- 错误的嵌套 ❌ -->
<span><div></div></span>  
<i><p></p></i>     
 
<!-- 正确的嵌套 ✅ -->
<div><span></span></div>  
<p><i></i></p>   

更多标签使用规则介绍请查看尾部附录

属性定义

定义属性赋值时，使用双引号，禁止单双引号混用

html复制代码<!-- 错误的定义 ❌ -->
<input id="formTitle" type='text' placeholder="请输入标题">   
 
<!-- 正确的定义 ✅ -->
<input id="formTitle" type="text" placeholder="请输入标题" data="formTitle">   

正确闭合

除自闭合标签外，所有标签都需正确的编写闭合标签

常用自闭合标签： <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />

ID、Class 命名使用规范

ID 和 Class 取通用且有意义的名字；

使用连字符 - 作为 ID、Class 名称界定符 ，不要驼峰命名法和下划线；

避免选择器嵌套层级过多，尽量少于 3 级；

使用命名空间防止命名冲突，利于维护；

css复制代码/* 不推荐: 无意义 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
 
/* 推荐: 明确详细 */
#gallery {}
#login {}
.login-input {}
.meun-btn {}

• 避免选择器和 Class、ID 叠加使用
• 声明顺序，相关属性应为一组，建议遵循： 定位布局属性 -> 盒模型属性 -> 文本属性 -> 视觉属性 -> 其他属性
• 对于 JS 操作相关选择器 前面需加上 特殊应用标识前缀

css复制代码/* 标准的声明顺序 */
.declaration-order {
  /* 布局属性 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
 
  /* 盒模型属性 */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;
 
  /* 文本属性 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;
 
  /* 视觉属性 */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;
 
  /* 其他属性 */
  cursor: pointer;
}

图片相关使用规范

<img/>标签守则

• src 属性不能为空，需添加默认值（托底图片路径）
• 为重要图片添加 alt 属性，当无法显示图像时，浏览器将显示替代文本，便于 SEO 及用户阅读
• 为图片标签 增加 width 和 height 属性，避免图片加载从无到有，导致页面抖动
• 大量图片流资源，使用懒加载技术按需加载

html复制代码<!-- 禁止 src 取值为空 -->
<img src="" />
 
<!-- 推荐 -->
<img src="xxxx" alt="xxx" style="width:100px;height:100px;" />

图片资源守则

大小

尺寸 小于 50 × 50 的请使用 字体图标（iconfont）或者 将多个图标合成一张大图使用（雪碧图） 尺寸大于 50 × 50 的图片，引入前先使用 在线压缩 对其进行压缩 ，图片大小尽量控制在 300kb 以内

倍率

PC端、移动端 推荐使用 2倍图 (@2x），避免设备分辨率过高，图片显示失真模糊 如有兼容 iPad 场景等特殊场景，可使用 3倍图（@3x）

html复制代码<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>

2倍图： 图片展示区域大小 : 图片实际尺寸 = 1 ：2

无论使用几倍图，图片大小都需遵守上条限制

如遇图片倍图问题，可咨询 @UI童鞋

性能守则

• 避免不必要的 DOM 操作浏览器遍历 DOM 元素的代价是昂贵的。最简单优化 DOM 树查询的方案是，当一个元素出现多次时，将它保存在一个变量中，来避免多次查询 DOM 树。

js复制代码/* 推荐用变量保存频繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
  lis = document.getElementsByTagName('ul')[0].getElementsByTagName('p')
   
/* 推荐用变量保存频繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
  lis = ul.getElementsByTagName('li')

• 异步加载第三方内容 当你无法保证嵌入第三方内容 比如 埋点、调研等资源正常工作的时候，你需要考虑用异步加载这些代码，避免阻塞整个页面加载。
• 减少标签的数量 编写 HTML 代码时，尽量避免多余的标签嵌套，避免 DOM树的冗余
• 控制静态资源数量

1个页面中建议CSS文件不要超过3个（1个组件库样式文件、1个项目公共样式、1个页面样式）； JS文件不要超过5个（1个框架文件、1个组件库文件、1个项目公共库文件、1个页面脚本文件、1个埋点文件）。

编码建议

缩进使用 2个空格 样式建议引入 CSS reset 重置各浏览器自带样式差异 github.com/necolas/nor… JS 中字符串定义 使用 '' 单引号

其他建议

保持一定的代码洁癖，尤其在大型项目中

• 代码逻辑应当直截了当，清晰易读，保持与业务逻辑与代码一一对应关系，减少逻辑错误的可能性，降低二次开发成本；
• 删除过期无用代码，减少代码过大，造成不必要的维护成本
• 代码尽量复用，拥有组件化思想
• 代码命名合理化，即使不写注释情况下，也可以让其他开发人员一眼明白意思
• 性能调至最优，降低耦合度，避免别人做不合理的优化时而造成的混乱
• 整洁的模块边界，明确的划分模块之间的逻辑边界，尽量保证职责单一，避免功能交叉混杂
• 让代码没有改进的余地，在开发时把各种情况都想到了，如果有人企图改进它，总是会回到原点

性能检测工具 - Lighthouse简介 Lighthouse是一个Google开源的自动化工具，主要用于改进网络应用的质量。Lighthouse会对各个测试项的结果打分，并给出优化建议，这些打分标准和优化建议可以视为Google的网页最佳实践。

Chrome拓展程序 谷歌商店安装lighthouse后，在右上角或者菜单里点击图中图标，Options可以配置测试项目，点击Generate report即可测试。

命令行

js复制代码<!-- 安装 lighthouse 组件（Node.js V5.0 或以上版本） -->
npm install -g lighthouse
<!-- 启动测试 （测试过程中会自动打开 Chrome 完成后会在当前目录生成一个静态HTML文件） -->
lighthouse https://www.baidu.com/ --view
<!-- 帮助-->
lighthouse --help

检测结果

【附录】常用的标签规范

点赞收藏支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。

作者：StriveToY
链接：https://juejin.cn/post/7262378982255394873

进

使用soft tab（4个空格）。

var x = 1,
    y = 1;

if (x < y) {
    x += 10;
} else {
    x += 1;
}

单行长度

不要超过80，但如果编辑器开启word wrap可以不考虑单行长度。

分号

以下几种情况后需加分号：

• 变量声明
• 表达式
• return
• throw
• break
• continue
• do-while

/* var declaration */
var x = 1;

/* expression statement */
x++;

/* do-while */
do {
    x++;
} while (x < 10);

空格

以下几种情况不需要空格：

• 对象的属性名后
• 前缀一元运算符后
• 后缀一元运算符前
• 函数调用括号前
• 无论是函数声明还是函数表达式，’(‘前不要空格
• 数组的’[‘后和’]’前
• 对象的’{‘后和’}’前
• 运算符’(‘后和’)’前以下几种情况需要空格：
• 二元运算符前后
• 三元运算符’?:’前后
• 代码块’{‘前
• 下列关键字前：else, while, catch, finally
• 下列关键字后：if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof
• 单行注释’//‘后（若单行注释和代码同行，则’//‘前也需要），多行注释’*’后
• 对象的属性值前
• for循环，分号后留有一个空格，前置条件如果有多个，逗号后留一个空格
• 无论是函数声明还是函数表达式，’{‘前一定要有空格
• 函数的参数之间

// not good
var a = {
    b :1
};

// good
var a = {
    b: 1
};

// not good
++ x;
y ++;
z = x?1:2;

// good
++x;
y++;
z = x ? 1 : 2;

// not good
var a = [ 1, 2 ];

// good
var a = [1, 2];

// not good
var a = ( 1+2 )*3;

// good
var a = (1 + 2) * 3;

// no space before '(', one space before '{', one space between function parameters
var doSomething = function(a, b, c) {
    // do something
};

// no space before '('
doSomething(item);

// not good
for(i=0;i<6;i++){
    x++;
}

// good
for (i = 0; i < 6; i++) {
    x++;
}

空行

以下几种情况需要空行：

• 变量声明后（当变量声明在代码块的最后一行时，则无需空行）
• 注释前（当注释在代码块的第一行时，则无需空行）
• 代码块后（在函数调用、数组、对象中则无需空行）
• 文件最后保留一个空行

// need blank line after variable declaration
var x = 1;

// not need blank line when variable declaration is last expression in the current block
if (x >= 1) {
    var y = x + 1;
}

var a = 2;

// need blank line before line comment
a++;

function b() {
    // not need blank line when comment is first line of block
    return a;
}

// need blank line after blocks
for (var i = 0; i < 2; i++) {
    if (true) {
        return false;
    }

    continue;
}

var obj = {
    foo: function() {
        return 1;
    },

    bar: function() {
        return 2;
    }
};

// not need blank line when in argument list, array, object
func(
    2,
    function() {
        a++;
    },
    3
);

var foo = [
    2,
    function() {
        a++;
    },
    3
];


var foo = {
    a: 2,
    b: function() {
        a++;
    },
    c: 3
};

换行

换行的地方，行末必须有’,’或者运算符；

以下几种情况不需要换行：

• 下列关键字后：else, catch, finally
• 代码块’{‘前

以下几种情况需要换行：

• 代码块’{‘后和’}’前
• 变量赋值后

// not good
var a = {
    b: 1
    , c: 2
};

x = y
    ? 1 : 2;

// good
var a = {
    b: 1,
    c: 2
};

x = y ? 1 : 2;
x = y ?
    1 : 2;

// no need line break with 'else', 'catch', 'finally'
if (condition) {
    ...
} else {
    ...
}

try {
    ...
} catch (e) {
    ...
} finally {
    ...
}

// not good
function test()
{
    ...
}

// good
function test() {
    ...
}

// not good
var a, foo = 7, b,
    c, bar = 8;

// good
var a,
    foo = 7,
    b, c, bar = 8;

单行注释

双斜线后，必须跟一个空格；
缩进与下一行代码保持一致；
可位于一个代码行的末尾，与代码间隔一个空格。

if (condition) {
    // if you made it here, then all security checks passed
    allowed();
}

var zhangsan = 'zhangsan'; // one space after code

多行注释

最少三行, ‘*’后跟一个空格，具体参照右边的写法；

建议在以下情况下使用：

• 难于理解的代码段
• 可能存在错误的代码段
• 浏览器特殊的HACK代码
• 业务逻辑强相关的代码

/*
 * one space after '*'
 */
var x = 1;

文档注释

各类标签@param, @method等请参考usejsdoc和JSDoc Guide；

建议在以下情况下使用：

• 所有常量
• 所有函数
• 所有类

/**
 * @func
 * @desc 一个带参数的函数
 * @param {string} a - 参数a
 * @param {number} b=1 - 参数b默认值为1
 * @param {string} c=1 - 参数c有两种支持的取值</br>1—表示x</br>2—表示xx
 * @param {object} d - 参数d为一个对象
 * @param {string} d.e - 参数d的e属性
 * @param {string} d.f - 参数d的f属性
 * @param {object[]} g - 参数g为一个对象数组
 * @param {string} g.h - 参数g数组中一项的h属性
 * @param {string} g.i - 参数g数组中一项的i属性
 * @param {string} [j] - 参数j是一个可选参数
 */
function foo(a, b, c, d, g, j) {
    ...
}

引号

最外层统一使用单引号。

// not good
var x = "test";

// good
var y = 'foo',
    z = '<div id="test"></div>';

变量命名

• 标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）
• ‘ID’在变量名中全大写
• ‘URL’在变量名中全大写
• ‘Android’在变量名中大写第一个字母
• ‘iOS’在变量名中小写第一个，大写后两个字母
• 常量全大写，用下划线连接
• 构造函数，大写第一个字母
• jquery对象必须以’$’开头命名

var thisIsMyName;

var goodID;

var reportURL;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

function Person(name) {
    this.name = name;
}

// not good
var body = $('body');

// good
var $body = $('body');

变量声明

一个函数作用域中所有的变量声明尽量提到函数首部，用一个var声明，不允许出现两个连续的var声明。

function doSomethingWithItems(items) {
    // use one var
    var value = 10,
        result = value + 10,
        i,
        len;

    for (i = 0, len = items.length; i < len; i++) {
        result += 10;
    }
}

函数

无论是函数声明还是函数表达式，’(‘前不要空格，但’{‘前一定要有空格；
函数调用括号前不需要空格；
立即执行函数外必须包一层括号；
不要给inline function命名；
参数之间用’, ‘分隔，注意逗号后有一个空格。

// no space before '(', but one space before'{'
var doSomething = function(item) {
    // do something
};

function doSomething(item) {
    // do something
}

// not good
doSomething (item);

// good
doSomething(item);

// requires parentheses around immediately invoked function expressions
(function() {
    return 1;
})();

// not good
[1, 2].forEach(function x() {
    ...
});

// good
[1, 2].forEach(function() {
    ...
});

// not good
var a = [1, 2, function a() {
    ...
}];

// good
var a = [1, 2, function() {
    ...
}];

// use ', ' between function parameters
var doSomething = function(a, b, c) {
    // do something
};

数组、对象

对象属性名不需要加引号；
对象以缩进的形式书写，不要写在一行；
数组、对象最后不要有逗号。

// not good
var a = {
    'b': 1
};

var a = {b: 1};

var a = {
    b: 1,
    c: 2,
};

// good
var a = {
    b: 1,
    c: 2
};

括号

下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。

// not good
if (condition)
    doSomething();

// good
if (condition) {
    doSomething();
}

null

适用场景：

• 初始化一个将来可能被赋值为对象的变量
• 与已经初始化的变量做比较
• 作为一个参数为对象的函数的调用传参
• 作为一个返回对象的函数的返回值

不适用场景：

• 不要用null来判断函数调用时有无传参
• 不要与未初始化的变量做比较

// not good
function test(a, b) {
    if (b === null) {
        // not mean b is not supply
        ...
    }
}

var a;

if (a === null) {
    ...
}

// good
var a = null;

if (a === null) {
    ...
}

undefined

永远不要直接使用undefined进行变量判断；
使用typeof和字符串’undefined’对变量进行判断。

// not good
if (person === undefined) {
    ...
}

// good
if (typeof person === 'undefined') {
    ...
}

jshint

用’===’, ‘!==’代替’==’, ‘!=’；
for-in里一定要有hasOwnProperty的判断；
不要在内置对象的原型上添加方法，如Array, Date；
不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量；
变量不要先使用后声明；
不要在一句代码中单单使用构造函数，记得将其赋值给某个变量；
不要在同个作用域下声明同名变量；
不要在一些不需要的地方加括号，例：delete(a.b)；
不要使用未声明的变量（全局变量需要加到.jshintrc文件的globals属性里面）；
不要声明了变量却不使用；
不要在应该做比较的地方做赋值；
debugger不要出现在提交的代码里；
数组中不要存在空元素；
不要在循环内部声明函数；
不要像这样使用构造函数，例：new function () { … }, new Object；

// not good
if (a == 1) {
    a++;
}

// good
if (a === 1) {
    a++;
}

// good
for (key in obj) {
    if (obj.hasOwnProperty(key)) {
        // be sure that obj[key] belongs to the object and was not inherited
        console.log(obj[key]);
    }
}

// not good
Array.prototype.count = function(value) {
    return 4;
};

// not good
var x = 1;

function test() {
    if (true) {
        var x = 0;
    }

    x += 1;
}

// not good
function test() {
    console.log(x);

    var x = 1;
}

// not good
new Person();

// good
var person = new Person();

// not good
delete(obj.attr);

// good
delete obj.attr;

// not good
if (a = 10) {
    a++;
}

// not good
var a = [1, , , 2, 3];

// not good
var nums = [];

for (var i = 0; i < 10; i++) {
    (function(i) {
        nums[i] = function(j) {
            return i + j;
        };
    }(i));
}

// not good
var singleton = new function() {
    var privateVar;

    this.publicMethod = function() {
        privateVar = 1;
    };

    this.publicMethod2 = function() {
        privateVar = 2;
    };
};

杂项

不要混用tab和space；
不要在一处使用多个tab或space；
换行符统一用’LF’；
对上下文this的引用只能使用’_this’, ‘that’, ‘self’其中一个来命名；
行尾不要有空白字符；
switch的falling through和no default的情况一定要有注释特别说明；
不允许有空的代码块。