博文

目前显示的是标签为“Javascript”的博文

Javascript对象创建的几种方式

本文是Nicholas的《Javascript高级程序设计》6.2章的读书笔记,仅在加强记忆 工厂模式。即用一个函数来生成类的实例 function creator(name, age, job){ var o = {}; o.name = name; o.age = age; o.job = job; o.getName = function(){ return this.name; }; return o; } var person1 = creator('siglud', 10, 'Engineer'); var person2 = creator('ethlin', 12, 'Doctor'); console.log(person1.getName == person2.getName); 这种方法的很好理解,就是构造一个能返回一个类实例的函数,但是弊端有两个,一是无法用反射知道一个对象的类型,因为这个对象的类型是Object(例子中我用{}来代替);二是getName作为一个函数本来是可以复用的,但是却其实生成了两个,所以在最后的console log中打印出了false 生成器模式。原版翻译为构造函数模式,但是这个“构造函数”明显是和C语言中的构造函数不是一个东西,所以我换个说法,其本质就是把函数本身作为一个类,用new关键字来生成一个新的函数(类)对象,因为JS中函数本身也是一个对象 function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.getName = function(){ return this.name; } } var person3 = new Person('siglud', 10, 'Engineer'); var person4 = new Person('ethlin', 12, 'Doctor'); console.log(pers...

用JS做了一个POI表头合并语句的生成器

最近的项目里面要用到POI,不得不说,这比我之前用到的PHPExcel的效率高太多了,本来是件很轻松的事情了。结果碰到的问题就是这个项目的部署限制非常多,不允许在项目目录下放置Excel模板文件,也不允许在数据库中使用BLOB字段存放模板。这样就导致需要手动的将现有的Excel文件的标头用POI语句写出来。 本来这个事情也不算是个很困难的问题,但是碰到一些特别复杂的多行标头,麻烦就来了……因为行特别多,合并单元格需要数来数去的很麻烦,这就让我萌生了想要自动化完成的想法。 还好,Excel自07版之后就是以XML文件为基础的,不再是以二进制文件为基础的了,这样就不需要借助一些第三方工具来读取二进制的配置,只需要把相关的XLSX模板转化为XML文件,然后对XML文件进行操作就好了。 演示在 这里 具体的使用方式如下: 首先先把模板文件另存为Excel 07以上的格式,即XLSX格式。 将文件的后缀名改为RAR,例如原有的为01.xlsx,变更后即为01.rar。 用WinRAR或者其他压缩工具解包。得到一个文件夹。提取其中的xl/worksheets/sheet1.xml文件。(如果有多个标签页,应该是挨个编号的) 把内容拷贝到下面的文本框中,点生成语句,就会自动生成POI语句了。 源代码如下: $().ready(function(){ $("#submit").click(function(){ if($("#input").val() == ""){ alert("请输入内容!"); return false; } //开始从XML文件中把 列抓出来 var str = $("#input").val(); str = str.replace(/^[\s\S]+ /,""); str = str.replace...

最近的工作感触,记录一下

首先就是发现自己对Jquery的理解还是皮毛啊,根本就没有发现它的精髓,一直都只是会用一些change、blur之类的事件+匿名函数的方式,但是上次遇到了动态添加元素并且绑定事件的情况下就没辙了,后来发现Jquery还有live这样的事件委派发方法。 当需要在页面上动态的添加元素,并且同时要给元素添加事件的时候,老的办法自然就是在HTML里面写上一大堆的onclik=、onchange=之类的,但是作为代码洁癖的我自然是不能这么写的,之前我采用的办法是把之前写的绑定事件再次绑定,但是这次我碰上了麻烦,因为我发现这样做了之后之前存在的同类元素的事件并没有消失,重复绑定之后造成了事件会重复执行。Live这样的事件委派方法就解决了这样的问题了。 先看看Live方法的定义: .live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。传递给 .live() 的事件处理函数不会绑定在元素上,而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。在我们的例子中,当点击新的元素后,会依次发生下列步骤: 生成一个click事件传递给 <div> 来处理  由于没有事件处理函数直接绑定在 <div> 上,所以事件冒泡到DOM树上 事件不断冒泡一直到DOM树的根节点,默认情况下上面绑定了这个特殊的事件处理函数。 执行由 .live() 绑定的特殊的 click 事件处理函数。 这个事件处理函数首先检测事件对象的 target 来确定是不是需要继续。这个测试是通过检测 $(event.target).closest('.clickme') 能否找到匹配的元素来实现的。 如果找到了匹配的元素,那么调用原始的事件处理函数。 由于只有在事件发生时才会在上面的第五步里做测试,因此在任何时候添加的元素都能够响应这个事件。 它的作用基本上和.bind() 的作用是完全一致的,只是似乎对部分事件的支持不足,但是在新版本中基本上也修正了。 $("p").live("click", function(){     $(this).after("<p>It Wor...

不会拿来主义的程序员不是好程序员

之前虽然我一直以自己写为主,很少用别人现成的API,但是我也深知,仅仅只是依赖于自己的手工劳动这样虽然在很大程度上保证了代码量的精简和高速,但是在大批量的编程和大项目上是无法胜任的,好的程序员必须要快速的能够把别人现成的可以用的东西拿过来用,而不是拘泥于自己去写。 于是这次在写这个局内部的管理程序的时候,我更多的想到是API,首先确定要玩的是JQuery这个大名鼎鼎的Javascript API,于是找来了它的中文参考手册( 这里 ),研究了一下发现,这个家伙确实提供了很多简化的写法,虽然并不是非常的困难,但是如果用在编程上,确实减少了很多的代码书写量。 然后为了实现类似Google的Serach Suggest功能,使用了Jquery Autocomplete( 这里 )。这个家伙相当的强大,可以非常轻易的实现单词自动补完甚至可以实现拼音首字母的快速检索。这里有详细的手册。 其次用到了 TipsWindow ,一个基于Jquery的浮动层API,提供了相当强的设置和功能。 同时,在研究它的代码的时候,我发觉,它和我之前看Google 的Gmail一样,采用了一张大的背景图,把所有的背景和图标都集中了在里面……这个难道有什么蹊跷么?我最初怀疑是可以便于客户端缓冲,但是考虑一下明显不可能,因为客户端载入一张小图片当然比载入一张大图片要大,那为什么都采用这样的设置,而使用CSS的图片分割功能呢? 求助于Google终于知道,这样的最大的好处就是可以减少HTTP服务器的Request量,因为HTTP在高并发的时候对Request的数量相当的敏感,这就和我们拷贝小文件数量越多越慢一样,如果全部压缩成RAR一次性拷贝可能只需要几秒,但是分开来的几千甚至几万个小文件甚至可以用上几十分钟才能拷贝完。 另外不得不记一笔,之前曾经解决过同样的问题但是因为没有记录最后自己也忘了怎么解决的了。 很简单的JavaScript的字符串查找替换为问题,很简单的使用replace方法就可以了,但是关键是那个用来匹配的正则表达式对象,那个并不是字符串,如果是字符串的话匹配一定不成功,在类型中它准确的类型应该是Function,而并不是String。 这样就导致了一个问题,在匹配的字符串不断的改变的情况下你无法简单的用字符串连接的生成一个Function啊! 结果最后还是自己发现了最初这个函数在讲解...

一个很好用的兼容Firefox的时间日期选择框JS

直接放上Google Docs了. 点击我下载 调用方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1"> <script src="WebCalendar.js" type="text/javascript"></script> </head> <body> <form name="form1" method="post" action="WebForm1.aspx" id="form1"> <input type="text" value="" maxlength="100" id="Txt_CreateDateST01" onclick="SelectDate(this,'yyyy 年')" readonly="true" style="width:265px;cursor:pointer" /><br /> <input type="text" value="" maxlength="100" id="Txt_CreateDateST02" onclick="SelectDate(this,'yyyy 年 MM 月')" readonly="true" style="width:265px;cursor:pointer...

有时候看来还是要转变观念

之前被要求做一个固定宽高比缩小图片显示并且对必要的图片加底色的东西. 刚开始思考的时候觉得很复杂,最初想象的解决方案是这样的: 1.在消息录入的时候,对上传的图片进行控制,根据最终的大小比率来缩小图像,并且用PHP的内置图像处理函数来完成对图像的加工,然后存放到硬盘中,调用的时候直接显示那个处理完成的图像即可.这个的优点是一次性完成,速度快,但是可能影响到了正文的图片. 2.在图片输出的时候对图片进行控制,原理和上面一样,同样是用PHP生成一个满足要求的图片,然后将图片输出到客户端,这样的话好处在于正文图片不会被修改,坏处在于每次都要重新生成一次,不过可以考虑用缓冲机制. 不过总体考虑都还是比较欠妥,因为太复杂了.有没有更加简单有效的东西呢? 结果...还是想到了JavaScript..不能总在服务器端想办法,应该更多的想到客户端的作用啊~ 于是,简单易行的东西出来了...之前限于图片底色的问题,我一直让我把思维禁锢在了用PHP的图片处理函数上面了,而JavaScript上是缺乏这样的函数的.但是后来想到,直接加个纯色的DIV上去做背景不就好了?? 然后用JavaScript来把图片缩小到适当大小,居中一下不就可以了? 于是程序如下: var proMaxHeight = 200; var proMaxWidth = 280; var top = document.getElementById("centerpics").firstChild; if (top.nodeName != "A") {     var top = document.getElementById("centerpics").firstChild.nextSibling.firstChild; } else {     var top = document.getElementById("centerpics").firstChild.firstChild; } function proDownImage(ImgD){ ...

XSL继续学习

继续总结一些XSL中比较实用的经验: 1.多用用属性比直接增加节点来的方便,也更加爱节约流量,但是属性中无法增加CDATA,所以必要的节点还是必要的 2.在XSL中所有的HTML必须要转义,特别用的多的有&要写成&amp,空格应当写成&#160; 3.输出XSL中的CDATA必须要用到JS才可以跨浏览器 <div id="test"><xsl:value-of disable-output-escaping="yes" select="//node"/></div> <xsl:if test="system-property('xsl:vendor')='Transformiix'"> <script language="JavaScript"> var el = document.getElementById("test"); el.innerHTML = el.lastChild.data; </script> </xsl:if> 其实很简单的一个东东,从上面的一个节点处取得这个节点的值,然后用innerHTML方法把它塞回元素里面,于是就能完整显示了,上面那个if test="system-property('xsl:vendor')='Transformiix'"其实是在测试浏览器是否是FF,因为IE直接就用disable-output-escaping="yes"这个属性让HTML直接输出了.

JavaScript基础

跨浏览器、跨语言 文档对象模型是一种 W3C 标准。因此,所有现代 Web 浏览器都支持 DOM —— 至少在一定程度上支持。虽然不同的浏览器有一些区别,但如果使用 DOM 核心功能并注意少数特殊情况和例外,DOM 代码就能以同样的方式用于任何浏览器。修改 Opera 网页的代码同样能用于 Apple's Safari®、Firefox®、Microsoft® Internet Explorer® 和 Mozilla®。 DOM 也是一种跨语言 的规范,换句话说,大多数主流编程语言都能使用它。W3C 为 DOM 定义了几种语言绑定。一种语言绑定就是为特定语言定义的让您使用 DOM 的 API。比如,可以使用为 C、Java 和 JavaScript 定义的 DOM 语言绑定。因此可以从这些语言中使用 DOM。还有几种用于其他语言的语言绑定,尽管很多是由 W3C 以外的第三方定义的。 本系列文章主要讨论 JavaScript 的 DOM 绑定。这是因为多数异步应用程序开发都需要编写在 Web 浏览器中运行的 JavaScript 代码。使用 JavaScript 和 DOM 可以即时修改用户界面、响应用户事件和输入等等 —— 使用的完全是标准的 JavaScript。 总之,建议您也尝试一下其他语言中的 DOM 绑定。比如,使用 Java 语言绑定不仅能处理 HTML 还可处理 XML,这些内容将在以后的文章中讨论。因此本文介绍的技术还可用于 HTML 之外的其他语言,客户端 JavaScript 之外的其他环境。 节点的概念 节点是 DOM 中最基本的对象类型。实际上,您将在本文中看到,基本上 DOM 定义的其他所有对象都是节点对象的扩展。但是在深入分析语义之前,必须了解节点所代表的概念,然后再学习节点的具体属性和方法就非常简单了。 在 DOM 树中,基本上一切都是节点。每个元素在最底层上都是 DOM 树中的节点。每个属性都是节点。每段文本都是节点。甚至注释、特殊字符(如版权符号 ©)、DOCTYPE 声明(如果 HTML 或者 XHTML 中有的话)全都是节点。因此在讨论这些具体的类型之前必须清楚地把握什么是节点。 节点是…… 用最简单的话说,DOM 树中的任何事物都是节点 。之所以用 “事物” 这个模糊的字眼,是因为只能明确到这个程度。比如 HTML 中...

50个令人叹为观止的JavaScript应用站点

随着诸如 jQuery, Mootools, Prototype 一类的 JavaScript 框架的崛起,Web 开发者们基于这些框架创建了众多令人叹为观止的效果。以下的50个站点全部基于 JavaScript,却拥有 Flash 一样的绚丽效果。在很多 Web 开发者看来,Flash 并不是他们的首要选择,因为 Flash 至今对搜索引擎仍是不透明的,另外,Flash 的渲染需要浏览器插件,而 JavaScript 的一切都是本地的。 Tabs Aviary - http://aviary.com/ Aviary 使用了非常圆润的 Tab 效果,点击 Tab 后,渐出渐入的栏目介绍性内容非常漂亮,它的基于 JavaScript 的下拉菜单也美轮美奂。 Toolani - http://www.toolani.de/ 黄色内容区块下方的,基于 jQuery 的 Tabs 非常漂亮。 Podcasttuneup - http://www.podcast-tuneup.com/ 漂亮的 Tab 带着有趣的上卷与下卷效果。作为对比,该 Tab 框上方还有一个基于 Flash 的 Tab 框,可以看出,Flash 的反应速度明细要快得多,然而却要等半天的时间加载。 Adworks - http://www.adworks.ro/ 尽管这些 Tab 并不象前面提到的那几个,带渐入溅出效果,但那些大图标实在惹人喜欢。 We are Sofa - http://www.madebysofa.com/ 如果你想用文字式 Tab 这个网站是个很好的例子。 幻灯式内容 monofactor -http://www.monofactor.com/ 这个重新设计后的站点使用幻灯风格展示作者的作品。 Alex Buga - http://www.alexbuga.com/ Alex Buga 自诩为 Web 设计超级明星,使用了类似幻灯片的方式展示他最近的活动。位于右上角的那个主导航条也很 Cool,不过该站点大量使用了 Ajax。 Coda, one Window Web development - http://www.panic.com/coda/ 这个站可谓家喻户晓。是很多人获得灵感的地方。 Kobe - http://www.arcinspirations.com/kobe/ 漂...

让我怎么说你好,setTimeout()和clearTimeout()

这俩函数,一个是延时循环执行函数,一个是解除执行函数. setTimeout()的作用是让程序一段时间内反复执行,带的参数一个是函数,后面一个是毫秒数(1000为1秒) 现在的要求是:需要延时执行一个让层消失的函数,但是当这个函数还在排队执行的过程中,一个新的函数执行,一个让新的层出现的函数..但是让新的层出现又需要延时,但是在新层出现之前,又会调用clearTimeout()来解除之前不断循环的让层hide的函数,否则层不可能显示出来.但是延时函数还在延时的过程中,所以还没有顺利的让层消失就被取消掉了.. 因此出现了连续存在但内容变化的层,但是如果要让层顺利的消失,又考虑消失等待的话,就又需要一个延时函数来执行解除执行的函数,但是这个延时解除执行函数的函数又需要一个解除执行的函数来来解除,而且还不能解除的太快..因此又需要延时...如此反复...orz 我说...Javascript里面就没有一个单纯的执行延时的函数么?为啥非要搞个不断执行...难道这样很方便么...仅仅只是少些了一个while(1)循环而已...orz 现在唯一的解决方式就是在clearTimeout()之外放一个死循环反复的判断层是否已经消除,如果消除了则执行clearTimeout()并且break掉...真麻烦,估计看页面卡的都不行了...orz

attachEvent() / addEventListener() 对象添加触发事件(转)

attachEvent() / addEventListener() 对象添加触发事件(转) 有时候当某一对象的某一事件被触发时,它所要执行的程序可能是一大串,有可能是要呼叫某一函数,也有可能同时又要呼叫另一函数。 document.getElementById("btn").onclick = method1; document.getElementById("btn").onclick = method2; document.getElementById("btn").onclick = method3; 如果这样写,那么将会只有medhot3被执行 在IE中使用addachEvent , var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function); btn1Obj.attachEvent("onclick",method1); btn1Obj.attachEvent("onclick",method2); btn1Obj.attachEvent("onclick",method3); 执行顺序为method3->method2->method1 Mozilla系列中需要使用 addEventListener var btn1Obj = document.getElementById("btn1"); //element.addEventListener(type,listener,useCapture); btn1Obj.addEventListener("click",method1,false); btn1Obj.addEventListener("click",method2,false); btn1Obj.addEventListener("click",method3,false); 执行顺序为method1->method2->method3 看看gmail的代码 var Ka=navigator.us...

继续学习充电

图片
这次是关于Tab标准化布局的心得...之前发现怎么样也无法吧表格之间的间隙去掉,无论怎么样做出来的都是双线的表格,后来发现原来是要这样解决: tab的属性: border-collapse:collapse; border-color:#999999; 内部表格的属性: border: 1px solid #999999; 这样就OK了,还害得我捣鼓半天.. 还有就是关于PHP直接echo出XML文件的问题,现开始直接echo怎么都无法输出XML文档,输出格式都是正确的,但是浏览器并不识别为XML,后来终于发现...原来是Header的原因.只要在PHP的输入头文件修改Header就好了,语句是: header('Content-Type: text/xml'); 这样就不需要PHP 4.x的版本打开一些特殊的XML类来生成类了,直接echo就好了,但是解析还是存在问题就是了...不过解析也可以用正则来完成的...具体可以查看IBM站的这帖,写的很基础 http://www.ibm.com/developerworks/cn/opensource/os-xmldomphp/ 现在所需要做的就是实现鼠标移动到对应表格之后的浮动效果了... 结果找到这么一个站: http://www.dyn-web.com/ 实在是太强大了...orz JS原来还可以实现这么多功能...我算是开了眼界了...以后看来需要恶补一下JS的编写了..orz 不过美中不足的是,有加密....不允许使用在非Localhost的站点上..不过JS最多也就是一个16进制的加密而已,随便就搞定了,上网,找了一个JS的16进制转换器,OK了~ 这个是存档,下载这张图片然后把扩展名改为RAR即可解压.. 另外就是在XSL中加载JS文件和直接写入JS的问题.. 加载要使用: <script src="'"></script> 而直接写入JS需要: <script langauge="'"> <![CDATA[ ..................... ]]> </script> 有些地方会画蛇添足的给中间再加上XSL的注释,但是这样的话FF反到不能识别了(FF是矫枉过正..内...