代码规范是一个老生常谈的问题了，在很多人维护一个项目的时候，如何保证每个人的代码风格基本一致呢，每个团队的都会给程序员制定一套开发规范，但是如何去再编写的时候能检测代码时候按照规范编写的呢，这里就需要借助前端工具 editorconfig 和 eslint 了。

在日常工作中，常常会遇到下面这样的需求

我们需要对上面的tab做处理，点击相应的tab就显示相应的内容

不封装组件写法

最原始的写法

1
2
3
4
5
6
7
8
9
10

<div class="tab-container">
    <ul class="nav nav-tabs">
        <li name="tab1" class="active"><a href="javascript:;">tab1</a></li>
        <li name="tab2"><a href="javascript:;">tab2</a></li>
        <li name="tab3"><a href="javascript:;">tab3</a></li>
    </ul>
    <div id="tab1">this is tab1</div>
    <div id="tab2" style="display: none;">this is tab2</div>
    <div id="tab3" style="display: none;">this is tab3</div>
</div>

作用域

在编程语言中，作用域控制着变量的与参数的可见性和生命周期。在javascript中并不像其他编程语言一样拥有块级作用域，在if中定义的变量再外面也可以直接调用,这点是值得注意的;

1
2
3
4
5

var a= 1;
if(true){
    var a = 2;
}
console.log(a); //2

在块中定义的变量，再外边也可以直接调用到，也可以覆盖该作用域内同名的变量;

2005 Ajax 提出，web2.0的时代到来，web开发开始越来越注重与用户交互，于是乎，越来越多的后端逻辑迁移到前端实现，javascript代码量大大提升，但是，大量的业务逻辑也ui逻辑混在一起，导致程序臃肿，代码难以维护。于是开始有了，一些类似 spring 的分层的思想，将业务逻辑和ui逻辑分开。

毕业以来，尝试过用各种手段写博客，先是csdn的博客专栏谢了几篇文章之后，就懒了，只到去年，学习了markdown语法写博客，觉得非常好用，于是也开始用farbox写博客，最近接触一个hexo加上github的pages服务搭建博客，于是尝试下，犹豫github在国内的访问速度实在是不太好，我用coding代替.

“面向对象编程”（Object Oriented Programming，缩写为OOP）是目前主流的编程范式。它的核心思想是将真实世界中各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。

对象的理解

那么，什么是对象呢？我们可以从两个层次理解：

（1）“对象”是单个实物的抽象。

一本书、一辆汽车、一个人都可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。当实物被抽象成“对象”，实物之间的关系就变成了“对象”之间的关系，从而就可以模拟现实情况，针对“对象”进行编程。

（2）“对象”是一个容器，封装了“属性”（property）和“方法”（method）。

所谓“属性”，就是对象的状态；所谓“方法”，就是对象的行为（完成某种任务）。比如，我们可以把动物抽象为animal对象，“属性”记录具体是那一种动物，“方法”表示动物的某种行为（奔跑、捕猎、休息等等）。

前面的写法，再文件模块比较少的情况都不会有问题，但是再当模块比较多之后，window下还是会被挂载很多对象，而且当模块依赖过多的时候需要在’（）’，写很长的参数，于是乎，前端模块化，有了一些规范，让我们去定义模块。

随着web开发逐渐演变成web application之后，尤其是在web2.0依赖页面上的javascript脚本逐渐变多，嵌入网页的JavaiScript代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等……开发者需要分模块，来管理前端代码开发。

Formatting Contexts是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

BFC

BFC(Block Formatting Contexts)直译为”块级格式化上下文”。Block Formatting Contexts就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素,反之也是如此。

BFC形成

• float 的值不为 none
• position 的值不为 static 或 relative
• display属性为inline-boxs、table-cells、table-captions的不是块盒的块容器(除非这个值已经被传播到视口),
• overflow不为visible的块盒才会为它的内容创建新的BFC。
• body元素

BFC渲染规则

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠，常用来清除浮动和布局。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算

IFC

IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)

IFC渲染规则

1. 框会从包含块的顶部开始，一个接一个地水平摆放。
2. 摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。
3. 行框的宽度是由包含块和存在的浮动来决定。

IFC ‘line-height’ 与 ‘vertical-align’ 属性

1. 计算行框里的各行内级框的高度。对于置换元素、行内块元素、行内表格元素来说，这是边界框的高度，对于行内框来说，这是其 ‘line-height’。
2. 行内级元素根据其 ‘vertical-align’ 属性垂直对齐。在这些框使用 ‘top’ 或 ‘bottom’ 对齐的情况下，user-agent必须以最小化行框的高为目标对齐这些框。若这些框够高，则存在多个解而 CSS 2.1 不定义行框基线的位置。

3. 行框的高是最顶端框的顶边到最底端框的底边的距离。

盒模型

简单来说，网页中的额每一个元素都是一个盒子，而整个网页就是有大大小小的盒子组装起来的。既然是盒子那么它就有：内容（content）、填充（padding）、边框（border）、边界（margin）这些属性，而每个属性又有上下左右四个方向，像下面这张图这样

display

每一个元素都是一个盒子，display属性就决定了他们属于那种盒子；目前大致分为以下几种

块级元素（block）

一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。

内联元素(inline)

内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。

内联块级元素(inline block)

同时拥有块级元素和内联元素的特性

position

display决定了盒子种类，position就确定了盒子的位置，

（标准文档流）static

常规元素默认值都是static，指按照文档至上而下的标准文档流

（绝对定位）absolute

绝对定位，他默认参照已经定位(position值不为static)的元素父级元素，配合top、right、bottom、left进行定位。
脱离标准文档流，也就是他的位置不会影响到其他的元素，也不会参与到父元素高度计算上，但是会受到富元素overflow:hidden的影响

（绝对定位）fixed

参照window配合top、right、bottom、left进行定位。
脱离标准文档流，不会受到父元素overflow:hidden影响;

（相对定位）relative

相对定位，他是默认参照父级的原始点为原始点，配合top、right、bottom、left进行定位，当父级内有padding等CSS属性时，当前级的原始点则参照父级内容区的原始点进行定位。

浮动（float）

首先要知道，div是块级元素，在页面中独占一行，自上而下排列，那么如何让块级元素在一行中显示呢，这里就用到float;
float:left/right可以让块级元素在一行中从左至右或者从右至左排列，但是，需要主要的是，当元素设置了float:left/right时，会影响到后面的元素所以需要及时的清除浮动，而且会造成父级元素高度塌陷。
常用的清除浮动代码如下:

1
2
3
4
5
6
7
8
9
10
11

.clear { clear: both; }/*清除浮动*/
/*清除浮动并防止父级元素高度塌陷*/
.clearfix:before, .clearfix:after { 
    content: '\0020'; 
    display: block; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0; height: 0; 
}
.clearfix:after { clear: both }
.clearfix { *zoom: 1 }