平時用的最多的文本編輯器就是Notepad++，很多東西都是通過Notepad++直接記錄的：

• 沒有看完的網(wǎng)頁鏈接
• 要整理、收藏的網(wǎng)頁
• 讀書筆記
• 要處理的事情
• 待看/看過的文檔和電子書
• 等等。。。

隨著內(nèi)容越來越多，就不方便管理和查看了。

于是決定自己實現(xiàn)一個簡單的記錄工具來管理這些信息，工具就叫Remember。

關(guān)于Remember

自己平時工作主要用Python，并且對前端方向一直很有興趣，所以Remember的開發(fā)就使用了Angular和Flask，分別實現(xiàn)了前端的頁面邏輯和后臺的RESTful API。

另外，Remember開發(fā)中主要用到了下面的工具：

• 通過pylint、jshint進行Python、JavaScript代碼的靜態(tài)檢查
• JavaScript的單元測試使用karma和Jasmine
• 前端包管理使用bower
• 前端構(gòu)建使用gulp

下面就看看Remember中提供的一些功能。

管理任務(wù)

Markdown編輯/預(yù)覽

管理便簽

管理文件

一些感想

在開發(fā)Remember的過程中遇到了一些問題，也開始更加注意一些事情。

編碼風(fēng)格很重要

每個開發(fā)人員都有自己的編碼習(xí)慣和風(fēng)格，不能說誰的編碼風(fēng)格就是最好的。

但是，對于一個項目，編碼風(fēng)格的統(tǒng)一很重要，統(tǒng)一風(fēng)格的代碼將更方便的管理、查閱，降低維護成本。

在開發(fā)Remember的時候自己也是盡量去按照Python和JavaScript的style guide去編碼，主要有以下參考。

對于Python，主要參考：

• PEP 0008 -- Style Guide for Python Code
• Google Python Style Guide

對于JavaScript和Angular，主要參考：

• Crockford style
• angular-styleguide

即使有了統(tǒng)一的風(fēng)格，對于Python和JavaScript這些解釋性的語言，靜態(tài)檢查也是很有必要的。所以Remember中就使用了pylint和jshint進行靜態(tài)檢查。這種靜態(tài)檢查可以進一步保持統(tǒng)一的代碼風(fēng)格，同時幫忙發(fā)現(xiàn)一些代碼錯誤。

單元測試

由于自己是邊開發(fā)邊使用Remember，所以經(jīng)常有一些改動，但是改動之后沒有進行測試，有時候相關(guān)的功能就不正常了，就需要查看最近的提交記錄。

所以對一些基本的功能模塊，編寫單元測試還是很必要的。

Remember中主要使用karma和Jasmine進行JavaScript單元測試，但是測試的coverage還是很少，需要慢慢補上。

使用工具簡化流程

開發(fā)過程中接觸了一些工具，很大程度上方便了開發(fā)。

記得以前需要什么前端庫的時候，都是直接搜索，然后下載相應(yīng)的js/css文件。不僅工作效率低下，對于這些庫的管理也是一個很大的問題。所以去了解了一下bower這個工具，然后就可以方便的獲取和管理需要使用的庫了。

另外就是使用了gulp進行一些自動化構(gòu)建，以前很多手動的工作現(xiàn)在都簡化成了一個簡單的命令。通過gulp合并、壓縮js/css/html之后，加載首頁的對比：

• 壓縮合并前：

　　

• 壓縮合并后：

　　

尋找和利用一些工具來簡化流程是十分必要的，往往會有事半功倍的效果（Ps：現(xiàn)在前端開發(fā)的工具實在太多了）。

總結(jié)

Remember開發(fā)過程是邊開發(fā)邊使用，到現(xiàn)在已經(jīng)可以滿足我的需求了，而且現(xiàn)在已經(jīng)習(xí)慣了使用這個工具進行各種記錄工作。但是還有很多可以增加、改進的地方，就慢慢來吧。

雖然對JavaScript有一些了解，但是Angular是開始做這個工具時候現(xiàn)學(xué)的；關(guān)于JavaScript的單元測試工具，通過bower管理前端庫，通過gulp構(gòu)建前端項目等等都是邊學(xué)邊使用，所以收獲還是挺多的。

?

項目源碼已經(jīng)托管到Github上了，如果你也剛開始學(xué)習(xí)Angular或Flask，希望項目的源碼能夠?qū)δ阌兴鶐椭?/p>

如果你也需要一個記錄工具，不妨試試Remember，或者基于Remember定制一個符合你習(xí)慣的工具。

?

Remember on Github：https://github.com/WilberTian/Remember

Gif 制作工具：ScreenToGif

?

總結(jié)

以上是生活随笔為你收集整理的Angular+Flask搭建一个记录工具的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。