再论Javascript的类继承

7年前

说到Javascript的类继承,就必然离不开原型链,但只通过原型链实现的继承有着不少缺陷。

无参数类继承的问题

先看一段示例代码,实现B继承于A:

function A() {
}
A.prototype.a1 = function() { };

function B() {
}
B.prototype = new A();
B.prototype.b1 = function() { };

var b = new B();
alert(b.constructor == A); // true
alert(b.constructor == B); // false

这段代码的主要问题是:

  • 需要实例化A作为B的原型,此时就执行了A的构造函数。但按照面向对象的规则,实例化B之前,B及其父类A的构造函数都不应该执行
  • 更改了B的prototype,导致b.constructor不是B而是A
457次阅读,2条评论

Opera下的max-width BUG

7年前

昨晚着手给个人博客增加网易微博的调用,在Opera下却出现了一个意想不到的问题。内容的展示,一开始是做成横向不间断滚动(现在已经改成纵向定时滚动了)。

不间断滚动的原理这里不详细说了,其中一个必要的条件是,进行滚动的内容容器要设置得很宽,这样才能使内容排在一行。一般情况下,几千像素也够了,但是微博的信息可能很长,况且一读就有好几十条,这宽度非得设成几万像素不可。

虽然数字比较大,但是在Firefox、IE中测试过后也是没问题的,唯独是Opera下出现了悲剧:

Dragonfly

404次阅读,2条评论

HTML在线编辑器的实现难点

7年前

HTML在线编辑器实际上是什么

其实有好几种实现方式,目前用得最多、兼容性最好的还是iframe方式。

<iframe src="" frameborder="0"></iframe>

只有这个空iframe是不行的,还要用Javascript把它设成可编辑:

iframe.contentWindow.document.designMode = "on";
iframe.contentWindow.document.contentEditable = true;

换而言之,HTML在线编辑器就是一个可编辑的iframe

1917次阅读,6条评论

输入法也做代码库

7年前

像Visual Studio、Dreamweaver、EditPlus这些IDE都是有代码库功能的,平时把一些常用的代码片段收藏到库里面,需要用的时候可以一键插入到上下文,无需重新编写。

然而,比较麻烦的是,这些IDE的代码库都是相互独立的,比如在Dreamweaver里面录入的代码片段,就无法直接插入到Visual Studio里面去。那有没有独立的代码库软件,可以跟所有IDE整合呢?很遗憾,我没有找到,如果看到此篇文章的你找到了,请顺便告诉我。

虽然没有专门的代码库软件,可我后来发现了功能类似的工具——输入法里面的自定义短语。当然,只有紫光、搜狗、QQ拼音这些现代化输入法才有这个功能,像Windows自带的那些八、九十年代的输入法是不行的。

搜狗拼音的高级设置

1440次阅读,3条评论

再论Javascript下字符串连接的性能

7年前

这是个老话题了,之所以再拿出来说,是因为浏览器一直在进步,以前最好的方法现在不一定是最好的。

1 如何进行字符串连接?

首先让我们来回顾一下字符串连接的两种常用方法:

1.1 使用字符串连接运算符

常用的语言(如Java、C#、PHP等)都有字符串连接运算符,Javascript也不例外,代码示例:

var str = "";
str = str + "a";

1.2 使用数组

在常用的语言中,字符串连接运算的性能普遍不高,为此在C#中就专门提供了StringBuilder(Java中提供了StringBuffer)用于连接字符串。而在Javascript中就出现了通过Array模拟StringBuilder的方案

var str = [];
for (var i = 0; i < 100; i++) {
  str[i] = "12345";
}
str = str.join("");
2951次阅读,6条评论

淘宝搜索框研究报告

7年前

在输入框里面预设一段提示文字,当焦点在输入框的时候清空这段文字,这在目前来说已经不是什么新鲜事了。淘宝的搜索框就用到了这样一种设计:

淘宝搜索框

这种设计一般是用javascript监控了输入框的focus和blur事件:

<input type="text" id="q" value="请输入关键字" />
<script type="text/javascript">//<![CDATA[
$("#q").onfocus = function() {
  if ("请输入关键字" == this.value) {
    this.value = "";
  }
};
$("#q").onblur = function() {
  if ("" == this.value) {
    this.value = "请输入关键字";
  }
};
//]]></script>

这段代码有两个很明显的缺点:

  1. “请输入关键字”这段提示共出现了3次,一旦要改这段文字就得改3个地方,维护显得非常不便
  2. 为了性能优化,我们会把javascript部分放到页面末尾。然而,像门户网站首页这种代码量很大的页面,末尾的javascript很可能会延时1-2秒执行。在这段时间内,即使焦点在输入框内,提示文字也不会消失,用户需要手动删除这段文字再输入内容
1127次阅读,2条评论

第四届D2报道

7年前

本届D2在阿里巴巴一个报告厅内举行,该报告厅内有3个投影屏,确保各个位置的观众都可以看到演示内容。悲剧的是,报告厅内的空调(暖气)坏了,所以室内温度也很低,一天下来膝盖以下都是冷的。

阿里巴巴正门

九点多,会议正式开始,老男致开幕词。同时,前方左侧的小屏幕上也开始直播人间网上的D2讨论。这对我来说是一种很新鲜的讨论方式,好比上面在开大会,下面在开小会,但是小会并没有影响会进行,反而使大会的气氛更加活跃。

人间网D2讨论

636次阅读,7条评论

parseInt的陷阱

7年前
var a = parseInt("09"), b = Number("09");

很多人会认为a和b的值都是数字9,但实际上不是。

parseInt的主要作用是把字符串转换为整数,或者把小数转换为整数。一般情况下,我们只用到它的第一个参数。但实际上,它有两个参数:

parseInt(string, radix)

parseInt会根据radix指定的进制进行转换,比如:

alert(parseInt("10", 2)); // outputs '2'

在没有指定radix或者radix为0的情况下,parseInt会按十进制进行转换。然而,这在某些情况下有点特殊:

  • 如果string的值以“0x”开头,parseInt会按十六进制进行转换;
  • 如果string的值以“0”开头,parseInt会按八进制进行转换。

说回开头的代码,由于"09"是以“0”开头,所以parseInt会按八进制进行转换,但是“9”不是合法的八进制值(八进制只有0-7八个数字),所以转换结果是0。

要避免这个陷进,可以强制指定radix:

alert(parseInt("09", 10)); // outputs '9'

 

453次阅读,1条评论

事件监听兼容处理

7年前

在事件监听处理方面,IE提供了attachEventdetachEvent两个接口,而Firefox提供的是addEventListenerremoveEventListener。最简单的兼容性处理就是封装这两套接口:

function addEvent(elem, eventName, handler) {
  if (elem.attachEvent) {
    elem.attachEvent("on" + eventName, handler);
  } else if (elem.addEventListener) {
    elem.addEventListener(eventName, handler, false);
  }
}

function removeEvent(elem, eventName, handler) {
  if (elem.detachEvent) {
    elem.detachEvent("on" + eventName, handler);
  } else if (elem.removeEventListener) {
    elem.removeEventListener(eventName, handler, false);
  }
}
596次阅读,0条评论

意想不到的循环调用

8年前

前几天公司有一个页面在IE下一打开就弹出这样的错误:

Stack overflow at line: 0

一般来说,这是Javascript出现循环调用时报的错。由于页面上的代码比较多,无法一下子判断出是哪里的问题,我只好一段一段地删。然而,即使我把所有的<script>标签都删了,这个错误仍然存在。我又怀疑这是嵌入的外部文件导致的问题,于是又把所有的<iframe>标签给删了,但问题依旧。

难道HTML也会导致循环调用吗?其实我算漏了一个地方,就是HTML元素的事件,可以通过标签的“onEventName”属性指定,比如“onclick”、“onmouseover”等。这下终于让我找到了线索:页面上的一张图片设置了“onerror”事件。代码大概如下:

<img src="a.jpg" onerror="this.src='b.jpg'" />

onerror事件用得比较少,但它本身并不会造成什么问题。然而,这里的“a.jpg”和“b.jpg”都是不可访问的。访问“a.jpg”的时候出错触发了onerror事件,把图片的地址设为“b.jpg”,问题就在于“b.jpg”也不可访问,又触发了onerror事件,再次设为“b.jpg”,这自然也是不可访问,继续触发onerror事件,如此往复。

613次阅读,2条评论