JS中的闭包

时间:2009年03月26日作者:愚人码头查看次数:2,393 views评论次数:0

闭包时是指内层的函数可以引用存在与包围他的函数内的变量,即使外层的函数的执行已经终止。功能不是一般的强大和复杂啊。
了解闭包必须首先了解变量的作用域:全局变量和局部变量(可以查看http://www.css88.com/article.asp?id=468)

闭包使代码更清晰,我们看一个离职:

 

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>  
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>  
  3.     <head>  
  4.         <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />  
  5.         <title>Untitled Document</title>  
  6.     </head>  
  7.     <body>  
  8.         <div id=“main”>我的闭包测试!</div>  
  9.         <script type=“text/javascript”>  
  10. var obj=document.getElementById(“main”);   
  11. obj.style.border=“1px #cdcdcd solid”;   
  12. setTimeout(function(){   
  13.     obj.style.border=“1px #ff0000 solid”;   
  14. },4000);   
  15. function alertMsg(msg,time){   
  16.     setTimeout(function(){   
  17.         alert(msg);//这个参数msg就是引用了alertMsg(msg,time)中的参数msg   
  18.     },time);   
  19. }   
  20. alertMsg(“我是css88.com站长:愚人码头”,2000);   
  21.         </script>  
  22.     </body>  
  23. </html>  

用个闭包实现函数的Curry化,例子:
 

JavaScript代码
  1. function addNum(num){   
  2.     return function(toAdd){   
  3.         return num+toAdd;   
  4.     };   
  5. }   
  6. var addFive=addNum(5);   
  7. alert(addFive(5));  

使用匿名函数来隐藏全局作用域变量的例子:

 

JavaScript代码
  1. (function(){   
  2.     var msg=“my name is feiwen.”;   
  3.     window.onload = setTimeout(function(){   
  4.         alert(msg);   
  5.     },3000);   
  6. })();  

使用匿名函数来激发创建多个使用闭包的函数所需的作用域

 

JavaScript代码
  1. var obj=document.getElementById(“main”);   
  2. var items=["click","keypress"];   
  3. for(var i=0;i<items.length; i++){   
  4.     (function(){   
  5.         var item=items[i];   
  6.         obj["on"+item]=function(){   
  7.             alert(“what is you doing:”+item);   
  8.         }   
  9.     })();   
  10. }  
分类:JS

javascript的全局变量和局部变量

时间:2009年03月26日作者:愚人码头查看次数:4,250 views评论次数:0

全局变量是个魔鬼,令人头痛。据说庞大的YUI只用了两个全局变量,真是令人赞叹!

JavaScript 有两种变量:全局变量和局部变量。

如果在任何函数定义之外声明了一个变量,则该变量为全局变量,且该变量的值在整个持续范围内都可以访问和修改。

如果在函数定义内声明了一个变量,则该变量为局部变量。每次执行该函数时都会创建和破坏该变量;且它不能被该函数外的任何事物访问。

局部变量一定要以var申明,否则是全局变量。

    像 C++ 这样的语言也有“块范围”。在这里,任何一对“{}”都定义新的范围。JavaScript 不支持块范围。

    一个局部变量的名称可以与某个全局变量的名称相同,但这是完全不同和独立的两个变量。因此,更改一个变量的值不会影响另一个变量的值。在声明局部变量的函数内,只有该局部变量有意义。
 
例:
 

JavaScript代码
  1. function square(num){   
  2.     total=num*num; //这是操作全局变量。   
  3.     return total;   
  4. }   
  5.    val total=50;   
  6.    val number=square(20);   
  7.    alert(total);//total的值变成了400。  

这些代码将导致全局变量total的值发生变化。

把这个函数写成这样才是正确的:

JavaScript代码
  1. function square(num){   
  2.     var total=num*num;    
  3.     return total;   
  4. }   

 
又如:

 

JavaScript代码
  1. <script>   
  2. var cookie=“i am cookie”;   
  3. function test(){   
  4. var cookie=“i am not fei cookie”;//定义局部变量的值,test函数执行后不会影响到全局的cookie   
  5. }   
  6. test();   
  7. document.write(cookie);   
  8. </script> //////////// 输出 i am cookie   
  9.   

去掉test()函数中变量var 如下: 

 

JavaScript代码
  1. <script>   
  2. var cookie=“i am cookie”;   
  3. function test(){   
  4. cookie=“i am not fei cookie”;//修改全局变量的值   
  5. }   
  6. test();   
  7. document.write(cookie);   
  8. </script>//////test函数执行后输出 i am not fei cookie   
  9.   

在函数中并且不加var 如何改变全局变量?如下:

 

JavaScript代码
  1. <script>   
  2. var cookie=“i am cookie”;   
  3. function test(){   
  4. var cookie=“i am not fei cookie”;//定义局部变量的值,test函数执行后不会影响到全局的cookie   
  5.   
  6. window.cookie=cookie; ///第一个cookie是全局的函数外部定义的,后面的cookie是在函数内定义的   
  7. }////利用window.变量   
  8. test();   
  9. document.write(cookie);   
  10. </script> /////输出 i am not fei cookie   
分类:JS

typeof运算符介绍

时间:2009年03月26日作者:愚人码头查看次数:2,476 views评论次数:0

typeof运算符介绍:
typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型。
它返回值是一个字符串,该字符串说明运算数的类型。
你知道下面typeof运算的结果吗?

typeof(1);
typeof(NaN);
typeof(Number.MIN_VALUE);
typeof(Infinity);
typeof(“123″);
typeof(true);
typeof(window);
typeof(document);
typeof(null);
typeof(eval);
typeof(Date);
typeof(sss);
typeof(undefined);

看看你会几个?

如果看了以后,不是很明白的话,请看下面(明白的人就不用往下看了):
typeof是一个一元运算符,它返回的结果始终是一个字符串,对不同的操作数,它返回不同的结果。
具体的规则如下:
一、对于数字类型的操作数而言, typeof 返回的值是 number。比如说:typeof(1),返回的值就是number。
上面是举的常规数字,对于非常规的数字类型而言,其结果返回的也是number。比如typeof(NaN),NaN在
JavaScript中代表的是特殊非数字值,虽然它本身是一个数字类型。
在JavaScript中,特殊的数字类型还有几种:
Infinity 表示无穷大特殊值
NaN            特殊的非数字值
Number.MAX_VALUE     可表示的最大数字
Number.MIN_VALUE     可表示的最小数字(与零最接近)
Number.NaN        特殊的非数字值
Number.POSITIVE_INFINITY 表示正无穷大的特殊值
Number.NEGATIVE_INFINITY  表示负无穷大的特殊值

以上特殊类型,在用typeof进行运算进,其结果都将是number。

二、对于字符串类型, typeof 返回的值是 string。比如typeof(“123″)返回的值是string。
三、对于布尔类型, typeof 返回的值是 boolean 。比如typeof(true)返回的值是boolean。
四、对于对象、数组、null 返回的值是 object 。比如typeof(window),typeof(document),typeof(null)返回的值都是object。
五、对于函数类型,返回的值是 function。比如:typeof(eval),typeof(Date)返回的值都是function。
六、如果运算数是没有定义的(比如说不存在的变量、函数或者undefined),将返回undefined。比如:typeof(sss)、typeof(undefined)都返回undefined。

看完了六条规则,再回头看一下,是不是很简单了……

下面我们将用程序代码验证一下:

 

JavaScript代码
  1. document.write (“typeof(1): ”+typeof(1)+“<br>”);   
  2. document.write (“typeof(NaN): ”+typeof(NaN)+“<br>”);   
  3. document.write (“typeof(Number.MIN_VALUE): ”+typeof(Number.MIN_VALUE)+“<br>”)   
  4. document.write (“typeof(Infinity): ”+typeof(Infinity)+“<br>”)   
  5. document.write (“typeof(\”123\”): ”+typeof(“123″)+“<br>”)   
  6. document.write (“typeof(true): ”+typeof(true)+“<br>”)   
  7. document.write (“typeof(window): ”+typeof(window)+“<br>”)   
  8. document.write (“typeof(document): ”+typeof(document)+“<br>”)   
  9. document.write (“typeof(null): ”+typeof(null)+“<br>”)   
  10. document.write (“typeof(eval): ”+typeof(eval)+“<br>”)   
  11. document.write (“typeof(Date): ”+typeof(Date)+“<br>”)   
  12. document.write (“typeof(sss): ”+typeof(sss)+“<br>”)   
  13. document.write (“typeof(undefined): ”+typeof(undefined)+“<br>”)  

 运行结果为:

typeof(1): number
typeof(NaN): number
typeof(Number.MIN_VALUE): number
typeof(Infinity): number
typeof(“123″): string
typeof(true): boolean
typeof(window): object
typeof(document): object
typeof(null): object
typeof(eval): function
typeof(Date): function
typeof(sss): undefined
typeof(undefined): undefined

分类:JS

JS函数重载和类型检查

时间:2009年03月26日作者:愚人码头查看次数:2,735 views评论次数:0

函数重载必须依赖两件事情:判断传入参数数量的能力和判断传入参数的参数类型的能力

1.判断传入参数数量的能力
js判断传入参数数量可以用arguments.length这个属性来判断;

 

JavaScript代码
  1. function sendMsg(msg,obj){   
  2.     if(arguments.length==2)//判断参数的个数;
  3.         obj.handleMsg(msg);   
  4.     else  
  5.         alert(msg);   
  6. }   
  7. sendMsg(“this site is http://www.css88.com”);   
  8. sendMsg(“what is your site?”,{   
  9.     handleMsg : function(msg){   
  10.         alert(“My question is:”+“\”"+msg+“\”");   
  11.     }   
  12. });  

 2.判断传入参数类型的能力
 

js判断传入参数类型的方有2种:typeof和constructor;

1.typeof
关于typeof的介绍可以查看:http://www.css88.com/article.asp?id=467
下面我们使用type0f来判断对类型的一个例子:
 

JavaScript代码
  1. var num=“123″;   
  2. var arr=“1,2,3,4″;   
  3. if(typeof num==“string”)   
  4. num = parseInt(num);   
  5. alert(typeof num);   
  6. if(typeof arr==“string”)   
  7. arr = arr.split(“,”);   
  8. alert(arr.length);  

2.constructor
查看例子:

JavaScript代码
  1. var num=“123″;   
  2. var arr=“1,2,3,4″;   
  3. if(num.constructor==String)   
  4. num = parseInt(num);   
  5. alert(typeof num);   
  6. if(arr.constructor==String)   
  7. arr = arr.split(“,”);   
  8. alert(arr.length);  
分类:JS

js对象的引用

时间:2009年03月26日作者:愚人码头查看次数:3,030 views评论次数:0

引用是js面向对象的基本概念之一。它是一个指向对象实际位置的指针。实际的对象肯定不会是引用。比如字符串永远是字符串,不过多个变量能够指向同一个对象。
对象可以中有多个原型属性(property)(关于更多的property可以查看:http://www.css88.com/article.asp?id=454http://www.css88.com/article.asp?id=449),其实这些属性就是对其他对象的引用。例如:

JavaScript代码
  1. //返回字符串的实际长度, 一个汉字算2个长度   
  2. String.prototype.len=function(){   
  3.     var str=this;   
  4.     return str.replace(/[^\x00-\xff]/g, “**”).length   
  5. }  

例子,多个变量应用同一个对象:

 

JavaScript代码
  1. //多个变量应用同一个对象   
  2. var obj=new Object();   
  3. var objB=obj;   
  4. obj.oneproprety=true;   
  5. alert(obj.oneproprety===objB.oneproprety);  

 例子,自修改对象:

JavaScript代码
  1. var Items=new Array(“1″,“2″,“3″);   
  2. var ItemRef=Items;   
  3. Items.push(“4″);   
  4. alert(“Items数组长度是:”+Items.length);   
  5. alert(“ItemRef数组长度是:”+ItemRef.length);  

 引用指向的只能是具体的对象,当具体对象改变的时候,引用还是引用原来的对象,而不是改变后的对象。
请看例子:
 

JavaScript代码
  1. var Items=new Array(“1″,“2″,“3″);   
  2. var ItemRef=Items;   
  3. Items=new Array(“1″,“2″,“3″,“4″);   
  4. alert(“Items数组长度是:”+Items.length);   
  5. alert(“ItemRef数组长度是:”+ItemRef.length);  
分类:JS

阿里巴巴中文站前端开发团队HTML培训PPT文档下载

时间:2009年03月26日作者:愚人码头查看次数:4,929 views评论次数:3

声明:本人不是阿里巴巴的员工。文档来源:http://www.f-dev.com/381

阿里巴巴中文站前端开发团队HTML培训PPT文档主要是关于HTML的版本,标准,特别是html语义方面的,文档制作的很漂亮,

阿里巴巴中文站前端开发团队HTML培训PPT文档下载:http://www.fs2you.com/files/c49b956e-5995-11dd-bc33-001143e7b41c/

分类:html+css

【分享】一堆CSS资源

时间:2009年03月26日作者:愚人码头查看次数:2,907 views评论次数:0

用户界面

 

易用性检查

整理和优化

字体

表单

布局

酷站

帮助向导 / Hacks / 学习资源


  • Explains the structure of CSS- and HTML-documents. Enter semi-colon separated selectors or just paste in your existing rulesets into the “Direct Input area, or provide the URL of a stylesheet or an HTML document with an embedded stylesheet in the “URL Input area. English, Spanish, German and Bulgarian versions are available.
  • Tom Lee has a tutorial on Max-width in IE Using a CSS Expression. Word of caution: I hear using this method can be rather hairy, in some cases crashing the browser.
  • Future-proof your CSS with Conditional Comments from Bruce Lawson is a great comprehensive collection of CSS’s that, when combined, addresses most of CSS issues with different browsers.
  • IE Word Wrap Doppelganger Bug
    这个站点展示了标题(heading)元素在IE6中换行时会留个小尾巴的bug。
  • Images, Tables, and Mysterious Gaps seems like something I should’ve known already about the behavior of inline elements in strict mode. But of course it took me an hour of agony before finally realizing the ultimate truth: I’m not that smart.
  • Easy CSS hacks for IE7IE7下可以用的CSS Hacks。
  • 针对IE7, Firefox 1.5和Opera 8.5的Web浏览器CSS支持 一览表。
  • snook.ca on the “+ CSS hack which you can use to target IE6 and IE7 only.
  • On having layout
    提供了很多信息围绕IE其特有的“渲染概念:hasLayout — one of the major causes for headache when it comes to how IE decides to pain the boundaries of certain HTML elements:  

    • “Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为“尺寸bug(dimensional bugs),意思是这些 bug 可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout的一个问题:为什么它会改变元素的渲染特性,为什么它会影响到元素之间的关系?这个问题问得很好,但却很难回答。在这篇文章中,我们专注于这个复杂问题会有那些方面的表现,某一方面的具体讨论和范例请参考文中给出的相关链接。

    这篇文章的中文翻译参见承志的SharkUI:On having layout

  • Negative text-indent and underline — No matter how far on the left the real text is, the underline will be stretched all the way to the right in some PC browsers, namely the Firefox.
  • IE6 Multi Class Bug — Again, something that could’ve brought to my attention last week!
    • …Internet Explorer fails to render backgrounds for elements that have both an ID and a class defined. For instance, #photos.background1 will display the corresponding background in IE6 for Windows, but once that has been defined, #photos.background2, #photos.background3, etc. will not be displayed.
  • Ten more CSS tricks you may not know
    包括少量的IE bug修复手段
  • The “Holly Hack — 著名的taming IE/Win CSS display bug by assigning a dimensional value such as height:1%;
  • CSS tests
    很不错的一系列CSS测试页面
  • max-width in IE
    用IE的expression来模拟max-width
  • http://imfo.ru/csstest/css_hacks/import.php
    用@import来针对不同的浏览器隐藏CSS的一系列方法。
  • Essentials of CSS Hacking For Internet Explorer
    助你对付IE的一系列建议。
  • Web 浏览器标准支持
    用图表来比较IE 6, Firefox 1.0, 和Opera 8.
  • The perils of using XHTML properly
    正确使用XML申明和MIME类型。
  • IE Double Float Margin Bug.

小贴士

分类:html+css

【推荐】45个优秀的免费web模板

时间:2009年03月26日作者:愚人码头查看次数:3,187 views评论次数:1

推荐45个优秀的免费web模板,点击下面的download可以下载模板代码。建议收藏~

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

45 Excellent free web templates

AIR Icon 制作软件

时间:2009年03月26日作者:愚人码头查看次数:2,468 views评论次数:0

先看看截图
制作这些很简单,就能做出精美的ICO了。
Mac screenshot of AIR Icon Generator
Windows screenshot of AIR Icon Generator

安装该软件前请先确认安装了:http://get.adobe.com/air/?loc=cn
软件下载地址:http://clockmaker.jp/labs/air_icon/download/v1.1.0.zip

分类:JS, 前端工具

(X)HTML语义与元素名全称(部分)

时间:2009年03月26日作者:愚人码头查看次数:2,548 views评论次数:0

你思考过每个元素名的全称问题吗?也许出于习惯,很少想这个问题,例如,p表示段落,那么p的本意是什么呢?它是什么词的缩写呢?也许你知道p是段落(paragraph)的缩写,那么其他元素的名称呢?
今天琢磨这个问题,故在网上狂找了半天,但是很遗憾居然没有找到相关资料,偶尔看到几个零散的提示,但是没有系统研究的资料,大家都在谈论HTML的语义性,但是连最基本的元素的原义是什么都没有搞清,何谈语义化。故下点功夫整理一下,最后汇集一个HTML元素名全称的原义表,仅作为参考,可能还很不全面,或者理解偏差,请有识之士PP。

div              语义:Division(分隔)
span          语义:Span(范围)
ol                 语义:Ordered List(排序列表)
ul                 语义:Unordered List(不排序列表)
li                   语义:List Item(列表项目)
dl                 语义:Definition List(定义列表)
dt                 语义:Definition Term(定义术语)
dd                语义:Definition Description(定义描述)
del               语义:Deleted(删除(的文本))
ins               语义:Inserted(插入(的文本))
h1~.h6      语义:Header 1 to Header 6(标题1到标题6)
p                   语义:Paragraph(段落)
hr                 语义:Horizontal Rule(水平尺)

a                   语义:Anchor(锚)
abbr            语义:Abbreviation(缩写词)
acronym   语义:Acronym(取首字母的缩写词)
address      语义:Address(地址)
dfn             语义:Defines a Definition Term(定义定义条目)
kbd           语义:Keyboard(键盘(文本))
samp       语义:Sample(示例(文本))
var            语义:Variable(变量(文本))
tt               语义:Teletype(打印机(文本))
code       语义:Code(源代码(文本))
pre          语义:Preformatted(预定义格式(文本))
blockquote    语义:Block Quotation(区块引用语)
cite          语义:Citation(引用)
q              语义:Quotation(引用语)
strong    语义:Strong(加重(文本))
em          语义:Emphasized(加重(文本))

b              语义:Bold(粗体(文本))
i                语义:Italic(斜体(文本))
big           语义:Big(变大(文本))
small       语义:Small(变小(文本))
sup          语义:Superscripted(上标(文本))
sub          语义:Subscripted(下标(文本))
bdo          语义:Direction of Text Display(文本显示方向)
br             语义:Break(换行)
center     语义:Centered(居中(文本))
font          语义:Font(字体)
u              语义:Underlined(下划线(文本))
s              语义:Strikethrough(删除线)
strike       语义:Strikethrough(删除线)

分类:html+css