javascript作用域与闭包

作用域

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

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

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

如何写一个完善的jquery ui组件

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

d1

我们需要对上面的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数据驱动页面

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

hexo+coding搭建自己的博客

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

javascript面向对象编程

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

对象的理解

那么,什么是对象呢?我们可以从两个层次理解:

(1)“对象”是单个实物的抽象。

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

(2)“对象”是一个容器,封装了“属性”(property)和“方法”(method)。

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

javascript模块化编程(一)

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

css布局-BFC和IFC

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 不定义行框基线的位置。
  1. 行框的高是最顶端框的顶边到最底端框的底边的距离。

css布局-盒模型,定位和浮动

盒模型

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

13-34-30

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 }

,