JavaScript Arguments对象

2011-11-23 No Comments

Arguments对象是在函数执行时期动态创建的,它是一个类似数组的对象,可通过索引获取成员,拥有length属性。 arguments.length 表示实参总数,与此对应的行参总数可通过funcName.length获得。 arguments.callee 是对函数本身的引用,在ES5中严格模式下禁止使用。参考callee 。 把arguments转换成数组[].slice.call(arguments, 0)。 function foo() { var args = [].slice.call(arguments, 0); console.log(args); // [1, 2, 3] } foo(1, 2, 3); arguments对象是不能被delete的。 arguments与实参之间是引用关系。 实参是无法被delete的,而arguments的成员可以delete,但是delete之后,实参和arguments成员的引用关系也就丢失了。 function foo(x) { delete arguments; // false  arguments[0] = 11; // arguments[0]: 11, x: 11 x = 22; // arguments[0]: 22, x: 22 delete arguments[0]; // delete 之后丢失引用 x = 33 » » »阅读更多

JavaScript Tab 切换

2011-10-11 1 Comments

额,关于Tab切换,网上代码一大堆。硬生地直接在HTML结构中嵌入事件代码,个人感觉实在不爽,习惯了jQuery插件的配置方式,即使原生的JS代码也应该写的优雅一些。 这个组件,HTML结构有些要求。基本的HTML结构如下。 <div id="tab-switch"> <ul class="tabs"> <li><a href="#">Tab1</a></li> <li><a href="#">Tab2</a></li> <li><a href="#">Tab3</a></li> </ul> <div class="panes"> <div>......</div> <div>......</div> <div>......</div> </div> </div> tab-switch是传递到组件对象的参数,tabs为tabs外层容器的类名,panes则是tab点击对应显示内容的外容器的类名。类tabs、panes可以在配置中指定。 初始化Tab切换所需要的JS代码 » » »阅读更多

JavaScript节点克隆

2011-09-21 No Comments

JS克隆节点可以使用cloneNode方法。如果克隆节点下所有的子节点,需要传递参数true,这样就能得到节点深度拷贝的一个副本。JS本身提供的这个方法并不像jQuery的clone方法可以深度克隆事件绑定函数。 克隆节点的分为三步,第一得到需要克隆节点的引用,第二调用改节点的cloneNode方法,第三把克隆的节点插入文档。 var node = document.getElementById('id'); node.cloneNode(true); node.parentNode.appendChild(node); 克隆节点时,节点所有的属性都会被克隆,那么我们就会想,可不可以克隆节点的绑定事件。这个在IE浏览器里可以实现,所采用的事件绑定方式只能是attachEvent。 当我们要动态生成的相同的节点,是采用document.createElement效率高还是去克隆节点。在我的测试中,IE系列和Opera克隆节点会显得效率比较高。在这个IE横行的国内,还是采用克隆的方式比较好。我做了一个测试页,查看演示。 // 克隆节点的方式 var span = document.createE » » »阅读更多

模拟HTML5文本框的placeholder属性

2011-09-14 No Comments

不支持placeholder属性的浏览器用jQuery库模拟。 包裹文本框的外层容器加上.placeholder类,有效率地获取对应元素。 if (!('placeholder' in document.createElement('input'))) { $('.placeholder').find('input[placeholder], textarea[placeholder]').each(function(k, v) { var $obj = $(v), val = $obj.val(), placeholder = $obj.attr('placeholder'); if (val == '') { $obj.val(placeholder); } $obj.focus(function() { if ($obj.val() === placeholder) { $obj.val(''); } }).blur(function() { val = $obj.val(); if (val == '' || val == placeholder) { $obj.val(placeholder); } }); }); } 查看演示 阅读更多

jQuery资源收集

2011-08-24 No Comments

JQuery最佳实践 关于使用jQuery时的最佳实践。使用最新版本的jQuery库,优化选择器查询,尽可能使用javascript原生的方法,缓存查询后的jQuery对象,使用实践委托,减少修改DOM次数等。 JQuery设计思想 基础的jQuery使用方式,jQuery的一些设计思想。如果有javascript基础可迅速掌握,或许不了解javascript童鞋还是要读读《jQuery基础教程》。 阅读更多

JavaScript添加收藏

2011-08-07 2 Comments

比较反感这个功能,如果某个网站有价值,用不着提供这种功能。不知为何,领导们都挺喜欢这个功能,似乎放这个功能上去,就能增加流量似的。既然有这方面的需求,那么就得弄点代码,迎合一下领导的胃口。 利用JS操作浏览器而非页面,似乎只有IE和Firefox提供了这种接口,大概也是历史上就提供了这种功能了。我所知道的,其它的浏览器没有提供这种接口。况且这也不是JS应该干的事。 function addFavorite(url, title) { url = url || location.href; title = title || document.title; if (document.all && window.external) { // for IE window.external.addFavorite(url, title); } else if (window.sidebar) { // for Firefox window.sidebar.addPanel(title, url, ''); } else { // 其它浏览器 alert('快捷键 Ctrl+d 添加收藏'); } } 如果参数为空,会使用当前页面的标题和链接地址。其它的 » » »阅读更多

nodejs非阻塞特性

2011-08-02 No Comments

传统的编程语言模型中似乎很少有提及非阻塞这个特性的,至少对于我来说,对这个概念很是不解。习惯了阻塞式的编程,在来看nodejs的非阻塞特性,感觉很是新奇,也感觉这种特性更加合理、有效率。 就我理解的来说,阻塞就是在运行一段程序的时候,后续的程序段都是被阻塞的、无法运行的。这样资源便得不到充分利用,效率上来说就有点折扣。而对于非阻塞的程序来说,运行时间长的程序并不会阻塞其它程序段得运行。 访问文件作为例子,传统的步骤一般是打开文件,然后读取或写入,然后关闭文件。 fp = File.open('foo.txt', 'r') fp.each_line do |line| puts line end fp.close() puts 'end here' 打开文件,读取其中的内容,输出内容。在文件内容没有处理完,是无法执行其后的程序的。再看一下nodejs是如何处理这样的情况的。 var fs = require('fs'); fs.readFile('foo.txt', 'utf-8', function(err, data) { if (err) throw err; console.log » » »阅读更多

使用heroku部署nodejs应用

2011-07-22 No Comments

开发环境在ubuntu10.04下。 $ ruby -v ruby 1.9.2p290 (2011-07-09 revision 32553) [i686-linux] $ gem -v 1.3.7 $ node -v v0.4.9 $ npm -v 1.0.15 $ git .... 确保以上软件安装完成。可参考如下文章。 Ubuntu 10.04安装ruby1.9.2和rail3.0.1 Ubuntu下安装nodeJS npm Set Up Git 准备工作尚未完成,还要到heroku官方注册账户,Sign Up。 下面要安装heroku软件包,推荐使用gem来安装。 $ gem install heroku $ heroku version heroku-gem/2.3.6 如果执行heroku命令的时候,终端报错,找不到该命令,这是因为heroku不在环境变量里,还要执行下面的步骤。 $ gem environment ...... - INSTALLATION DIRECTORY: /usr/local/lib/ruby/gems/1.9.1 ...... $ export PATH=/usr/local/lib/ruby/gems/1.9.1:$PATH 准备工作基本完成。下面开始创建nodejs应用。打开ubuntu的终端控制台,执行 $ mkdir node_app $ cd node_app $ gedit web.js 然后将下面的内 » » »阅读更多

jQuery幻灯片插件开发

2011-07-19 No Comments

憋了N天,终于整出来个jQuery的幻灯片插件。jQuery的插件资源非常丰富(25个必须学会的jQuery幻灯片插件教程),没有必要重复发明轮子,任务需要或技能训练,必要的时候还是要动手去做一下,有利于提高JS能力。 先来看一下如何使用该插件,知道如何使用jQuery访问DOM,就可以轻松使用该插件。当然要先从HTML结构开始出发。 HTML代码 <div id="ad_gallery"> <div class="ad_sheet_wrap"> <ul class="ad_sheet_con"> <li><a href="#"><img src="image/image_1.jpg"></a></li> <li><a href="#"><img src="image/image_2.jpg"></a></li> <li><a href="#"><img src="image/image_3.jpg"></a></li> <li><a href="#"><img src="image/image_4.jpg"></a></li » » »阅读更多

Ubuntu下安装nodeJS

2011-07-08 No Comments

神马?!不知道什么是nodeJS,那你跟我一样OUT了。简单说来,nodeJS是运行于服务器端的语言,基于V8引擎,就是说以后前端和后端都可以用JS来写,很期待!关于nodeJS的详细信息,请直接访问官网。 下面来看一下如何安装nodeJS。linux下安装可以采用简单的三部曲,window下可以使用cygwin安装。我的测试环境用的Ubuntu。 首先从官网下载最新的套件,进入下载页。 $ wget http://nodejs.org/dist/node-v0.4.9.tar.gz $ tar -zxvf node-v0.4.9.tar.gz $ cd node-v0.4.9 $ ./configure $ make $ make install 不幸的是,安装过程中出现如下错误。 Checking for openssl : not found 网上有解决办法,似乎缺少libssl-dev开发库,用常用的软件安装命令可以搞定它。 $ sudo apt-get install libssl-dev 然后在控制台下输入 $ node -v v0.4.9 即可看到我们安装的nodeJS的版本号。 最后上一个nodeJS官方的代码。 var http = require » » »阅读更多