小记JavaScript享元模式

最下面是周五懒懒分享的PPT,不得不承认,强大如斯的keynote,也能让我做出这么丑的PPT。。

09年就买了《JavaScript设计模式》,前后看了几次(是“次”,不是“遍”),刚开始看没什么收获,后来随着编码经验、遇到的问题越来越多,看这本书也越来越觉得好。现在都快当成了工具书,遇到难题就去翻翻,常看常新。

设计模式是编码的最佳实践,它应用在两个层次:解决特定编码问题、设计程序架构

简单记录一下“享元模式”及其在解决特定问题上的应用。

应用场景

阅读全文 »

HTML邮件编码禁忌

今天做了两个HTML邮件模板,记录一下所得:

禁忌

1. 结构尽量简单,最好使用table布局

可以保证在CSS样式失效、或者html被禁用的情况下最大程度的还原布局和样式。

2. 不要使用<head>标签

一般会被过滤掉。

3. 不要使用JavaScript和Flash

正常情况下这个是绝对被过滤的。。

4. 使用内联CSS样式,不要引入外部CSS文件,不要使用<style>标签

Gmail等不支持style标签。

5. CSS禁忌:不要使用绝对定位,不要使用背景图片,不要使用半透明,不要使用IE滤镜和CSS表达式,不要使用CSS3属性……

6. 图片要添加alt属性,保证在禁用图片的情况下传递有效信息

7. 图片添加宽高属性

8. 不要试图使用iframe引入外部页面

9. 尽量精简代码,减少图片数量和体积

10. 一般使用UTF-8编码

邮件客户端/服务商对CSS支持情况

阅读全文 »

“最被误解的语言”正焕发全新活力

这些内容最早出自6月份的一次团队内分享,后来圆心推荐发表在了8月的《程序员》杂志上。遗憾的是编辑自行作了很多删改,原文发在这里。

Douglas Crockford曾称JavaScript是“世界上最被误解的语言”。确实,很长一段时间里,JavaScript都曾是泛滥的网页特效和弹窗广告的代名词。近些年来,随着Ajax应用的流行和前端框架的发展,JavaScript已经越来越严格和标准化。同时,在前端领域之外,JavaScript 也正被越来越广泛的使用。下面我们通过几个简单的JavaScript语句,一起来了解这些领域的应用。

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
}).listen(8080, "127.0.0.1");

这几句代码大体可以看出,它们的作用为:在本地的8080端口监听请求,返回浏览器响应──没错,这是基于JavaScript的服务器程序 node.js( http://nodejs.org/)的一段控制语句。
node.js基于V8引擎(Chrome浏览器使用的JS解析器),它继承了 JavaScript的诸多特性,具备比Apache等传统服务端程序更好的性能和特性:I/O读写都经由V8引擎来处理,避免不良代码造成的死锁;更节省内存开支;处理并发请求效率更高;等等……

{"id": "036378",  "name": "etai", "job": "F2E" }

这是一句简单的JavaScript专用数据格式——JSON语句,但确切的说,它一种基于JSON的数据库存储格式——BSON,是最近流行的NOSQL(非关系型数据库)的一种存储形式,非关系数据库多采用kay-value形式,具备比关系型数据库更强的扩展性和可操作性,并且在海量存储、高并发读写方面有绝佳的表现。

var t = db.things.findOne( { name : “etai” } );

这句JavaScript语句的作用为:在以BSON存储的数据库中取得一条记录。它是著名的非关系数据库——MongoDB的一条查询语句。MongoDB基于C++开发,使用二进制格式存储BSON数据,可以对BSON中每个字段进行索引,具备极高的处理海量数据的能力。让人惊讶的是,它分别提供了基于十几种语言的查询语句和服务端、客户端,其中就包含对JavaScript的完美支持——MongoDB提供了基于Node.js的数据库服务器、基于SpiderMonkey的数据库客户端,以及JavaScript查询语句,并且提供了全功能的Web Shell。

JavaScript在这些领域的应用,已经不单单是停留在实验和玩票的性质,它们在国内外已经开始了大规模的使用。可以预见,在不久的将来,会出现这样的网站:它的前端使用JavaScript实现网页特效和交互,服务端运行的是基于JavaScript的Web服务器和数据库服务器,数据库使用JSON/BSON存储数据。

作为前端工作者,看到我们最熟悉的语言正在被这么多人、在这么多领域研究和使用,兴奋之余也倍感压力——越来越多的研究和关注,必然会促进这门语言更快的发展,同时也会变得更严格和严谨。这对前端工作者提出了更高的要求和挑战——与时俱进,不断超越!

IE6的position:fixed

手头一个项目中,要实现把一个浮层控制在浏览器窗口右下角,用”position:fixed”来控制最合适不过了。

但万恶的IE6不支持这个属性,之前采用过的方法有:将滚动条转移到body上,使用绝对定位控制浮层位置;使用JS实时判断滚动并设置浮层位置。

第一种方法局限性太大,页面中有其他绝对定位元素会受到影响;第二种方法需要在页面里加定时器,资源开销和时间成本都有点高。

后来在同事小卓的启发下,使用CSS表达式完成了IE6的兼容,代码如下:

_position:absolute;
_top:expression(document.documentElement.clientHeight - 213 + (e=document.documentElement.scrollTop) +'px');
/*
document.documentElement.clientHeight : 浏览器串口高度
200 : 浮层高度
(e=document.documentElement.scrollTop) : 滚动条高度
 */

CSS表达式虽然方便,但浏览器资源损耗仍然很大,要根据具体应用场合决定,“一切皆权衡”,哈~

可以在前端实现的几个地理位置小功能

在Smashing Magazine上看到这篇Entering The Wonderful World of Geo Location,介绍了获取并处理用户地理位置的应用和方法,很有意思。结合原文的内容,加上之前的一些应用,整理了几个可以完全在前端实现的地理位置相关小功能。

1.通过IP获取用户位置

很多时候需要通过IP判断用户的位置,通常的办法是通过自己的后台程序查询数据库得到。如果用户位置只是应用在前端,或者有其他的特殊原因(比如,懒:),也有一些其他办法来快速的获取用户位置。

maxmind.com提供了一个服务,通过引入一个js文件(http://j.maxmind.com/app/geoip.js),可以把他判断到的用户的国家、城市、经纬度等信息加入到页面中来。下面是从青岛访问这个js文件返回的内容:
阅读全文 »

JavaScript单元测试工具 — QUnit

QUnit是jQuery团队开发的JavaScript单元测试工具,使用方便,界面美观。近期试用了一下并进一步了解了JavaScript单元测试,记录一下所思所得。

什么是单元测试

单元测试又称为模块测试,是针对程序模块(软件设计的最小单位)来进行正确性检验的测试工作。单元测试主要是用来检验程式的内部逻辑,也称为个体测试、结构测试或逻辑驱动测试。通常由撰写程式码的程式设计师负责进行。

通常来说,程式設計師每修改一次程式就會進行最少一次單元測試,在編寫程式的過程中前後很可能要進行多次單元測試,以證實程式達到軟件規格書(en:Specification)要求的工作目標,沒有臭蟲;雖然单元测试不是什么必须的,但也不坏,這牽涉到專案管理的政策決定。

—— 维基百科 (中文英文)

为什么JavaScript需要单元测试

阅读全文 »

jQuery1.4下载、性能及新特性详解

jQuery1.4正式版发布了,官方同步推出了The 14 Days of jQuery 网站,来介绍jQuery1.4的新特性和教程,其中有一篇文章详细介绍了jQuery1.4的新增功能,现转载其中文翻译如下:

原文:jQuery 1.4 Released

翻译:coolnalu

jQuery 1.4 发布啦

为了庆祝jQuery的四周岁生日, jQuery的团队荣幸的发布了jQuery Javascript库的最新主要版本! 这个版本包含了大量的编程,测试,和记录文档的工作,我们为此感到很骄傲。

我要以个人的名义感谢 Brandon Aaron, Ben Alman, Louis-Rémi Babe, Ariel Flesler, Paul Irish, Robert Kati?, Yehuda Katz, Dave Methvin, Justin Meyer, Karl Swedberg, and Aaron Quint。谢谢他们在修复BUG和完成这次发布上所做的工作。

下载(Downloading)

按照惯例,我们提供了两份jQuery的拷贝,一份是最小化的(我们现在采用Google Closure作为默认的压缩工具了),一份是未压缩的(供纠错或阅读)。
阅读全文 »

团队内分享:总结2009,展望2010

有幸在2010年第一次团队会议上作了一次分享,总结了2009年前端界和普加前端发生的事情,对2010年的发展作了一些展望。

View more presentations from guestc94918.

slideshare处理后版面产生了些问题,不过不影响阅读,不再作调整了。

寻根究底:Ajax请求的GET与POST方式比较

YSlow里有一条规则叫Use GET for AJAX requests,即“使用GET方式请求AJAX”,YSlow中的解释如下:

When using the XMLHttpRequest object, the browser implements POST in two steps: (1) send the headers, and (2) send the data. It is better to use GET instead of POST since GET sends the headers and the data together (unless there are many cookies). IE’s maximum URL length is 2 KB, so if you are sending more than this amount of data you may not be able to use GET.

翻译:

当使用XMLHttpRequest对象时,浏览器通过两个步骤实现POST:(1)发送请求头;(2)发送数据。而GET的请求头和数据是一起发送的(除非包含很多cookie),所以使用GET方式更好些。IE支持的最大URL长度是2KB,所以你的数据很长的话就不能用GET了。

这段话蜻蜓点水,只说了GET和POST的这两个差别,而实际使用中会是这么简单吗?

寻根:GET与POST的差别

阅读全文 »

教程:编写放在收藏夹里的网页划词翻译工具

关于收藏夹工具

随着互联网技术的发展,越来越多的传统计算机应用被移植到了web上,目前流行起了一种“放在收藏夹里的工具”,点一下收藏书签,无需安装运行,便可以开始使用强大的功能。

比如搜狗云输入法(搜狗云输入法的简单分析)、人间网转帖工具等,都是应用了这种方式。

这种方式的优点是显而易见的:

· 无需安装,随点随用;

· 跨操作系统、跨平台,只要有浏览器就可以使用;

· 程序放在服务器上,可以随时更新升级;

· …

这种看似很强大的应用,其实它的原理很简单,实现也很容易,今天我们就基于这一理念,利用google翻译API,一起做一个简单的网页划词翻译工具,和大家一起学习和理解这一种创新的互联网应用模式。
阅读全文 »