Ticore Blog

Dart 常數 Immutable 物件上附加 Mutable 成員

2015-05-11T18:23:00.002+08:00

承前一篇 Dart 類別只要一用到常數建構子，所有的成員欄位都必須要 const
就算成員是 Map or List 內部資料也全部都要 const (transitively immutable)
萬一之後突然需要 mutable member 會變得很麻煩

我測試了許多寫法都很難跳脫 const
後來想到一種方式將常數物件自身當作 key，配合利用另一個 model 容器存取資料

/*
 * 在常數 Immutable 物件上附加 Mutable 成員
 */

class Model {
  static final map = new Map();
  static get(obj) => map.putIfAbsent(obj, () => {});
}


class ImmutableObj {
  final int i;
  const ImmutableObj(this.i);
  
  String get name => Model.get(this)['name'];
  set name(value) => Model.get(this)['name'] = value;
}


void main() {
  var c1 = const ImmutableObj(1);
  c1.name = "Const Obj 1";
  print(c1.name); // Const Obj 1
  
  var c2 = const ImmutableObj(2);
  func(); // null
  c2.name = "Const Obj 2";
  func(); // Const Obj 2
}

void func() {
  print(const ImmutableObj(2).name);
}

本來想再進一步將 Mutable Part 寫成 Mixin
結果執行過不了~~ 只能等看看之後會不會修改
Issue 9745: Make mixins forward const constructors.

Simon 介紹也可以用 Expando 來做

class ImmutableObj {
  final int i;
  const ImmutableObj(this.i);
}


class ExpObj {
  static Expando exp = new Expando("ExpObj");
  
  factory ExpObj(obj) {
    if (exp[obj] == null) {
      exp[obj] = new ExpObj._();
    }
    return exp[obj];
  }
  
  ExpObj._();
  String name;
}



void main() {
  var c1 = const ImmutableObj(1);
  new ExpObj(c1).name = "Const Obj 1";
  print(new ExpObj(c1).name); // Const Obj 1
  
  var c2 = const ImmutableObj(2);
  func(); // null
  new ExpObj(c2).name = "Const Obj 2";
  func(); // Const Obj 2
}

void func() {
  print(new ExpObj(const ImmutableObj(2)).name);
}

2013/12/26
又想到可以將外部 Mutable Model 合併為單一 Class 的寫法

/*
 * 在常數 Immutable 物件上附加 Mutable 成員
 */

class ImmutableCls {
  
  // immutable part
  final i;
  const ImmutableCls(this.i);
  
  // mutable part
  static final _map_ = {};
  get mutable => _map_.putIfAbsent(this, () => {});
  get name => mutable["name"];
  set name (value) => mutable["name"] = value;
  
}



void main () {
  
  print(const ImmutableCls(1) == const ImmutableCls(1));
  print(const ImmutableCls(1).name); // null
  const ImmutableCls(1).name = "Const Obj 1";
  print(const ImmutableCls(1).name); // Const Obj 1
  
}

Dart 數種語法特色組成完美 Proxy

2014-02-07T00:00:00.000+08:00

在 Civilizing Web Programming with Dart
看到 Dart 實作的代理物件 Proxy 方式
僅僅只需要少量的程式碼
就能夠很容易地做出自己的 Proxy
完全不需要繼承任何特殊的類別
這真的非常神奇~!

甚至能夠 Mimic 對象物件介面通過型別檢查
代理對象程式碼提示
與其它原始物件做二元運算子混和操作
仔細研究之後，發現它包含了許多原本已知 Dart 語法特色

mirror
即是反射 reflection 功能，Dart 提供了多種反射方式
InstanceMirror, TypeMirror, MethodMirror... 等
在這裡用到 InstanceMirror 配合 noSuchMethod Invocation
委任呼叫到反射對象上

noSuchMethod
只要物件宣告 noSuchMethod，任何對物件存取呼叫未宣告的動作
都會被轉向到此方法，得到一個 Invocation 物件
能知道呼叫對象名稱、參數等各種資訊

class as interface
類別即是介面，這乍看之下有點雞肋的特色
其實非常有用，除了 Mock Class 之外
在 Proxy 功能上也提供了很大幫助
因為通常要代理的對象物件不見得會有抽離介面
但是在 Dart 類別即是介面
Proxy 類別可以很容易實作代理對象介面
通過需要型別檢查的地方

overloading operator
Dart 是少數提供過載運算子的動態語言
在這個強大語法特色加持下
許多運算子呼叫都能被當作函式一樣被委任
Proxy 也能代理運算子動作

annotation
類似 Metadata
Dart 額外提供了一個 proxy object
只要類別標註 @proxy annotation
語法分析器就會知道該類別是一個 Proxy
進而忽略相關未宣告方法的錯誤

以下是 Dart Proxy 例子：

import "dart:mirrors";

// 作為被代理的對象類別
class Point {
  int x, y;
  Point(this.x, this.y);
  Point operator +(a) => new Point(x + a.x, y + a.y);
  Point operator -(a) => new Point(x - a.x, y - a.y);
  toString() => "Point($x , $y)";
}


// 尚未實作代理對象介面的 Proxy
// @proxy 表示是 Proxy 物件，進行介面沒有的操作不會產生警告
@proxy
class Proxy {
  InstanceMirror targetMirror;
  Proxy(target) : targetMirror = reflect(target);
  noSuchMethod(Invocation inv) => targetMirror.delegate(inv);
  toString() => targetMirror.reflectee.toString();
}


// 已經實作代理對象介面的 Proxy，能通過型別檢查
class PointProxy extends Proxy implements Point {
  PointProxy(target) : super(target);
  
  // noSuchMethod 表示已經隱含實作一切介面所需東西，不會產生未實作警告
  noSuchMethod(Invocation inv) => super.noSuchMethod(inv);
}


void main() {

  print(new Proxy(new Point(0, 0))); // Point(0 , 0)
  print(new Proxy(new Point(2, 0)) + new Point(0, 1)); // Point(2 , 1)
  Point p1 = new PointProxy(new Point(2, 0));
  print(p1 + new Point(0, 1));  // Point(2 , 1)
  
}

神奇的一行 Dart 程式

2013-02-05T00:00:00.000+08:00

在看 Google Dart 語言時候
把兩個很有特色的功能接合起來
結果得到以下神奇的一行程式碼

class FunCls {
  num i , j , k;
  num call () => i + j + k;
}

void main() {
  // 神奇的一行
  print((new FunCls() ..i = 1 ..j = 2 ..k = 3)()); // 6
}

僅僅只用了一行，就完成物件初始化，連續指定三個屬性，最後再 call function 加總
以上主要是來自 Dart 兩個 Feature

Emulating Functions 與 Cascade Operator

Cascade Operator 很像是 jQuery API 與 Curry Function
但是 Dart Cascade 對象是物件實體，配合模擬 Function 功能達到類似的效果
而且 Dart 是從語法上支援這項功能，不需要特別實作
就能夠動態決定是要返回物件 (兩個點) 還是要返回回傳值 (一個點)

WebKit, Prestro CSS3 Transform & ScrollBar Rendering Bug

2010-04-05T20:44:00.000+08:00

又發現一個 CSS3 渲染的 Bug
主要發生在所有 WebKit, Prestro 為基礎的瀏覽器上 Chrome、Safari、Opera 而 Gecko - Firefox 則是正常的
對含有捲軸的元素設定 CSS3 transform rotate 時
將會造成捲軸消失不見

WebKit, Prestro CSS3 Transform & ScrollBar Rendering Bug Demo Code：

<style type="text/css">

.transformBug {
  border: 1px solid;
  background-color: #DDF;
  overflow: scroll;
  -webkit-transform: rotate(2deg);
  -moz-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  width: 100px;
  height: 100px;
  margin: 10px;
}

</style>

<div class="transformBug">
WebKit CSS3 Transform & ScrollBar Rendering Bug
</div>

WebKit, Prestro CSS3 Transform & ScrollBar Rendering Bug Demo

WebKit, Prestro CSS3 Transform & ScrollBar Rendering Bug

以上的 Bug 至少會發生在以下的瀏覽器上
Google Chrome 4.1.249.1045 win
Opeara 10.51 win
Safari 4.0.4 win