一小段JavaScript代码的重构

花林渡 — Fri, 23 Sep 2011 02:02:00 +0000

组里面下任务，下发了几个老系统里面的js文件来做重构设计。抽了其中一小段出来搞了一下，感觉还是有收获的，先贴上自己重构的代码，后续还会有讨论的分享。主要的业务逻辑是在表单提交之前做很多的逻辑验证，金额以及日期的选择，由于是后台系统，所以交互上面不是特别看重，错误提示都直接alert了。这段代码主要问题是if..else的嵌套太多，此外感觉有一些地方原来写的不严谨。我的第一反应是将过多的嵌套去掉，增强代码的可读性, 所以这是第一个重构迭代的主要目标；第二轮，就会想想是不是可以把一些东西抽象一下。优化的代码也可以直接看这里。

继续阅读

旅(转)

花林渡 — Fri, 26 Aug 2011 08:19:48 +0000

ps. 好文,读完以后更多的是思考,读完真的想哭. 回去一定要再读读.我们旅行的意义究竟是什么? 旅一逐渐厌倦在中国的旅行。二按我的理解，旅行无非两个目的，财富声名或者纯粹专业兴趣爱好，马帮、盲流、驼队都属于前者，而那些发现者，斯文赫定、施泰因之类两者兼之，带着专一眼光的地质、人类学、民俗学、考古、动植物学者（再加上早前的博物学家）属于后者。至于嬉皮和艺术家的流浪，不在旅行之列，因天灾人祸战争瘟疫被迫的迁徙也不能产生任何旅行的乐趣。而中国今天这样大规模以毫无深度的观光观花为目的壮观旅游场面为人类史所仅见，其疯狂程度与程式化也吊诡至令人难以想象。三 之所以厌倦，甚而绝望，原因其实很简单，没有一个地方在再次去的时候会有比上一次更好的感觉。 除夕夜的鞭炮是在江大哥在丽江新城的新别墅外放的，和他一样的古镇原住民现在都住在新城区的房子里，而在很多次羁留与往返中，我目击着原本鲜活的生活是怎样瘫痪而又无可奈何地从古镇逐渐撤离，那些地震中也不曾令江大哥们离弃的老房子都成了外地人、外国人开的酒吧、商店和客栈，原先洗衣洗菜，少年嬉水的雪山小河现在养着观赏鱼，严禁靠近，玉龙没有雪了，成了仿佛抹着点石灰的大石头，江大哥和我开玩笑，应该找家涂料厂来赞助，每年刷白两次，以供拍照使用。

继续阅读

[转]超详细Fiddler教程

花林渡 — Tue, 26 Jul 2011 11:08:08 +0000

转自：阿里巴巴中国站UED团队原文: 1) 使用Fiddler提高前端工作效率 (介绍篇) 2) 使用Fiddler提高前端工作效率 (实例篇) 以下是正文。 --------------------------------------------- 1. Fiddler 是什么？ Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器。英语中Fiddler是小提琴的意思，Fiddler Web Debugger就像小提琴一样，可以让前端开发变得更加优雅。 Fiddler是以代理服务器的方式，监听系统的网络数据流动。运行Fiddler后，就会在本地打开8888端口，网络数据流通过Fiddler进行中转时，我们可以监视HTTP/HTTPS数据流的记录，并加以分析，甚至还可以修改发送和接收的数据。Fiddler还提供了清除IE缓存、请求构造器、文本转换工具等等一系列工具，对前端开发工作很有价值。

继续阅读

window.open小技巧

花林渡 — Thu, 05 May 2011 13:11:44 +0000

简短一些，关于window.open的详细说明，请参考MDC： https://developer.mozilla.org/en/DOM/window.open 其中也有提到最佳实践。有这样一种情况，你将window.open绑定到了一个click事件句柄上，用户在触发点击事件以后出弹出一个新窗口，而当用户继续触发点击事件时，浏览器会不断的弹出新窗口。多个新窗口可能会对我们的JavaScript交互产生负面影响，所以我们想将这个window.open永远作用于同一个新窗口中。这里提供一种简单的解决方案： var message = 'Opening new page', //win = window.open('javascript:"' + encodeURIComponent(message) + '"', 'newWindow'), //win = window.open('data:text/html','newWindow'); win = window.open('about:blank','newWindow'); doc = win.document; doc.write('' + message + '' + message + ''); doc.close(); 当事件句柄被触发时，你可以用： win.location.replace('http://www.decimage.com/'); win.focus(); 1.低版本的ie系推荐使用'about:blank' 2.window的name注意不要包含特殊字符

Html Canvas Using Images

花林渡 — Fri, 01 Apr 2011 03:57:18 +0000

html5 canvas笔记参考文章：https://developer.mozilla.org/en/Canvas_tutorial/Using_images canvas最灵活的特征之一是可以使用图片，图片格式可以是png、jpg或gif，同一个页面上的其他canvas元素也可以当做图片源。

导入图片

在canvas画布上绘制图片之前我们需要提前获取需要绘制的图片对象，可以通过以下的几种方式来获得我们需要的图片对象。推荐使用script预加载来载入所需图片。 使用同一页面上的图片 我们可以通过document.images或者document.getElementsByTagName、document.getElementById方法来获取当前页面上的任意图片。 使用同一页面上的其他canvas元素 同样，使用document.getElementsByTagName、document.getElementById方法可以获取到页面上的canvas元素，它们也可以作为图片源被重新绘制。一个比较实际的用途是通过第二个canvas元素来显示第一个canvas元素中的某些细节。

继续阅读

[JavaScript学习乱弹]第五天：This关键字

花林渡 — Tue, 29 Mar 2011 06:41:56 +0000

[JavaScript学习乱弹]系列，我的JavaScript自学笔记。第五天：This关键字。自己觉得This是ECMAScript语言中比较难理解的部分之一，容易混淆，花了一个下午好好学习了一下，这里做个总结。参考： http://dmitrysoshnikov.com/ecmascript/chapter-3-this/ Understanding JavaScript’s this keyword | 笔记中多数例子出自本文引子：了解This关键字的一个前提是知晓execution contexts这个概念，我翻成执行上下文。执行上下文有三种，分别是： globalContext functionContext evalContext this，每进入一个执行上下文，都会生成一个this属性，其值由调用者决定，且不能改变。 1. globalContext 在globalContext下，this==global。

继续阅读

JavaScript小提示：慎用for/in循环

花林渡 — Thu, 24 Mar 2011 04:59:59 +0000

总结一些code时需要注意的地方。慎用for/in循环。一句话介绍：对数组进行for-in遍历，会由于原型链扩展或者浏览器的不同实现而产生一系列预想不到的问题，建议使用基于length的for循环代替。 Q1: 由于一些库(比如mootools等)，会扩展Array.prototype，for/in循环的时候会遍历数组的属性方法，导致取到预料之外的循环次数。由于扩展了Array.prototype，k对象的属性有1、2、3、$indexOf，遍历对象属性时会把$indexOf也遍历在内，与期待的结果不符。而k.length的值则不受影响，建议使用。

继续阅读

笔记|Ext Grid部分小技巧

花林渡 — Wed, 23 Mar 2011 01:55:08 +0000

尽管不喜欢ext，但工作中还是不可避免要碰到，记录部分不太常用的技巧备用。这一篇为grid部分。 menu: 1) 全选功能加强。 2) 默认选中单行。 3) 基于数据渲染行颜色。 4) 获取键盘事件。

继续阅读

笔记：发现jQuery的一些隐藏特性

花林渡 — Thu, 17 Mar 2011 07:02:25 +0000

原文：Uncovering jQuery’s Hidden Features | 点击查看以下是阅读笔记。文中提出的几条常被忽视的jQuery使用方法： 1.了解jQuery的构造函数。 每次我们调用jQuery或$时，实际都创建了一个独一无二的对象。如果我们的目的是选择元素，jQuery会很聪明的return给我们一个类似数组的东西(不是真正的数组)。我们可以使用length属性，可以使用.item(n)，甚至可以使用一些真正数组才有方法，比如slice。你给出的collection条件，会被储存到selector属性。

继续阅读

斯德哥尔摩：艺术家的家

花林渡 — Mon, 14 Mar 2011 15:27:39 +0000

艺术家的家，来自alvhemmakleri。 92㎡，可以划分出三个房间。特色：出众的挑高，可以调配出红砖砌成的拱门。落地窗打造几净明亮的画室。大量使用的装饰画。温馨的卧室。

继续阅读

DecImage.com

一小段JavaScript代码的重构

旅(转)

[转]超详细Fiddler教程

window.open小技巧

Html Canvas Using Images

导入图片

[JavaScript学习乱弹]第五天：This关键字

JavaScript小提示：慎用for/in循环

笔记|Ext Grid部分小技巧

笔记：发现jQuery的一些隐藏特性

斯德哥尔摩：艺术家的家