哥俩好:oninput & onpropertychange

传统对于文本框(input)的输入可通过键盘的 onkeydown / onkeypress / onkeyup 来监测,但在处理较多细节时存在诟病比如: cut(剪切) / paste(复制) / undo(撤销) / redo(重做) / drag & drop(拖拽)/ 输入法等。 而 oninput & onpropertychange 事件基本可以解决上面的诟病: oninput 事件作为 HTML5 中的标准事件,基本除了IE6 / IE7 / IE8 外的最新浏览器均支持(注:1、原先的 Opera 的虽支持,但依然存在部分传统的诟病,从 Opera 11+ 开始,已修复,更加完美;2、IE9 也支持)。 function(input, callback){ if (“onpropertychange” in input) { //IE6/IE7/IE8 input.onpropertychange = function(){ if (window.event.propertyName == “value”){ callback.call(this, […]

... 20 条评论 »

使用 JScript 创建 .exe 或 .dll 文件

什么是 JScript? JScript 是由微软开发的活动脚本语言,基于 ECMAScript 规范实现。Internet Explorer 中的 JavaScript,实际上是指 JScript。JScript 已被 Windows Script Host(WSH)支持(WSH 中的 JavaScript shell scripting:C:\> cscript jslint.js)。JScript 最新的版本(JScript.NET)基于 ECMAScript 4.0 ,并且可以在 .Net 环境下编译。 .NET Framwork 中包含有 JScript 编译器 :JScriptCompiler (C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\jsc.exe),其可以将 JScript 文件编译为一个 .exe 或者 .dll 文件。 为了方便使用,我们可以将 JScriptCompiler 的路径加入到环境变量(环境变量 –> 系统变量 –> Path)中。在 CMD 程序运行窗口中直接调用命令 “jsc”,就可以看到编译器相关的帮助选项。 jsc [选项] [[选项] …] JScript 编译器选项 […]

... 8 条评论 »

Simple JavaScript Template : substitute

我们在平常使用字符串拼接的时候(如下例),会发现代码的可维护性和易读性将变得更加糟糕(代码中一堆的变量、双引号、单引号, 加号等,相信当情况更为复杂时,头一定发晕): var url= ‘http://www.plannabc.net/’, title= ‘落草为根——专注前端技术&关注用户体验’, text = ‘怿飞’s Blog’; var link = ‘<a href=”‘ + url + ‘” title=”‘ + title+ ‘”>’ + text+ ‘</a>’; 如果上述代码变为: var obj = { url: “http://www.plannabc.net/”, title: “落草为根——专注前端技术&关注用户体验”, text: “怿飞’s Blog” }; var link = ‘<a href=”{url}” title=”{title}”>{text}</a>’; substitute(link, obj) 一切变得怡然自得。 substitute 函数的实现思路其实很简单:使... 23 条评论 »

domReady Function

上次写过 《模拟兼容性的 addDOMLoadEvent 事件》,昨天抽时间整理成了 domReady 函数。 使用非常方便: domReady(function () { // Dom is loaded! You can do anything! }); 测试案例:http://blank.github.com/domready/test/ 代码如下(注释较为详尽,就不再说明了): /** * domready.js – Specify a function to execute when the DOM is fully loaded. * Copyright (c) 2011 Blank Zheng (blankzheng@gmail.com) * http://www.planabc.net */ (function (doc, win) { var isReady = 0, isBind […]

... 0 条评论»

URI 中的一些规范

In RFC 3986: //URI = scheme “:” hier-part [ “?” query ] [ “#” fragment ] gen-delims = “:” / “/” / “?” / “#” / “[” / “]” / “@” sub-delims = “!” / “$” / “&” / “‘” / “(” / “)” / “*” / “+” / “,” / “;” / “=” reserved […]

... 0 条评论»

如何用 JavaScript 开发迷宫游戏

3月6日在杭州 Google GTUG 活动上的分享《Maze Game》,本想讲 《Android 手机开发及HTML5在手机开发中的应用》,但由于 Google 邀约得比较晚,来不及准备,就在原先准备在团队内分享的未完成 PPT ——《Maze Game》的基础上,做了补充和完善。 游戏部分思路来源于同事 季札 开发的迷宫游戏:www.sansi.org/static/maze/maze.html

... 6 条评论 »

Script 元素 type 属性的妙用

我们经常使用动态创建 JavaScript 的方式来实现 JavaScript 文件的无阻塞(Non-blocking)、并行下载(Parallel )。其实还可以添加自定义的 type 属性(比如 text/cache),达到预加载但不执行的效果: var doc = document, el = doc.createElement(“script”), head = doc.getElementsByTagName(‘head’)[0]; el.src = “http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js”; el.type = “text/cache”; head.insertBefore(el, head.firstChild); 注:Firefox 3.6.x 不请求 JavaScript 文件。 扩展阅读: 《Preload CSS/JavaScript without execution》 《Preloading JS and CSS as Print Stylesheets》

... 14 条评论 »

前端代码 Review 的一些思考

查看大图:http://www.planabc.net/wp-content/uploads/2011/codereview.png 欢迎大家针对其中的问题,一起思考与交流! 扩展阅读: 《探讨前端代码Review》

... 5 条评论 »

模拟实现 Range 的 insertNode() 方法

最近对 Range 和 Selection 比较感兴趣。 基本非 IE 的浏览器都支持 DOM Level2 中的 Range,而 IE 中仅有自己的简单处理方法(Text Rang)。 扩展阅读: 《TextRange Prototype》 《Document Object Model Range》 《Javascript标准DOM Range操作(1)》(节选自《JavaScript 高级程序设计》) 《Javascript标准DOM Range操作(2)》(节选自《JavaScript 高级程序设计》) 《Javascript标准DOM Range操作(3)》(节选自《JavaScript 高级程序设计》) 而 IE 下的 Text Rang 主要用来处理文本,并非 DOM 节点,那如何在 IE 下模拟 DOM Level2 中的 Range 呢? 根据规范的 API,我们需要模拟下述属性和方法: function zRange() { // Inital states this.startContainer […]

... 7 条评论 »

DOM 元素如何获得焦点

首先让我们看看哪些元素可以直接获得焦点(element..focus()): // Form : http://www.w3.org/TR/html5/editing.html#focusable a elements that have an href attribute link elements that have an href attribute button elements that are not disabled input elements whose type attribute are not in the Hidden state and that are not disabled select elements that are not disabled textarea elements that are not disabled command elements […]

... 4 条评论 »