Fold All / Expand All

2011年11月23日 星期三

JavaScript Patterns - Chapter 8. DOM Acess

JavaScript Patterns

DOM access is expensive; it's the most common bottleneck when it comes to JavaScript performance.

DOM access should be reduced to minimum. This means:
o Avoiding DOM access in loops
o Assigning DOM references to local variables and working with the locals
o Using selectors API where available
o Caching the length when iterating over HTML collections

JavaScript Patterns - Chapter 7. Design Patterns, Decorator

JavaScript Patterns

Add additional functionality to an object dynamically, at runtime. In JavaScript, objects are mutable, so adding functionality to an object is not a problem.

var sale = new Sale(100); // the price is 100 dollars
sale = sale.decorate('fedtax'); // add federal tax
sale = sale.decorate('quebec'); // add provincial tax
sale = sale.decorate('money'); // format like money
sale.getPrice(); // "$112.88"

var sale = new Sale(100); // the price is 100 dollars
sale = sale.decorate('fedtax'); // add federal tax
sale = sale.decorate('cdn'); // format using CDN
sale.getPrice(); // "CDN$ 105.00"

Implementation using a List
function Sale(price) {
this.price = (price > 0) || 100;
this.decorators_list = [];

Sale.decorators = {};

Sale.decorators.fedtax = {
getPrice: function (price) {
return price + price * 5 / 100;
}; = {
getPrice: function (price) {
return price + price * 7.5 / 100;
}; = {
getPrice: function (price) {
return "$" + price.toFixed(2);

Sale.prototype.decorate = function (decorator) {

Sale.prototype.getPrice = function () {
var price = this.price,
max = this.decorators_list.length,
for (i = 0; i < max; i += 1) { name = this.decorators_list[i]; price = Sale.decorators[name].getPrice(price); } return price; };

JavaScript Patterns - Chapter 7. Design Patterns, Iterator

JavaScript Patterns

object provides
o next()
o hasNext()
o rewind()
o current()

Simple implementaton using array

var agg = (function () {
var index = 0,
data = [1, 2, 3, 4, 5],
length = data.length;

return {
next: function () {
var element;
if (!this.hasNext()) {
return null;
element = data[index];
index = index + 2;
return element;
hasNext: function () {
return index < length; }, rewind: function () { index = 0; }, current: function () { return data[index]; } } }); while (agg.hasNext()) { console.log(; }

JavaScript Patterns - Chapter 7. Design Patterns, Factory

JavaScript Patterns

o Performs repeating operations when setting up similar objects.
o Offers a way for the customers of the factory to create objects without knowing the specific type (class) at compile time.
var corolla = CarMaker.factory('Compact');
var solstice = CarMaker.factory('Convertible');
var cherokee = CarMaker.factory('SUV');; // "Vroom, I have 4 doors"; // "Vroom, I have 2 doors"; // "Vroom, I have 17 doors"

沒有用到new或者是object literals,只有function接受string參數。

// parent constructor
function CarMaker() {}

// a method of the parent = function () {
return "Vroom, I have " + this.doors + " doors";

// the static factory method
CarMaker.factory = function (type) {
var constr = type,

// error if the constructor doesn't exist
if (typeof CarMaker[constr] !== "function") {
throw {
name: "Error",
message: constr + " doesn't exist"

// at thie point the constructor is known to exist
// let's have it inherit the parent but only once
if (typeof CarMaker[constr] !== "function") {
CarMaker[constr].prototype = new CarMaker();
// create a new instance
newcar = new CarMaker[constr]();
// optionally call some methods and then return...
return newcar;

// define specific car makers
CarMaker.Compact = function () {
this.doors = 4;
CarMaker.Convertible = function () {
this.doors = 2;
CarMaker.SUV = function () {
this.doors = 24;

JavaScript Patterns - Chapter 7. Design Patterns, Singleton

JavaScript Patterns

JavaScript doesn't have classes, so the verbatim definition for singleton doesn't technically make sense.
// what we want is
var uni = new Universe();
var uni2 = new Universe();
uni === uni2; // true

Instance in a Static Property
function Universe() {
// do we have an existing instance?
if (typeof Universe.instance === "object") {
return Universe.instance;

// proceed as normal
this.start_time = 0;
this.bang = "Big";

// cache
Universe.instance = this;

// implicit return:
// return this;

The drawback of above code is that instance is public. Other code may change it by mistake.

Instance in a Closure
function Unvierse() {
// the cached instance
var instance = this;

// proceed as normal
this.start_time = 0;
this.bang = "Big";

// rewrite the constructor
Universe = function () {
return instance;

The drawback is property added to Universe between initial definition and redefinition will lose. Also the constructor of created instance is not the same as Universe.

Alternative implementation
function Universe() {
// the cached instance
var instance;

// rewrite the constructor
Universe = function Universe() {
return instance;

// carry over the prototype properties
Universe.prototype = this;

// the instance
instance = new Universe();

// reset the constructor pointer
instance.constructor = Universe;

// all the functionality
instance.start_time = 0;
instance.bang = "Big";

return instance;

2011年11月10日 星期四

[歌詞] Perfume - スパイス




知らないほうが いいのかもね
でも思いがけない ワクワクが欲しい
好奇心の スパイスはね



知らないほうが いいのかもね
恋するほど ハラハラするわ
同じ部屋で 触れていても
距離は遠くに 感じてるの
知らないほうが いいのかもね
でも思いがけない ワクワクが欲しい
好奇心の スパイスはね



知らないほうが いいのかもね
恋するほど ハラハラするわ
同じ部屋で 触れていても
距離は遠くに 感じてるの
知らないほうが いいのかもね
でも思いがけない ワクワクが欲しい
好奇心の スパイスはね

Maybe あぁ 巡り巡り何か起こすの

2011年11月5日 星期六

Android App

bbs reader



2011年11月3日 星期四

下川美娜_Ceui台北演唱會2011 & JAM_Project_2011年巡迴演唱會



地點:studio 18

時間:19:00 開演

時間:18:00 開演

Mikuni Shimokawa ASIAN LOVERS LIVE 2011 in Taipei feat.Ceui



話說AniSong in Asia官網沒有消息,優先購票密碼也沒有寄出來?

『 Mikuni Shimokawa ASIAN LOVERS LIVE 2011 in Taipei feat.Ceui 』
 【日時】2011年12月18日(日)開演: 19:30
 【会場】河岸留言西門紅樓展演館 RIVERSIDE LIVE HOUSE
 台北市西寧南路177號 No. 177, Xining S. Rd.,Wanhua District, Taipei (02)2370-8805
 【主催】CLS Ltd.
 【チケット一般発売】11月6日 / CLS CLUB 会員先行販売 11月3~5日
 【チケット料金】 1,700NTD
 【チケット発売場所】年代售票 (02)2341-9898 24hr網路購票
 日本国内販売料金 ¥6,000-


下川美娜 & Ceui台北演唱會2011
 「Mikuni Shimokawa ASIAN LOVERS Live in Taipei 2011 feat. Ceui」
 日期:2011年12月18日 (日)
 會場:河岸留言西門紅樓展演館 RIVERSIDE LIVE HOUSE
 票價:NTD $1700
 CLS Club會員預售:11月3日- 11月5日(只限年代網上購票)

2011年11月1日 星期二

GUI Bloopers 2.0, chapter 4

Chapter 4. Textual Bloopers

  • Uncommunicative text
  • Developer-centric text
  • Misleading text

GRAPHICAL user interface actually has lots of text.

Blooper 22: Inconsistent terminology

Variation A: Different terms for the same concept
o Properties, attributes, parameters, settings, resources
o Find, search, query, inquiry

username, Member ID, Alias, user ID
Error messages use different name to indicate "User ID"

Variation B: The same term for different concepts
o View: Evaluation View (data-display windows); Shrink View, View menu, ...

Picture means both image file and line-drawing area

o select: click on an object to highlight it; or add an object to a list
o cursor: text insertion point; or screen pointer

Use industry standard terms. These terms are equivalents of "reserved words" in programming languages.

Use messages files. Do not let text review by searching through source code.

duplicate text strings could be one of two possibilities:
1. Redundant text strings that should be one. Should keep one and delete another.
2. Text strings for different situations that are the same.

Blooper 23: Unclear terminology

Variation A: Ambiguous terms
Enter: also means "to go into"
Click here to enter application.
Could be misinterpreted that clicking th button would display a text box in which they could enter the name of a software application?
↑ a little bit exaggerated

Build Window: a window for building a program. Could be misinterpreted as --- building a window ---.
↑ Turning verbs into nouns

Variation B: Terms for different concepts overlap in meaning
"delete" for deleting text and "remove" for deleting files.
"copy" for copying document content and "duplicate" for copying document files.
"Find" searches currently open email folder and highlights the first matching message. "Search" searches one or more email folders and lists all matching messages.

"Find Related Concepts"; "Find Related Terms"

Variation C: Concepts too similar
terms too similar, or concepts too similar, or both.

o Avoid synonyms
o Avoid ambiguous terms
o Test the terminology on users

Blooper 24: Bad writing

Variation A: Inconsistent writing style
o Show Details vs. Properties
o "Enter send date" vs. "Please specify the date on which the message is to be sent"
o "Database Security" vs. "Database security"
o ending some but not all sentences with periods.

o "Create New Study" vs. "Open An Existing Study"
o "Table Name:" vs. "File:". Both should include "Name" or neither should.
o inconsistently capitalized commands

Variation B: Poor diction, grammar, spelling, and punctuation
"Adobe Reader has been updated. Please restart before continue."
"The following errors have occurred: PIN - must use acceptable characters such as numeric"

o Use people who are skilled at writing. All text in an application --- instructions, warnings, error messages, setting labels, button labels --- should be reviewed by the information architect, technical editors, and technical writers.
o Spell-check all text

Blooper 25: Too much text
software users don't read, they scan.

o Verbose instructions and labels
o Lengthy links

o Avoid long prose paragraphs
o Use headings, short phrases, bullet points
o Keep links short, one to three words; explain with nonlink text.
o Avoid repetition in link lists; cut repeated text or move it into headings.

the above is "uncommunicative text" part