Archives
-
I have nothing to say with IE6
I just release Easy Counter, and some friends said that it cannot work with IE6. Oh, what’s up? I checked the code and find out a big mess, window.location cannot work with IE6. Cause it’s a microsoft security issue. That is `MS06-042: Cumulative security update for Internet Explorer`. Why MS made it? Firefox, Opera, Safari [...]
-
判断js里面function的使用情况
今天，我开出了一个新的分类——“技术快餐” 。它的目的，就是在短时间内，使用一些技巧或者什么手法，来解决身边的一些“小”问题。既然是快餐，那么他就可能投机取巧，并且很有可能他就不是一个非常 完美的解决方案。但是毕竟快嘛，用起来简单，方便，能够大体上得到一个（大致）精确的结果，我就满意了。 今天说一下如何判断js里面function的使用情况。 问题描述：我现在要调查一下线上服务的loadtime情况，其中能够奏效的很明显的一点就是较少js的体积。这里并不是讲究如何去压缩等等。而是一个简单的调查。 现在已经存在了大量的js lib，相信一些web的developer手上也有一些自己封装好的lib。用的时候，一个include，很是方便。但是当你在两大的lib里面，东 拼西凑的完成你的功能的时候，其实也有一部分存在的代码，从来也没有执行过一次。这个时候，找到并处理他们是一个很有意义的事情。 思路：在每一个function里面，加入一个log，这样，当这个function被调用的时候，我就知道了，当覆盖了全部（或者大部分）的feature以后，js function的使用率自然一目了然。 log，不用什么高深的log4js等等，就是简单的apache access log就可以了。 在页面中动态的生成一个image对象，然后当需要记录log的时候，只要把image对象的src设置成为一个标记就可以。这样在apache的access_log当中就会有记录了。 实施：使用sed命令来给每一个需要统计的js做一下处理。 比如，你有一个方法叫做 function a () { … } 处理以后，变成 function a() { ltimg.src=”xxx” mce_src=”xxx”; … } 这样就达到了记录的目的了。 下面附上代码： jsfuncname.sh sed -e ’s/function \(.*\)\(.*\){/function \1 \2 { ltimg.src=”\/images\/ltimg.jpg?n=\1″ mce_src=”\/images\/ltimg.jpg?n=\1″;/g’ $1 | sed -e ’s/\(.*\)=\(.*\)function\(.*\){/\1=\2function\3{ ltimg.src=”\/images\/ltimg.jpg?n=\1″ mce_src=”\/images\/ltimg.jpg?n=\1″;/g’ | sed -e ‘1i\ if (typeof(ltimg) [...]
Jan 15th, 2007 | Filed under javascript, 技术快餐 -
我的讨论，转贴，不说话
tangrui.cn: ok 我已经把名字改成 lcore Le 不过还没 commit Weiming: 我说，怎么没有up到 tangrui.cn: en lazy load 的暂且先放一放 说那个资源和代码先后的问题 Weiming: 好，这个我觉得需要去调查以下 好 Sent at 10:30 PM on Monday Weiming: ？ tangrui.cn: 啊，我在等你说呀 Weiming: 你不是说了，lazyload的，放一下，我说好，先去调查 tangrui.cn: 就是我上午说，代码文件要是访问资源文件的话，那么资源文件必须在代码文件之前引用 这就要求，比如 longjs.lang.lstring 必须先定义这个类型 Weiming: 上午说的，你说要把定义，单独放在__package__虾米，这个我不同意 如果 longjs.res = {}; 然后所有的res，都挂在这个虾米呢？ 下面 longjs.res.lstring = {}; long.res.lstring['en']; 这样就有了 tangrui.cn: 什么意思 Weiming: 就是，现在的res都是单独的 比如lstring的， 那么就是 longjs.lstring['en']这样的 [...]
Sep 5th, 2006 | Filed under javascript -
一个JavaScript 1.7的简单实验
刚刚忍不住手痒，下载了一个Firefox 2.0 Beta 1（可能过几天这个链接就换了）。写了一段JS，看来果然在JS1.7当中，Iterator是非常好用的。 代码如下 ================================ <html> <head> <script language=javascript> // add function for JavaScript Object Object.prototype.newfunc = function(){}; function init() { var a = [1,2,3,4]; var it; var s; // old method in JavaScript 1.5 s = “”; for (it in a) { s += it + [...]
Jul 14th, 2006 | Filed under javascript -
JavaScript 1.7
Firefox 2.0 beta 1推出了，肯定很多人已经关注这个事情了，我则比较（更加）关心的是JavaScript的增强。JavaScript升级到1.7了（FF1.5支持JavaScript1.5，IE6sp1支持不完全的JavaScript1.5） 在JavaScript 1.7里面有了一些新功能的支持，比如Generator和Iterator，let语法的支持，非结构化赋值（destructuring assignment）。 令我最关心和期待的就是Iterator的支持，据说只要自定义next方法和__iterator__属性就可以根据自己的需要定义返回的值了。Iterator的出现最大的好处就是可以放心的在一些内嵌的对象当中添加方法了。 以前这样的代码是很危险的： var o = new Object(); for (var i in o){} 因为很可能某个第三方的库文件在Object当中添加了一些方法，（比如著名的prototype），这样，在不同的第三方库混用的时候，就很可能出现问题。 现在有了自定义的Iterator，那么我觉得是完全可以避免的，只要为Object写好合适的iterator就可以了。具体的代码我还没有尝试。 还有一个问题，就是不知道IE7支持JavaScript到什么版本，而且，IE6和Firefox1.5.*都还是JavaScript 1.5 并且很多人是不会升级的。 所以，JavaScript1.7也许在未来的一段时间内，还是一个美好的（但是不能实现的）愿景吧。
Jul 14th, 2006 | Filed under javascript -
一个JavaScript继承的实现
如我前面的文章说的，对于JavaScript，一个类，就是一个function，他的类方法（也就是static的）都是作为这个function的一部分，而实例方法，都是在prototype上面的。 function ClassA() { } ClassA.staticMethod = function () { } ClassA.prototype.instanceMethod = function () { } 在我这个实现当中，一个类的继承是拷贝父类的所有类方法，这样子类就有了父类的静态方法。 然后让子类的prototype.prototype指向父类的prototype. 然后可以根据自己的需要，重写一些方法。 function ClassB() { } ClassB.staticMethod = ClassA.staticMethod; ClassB.prototype.prototype = ClassA.prototype; ClassB.prototype.instanceMethod = function () { // method 2 } 对于子类，使用一个prototype的链，来实现方法的实例方法的继承。之所以选择这种实现方法，是因为子类是要重写其中的某些方法的。而 prototype又是一个reference，所以直接的写作ClassB.prototype = ClassA.prototype，会在重写ClassB的实例方法的同时，破坏ClassA的实例方法。而修改后的方法则会屏蔽父类的。 寻找方法的顺序是，instanceA.prototype.method -> ClassA.prototype. 此时对于类方法的继承，已经实现，现在需要实现在子类中，调用父类的方法。 对于Java，这样的使用是很平常的 public void method() { super.method(); } 在JavsScript中，为了实现此类功能，所以必须保留一个parent的reference，指向ParentClass.prototype. [...]
Jun 20th, 2006 | Filed under javascript, oop -
JavaScript系列－－面向对象
停了一段时间，今天说说JavaScript的面向对象 js不是一个天生的oo的语言。但是他的函数是可以担负面向对象的概念的。并且js也内置了很多的对象，比如String，Date等等。 js有一个关键字new，可以认为是实例化一个function的对象，把function作为一个class。 比如 function MyObj () { } var myObj = new MyObj(); 这个时候，myObj就是MyObj的一个实例。 有两点应该具体的说一下 1，JavaScript是一个prototype的语言 2，this在JavaScript里面的应用 首先我们说一下prototype，prototype是一个function的属性，也可以认为是一个类的属性。他用来记录这个类有那些方法。 比如我们要给MyObj定义一个sayHello的方法，我们可以这样写 MyObj.prototype.sayHello = function () { alert(”Hello”); } 这个时候，我们就可以调用myObj.sayHello()执行这个方法。 而this则表示这个类本身（严格意义上说，应该是这个函数本身），比如 MyObj.prototype.sayBye = function () { alert(”bye” + this.name); } 那么这里的this，就是实例变量本身。myObj.sayBye()。函数里面的this就是表示myObj。那么我们就可以实现带参数的构造函数。 function MyObj2(name) { this.name = name; } var myO2 = new MyObj2(”tom”); 这样，我们就可以实现一般情况下使用的面向对象了。 需 要主意的是，JavaScript没有属性的共有私有机制，我们可以通过myO2.name访问他的name属性。而且js也不是强行规定的，我们要访问 myO2.age也是可以的，但是myO2并没有age的属性（或者说重来没有给age赋值）那么得到的就是undefined。 [...]
May 13th, 2006 | Filed under javascript -
JavsScript系列──函数参数
今天说一下函数参数。 函数参数，可以理解为函数的参数，还有就是函数作为参数（还是挺诡意）。 首先说一下函数的参数。 这个问题看上去没有什么可说的。因为作为拍代码的，都肯定知道这个东西。 function method1(a, b) { return a + b; } 很简单，a，b就是函数method1的参数。一般情况下，这样足够了。 但是在JavaScript当中，函数的调用，其中的参数个数是不强制的。（作为脚本语言，当然类型也没有强制）。 这里很象某些语言的不定参数列表（由于我没有过多的研究，所以不便多说）。 比如上面的方法 var c = method1(1,2); //正确 var d = method(1); //也正确 此时c的值是3，d的值是NaN。 那么我们如何来保证参数的个数呢？ JavaScript当中，每一个方法里面，有一个内欠的变量，arguments。这是一个数组变量，记录着传入这个方法一共有几个参数。 很象java里面main函数的 args数组 static public void main(String args[]) {…} 我们可以使用arguments.length来判断一共有几个参数 function method2() { if (arguments.length == 2) { return arguments[0] + arguments[1]; } else { return [...]
May 13th, 2006 | Filed under javascript -
JavaScript系列――同步还是异步？
从今天开始，我会不定期的写一些关于JavaScript的东西，包括语言，应用等方面。组成JavaScript系列。 如果没有特殊的说明，这里假定JavaScript的执行环境是在浏览器（browser）当中的。 今天开始第一次，讨论一下同步和异步。 曾经查询过一些JavaScript的信息，发现google出来的结果都是询问JavaScript如何能够实现异步的代码。 而我，很不幸，查询的却是如何让JavaScript实现异步调用的同步（是不是挺起来很诡异）。 首先说一下JavaScript当中的异步方法。 其实这个问题是大家经常要碰到的。而且这个实现也很简单。我就不多说了。 给两段代码 setTimeout方法，他让你的代码在指定的时间（毫秒）之后执行指定的方法。只执行一次。 比如： alert(1); setTimeout(”alert(2)”, 1000); alert(3); 代码在执行到setTimeout的时候，会继续执行下面的代码（alert(3)）而不会被阻塞。等待1000ms之后执行alert(2) setInterval方法，他让你的代码每隔指定的时间，执行指定的方法，直到调用clearInterval 比如： alert(1); timer = setInterval(”alert(2)”, 1000); alert(3); 代码基本上和上面的相同，不同的是，每隔1000ms就会执行一次alert(2)，直到调用 clearInterval(timer); 我们应该注意到setTimeout和setInterval都是window的方法。 我们可以直接使用，但是规范的还是调用window.setTimeout window.setInterval，之所以提及这个，我会在以后的JavaScript系列中继续讲解。 现在该说一下我遇到的问题了。 我现在使用dwr作为AJAX的server端引擎，在调用dwr方法的时候，需要提供一个回调方法（callback function）来接受server的返回结果。 而这个回调方法是不会被阻塞的。此时browser回启动另外的现成处理。 这个很好理解，因为dwr的这个方法执行的时间是无法预料的，如果此时调用被阻塞，而server又花相当长的时间进行处理。那么浏览器就会死在这里。从用户体验的角度是根本无法接受的。 这里的例子代码是 … ServerHandler.getString(”Weiming”, function (str) { //”Weiming”是传回server的参数 alert(str); }); // ServerHandler是dwr提供的server方法的interface，具体使用请参见dwr网站。 alert(1); 在执行的过程中，会先执行alert(1)，然后在一个无法预料的时间后执行alert(str)。 如果一次简单的比如hello world的调用是不会出问题的。 但是如果我要执行的一系列的dwr function是有前后顺序的，比如后面执行的需要前面的返回结果，简单的代码书写顺序是无法保证执行顺序的。 var myID = null; ServerHandler.getID(function [...]
May 13th, 2006 | Filed under javascript