jQuery – vmodel 模組化 jQuery 的編寫結構。

2015-06-17 / JSN / 2 Comments / 2,202 次瀏覽

因為長期使用 jQuery 開發的經驗，所以設計了一個模組化的框架套件。這個框架套可以輔助你在編撰 jQuery 的結構上能夠：提高重複使用模組、好維護每個細節、IDE 好查找。

前往 Github

他適合用在網頁上大量的 UI 設計。一般我們會這麼寫 jQuery

$("form").on("click", ".register", function (){});
$("form").on("click", ".login", function (){});

但是，這是實作的方法，一旦結構大了會非常不好維護，IDE 也很難搜尋(如 sublimetext 快捷鍵 ctrl + R)。所以試圖從這個角度來解決問題：

  1. 我們需要在外層添加抽象的邏輯行為。日後查找問題，應該是思考抽象的邏輯行為。
  2. 模組化，我們需要有個根節點作為綁定和識別。讓各種模組綁定在不同的根節點，可以降低瀏覽器的負擔。而且容易維護。

稍微看一下範例

$(function (){

    $(".box").vmodel(function (){

        // 自動掛載要觸發的方法
        this.autoload = function(){
            return ['start', 'call'];
        }

        this.element = function (text) {
            return "<li>" + text + "</li>";
        }

        this.start = function (){
            $(".box").append(this.element("項目一"));
            $(".box").append(this.element("項目二"));
            $(".box").append(this.element("項目三"));
        }

        this.call = function (){
            this.root.on("click", "li", function (){
                $(".debug").html("我是" + $(this).html());
            })
        }
    });

})
<div class="debug"></div>
<ul class="box"></ul>

 

我們時常需要將不同的模組交互運用，尤其在製作UI介面的時候。在這裡可以這麼做來建立模組並放到倉儲裡，供其他需要使用的程式來使用。

下面就是在倉儲裡建立建立一個叫做 model_tool 的模組。

$(".tool").vmodel("model_tool", function (){
    //private
    function name() {
        return "製圖筆";
    }
    //public
    this.call = function (){
        return name();
    }
})

在外部，若要使用 model_tool 底下call() 可以這麼寫

$.vmodel.get("model_tool").call();

 

完整教學範例

 

關於 jQuery 的程式碼組織結構，官方有提供不錯的原文說明，大家有時間也可以前往看看。

 

Comments

發表迴響