[宅] html5筆記 - Local Storage

最近用Local Storage的html5當成一個類似client端的DB來做一點小應用
當中發現了一點小心得，在此紀錄一下：

localStorage是html5規格下，直接存在於window物件底下的Object，他的腳色跟cookie有點像，但是容量比較大，也不用每次都傳回給server。
美中不足的是，你要存入的資料都必須以string的形式做儲存

localStorage.test={};//這樣應該是Object吧
typeof(localStorage.test);//結果是String....Orz

所以在使用他的時候我們就要稍微用一點心思了，而JSON的.stringify()以及.parse()正好適合處理這樣的問題！

首先，我們在localStorage中建立一個名為test的property：

localStorage.test="{}";

為什麼要刻意在字串中加入上下括號呢?這是因為雖然我們只能以字串方式存入localStorage，但是可以寫成json的格式，再以JSON.parse()將他轉成真正的物件，讀寫完畢後再以JSON.stringify()轉成字串，存回去就好了。

[宅] javascript筆記(7) - javascriptMVC-Model

最近因為工作的關係開始接觸javascriptMVC，雖然網路上的評價不像Ember那麼的好，也沒有所謂的UI-binding，但是開發團隊很用心的寫了fixture、document等好用的功能，甚至支援command line產出程式碼，一開始用起來的感覺很像是client端的ROR~

至於這些功能有沒有在Ember上被實現我就不知道了，或許有機會可以試試看。

Model:

稍微接觸過MVC架構的朋友應該就知道，Model是負責跟資料庫溝通的部分。

在client端的MVC架構雖然無法直接存取資料庫，但在javascriptMVC中內建了restful的方法，可以經由save(對應update), find(對應select), findAll(select all)等method來呼叫定義的restful：

$.Model('Todo',{
    findAll: 'GET /todos.json',
    findOne: 'GET /todos/{id}.json',
    create:  'POST /todos.json',
    update:  'PUT /todos/{id}.json',
    destroy: 'DELETE /todos/{id}.json'
},{});

這樣就產生了一個Todo的class，而他有著這些restful路徑，我們可以利用Todo來新增一些instance如下：

var todo = new Todo();

這時你可能會想問，那我要怎麼寫入可以被所有instance共同繼承的property呢?

在一開始創建Todo這個class時，我們可以在第三個parameter(型別為Object)內寫入我們要預設的property，就是我標示為紅色的地方啦~

所以假設我在一開始建立Todo這個Model時希望他的instance都能有一個叫做"spotlight"的function以及priority的屬性，我們就要改寫成這樣：

$.Model('Todo',{
    findAll: 'GET /todos.json',
    findOne: 'GET /todos/{id}.json',
    create:  'POST /todos.json',
    update:  'PUT /todos/{id}.json',
    destroy: 'DELETE /todos/{id}.json'
},{
    spotlight : function(){},
    priority : 0
});

如此一來被建立出來的todo instance應該會有如下的properties：

priority(number) spotlight(function) constructor(function) Class(function) setup(function) update(function) errors(function) attr(function) bind(function) unbind(function) _updateProperty(function) removeAttr(function) attrs(function) serialize(function) isNew(function) save(function) destroy(function) identity(function) elements(function) hookup(function) created(function) updated(function) destroyed(function) proxy(function) callback(function)

其中save這個function就是對自己這個instance做update的工作，但這時候你可能會發現一但我真的執行了save這個method，傳出的data中卻空空如也，這是因為你不是透過建構子或是.attr( )來對這個instance建立property的！不然總不能要這個instance傻傻地將以上一長串properties全部update上去吧?
為了要讓這個instance知道哪些是自己應該要儲存的attributes，我們可以在建立instance時加上建構子的參數，如下：

var todo = new Todo( {'priority' : 0, 'spotlight' : function(){}} );

或是在創建之後用.attr( )來加入attributes：

todo.attr('priority',0);

這時你可能會想問：「那這個instance是怎麼記錄這些attribute是要被上傳的呢?」
你會發現在這個instance中有一個叫attrs的function，呼叫他之後會返回一個Object，裡面有你到目前為止所增加的attributes，也就是save時所上傳的data！

所以這代表每次每次我們要修改attributes都得透過attr嗎?
答案是不必的~透過建構子或是.attr( )來建立attriutes只是順便做一個類似"註冊"的動作，之後即使是直接進行如下的操作，呼叫attrs後也可以發現數值真的有被修改到：

todo.priorirt=1;

暫時先這樣。