博客园_沙加

Google Closure 的单元测试纪要

2011-10-10T06:45:00Z

setup 和 tearDown 在每个测试方法的开始和结束都会被执行。对于有 dom 结构改变的场景有时候是不可逆的改变，目前只能按一定顺序执行测试方法，使 setup 逻辑只执行一次。
框架代码会自动检测以 "test" 开头的测试用例，执行顺序为字母顺序，如果希望按顺序执行测试则需要对命名作一些调整。
fireClickSequence 会引发完整的按钮动作过程，比如 mouseDown, click, couseUp, 而 fireClickEvent 仅引发 click 事件，引发事件是直接采用生成对象然后执行 callback 的方法，并非原生的浏览器事件。google 不推荐使用原生事件来进行测试。这些方法也不能用于生产环境。
对于依赖关系还未开发完整的可以使用 mock 对象定义覆盖掉原始对象定义。
异步请求目前使用 mock xhr 对象直接调用 callback 方法，并且提供静态方法获取刚刚发送的请求参数以验证程序工作的正确性。

双飞翼布局的选区问题

2011-09-27T08:01:00Z

http://blog.html.it/layoutgala/LayoutGala09.html

象这样的布局在用鼠标选取左边内容的时候很容易造成选取的面积太大，经仔细分析是因为选区跨越了 display:float 元素的边界，暂时也没有特别好的解决方案，不过可以稍微优化一下，只要选取的开始区距文字不是太远就可以。

将外围的定宽 div 两边多留一些白，比如 width:1000px (>a + b + c ), 然后左边的那一列给一个 margin 就行，比如总宽是 960 那么 margin = (1000 - 960) / 2 ，如果还觉得效果不够好，外面的还可以设宽些，现在最低的屏宽也应该在 1280 了吧。

本文链接

一个 JS 面试题目

2011-09-26T01:28:00Z

看到一个 JS 题：

只允许使用 +-*/ 和 Math.* ，求一个函数 y = f(x, a, b);

当 x > 100 时返回 a 的值，否则返回 b 的值，不能使用 if else 等条件语句，也不能使用 |, ?, 数组

试解如下:

function transition(x, a, b){

x = Math.max(x, 0); // 先处理负数。

if(x == 100){

return b;

}

var tmp = Math.ceil(Math.min(Math.max(x - 100, 0), 1));

return a*tmp + b*Math.abs(tmp-1);

}

console.log(transition(101, 1, 0));// 1

console.log(transition(100.5, 1, 0));// 1

console.log(transition(100, 1, 0)); //0

console.log(transition(99.5, 1, 0));// 0

console.log(transition(99, 1, 0));// 0

console.log(transition(-23, 1, 0));// 0

</script>

一般思路是转换为 0, 1 的特殊值问题进行处理。

本文链接

HTML 5 之旅 part 1 - 无头苍蝇

2011-08-27T03:16:00Z

一个相当无聊的东西，只是告诉你 html5 canvas 如何进行基本的使用：

<!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><title>沙加 - HTML5 - Lesson 1</title><meta name="author" content="" /></head><body><div id="content"><br /></div><script type="mce-text/javascript"> var MM = {}; MM.bind = function(fn, selfObj, var_args) { if (arguments.length > 2) { var boundArgs = Array.prototype.slice.call(arguments, 2); return function() { var newArgs = Array.prototype.slice.call(arguments); Array.prototype.unshift.apply(newArgs, boundArgs); return fn.apply(selfObj, newArgs); }; } else { return function() { return fn.apply(selfObj, arguments); }; } }; function $(id){ return document.getElementById(id); }; MM.main = function(){ var m = $("content"); //m.innerHTML = "Hello world!"; var canvas = document.createElement("CANVAS"); if(!canvas){ m.innerHTML = "Your browswer doesn't support Canvas element, please update."; return; } canvas.height = 200; canvas.width = 200; m.appendChild(canvas); //var game = new MM.PingBallGame(new MM.AbstractBrush(canvas)); var game = new MM.PingBallGame(new MM.CanvasBrush(canvas)); game.init(); //MM.setUpDebugger(); }; MM.CanvasBrush = function(canvas){ this.ctx = canvas.getContext("2d"); }; MM.CanvasBrush.prototype.drawBall = function(xx, yy , opt_radius){ var x = parseInt(xx); var y = parseInt(yy); var r = opt_radius || 5; this.ctx.beginPath(); this.ctx.moveTo(x, y); this.ctx.arc(x, y, r, 0, Math.PI*2); this.ctx.closePath(); this.ctx.fillStyle = "red"; this.ctx.fill(); }; MM.CanvasBrush.prototype.drawBackground = function(){ this.ctx.fillStyle = '#ddd'; this.ctx.fillRect(0, 0, 200, 200); }; MM.CanvasBrush.prototype.clearAll = function(){ this.ctx.clearRect(0, 0, 200, 200); }; MM.PingBallGame = function(brush){ this.brush = brush; this.ballX = 20; this.ballY = 20; this.direction = 0; this.speed = 30; //pixils per second. this.refreshRate = 10; //15 picture per second. }; MM.PingBallGame.prototype.init = function(){ //start roll the ball. this.keepRoll(); }; MM.PingBallGame.prototype.keepRoll = function(){ this.direction += Math.PI*0.20*Math.random()*((+new Date())%2 == 0?1:-1); var dx = this.speed/this.refreshRate*Math.cos(this.direction); var dy = this.speed/this.refreshRate*Math.sin(this.direction); this.speed += 10; this.ballX += dx; this.ballY += dy; if(this.ballY <= 5 || this.ballY >= 195 || this.ballX <= 5 || this.ballX >= 195){ this.direction += Math.PI; this.speed = 30; } if(this.ballX <=5){ this.ballX = 5; } if(this.ballY <=5){ this.ballY = 5; } if(this.ballX >=195){ this.ballX = 195; } if(this.ballY >=195){ this.ballY = 195; } this.brush.clearAll(); this.brush.drawBackground(); this.brush.drawBall(this.ballX, this.ballY); setTimeout(MM.bind(this.keepRoll, this), Math.floor(1000/this.refreshRate)); }; MM.main(); </script></body></html>

本文链接

bind, delegate, live 三者的区别

2011-08-22T03:05:00Z

简单总结如下：

bind 直接绑定 handler 于元素上
delegate 绑定事件在父级元素上
live 绑定于 document 之上

为啥有了 bind 还需要 delegate ?

使用 deletegate 不需要为每一个元素都绑定事件处理器，并能处理动态创建的元素的 dom 事件。

为啥 delegate 优于 live?

它只作用于靠近目标目标元素的父级元素上，不需要冒泡到 document，在需要的时候可以停止冒泡事件；live 需要绑定于特定的 css 选择器，而 delegate 不需要，灵活性更高。

为啥还要用 live?

一般用于作用广泛的全站事件，比如 hovercard。

本文链接

Objective-C 学习笔记 - part 12 - 多线程

2011-08-19T01:32:00Z

使用 @synchronized() 来标明一个同步的方法。

实现同步的方式与其它语言类型，使用一个互斥锁，锁定对象决定了锁定范围的大小，比如锁定实例对象只对当前实例生效，锁定类对象对所有实例生效。

当同步方法中的代码抛出异常时，运行时会解锁，让下面等待代码执行此同步方法...

本文链接

Objective-C 学习笔记 - part 11 - 错误处理

2011-08-19T01:26:00Z

Object-C 提供类似 Java / C＋＋风格的错误处理模型，当使用 -fobjc-exceptions 开关（gcc > 3.3）时，它可以工作，但是只限于 OS X v10.3 以后的版本，之前的版本并不提供这一支持。

使用错误捕获的原则与其它语言类似：你不能用它来当作正常的处理流的判断条件，而把它仅仅当作“意外”

可以使用多个 @catch 块来捕获不同的错误类型。

Cup *cup = [[Cup alloc] init];

@try {
    [cup fill];
}
@catch (NSException *exception) {
    NSLog(@"main: Caught %@: %@", [exception name], [exception reason]);
}
@finally {
    [cup release];
}

异常类可以是你自己实现的类，不过一般是 NSException 或者它的子类。

更多关于错误处理的讨论见：
http://developer.apple.com/library/ios/documentation/Cocoa/Conceptual/ErrorHandlingCocoa/ErrorHandling/ErrorHandling.html#//apple_ref/doc/uid/TP40001806

本文链接

Objective-C 学习笔记 - part 10 - 选择器

2011-08-19T01:00:00Z

在 object-c 中，selector 包含两种意义：在源文件中，它指向一个方法调用，在编译后它指向一个 unque indentifier。

编译后的 selector 的类型为 SEL，同名的方法的选择器也相同。

使用 selector 来调用object 方法是 Cocoa 框架 "目标－动作" 编程模型的基础。

可以使用 @selector 来为 selector 创建一个别名：

SEL setWidthHeight;
setWidthHeight = @selector(setWidth:height:);

在编译时用别名方法引用 seletor 不会对性能造成大的影响。如果是运行时需要根据一个字会串动态决态调用哪个方法可以下面的形式，有点类似于反射：
NSString *method;
method = NSStringFromSelector(setWidthHeight);

关于方法和选择器

框架只为 selector 分配 identifier 鸸不是方法的实现，因此不同 class 的同名方法虽然 selector 的 identifier 一样，但是在执行是与方法调用无异。同时静态方法也可以与动态方法重名，因为他们有不同的归属对象。

动态类型标注时，同名方法必须是相同的参数类型与返回值，而静态类型标注时不需要。这是因为静态类型标注时可以通过类的元数据得知方法的实现。

除此之外，静态方法和实例方法也不受此限制，他们存在于不同的空间。

id   helper = getTheReceiver();
SEL request = getTheSelector();
[helper performSelector:request];

如些的动态调用显得很强大。

[myButtonCell setAction:@selector(reapTheWind:)];
[myButtonCell setTarget:anObject];

上面的代码演示了如何将按钮和事件处理对象进行关联

虽然有一些手段使用动态 message 来维护按钮与事件处理对象的关系，但是苹果认为那会带来不必要的复杂性，因此使用了目前这种方式。

为了避免对象接受到它不能处理的消息，多用静态标注类型总是好的，因为它可以在编译时被检查。

如果一定要在运行时调用一个不能确定的方法，那么可以用这样的方式进行测试，以进行安全调用而不是报错：

if ( [anObject respondsToSelector:@selector(setOrigin::)] )
    [anObject setOrigin:0.0 :0.0];
else
    fprintf(stderr, "%s can’t be placed\n",
        [NSStringFromClass([anObject class]) UTF8String]);

另外，当对象不能处理一个消息时，它可以对它进行转发。详见消息转发： http://developer.apple.com/library/ios/documentation/Cocoa/Conceptual/ObjCRuntimeGuide/Articles/ocrtForwarding.html#//apple_ref/doc/uid/TP40008048-CH105

本文链接

Objective-C 学习笔记 - part 9 - 静态标记的类型

2011-08-17T07:49:00Z

默认的动态行为：
对象是动态类型推断的
只有在运行时才分配内存
消息是动态绑定的，对象只能执行它所理解的消息”方法调用“

虽然动态执行让程序变得灵活，但是也少了编译时的类型检查，你可以使用静态类型来进行编译时检查。

Rectangle *thisObject = [[Square alloc] init];

象这样指定类型，基本上只影响到编译时的检查，其它的行为跟 typed as id 是一样的。

好处；
1。静态类型检查
2。显式的方法参数类型与返回值。
3。允许你使用 structure pointer 直接访问对象的实例变量。

使用静态类型后，如果一个对象没有响应一个它应该响应的消息，那么会报错

把一个静态类型的变量赋值给另一个静态类型变量时，编译器保证它他们是相容的。

重要：一般来说不同类的同名方法（selector ）需要使用同类型参数和返回值。这是因为运行值只为同名方法创建一份元数据。

但是对于静态类型没有此限制。

子类的实例可以标记为父类类型，以实现多态。

本文链接

Objective-C 学习笔记 - part 8 - 快速枚举

2011-08-17T07:27:00Z

快速枚举使用的语法：
for ( Type newVariable in expression ) { statements }
or
Type existingItem;
for ( existingItem in expression ) { statements }

枚举期间对象不能被改变。

使用快速枚举的三个类：
NSArray, NSDictionary, NSSet

如何使用：

NSArray *array = [NSArray arrayWithObjects:
        @"One", @"Two", @"Three", @"Four", nil];

for (NSString *element in array) {
    NSLog(@"element: %@", element);
}

NSDictionary *dictionary = [NSDictionary dictionaryWithObjectsAndKeys:
    @"quattuor", @"four", @"quinque", @"five", @"sex", @"six", nil];

NSString *key;
for (key in dictionary) {
    NSLog(@"English: %@, Latin: %@", key, [dictionary objectForKey:key]);
}

也可以使用 enumeration :
NSArray *array = [NSArray arrayWithObjects:
        @"One", @"Two", @"Three", @"Four", nil];

NSEnumerator *enumerator = [array reverseObjectEnumerator];
for (NSString *element in enumerator) {
    if ([element isEqualToString:@"Three"]) {
        break;
    }
}

NSString *next = [enumerator nextObject];
// next = "Two"

本文链接