web App基本信息
先介紹一些基本信息,后面我會對架構設計進行剖析,敬請關注(不定期更新)。
在線演示地址:http://www.sinreweb.com/im/
源碼github地址:https://github.com/Neverland/imageMagic
該項目是一個真正意義上的web 應用軟件,為國內某大型互聯網圖庫的在線編輯工具。項目的初衷為了使編輯日常處理圖片的需求可以在瀏覽器中完成,避免小改動也使用笨重的ps。一方面ps的學習成本也很高,有一個簡單使用的在瀏覽器中運行紀圖像處理工具,降低新編輯的學習成本。
開發這個項目公司一方面也可以做技術儲備,對新瀏覽器新技術有一定認知和探索。由於是一個探索型項目所以開發自由度比較高,有時間去設計和探索,所以沒有使用任何類庫完全原生javascript。為了增強app的生命力,兼容了幾乎所有主流支持canvas的瀏覽器其中包括IE9和ios4的瀏覽器(需要使用沾貼網絡圖片的方式,服務器代理為本域名的方式,canvas有同域限制)。
項目啟動時還是2011年9月份當時主流FF3,app以Firefox為主流平台開發,讀圖還是使用瀏覽器私有方式。當時並不跨瀏覽器,從FF7支持File API。進行了代碼升級於css升級,該app終於實現了跨瀏覽器。
到2011年低,該項目一期結束,2012年8月份我有為他添加了濾鏡組件。后面基本沒有更新了。
特點:
1.為了使其跟容易維護,該app采用一個頂級命名空間imageMagic,只會產生一個全局變量。
2.采用桌面軟件開發思路,有config.js文件通過配置該文件可以適用多產品線的個性需求。
3.有一個入口文件,init.js通過配置該文件可以使軟件功能啟動禁用輕松實現。
3.為了便於升級維護,采用了模塊模式開發。支持熱插拔。
只有一個全局變量所產生的命名空間:
軟件設計圖
Structure