Firefox OS

System app

Exactly, Firefox OS, also known for boot 2 gecko, is having only one app/one page. It’s the system app, which controls all web app’s life cycle. When FirefoxOS is booted, it would load the system app from system/index.html. Then system app would take care of the remaing stuff.

• Load modules
• Init homescreen app
• Etc.

之前在寫單元測試時，需要測到MozActivity的呼叫。

當我們嘗試去取代window object中的MozActivity時，會遇到：

1

0) Feed "before all" hook: Error: global leak detected:

解決方法：

As you know, function in javascript is also an object, you could use a property of the object to keep function result. This is called Memorization.

Today I have a chance to utilize this skill.

Please read codes below first:

1
2
3
4
5

} else if (getOffOrigin(app.frame.dataset.url ? app.frame.dataset.url : app.frame.src, origin)) {
  var subtitle = document.createElement('p');
  subtitle.textContent = getOffOrigin(app.frame.dataset.url ? app.frame.dataset.url : app.frame.src, origin);
  card.appendChild(subtitle);
}

Web activity是由Mozilla設計並開發，用來使web app之間共享資源的框架。 在Firefox OS中已經存在Platform/UI上的實作，並且有一些內建的主要Web app已經利用Web activity來達成跨應用程式溝通的目的。 （如：Gallery使用它來讓其他程式從它挑選圖片，也用同一技術來實現圖片分享到不同應用）

以下介紹如何使用這個新穎的技術。

Window Shade

我手上的Samsung Galaxy S3的作業系統是Android 4.0.4。

當我收到facebook/google+/…等程式通知的時候，最上面那條bar會出現對應的圖示。

這時候可以透過將bar「滑下來」的動作拉出一個UI，裡面會有

1. 快速設定
2. 通知項目詳細列表

這個UX，Google把它稱為Window shade

最近看到這篇文章Backbone Aura難得的有提到一個web application core該做些什麼事情？跟我想的蠻相似的，這邊將他列出來： * 管理widget的life cycle的能力。 * 低階DOM操作處理 * 提供publish/subscribe的溝通管道給應用程式的各部位互相溝通

以下是我流解析。

管理widget的life cycle

Core是應用程式的進入點(entry poing)，它必須在適當的時機init需要的widget/application part起來做事情，也只有Core才知道什麼時候必須做這些事情。當然也包括在適當的時機讓widget沈睡或消滅。

低階DOM操作

這有點像jQuery library主要在做的事情，不過世界上不是只有jQuery一種library，也不是任何情況下都可以用jQuery，有一個可以快速操作DOM的方法是必要的。

提供publish/subscribe的溝通方式

解耦後的application part/widget當然不能直接呼叫別人的attribute function（不然還解什麼耦），那要怎麼叫別人做事？行之有年的publish/subscribe機制在jmvc已經被整合進去，backbone上面還欠缺方法，backbone aura把這件事做出來了。

然後因為好奇它怎麼做的就看了一下source，在aura/www/js/aura/mediator.js裡面定義了：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/**
 * Subscribe to an event
 * @param {string} channel Event name
 * @param {object} subscription Module callback
 * @param {object} context Context in which to execute the module
 */
obj.subscribe = function (channel, callback, context) {
    channels[channel] = (!channels[channel]) ? [] : channels[channel];
    channels[channel].push(this.util.method(callback, context));
};

/**
 * Publish an event, passing arguments to subscribers. Will
 * call start if the channel is not already registered.
 * @param {string} channel Event name
 */
obj.publish = function (channel) {
    var i, l, args = [].slice.call(arguments, 1);
    if (!channels[channel]) {
        obj.start.apply(this, arguments);
        return;
    }

    for (i = 0, l = channels[channel].length; i < l; i += 1) {
        channels[channel][i].apply(this, args);
    }
};

看起來是利用一個變數來根據widget name儲存callback function進array裡面。

function hoisting是什麼？

一個不說你也不會知道的js語言特性，是指js看到function xxx(){}這種宣告時會把定義搬到scope最頂端 的行為，hoisting的意思是提昇。

自從在Javascript Patterns這本書上面看到hoisting的時候，就一直在想到底有什麼場合可以用到這個奇妙的語言特性？想不到還真的遇到了，雖然其實是個反例XD

原文出自PTT Web_Design版「[問題] jQuery 參數的問題~」，這名網友問為什麼下面的js不能用？

從Server端收到的資訊是如下格式

user_i0_name=alive
user_i0_gender=male
user_i0_age=27
user_i0_company_c0_name=VIVOTEK
user_i0_company_c1_name=Mozilla
system_model=ABC1234
network_hostname=abc1234

但是這些資訊很難使用，想透過某個統一的方法把它轉成object來用。 另外存回去的時候要把object轉回跟上面一樣的assignment。

Step#1: eval拆解進區域變數

為了避免污染全域變數，前後取代原本的字串：

1
2
3
4

var object = {};
var string_rev_1 = (('object[\''+string).replace(/\r\n$/,'').replace(/\r\n/gi, '\r\nobject[\'').replace(/=/gi, '\']='));
eval(string_rev_1);
console.log(object)

現在得到了一個只有一層的object，是好用了一點，但是能不能切出多層來？

Step#2: 用底線切object

1

var string_rev_2 = string_rev_1.replace(/_/gi, '\''][\'');

但是這樣會有undefined的問題，如

user_i0_name=alive

會變成

object['user']['i0']['name']=alive

eval後會出現i10 is undefined. 所以要想辦法解決這種超前reference的狀況。

一個辦法是用\r\n切分assignment後個別eval，再用try catch區塊判斷是否發生超前定義的情況。 假設發生了就個別處理該assignment。

(待續)

CanJS是什麼？

CanJS是JMVC團隊把MVC這一塊獨立出來的結果，並且做了一些改良。以往談到JavascriptMVC跟Backbone的時候，其實這兩個框架的目的是不同的。 JMVC除了MVC還提供其他的case solution，而Backbone只專注在MVC身上。另外一個不同點是JMVC當時的MVC framework只能綁定在jQuery上面，Backbone可以把核心抽換成zepto(一個類似于jQuery但輕量化的js lib)，這也是有手機網頁app使用backbone卻沒有人使用jmvc的原因。

CanJS

CanJS官網 以下節錄幾個要點：

1. 核心可抽換成Zepto, jQuery, YUI, Dojo, Mootools。
2. 非常快， 比較令我訝異的是backbone竟然沒有live binding功能？
3. 安全的Model。jqueryMX一個缺點是常常會有內容相同的model instance，CanJS解決了這點。它保證相同內容的Object只會有一個instance。
4. View可以做live binding了，直接對應Model change。

展望

以往JMVC為人詬病的就是本身提供的東西太複雜，不會有全部學完的動力。看來CanJS可以在專心這件事上趕上Backbone。

這個部落格在我的定位中是純技術取向，但這篇應該會是唯一一篇非關技術的文章。

文長。

我在確定得到新工作的那一天，在ptt soft_job以及web_design版發表了那段時間的面試心得，內容是有關前端工程師的工作面試經歷。（文章在http://www.ptt.cc/bbs/Soft_Job/M.1335873183.A.F23.html）因為那篇文章我收到很多回應，也很感謝所有來信的人的鼓勵。就在明天我將要離開現在的公司然後到新公司報到，我想在這邊簡單寫下一個平凡的網頁工程師一路走來的心路歷程。一些細碎片段構成的過往。