程式設計雜筆

[程設雜筆] 快速實作一個Todo List——使用Belle + localForage

最近都在使用sass,而javascript的部分,因為專案比較小的關係,也都是用jquery就解決了。正因為如此,已經有好一段時間沒有使用reactjs了。

今天去面試的時候,面試的公司現場出題,直接叫我寫出一個簡單的todolist,並且使用 BellelocalForage 這兩個 library。因為有幾個月沒有寫React了,聽到題目的時候,其實有一點點抖抖的,也不知道自己有沒有能力把他弄出來。

先介紹一下這兩個library好了,首先是Belle。這個library包裝了很多基本的html5元件,例如input、button……,並把它們一些event trigger function都給包起來,讓工程師可以更快的寫出很多有用的組件。

至於localForage,他是一個可以把資料存在client端的library。client端儲存資料的方式有很多種,譬如cookie,WebSQL……。而localForage把WebSQLhapi API包裝起來,幾乎是無痛儲存和拿取資料。

這個一小時內完成的app,主要有4個功能:

  1. 可以新增memo
  2. 清除所memo(太懶了,直接全清比較快XD)
  3. 記錄memo在client端
  4. 得到client端存的memo

回到react的部分。因為完全沒用過這兩個library,加上太久沒寫reactjs了,一開始寫起來抖抖的。不過高興的是,後來很快就上軌道了。放一下code吧!用reactjs和ES6寫的。

'use strict';
import React from 'react';
import belle from 'belle';
import localforage from 'localforage';

var TextInput = belle.TextInput;

class Main extends React.Component{
    constructor(){
        super();
        this.state={
            list:['start'],//儲存的memo
            now:'' //目前在textinput所顯示的字串
        };
        this.store=localforage.createInstance({
            name:'test'
        });
    }
    componentDidMount(){

    }
    addList(){
        this.setState({
            list:this.state.list.concat(this.state.now)
        });
    }
    clearList(){
        this.setState({
            list:[]
        });
    }
    save(){
        this.store.setItem('list',this.state.list);
    }
    getItem(){
        this.store.getItem('list',function(err,value){
            this.setState({
                list: value
            });
        }.bind(this));
    }
    update(value){
        this.setState({now:value.value});
    }
    render(){
        return(
<div className={'main'}>
               <TextInput ref="input" value={this.state.now} onUpdate={this.update.bind(this)} defaultValue="type"/>
               <button onClick={this.addList.bind(this)}>add</button>
               <button onClick={this.clearList.bind(this)}>clear</button>
               <button onClick={this.save.bind(this)}>save</button>
               <button onClick={this.getItem.bind(this)}>get</button>
               {this.state.list.map((v)=>
<div>{`${v}`}</div>
)}</div>
);
    }
}
export default Main;

寫完的時候其實蠻開心的,回頭看一下,發現那50分鐘全神貫注的能量真的很強!
之後面試官還說,喔寫得蠻快的嘛,有點受寵若驚XD,希望是個好預兆:)

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s