605003402 605003402
http://blog.sina.com.cn/swe56
关注数: 50 粉丝数: 29 发帖数: 310 关注贴吧数: 8
理解Javascript闭包 理解Javascript闭包 1. 什么是闭包? 闭包的‘官方’解释,闭包是指可以调用 一个函数 局部变量 的 函数。 相信很少有人能直接看懂这句话,因为他描述的太学术。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包,因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。 如下代码: function operation (i){ function add(j){ alert(j+i); } return add; // 返回add的一个引用 } var resulted = operation(10); resulted (10); // ouput 20 两大特点: 1、 函数operation中嵌套了一个add函数; 2、 Operation中返回了add 函数的引用; 这样在声名了 resulted后 将operation(10)赋值给resulted, 实际上是将resulted指向了add函数。再执行 resulted时产出20; 综上所述: 当函数A的内部函数B,被函数A 之外一个变量引用的时候,就创建了一个闭包 2. 为什么要使用闭包? 简而言之,闭包的作用就是在A执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回A所占用的资源,因为A的内部函数B的执行需要依赖A中的变量。这是对闭包作用的非常直白的描述; 修改之前的函数 function operation (arg){ var i = arg; function add(j){ i=j+i; alert(i); } return add; // 返回add的一个引用 } var resulted = operation(10); resulted(10); // ouput 20 resulted(10); // ouput 30 resulted(10); // ouput 40 在operation中声名了一个变量I ; 变量I 在Add函数中被调用。并i=j+I; 弹出变量i并将 add返回。 并且还可以看出,变量I 是保存在operation的作用域之内。使得变量I 被不受外界干扰。且只有在调用add函数的引用时i才会发生变化。 闭包的作用就是将函数的局部变量保存下来。 3. 闭包的利弊 名词解释:内存泄漏是指内存不停的被占用却得不释放的一个过程。 闭包的弊端会引致内存泄漏。 为什么会导致内存泄漏? 一般函数在执行完之后就会被GC (Garbage Collection 垃圾收集器)给回收了,然而闭包却不是。 如上例。 当operation(10) 赋值给resulted的后。 // 一般函数都会被GC回收了。 然而在回收operation时发现其内部add 仍然在被引用,operation被弹出。没有回收成功 // GC回收机制不是这样的,但这样理解可以更好的了解闭包为什么会导致内存泄漏 Operation没有被回收,所以其内部的作用域被保留下来了。这样变量i和函数add得以保留。 从函数的作用域的角度来解释闭包,当函数operation执行变之后,此时operation返回add引用给resulted. 函数Add的作用域链包含了operation的活动对象i的引用。也就是add可以访问到operation中的变量和函数,函数add被resulted引用,add又依赖与operation函数,因些operation是不会GC回收的。 避免内存泄漏。当闭包被引用完之后将其设置为null以等待GC回收。 如下在引用完之后将其销毁 var resulted = operation(10); resulted = null; // 此时对函数add 的引用被撤销。GC轮询到add的被撤销后会将 operation回收
ant+yuicompressor 合并、压缩脚本与样式 将js目录下的所有.js合并为一个all.js,调用yuicompressor压缩成一个core.js文件。?123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 <?xml version="1.0" encoding="UTF-8"?><project name="Javascritp_build" default="clean" basedir="../"> <description>Javascritp build for Ant</description> <property name="src" location="js"/> <property name="build" location="build"/> <property name="target" location="result"/> <property name="lib" location="lib"/> <property name="charset" value="utf-8"/> <!-- - - - - - - - - - - - - - - - - - 这个 ant 配置文件要经过4个流程: 1、target init 进行初始化处理,创建一个目录build,用于暂存文件; 2、target concat 合并两个 js 文件,放到 build 目录下; 3、target compress 调用 Yui Compressor 对合并后的 js 进行压缩 4、target clean 进行清理动作,删除生成的 build 目录 ANT标签和属性解释: project 的 default 对应某个 target 的 name 值,表示默认执行哪个步骤; target 的 depends 对应其他某些 target 的 name 属性,表示依赖性; ${name} 可以引用 property 中定义的值。 mkdir 标签创建一个目录 replaceregexp, 正则表达式替换,将DEBUG标识替换为空,在正式环境不处理DEBUG信息 注意设置文件的 encoding 属性,否则可能有乱码情况 关于ANT的详细文档,请看官方手册:http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fant.apache.org%2Fmanual%2F&urlrefer=47b5030835978f4d117b06efd4422314 - - - - - - - - - - - - - - - - - --> <target name="init"> <mkdir dir="${build}" /> </target> <target name="concat" depends="init"> <concat destfile="${build}/all.js" encoding="${charset}" outputencoding="${charset}"> <path path="${src}/core.js" /> <path path="${src}/g.js" /> <path path="${src}/nav.js" /> </concat> <!-- - - - - - - - - - - - - - - - - - replaceregexp的说明 http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fant.apache.org%2Fmanual%2FTasks%2Freplaceregexp.html&urlrefer=d9a842b587a8bdf1500063c420f8711b - - - - - - - - - - - - - - - - - --> <replaceregexp match="DEBUG" replace="" flags="g" byline="true" file="${build}/all.js" encoding="${charset}" /> </target> <!-- - - - - - - - - - - - - - - - - - YUICompressor参数 http://tieba.baidu.com/mo/q/checkurl?url=http%3A%2F%2Fdeveloper.yahoo.com%2Fyui%2Fcompressor%2F%23work&urlrefer=5de9e56a9f1fe4e77d72e26b4f71a378 通用参数: -h, \-\-help 显示帮助信息 \-\-type <js|css> 指定输入文件的文件类型 \-\-charset <charset> 指定读取输入文件使用的编码 \-\-line-break <column> 在指定的列后插入一个 line-bread 符号 \-v, \-\-verbose 显示info和warn级别的信息 -o <file> 指定输出文件。默认输出是控制台。 JavaScript专用参数: \-\-nomunge 只压缩, 不对局部变量进行混淆。 \-\-preserve-semi 保留所有的分号。 \-\-disable-optimizations 禁止优化。 - - - - - - - - - - - - - - - - - --> <target name="compress" depends="concat"> <echo message="start compress" /> <java jar="${lib}/yuicompressor-2.4.2.jar" fork="true" failonerror="false"> <arg line="--type js --charset ${charset} --nomunge ${build}/all.js -o ${target}/core.js" /> </java> <echo message="end compress" /> </target> <target name="clean" depends="compress"> <delete dir="${build}"/> </target> </project>
Ant之build.xml详解 Ant的概念 可能有些读者并不连接什么是Ant以及入可使用它,但只要使用通过Linux系统得读者,应该知道make这个命令。当编译Linux内核及一些软件的源程序时,经常要用这个命令。Make命令其实就是一个项目管理工具,而Ant所实现功能与此类似。像make,gnumake和nmake这些编译工具都有一定的缺陷,但是Ant却克服了这些工具的缺陷。最初Ant开发者在开发跨平台的应用时,用样也是基于这些缺陷对Ant做了更好的设计。 Ant 与 makefile Makefile有一些不足之处,比如很多人都会碰到的烦人的Tab问题。最初的Ant开发者多次强调”只是我在Tab前面加了一个空格,所以我的命令就不能执行”。有一些工具在一定程度上解决了这个问题,但还是有很多其他的问题。Ant则与一般基于命令的工具有所不同,它是Java类的扩展。Ant运行需要的XML格式的文件不是Shell命令文件。它是由一个Project组成的,而一个Project又可分成可多target,target再细分又分成很多task,每一个task都是通过一个实现特定接口的java类来完成的。 Ant的优点 Ant是Apache软件基金会JAKARTA目录中的一个子项目,它有以下的优点。跨平台性。Ant是存Java语言编写的,所示具有很好的跨平台性。操作简单。Ant是由一个内置任务和可选任务组成的。Ant运行时需要一个XML文件(构建文件)。Ant通过调用target树,就可以执行各种task。每个task实现了特定接口对象。由于Ant构建文件时XML格式的文件,所以和容易维护和书写,而且结构很清晰。Ant可以集成到开发环境中。由于Ant的跨平台性和操作简单的特点,它很容易集成到一些开发环境中去
JavaScript 中万变不离其宗的 this 应用场景 this 是 JavaScript 中的一个关键字,它可以指向 window、函数、对象、全局变量,甚至是一个 Dom 元素,this 这是闹哪样啊?this 到底是指向什么?“模棱两可”的 this 几乎把前端开发们逼疯了。但我认为“模棱两可”的 this 恰恰是 JavaScript 灵活性的体现,如果摸清 this 的“脾气”,不旦不会加剧程序的复杂性,反而会让我们的代码更健壮。 this 的“脾气”并非是老虎的 P 股摸不得。我对使用 this 的场景作了一下分类,不过大家要知道,不管 this 的用法有多少,都是万变不离其宗的,它的宗旨可以总结成两句话,第一句话引自《JavaScript 权威指南》中很精辟的描述:JavaScript 中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里;第二句话引自 WanGe 同样很精辟的描述:this 指向的是调用该函数或者对象的拥有者。 带着这两句话,我们来看一下 this 可能存在的场景: 一、全局中的 this 这里说的全局,不是嵌套函数中相对的全局变量,而是相对于宿主环境,也就是我们浏览器的全局,来看一段代码或许你就明白了。var name = 'WanGe'; console.log(name); console.log(this.name); console.log(window.name); console.log(self.name); 可以看到,在全局环境下,以上四个 console.log() 的结果都是 'WanGe',其中调用 name 的 this 是 window 对象,所以此时 this === window。 二、对象中的 thisvar wange = { name: 'WanGe', say: function() { alert('My Name is ' + this.name); } }; wange.say(); 还记得那句很精辟的描述吗?“this 指向的是调用该函数或者对象的拥有者。”配合以上代码,可以相辅相成地对 this 在对象中的应用有个更好的理解。this.name 是被 wange 这个对象调用的,所以 this 指向的就是 wange,所以此时 this.name === wange.name。 三、构造函数中的 this 有了上面的铺垫,对构造函数中的 this 应该就不难理解了。不要把 JavaScript 的构造函数理解地太复杂,JavaScript 的构造函数和其他语言不太一样,它本身就是个函数,不需要关键字声明,所以和上面的例子很相似:var Person = function() { this.name = 'WanGe'; }; var wange = new Person(); alert('My Name is ' + wange.name); Person 是个构造函数,其中的 this 没有任何指向性,但是实例化这个构造函数之后就不同了,this.name 被 wange 这个实例对象调用,所以构造函数中的 this 指向的是其实例化的对象。
JavaScript的简介 如果你是新学JavaScript让我首先欢迎您来到Web文档的编程世界。JAVASCRIPT毫不夸张地把你的HTML和CSS的生活。一个可以查看作为中枢神经系统的网页文件,HTML的骨架,CSS皮肤和时尚感的文档中的JavaScript。 在这个特殊的指南,我们会解决的JavaScript从网站管理员和Web应用程序的创建者的角度,而触摸游戏创作者,动画,多媒体程序员的重要主题。我将假定你是精通HTML和CSS,因为我写这个指南。 它如何工作 它运用到您的网页文件的目标元素和属性的文档对象模型。它还依赖于HTML的事件处理功能,而无需刷新页面改变页面元素的脚本执行实时文件。Javascript可以运行,而你的页面加载,当人们的东西互动,根据计时器,你可以计划,甚至当有人试图关闭或从您的网页浏览远离。Javascript可以控制几乎所有有关网页上。它可以处理用户交互,动画,表单验证,动力学,数学,等等。Javascript是也被称为异步JavaScript和XML(AJAX),这是用来做幕后,返回的数据,而不需要刷新网页文件服务器和数据库调用的方法的一部分。 其他技术相似 Javascript是到了C,Java,PHP,ActionScript 3.0和许多其它编程技术等其他脚本语言类似。变量,字符串,函数,数组,数字,和对象的方式,它来到之前,它的许多技术非常相似,相信很多会后。由于Javascript是有点类似PHP和ActionScript 3.0,学习JavaScript,为您提供了一个面向网络或其他流行的脚本语言学习的任何其他类型的即时跳。如果你有从事编程背景,你会发现学Javascript是在一个熟悉的公园散步哪么简单。 传输与其他技术 JavaScript的作用,让您挖掘等技术,把它作为各种管道。Javascript可以挖掘到HTML和CSS没有问题,PHP和ActionScript无汗,MySQL和XML数据传输容易无数的技术交流与Javascript的馅饼。例如的Javascript不能谈MySQL数据库直接来获得它的数据出来,所以我们使用的JavaScript(XMLHttpRequest的对象)呼吁对1的PHP脚本,可以谈直接到MySQL的和传输数据库中的数据直背到JavaScript为我们要显示在文件或做任何评价后。 简史 名为布伦丹·艾希的Netscape员工 创造的名称,它在远古时代的摩卡,那么它的名字被改为LiveScript,最后成为标记的JavaScript,现在变成石头。“JAVASCRIPT”的名称似乎令人困惑,因为有一个名为“Java”的作者在编写Java脚本编程技术,这两种技术很相似,但无关。
今天应邀将CSSRESET 发出来。给大家分享一下。 今天应邀将CSSRESET 发出来。给大家分享一下。 /* CSS Reset 理念: 1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。 2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。 3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。 特色: 1. 适应中文; 2. 基于最新主流浏览器。*//** 清除内外边距 **/body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text formatting elements 文本格式元素 */form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */th, td /* table elements 表格元素 */ { margin: 0; padding: 0;} /** 设置默认字体 **/body,button, input, select, textarea /* for ie */ { /* 宋体垫底,不使用sans-serif,simsun字体,避免GB编码请求编码设置为utf-8时,非中文操作系统下IE以 sans-serif字体显示中文*/ font: 12px/1.5 tahoma, arial, \5b8b\4f53;}h1, h2, h3, h4, h5, h6 { font-size: 100%; }address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ /** 重置列表元素 **/ul, ol { list-style: none; } /** 重置文本格式元素 **/a { text-decoration: none; }a:hover { text-decoration: underline; } sup { vertical-align: text-top; } /* 重置,减少对行高的影响 */sub { vertical-align: text-bottom; } /** 重置表单元素 **/legend { color: #000; } /* for ie6 */fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 *//* 注:optgroup 无法扶正 */ /** 重置表格元素 **/th{ font-weight:normal;} /** 浮动 **/.clears{clear:both;font-size:0;line-height:0;height:0;}.l{float:left;}.r{float:right;}/**topper 专题浮动层**/
1 下一页