Archive for the ‘ 前端 ’ Category

javascript中两种函数的创建方式差异

js中有两种创建函数的方式:

function testA(){……}
var testB = function(){……};

一、看代码:

testA();
testB();
function testA(){alert("I'm A!");}
var testB = function(){alert("I'm B!");};
//运行结果是只有A执行了
//原因是A的定义方式会javascript解析器提到最前面执行
//所以testA可执行,二testB还没定义

二、依然看代码:

//继续测试另一特性
alert(testA);
alert(testB);
//结果是输出了两个函数的源代码,相当于调用了toString方法
//不同的是ie的是直接输出,FF下会帮你排好版
//验证一下
alert(testA.toString());
alert(testB.toString());

这个不能算是差异,利用这个特性可以正则匹配来获取函数名。

三、好吧无耻的请大家继续看代码:

//继续验证另一个
alert(testA.name);
alert(testB.name);
//结果是FF,chrome支持函数的name属性,会返回testA,testB是空
//IE下都是undefined
//testA是一个有名字的函数,而testB则是一个引用,引用的一个匿名函数的内存地址

 

over。

图片、文本框、单选框、复选框、文本、超链接在行内的对齐

a) 什么多不做在FF3.6下面是这样的

clip_image002clip_image003

b) 首先解决图片对齐问题:我是用的

处理后:

clip_image004

可以看到图片还是有点偏下,实际上偏差1px,检查原因是图片是16*16的,而文本框们的高度是21px(默认情况,修改样式不算),所以文本框计算应该中点在10.5px位置,图片的中心计算应该是四舍五入了,所以强制吧图片设置成奇数高度15试试:

clip_image006

clip_image008

现在图片对齐解决了

c) 接下来是单选按钮和复选框:

他们都自带margin属性,单选按钮是3 3 0 5,复选框是3 3 3 4(都是在FF下测试的)。

所以他们看起来很不和谐,那就把margin去掉:

clip_image009

依然没有对齐,再添加vertical-align: middle;

clip_image010

同样由于奇数问题没有绝对对齐,差距1px。可以采用把这些控件设置为偶数高度来解决,比如设置input{height:20px;}:

clip_image011

这样就是标准的对齐了。

d) 接下来是文本与这些控件的对决了,不处理情况是这样的

clip_image012

修正后:

clip_image013

这个修正方法是放狗搜的,具体原理与字体的样式有关,后面的这个是设置 font-family: Tahoma;(看来以前只是顾着用好看的字体,原来这些字体的设计也是很讲究的)

e) 最后是超链接的对齐:

clip_image014

好吧,不用处理了~不过在ie下面如果没有设置字体那么可能会出现对不齐的现象。

最后是结果:
FF: clip_image016

          

IE6: clip_image018

          

IE7: clip_image020

            

IE8: clip_image022

IE9: clip_image024

在chrome下面还是有些对不齐,不过参看了facebook等网站,如果是表单一般都采用table嵌套,不会直接写form表单,最有用的可能只有图片和文字在行内的对齐,而正好这个解决方式是比较成熟的,很多地方都采用。