/*=====默认样式=====*/
*{padding:0;margin:0;}
body{font:12px verdana,Arial,sans-serif,"宋体";}
table{border-collapse:collapse;}
th{font-weight:normal;text-align:left;}
a img{border:none;}
ul{list-style:none;}
h2,h3{font-size:14px;font-weight:bold;}
a{text-decoration: none;}
a:hover{text-decoration:underline;}
b{font-weight:normal;}

/*=====重用css类=====*/
/*颜色*/
.red{color:red;}
.grey{color:#999;}
/*文本*/
.font10{font-size:10px;}
.font12{font-size:12px;}
.font14{font-size:14px;}
.font16{font-size:16px;}
.font20{font-size:20px;}
.bold{font-weight:bold;}
.indent{text-indent:2em;}
.textLeft{text-align:left;}
.textCenter{text-align:center;}
.textRight{text-align:right;}
/*行高*/
.pLineHeight{line-height:150%;}
.pLineHeight2{line-height:180%;}
.pLineHeight3{line-height:200%;}
/*边距*/
.marginTop5{margin-top:5px;}
.marginTop10{margin-top:10px;}
.marginTop15{margin-top:15px;}
.marginTop20{margin-top:20px;}
.marginTop30{margin-top:30px;}
.marginTop50{margin-top:50px;}
.marginTop100{margin-top:100px;}
.marginBottom5{margin-bottom:5px;}
.marginBottom10{margin-bottom:10px;}
.marginBottom15{margin-bottom:15px;}
.marginBottom20{margin-bottom:20px;}
.marginBottom30{margin-bottom:30px;}
.marginBottom50{margin-bottom:50px;}
.marginBottom100{margin-bottom:100px;}
.marginLeft10{margin-left:10px;}
.marginLeft20{margin-left:20px;}
.marginRight10{margin-right:10px;}
.marginRight20{margin-right:20px;}
.paddingTop5{padding-top:5px;}
.paddingTop10{padding-top:10px;}
.paddingTop15{padding-top:15px;}
.paddingTop20{padding-top:20px;}
.paddingTop30{padding-top:30px;}
.paddingTop50{padding-top:50px;}
.paddingTop100{padding-top:100px;}
.paddingBottom5{padding-bottom:5px;}
.paddingBottom10{padding-bottom:10px;}
.paddingBottom15{padding-bottom:15px;}
.paddingBottom20{padding-bottom:20px;}
.paddingBottom30{padding-bottom:30px;}
.paddingBottom50{padding-bottom:50px;}
.paddingBottom100{padding-bottom:100px;}
.paddingLeft10{padding-left:10px;}
.paddingLeft20{padding-left:20px;}
.paddingRight10{padding-right:10px;}
.paddingRight20{padding-right:20px;}
/*浮动*/
.floatLeft{float:left;display:inline;}
.floatRight{float:right;display:inline;}
.clear{clear:both;float:none;height:0px;overflow:hidden;}
/*分隔线*/
.bottomLine{padding-bottom:5px;margin-bottom:10px;border-bottom:1px solid #DDD;}
.dashLine{height:0px;overflow:hidden;border-bottom:1px dashed #ddd;margin:10px 0;}
.solidLine{height:0px;overflow:hidden;border-bottom:1px solid #ddd;margin:10px 0;}
/*链接样式*/
.noUnderline,.noUnderline a{text-decoration:none;}
.underline,.underline a{text-decoration:underline;}
/*其它*/
.hasLayout{zoom:1;}
.hide{display:none;}

每次写css的时候,都会重复使用一个类,把它们组织好,以后每次切页面都直接用这些用习惯了的类,速度能快很多.引外还有th等标签的样式,最好也把默认样式去掉,这个css重用库还没完善,以后还会陆续之补完.

今天用<ol>标签的时候,遇到一个很奇怪的问题.FF下显示正常,可是在IE下数字序列却全是1,而没有自动增加序列号.查了老半天原因,最后发现问题居然出在我对li设了height和line-height上面.因为设了这两个属性,让序列号不增加了??这bug也太奇怪了.

   最后在IE8下看了下,IE8中已经没有这个问题了.太奇怪了.太奇怪了.

   js的oop其实很简单，function本身就充当了类和构造函数的角色。然后通过传给构造函数的参数，完成类属性的赋值，从而实际化不同的对象。

   可是，js的oop也有很让人头疼的地方，其中之一就是this的指向。在js中，普通的函数，this指向的是window对象，因为所有的全局函数都是window对象的方法。而对于类和对象中的方法，this指向的是这个类和对象。可是，this指针并不是那么老实的，如果在一个类中的方法，调用了另一个类的方法，那么这个this的指向就变得很奇怪了。举个简单的例子。

var a = 0;
function test()

{

   this.a=123;

    this.b = function()

   {

     alert(this.a);

   }

this.init = function()

{

alert(this.a);
    setTimeout(this.b,1000);

}

this.init();

}

var adang = new test();

你猜结果会是什么？一开始弹出一个123,然后一秒后又弹出一个123??错！一开始的确是弹出123,一秒后弹出的却是0!因为setTimeout是window对象的方法，所以做为参数被传入setTimeout方法的this.b()函数，运行的闭包空间，对象是window，而不再是test类，this指针指向了window，也就是说，里面的alert(this.a)等于window.a,而不是test.a。

   这的确有点让人费解。想来想去，想到的一个解释是这样的：因为js中对复杂数据类型是通过传址方式进行赋值的，所以setTimeout中的第一个参数，也就是要运行的函数，是传递的this.b()这个方法的地址给setTimeout方法使用的，这个地址保存的是this.b方法中的所有"字符"，是个string!!!然后再在setTimeout内部用eval(str)来运行。这么一来，this关键字完全没有连到test类的地址，而是直接使用新闭包的对象。

   这个问题应该怎么解决呢？？如果我想在setTimeout里正确运行test类的b方法，正解调用test的属性，应该怎么做呢？方法很简单，去掉this,把a由this.a换成var a，让它从一个公开属性，变成私有属性，因为a定义在test内部的最外一级，所以它的作用域是整个test类，类里的b方法可以调用到它。而它又去掉了this关键字，不会错误地指到别的对象上。

    总结一下，心得就是，在用oop方式写js的时候，少用this关键字，除了必要的方法和属性写成公开属性/方法，应该尽量用var 定义成私有属性/方法。

    写程序，很追求一次编写，多次重用。对于js也不例外。

    可是，如果只是为了重用，我们写个function,然后留出参数，以后需要重用，通过传入不同参数到function里，就完全可以实现重用了。那么为什么我们还要用oop来写js呢？用oop的方式，我们其实也是通过传参数到function中，来实现实例化不同对象的目的的。oop方式和普通function相比有什么优点呢？

    我感觉最大的优点在于对代码的封装性。如果只是一个简单的功能，没必要用oop，因为几乎没有区别。可是，如果是几个相关的函数来实现一个功能，那么oop的优点就表现出来了。举个例子：

var c;

function a()

{

    doA(c);

}

function b()

{

    doB(c);

}

如果我们需要实现一个功能，功能中需要用于a(),b()来操作同一个变量c，那c就只能定义在a()和b()的外面，定义成一个全局变量。这样，他的作用域才会同时到达a()和b()。可是，如果就这样把c写在所有函数外，他就成了一个全局变量，一个作用域大到你控制不了程度。如果是大团队合作，分工做模块，很可能这个c，就和别人在另一个地方定义的c冲突了。然后出现意想不出的错误。全局变量是一种污染，是很不好的作法。那么，怎么做比较好呢？用oop的方式就可以解决这个问题。

function d()

{

   this.c = c;

   this.doA = fuction(){this.c};

    this.doB = fuction(){this.c}

}

通过this关键字，方法doA()和doB()都可以找到c，而c又只在类d里，没有造成全局变量污染。这就达到了很好的封装效果。另外，还有很重要的一点是，oop的类还有命名空间的作用。比起全局范围中的函数，类中的方法很不容易和别的函数重名，就算重名了，只要改一个实例化时的对象名，就可以了。

   我们在用js检验表单的时候，判断一个值不能为空，很多时候只是 if(input.value == "") alert("不能为空！");
如果用户在input输入一个空格什么的，虽然没有实际内容，却也骗过了js，input.value已经不为空了。然而在服务器端，我们常常用trim()来将传递过来的值去掉首尾空格。

   见过一个好点的办法，是用input.value.replace(/^\s*/,"").replace(/\s*$/,"")来去掉首尾空格，模拟trim()的功能再来判断是否等于空。我觉得这个办法还可以再简化一点，直接用if(/^\s*$/.test(input.value))来代替 if(input.value == "")就可以了。哈哈，这样就简单了，起码代码能少一点。

   table在布局中是个很奇怪的元素，它是内联的，也就是说，首尾没有换行，可是和span等内联元素不同的是，它是可以设长宽，也可以设边距的。也就是说，它集合了两者的特点于一身。这种元素很有趣，类似的还有input标签和img标签。呵，我称它们为隐藏的display属性。在做特殊样式的按钮的时候，我总是喜欢把input设背景，而不用a标签设背景，原因就在于a标签如果要设背景，必须改成块级元素，而块级元素首尾会有换行。众所周知，IE下，关于display只有none,inline,block这几种选择。在块级元素竖直居中的问题中，FF下，我们可以用display:teble-cell来控制它，再设vertical-align:middle;就可以了。可是，IE下不行。原因就是IE下display的类型太少。有趣的是，如果我们直接就用table来布局，不用display：table-cell的话，vertical-align:middle;就有效果了。也就是说，IE下其实还是内置了对table-cell的解释引擎，只是不提供css来改变，而只针对table标签采用。

   今天在做一个效果时，遇到一个问题。对于一个报表型的数据，我用了table来布局，然后对其中的几个tr设了display:none;隐藏起来。这里都没有问题。再然后，我通过js让tr显示出来，习惯性地我就设了display:block;结果IE下没有问题，而FF下显示就出了状况。用firebug看了下，FF下设了display:block的tr一点高度也没有，就像是用了float一样，试着设了下display:inline和display:inline-block;还是不行。最后，用了一个display:table-row;就显示正常了。这些属性平时很少有机会用得上，感叹一下FF对css的引擎丰富程度 。

ExternalInterface.addCallback是用于flash和js通信的方法。之前用as3做东西的时候，用到了这个方法，今天需要用as2做东西，直接把代码拿过来发现运行出错。仔细查看了下资料，原来as2和as3中对于这个方法参数的个数是有区别的。

   as3中，ExternalInterface.addCallback("funJs",funAs);就可以了，但是as2中，需要ExternalInterface.addCallback("funJs",null,funAs);中间要加一个对象才行，这个对象可以为null。估计as2对于这个方法在设计的时候并不好(因为为null也可以嘛，可见并没有什么实质作用），所以到了as3的时候，把这个方法重新设计了一下，去掉了那个没用的第二个参数。