架構創作初衷

每當新開一個項目時，都會絞盡腦汁去考慮採用哪種框架：requirejs/seajs、jquery/zepto、backbone、easeUI/Bootstrap/AngularJS……，特別是團隊合作的時候，不同的人熟悉不同的框架，最終都會經過一番頭疼才能定下來，進入開發之後還會不斷的質疑當初的選擇。
鑒於此，我想開發一個屬於自己的框架，一方面把前端知識貫穿一下，另一方面用起來也順手，免得又犯選擇恐懼症。
開發之初，我給框架的定位是：

1. 好用

• 組件直接採用$(容器).組件名{…}，或者Turtle.組件名{…}方式調用，只需必要參數
• 常用組件要有快捷方式，比如: Turtle.alert()
• 常用方法要有，如時間處理、json處理、ajax封裝、本地存儲等，且統一採用Turtle. 方式調用
• 所有js和css分別都壓縮成一個，引用一次即可使用
• 理論上，一個頁面對應一個js，採用backbone.view的方式定義，簡單明瞭

2. 功能強大
常用功能要有，整合精簡市面上輕量級的組件或框架，為我所用。沒有的，自己寫。如果現有框架太大或不宜使用，自己寫。

3. 擴充方便
允許用戶在該框架之下，很方便的寫自己的組件，如：使用cPageView擴展頁面js和組件

4. 完善的說明文檔和Demo
最好能部署在網上，使用方法和源碼都可以看得到，

目前的版本，上面功能都可以實現，下一步需要優化的點：
1. 屏幕自適應
2. 完善常用功能
3. 開發框架之外的插件，讓用戶按需選擇
4. 終極目標：模塊化框架的所有功能，讓用戶自行選擇所需的功能，然後生成一個用戶定製化的框架。

Turtle Online 應運而生

Turtle online 是Turtle框架的PC前端架構（還有他的兄弟Turtle mobile，移動前端框架，因涉及機密，暫未正式發佈），包括組件和API兩大部分，可以快速的搭建PC前端開發環境。
組件包括日曆、分頁、圖片輪播/圖片瀏覽、各類提示彈框/自定義彈層、氣泡提示、圖標icon、表單等。
API包括常用JS方法封裝（cookie操作、ajax封裝、日期處理、瀏覽器判斷、當前位置獲取頁面跳轉、其他常用方法等）、基於Backbone.View/Require.text.js的框架、前端模板。
重要說明：Turtle online組件部分使用了第三方js庫layerUI、poshytip。

演示

Turtle Online演示

源碼下載

oschina-開源中國

成功案例

一、使用方法

1. 把build目錄放到你項目中；
2. 在頁面中引入Turtle.min.css和../build/Turtle.min.js；
3. 然後就可以在你的js中使用了，實例如下：

define(['cPageView','text!views/temple/temptest.html'],function(PageView,temptest) {
    var View = PageView.extend({
        events:{
            'click #cpageviewTest1':'clicktest1',
            'click #templateA':'clicktest2'
        },
        initialize: function () {
            console.log('initialize');
            this.$el.find('#cpageviewTest3').html('預設值被改變');
            this.on('initpage',function(){
                console.log('initpage');
            });
            this.trigger('initpage');
        },
        clicktest1:function(e){
            this.$el.find('#cpageviewTest2').html('賦值成功！'+new Date())
        },
        clicktest2:function(){
            $('#templateTest').html(_.template(temptest)({name:'Alec yin'}));
        }
    })
    return new View();
});

4. API的使用，全部都是在Turtle/turtle對象中，直接【Turtle./turtle.】就可以了。
以上四步你就可以使用Turtle online中的方法了，如果你沒有使用requireJs的話，API和組件也是可以直接使用的。

二、運行Turtle online

1. 下載Turtle online項目，直接點擊index.html即可查看。
（此時有js報錯，因為使用了require.js，需要提供項目路徑，不影響查看非cPageView實例以外的實例。）

如果你要看cPageView的實例代碼，請繼續操作：
2. 把turtle online代碼部署到伺服器上；
3. 修改index.html中的代碼【baseUrl: "http://localhost/TurtleOnline",】改成你的部署路徑；
4. 再次運行index.html即可。

三、二次開發說明

如果現有的Turtle online無法滿足你的需求，你可以在現有代碼的基礎上定製型開發（註意：請勿提交至代碼庫，僅自己使用，謝謝！）。
開發步驟：
1. 修改代碼；
2. 如果新增或者刪除了文件，需要同步修改gulp配置文件gulpfile.js；
3. 安裝node_modules依賴包；
4. 執行gulp build命令，合併壓縮項目至build目錄。
5. 把build目錄下文件拷貝你項目中就可以直接使用了。

四、項目架構說明

五、Turtle Online框架運行圖