Turtle Online：致力於打造超接地氣的PC前端架構，組件+API，快速搭建前端開發

架構創做初衷

每當新開一個項目時，都會絞盡腦汁去考慮採用哪一種框架：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、使用方法

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和組件也是能夠直接使用的。

2、運行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便可。

3、二次開發說明

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

4、項目架構說明

5、Turtle Online框架運行圖