私は少し遅れていることを知っていますが、javascriptモジュールパターンに出くわしました. を使用していくつかのプロジェクトを書き直していますが、以下のコードの効率について疑問に思っていました。これは、特定の要素の CSS を更新する非常に基本的なスクリプトです。
/*---- CSS Styling Functions ----*/
$(document).ready(function() { cssStyler.init('breadcrumbs');});
$(".toggle_category").click(function(){ cssStyler.init('label');});
var cssStyler = {
breadcrumbs: {
id: $("#category_id").val(),
id2: $("#art_id").val(),
attr: "color",
tag: "#CD661D",
},
label: {
id: "alert_request",
attr: "display",
tag: "block",
tag2: "none"
},
init: function(config) {
elems = new Array();
elems[0] = $('#'+cssStyler[config].id)[0];
elems[1] = $('#'+cssStyler[config].id2)[0];
for (var i = 0; i < elems.length; i++) {
if(elems[i]){
if (elems[i].style[cssStyler[config].attr] != cssStyler[config].tag) {
elems[i].style[cssStyler[config].attr] = cssStyler[config].tag;
}
else {
elems[i].style[cssStyler[config].attr] = cssStyler[config].tag2;
}
}}
}
};
});
ご覧のとおり、ページ上の要素を取得し、CSS を変更します。ブレッドクラムはページの準備ができた状態で実行され、クリックするとラベルが非表示/非表示になります。
これまでモジュールに実際に触れたことがない私の懸念は、効率性です。'config' を 2 つ用意して、渡された変数に応じて関数を実行しても問題ありませんか? 物事を行うためのより良い方法はありますか?
改善のための推奨事項をいただければ幸いです。それが完全なゴミならそう言ってください、それは私の気持ちを傷つけることはありません-私は約束します.