存档

2015年5月 的存档

CSS之阴影效果

2015年5月18日 没有评论

在CSS3中,引入了一个box-shadow属性,可以非常方便地给元素增加阴影效果,在各种电商网站中,非常常见,加了阴影效果以后,图片可以突出显示,减少了视觉疲劳。

下面就是一个CSS的往四周扩散的阴影效果,同时加入了对IE6-8的支持:

#box {
   zoom: 1; //触发hasLayout
   filter: progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=0),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=90),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=180),
         progid:DXImageTransform.Microsoft.Shadow(Color=#cccccc, Strength=5, Direction=270);
   box-shadow: 0 0 5px #cccccc;
   -webkit-box-shadow: 0 0 5px #cccccc;
   -moz-box-shadow: 0 0 5px #cccccc;
}
分类: CSS, 语言 标签: ,

Javascript中函数前面感叹号,加号的意思

2015年5月12日 没有评论

在Javascript的开发以及学习过程中,我们经常能看到函数前面加个感叹号或者是加号的写法。

比如:

bootstrap的JS组件就是采用了加号的写法:https://github.com/twbs/bootstrap/blob/master/dist/js/bootstrap.js

再比如:

大众点评官网编译出的好多JS插件都是采用了感叹号的写法。

那么为什么要加感叹号以及加号呢?原因很简单,先看下面的代码,写过jQuery插件的都知道jQuery插件的套路写法就是:

(function($) {         
  //...  
})(jQuery);

在function外面多加的一个括号是为了保证这个匿名函数能够被当做函数表达式来执行,如果不添加function外层的括号的话,浏览器就会报错。

我们再回到函数前加感叹号以及加号的问题,其实道理是一样的,就是为了保证匿名函数能够被当做函数表达式来执行而已,而且这种写法有一丝丝好处是比较清楚地标示了这个匿名函数,大括号的写法你还得在一大坨代码中去寻找右括号在哪里,如果没有编辑器的帮助的话有点费眼力。

分类: Javascript, 语言 标签:

在Javascript中应该如何判断数据类型

2015年5月8日 没有评论

引子


在实际的前端项目中,我们经常需要判断某个数据是否是数组,或者是否是函数,自己之前经常的写法就是instanceof,但是在看美国peer的代码的时候,看到了一个这样的写法Object.prototype.toString.call(x) === ‘[object Array]‘,感觉很奇怪,于是就搜索了一下,就有了这篇博文。

 

为什么不用typeof


初学javascript的话,一定会有这个疑惑,typeof和instanceof,这两货到底有啥区别?实际上typeof的返回值只有六个: undefined, boolean, number, string, function以及object,无法判断数组,但是呢,instanceof就可以,所以很多情况下使用instanceof就可以了。

 

那干嘛不用instanceof


确实在很多情况下,instanceof就可以了,但是呢,如果一个页面包含多个frame的话,这样的判断方法就失效了,我们来看下面这个例子:

v instanceof Array

如果v是来源于另外一个frame的数组对象,那么此时该表达式返回的是false,因为v只是anotherFrame.contentWindow.Array的实例,并不是当前frame的数组的实例。

 

我该用啥


如果是原生的javascript的话,用Object.prototype.toString.call(x) === ‘[object Array]‘类似的语句就可以很好地判断对象的数据类型了。

如果在项目中使用到了underscore或者是lodash’的话,那么恭喜你,你可以使用它们提供的isArray, isNumber, isFunction, isRegExp等方法来判断数据类型。

如果你的项目是nodejs的话,那么你可以使用util这个模块:

var util = require("util");
var a = [];
console.log(util.isArray(a));