這是一個 jQuery 的模組套件，現在可以透過 NPM 進行安裝。
npm i vmodel.js
import 'vmodel.js'
- 建立一個封閉式的模組。
- 就像是 Class 概念，具有公開方法與私有方法。
- 利用指定的根結點(selector)，在不同的事件中綁定可以避免不同模組間的干擾。
這個範例流程式這麼跑的
- 定義好模組，包括模組名稱、綁定的根節點。
- 建議透過
$.vmodel.get() 啟動，而不是 isautoload: true 啟動。(好處是當有多個 vmodel 模組需要相互呼叫的時候，才不會有呼叫不到模組的狀況發生。一般來說建議 isautoload: false 並使用 $ .vmodel.get(model_name, true) 的方式啟動。) - 因為定義了
this.autoload = ['init']所以 vmodel 一旦啟用，會自動觸發 init()
$.vmodel.create({
selector: '.container',
model: '--hello',
isautoload: false,
method: function (){
var vs = this;
this.autoload = ['init'];
this.init = function (){
}
}
});
$.vmodel.get('hello', true);- selector：想要綁定的根，可以是任何選擇器，包含 'window'。
- model：模組名稱，呼叫時可用 hello 即可。若是文件搜尋可搜尋 --hello 方便編輯器定位。
- isautoload：是否自動讀取，若為 true 將在讀取完程式碼後立即自動觸發 method.autoload。
- method：我們要設計的公開/私有方法都在這裡。
- vs：方便在 method 內部呼叫根
- vs.root：等於 $('.container')
- vs.root.on：等於 $('.container').on(...);
- vs.selector：等於 .container
- vs.struct('method_name'); 標記這個結構已完成，參閱後方 $.vmodel.get() 使用。
- autoload：指定當初始化想要自動觸發的公開方法，可以是 [] 或是匿名函式。注意，匿名函式務必 return []。
this.autoload = ['init', 'say']
// 或
this.autoload = function (){
// 可以執行你想要的程式碼...
return ['say'];
}需要掛在 this 底下，可透過 $.vmodel.get('模組名稱') 呼叫。例如我們有個方法
this.say_my_name = function (){
console.log('Jason')
}那麼就可以透過這麼方式執行
$.vmodel.get('hello').say_my_name(); // => Jason若我們有一些零碎處理的函式，不打算讓外不呼叫，那麼可以這麼寫
var _key = '123456';
var _mixkey = function (){
return 'A' + _key;
}
this.get_key = function (){
return _mixkey();
}這樣外部只能呼叫 $.vmodel.get('hello').get_key() 而不能呼叫 _key 與 _mixkey()。
- model_name：模組名稱
- p2：true | false 是否啟用自動觸發
- p3：是否啟用監聽並添加視覺化屬性。注意，這是非同步。function: 監聽直到完成模組後會觸發 callback，並夾帶了該倉儲。true: 僅啟用監聽。使用此方法，需要讓 autoload 自動觸發的對應方法，都使用
vs.struct(method_name)標記。 - return：模組的物件，若要呼叫公開方法，可以使用
$.vmodel.get('hello').get_key()這種方式。
$.vmodel.create({
selector: '.container',
model: '--tool',
isautoload: false,
method: function (){
var vs = this;
this.autoload = ['call'];
this.call = function (){
setTimeout(function (){
console.log('setTimeout')
vs.struct("call"); //在終點務必標記方法名稱，代表這個方法執行完畢
}, 2000);
}
}
});
$.vmodel.get("tool", true, function (){
console.log('完成觸發')
});過 2 秒後會顯示以下
setTimeout
完成觸發
當指定多組的倉儲模組化完成後，要觸發的方法
// 模組 tool
$.vmodel.create({
selector: '.container',
model: '--tool',
isautoload: false,
method: function (){
var vs = this;
this.autoload = ['call'];
this.call = function (){
setTimeout(function (){
console.log('setTimeout call')
vs.struct("call");
}, 2000);
}
}
});
// 模組 apple
$.vmodel.create({
selector: '.container',
model: '--box',
isautoload: false,
method: function (){
var vs = this;
this.autoload = ['apple'];
this.apple = function (){
setTimeout(function (){
console.log('setTimeout apple')
vs.struct("apple");
}, 4000);
}
}
});
// 過 2 秒後會觸發
$.vmodel.get("tool", true, function (){
console.log('完成觸發 tool')
});
// 過 4 秒後會觸發
$.vmodel.get("box", true, function (){
console.log('完成觸發 box')
});
$.vmodel.end(['tool', 'box'],function (){
console.log('所有模組都觸發完畢')
});依序會顯示
setTimeout call
完成觸發 tool
setTimeout apple
完成觸發 box
所有模組都觸發完畢
刪除指定的模組。注意如果內部綁訂了 Dom 事件，事件並不會因此而撤銷。
var obj = $.vmodel.get("tool");
console.log(obj); // => method {autoload: Array(1), ......
$.vmodel.delete("tool");
var obj = $.vmodel.get("tool"); // => 呼叫的倉儲名稱 tool 不存在。
console.log(obj); // => false取得視覺化屬性紀錄
- status：是否已經完成啟用
- vname：模組名稱
- timestamp：完成啟用的時間戳記
$.vmodel.get("tool", true, function (){
console.log('完成觸發 tool')
console.log($.vmodel.history('tool'));
});取得這個版本的編號。
console.log($.vmodel.version()); // => 1.6.1