使用TypeScript開發一個線上記事本，支援離線儲存

標籤：

先貼上源碼傳送門： https://github.com/flowforever/yaryin.note

記事本網址： http://yindoc.com , 井號後面寫你喜歡的檔案名稱即可。

 

最近在研究NativeScript，NativeScript使用TypeScript,於是就順便研究了ts。

不得不提到NativeScript源碼學習，感覺學習到了不少東西，順便也從上面扣了一個依賴注入的架構下來用，實際使用感覺非常給力。

檔案地址： https://github.com/flowforever/yaryin.note/blob/master/utils/yok.ts

除了稍微修改一下依賴，其他基本沒動。

 

ts 給我的第一印象就是清爽分明，配合WebStorm逆天的自動編譯，寫的過程中代碼哪邊編譯不通過提示非常詳細。

先貼兩段代碼：

serviceBase.ts

/** * Created by trump on 15/4/23. *////<reference path="../_references.d.ts"/>/// <reference path="./_references.d.ts"/>import db = require(‘../db/db‘);import Future = require("fibers/future");import Fiber = require(‘fibers‘);export class ServiceBase {    constructor(table) {        this.table = table; // 這個table就是mongoose的Model        this.$table = Future.wrap(table); //配合node fibber 解決非同步callback hell 太給力了    }    table;    $table;    getAll() : IFuture<any> {        return this.$table.findFuture.bind(this.table)({});    }    add(model): IFuture<any> {        return this.$table.createFuture.bind(this.table)(model);    }    findById(id: string): IFuture<any> {        return this.$table.findOneFuture.bind(this.table)({            _id: id        });    }    find(query:any): IFuture<any>{        return this.$table.findFuture.bind(this.table)(query);    }    findOne(query:any): IFuture<any>{        return this.$table.findOneFuture.bind(this.table)(query);    }}

 

documentServices.ts

 1 /// <reference path="./_references.d.ts"/> 2 import db = require(‘../db/db‘); 3  4 import Future = require("fibers/future"); 5 import Fiber = require(‘fibers‘); 6 import sb = require(‘./servicesBase‘); 7  8 export class Document extends sb.ServiceBase { 9 10     constructor($db) {11         super( $db.Document );12         this.db = $db;13     }14 15     db;16 17     getList() : IFuture<any> {18         return this.getAll();19     }20 21 }22 23 $injector.register(‘documentServices‘, Document); // 眼尖的同學會看到這行代碼，沒錯這邊將DocumentService注入到容器裡面，在接下來的controller中我們就不需要require DocumentService 這個類寫一對的路徑了

 

 

controller/api.ts

///<reference path="../_references.d.ts"/>import express = require(‘express‘);import services = require(‘../../services/documentServices‘);class Controller {    constructor($documentServices) {        this.services = $documentServices; // 我們這邊只需要在建構函式裡面指定好依賴的名稱，yok架構就幫我們做好一切了    }    services;// = <services.Document>$injector.resolve(‘documentServices‘);    ‘get/:name‘(req:express.Request, res:express.Response) {        (()=> {            var doc = this.services.findOne({                name: req.params.name            }).wait();            res.send(doc||{});        }).future()();    }    ‘[post]edit‘(req:express.Request, res:express.Response) {        (()=> {            var saved = null;            if(!req.body._id) {                saved = this.services.add({                    name: req.body.name                    , content: req.body.content                }).wait();                res.send(saved);            } else {                saved = this.services.findById(req.body._id).wait();                saved.content = req.body.content;                saved.name = req.body.name;                saved.save(function(){                    res.send(saved);                });            }        }).future()()    }    rename(req:express.Request, res:express.Response) {    }    remove(req, res) {    }}$injector.register(‘apiHomeController‘, Controller);module.exports = $injector.resolve(‘apiHomeController‘);

 

總體來說：

TypeScript 開發很給力，

NativeScript的那套依賴注入也很給力。

 

使用TypeScript開發一個線上記事本，支援離線儲存