役に立つかもしれないし、役に立たないかもしれないいくつかの簡単なことを説明します。明らかなものもあれば、非常に難解なものもあります。
ステップ 1: コードを区画化する
コードを複数のモジュール単位に分割することは、非常に優れた最初のステップです。「一緒に」機能するものを切り上げて、それらを独自の小さなケースに入れてください。今のところフォーマットについて心配する必要はありません。インラインのままにしておいてください。構造は後ほど。
たとえば、次のようなページがあるとします。
メンテナンスを容易にするために (そして 1000 行を選別する必要がないように)、すべてのヘッダー関連のイベント ハンドラー/バインダーがそこにあるように区分化することは理にかなっています。
その後、Grunt などのツールを使用して、JS を単一のユニットに再構築できます。
ステップ 1a: 依存関係の管理
RequireJS や CommonJS などのライブラリを使用して、AMDと呼ばれるものを実装します。Asynchronous Module Loading を使用すると、コードが何に依存しているかを明示的に記述できるため、ライブラリ呼び出しをコードにオフロードできます。文字通り「これには jQuery が必要です」と言うだけで、AMD がそれをロードし、jQuery が利用可能になったときにコードを実行します。
これには隠された宝石もあります。ライブラリのロードは、DOM の準備が整った時点で行われます。これにより、ページの読み込みが停止することはなくなりました。
ステップ 2: モジュール化
ワイヤーフレームが見えますか？2 つの広告ユニットがあります。ほとんどの場合、イベント リスナーが共有されます。
このステップでのタスクは、コード内の繰り返しのポイントを特定し、これらすべてをモジュールに統合することです。モジュールは現在、すべてを網羅しています。作業を進めながら分割していきます。
このステップの全体的な考え方は、ステップ 1 から進み、すべてのコピー パスタを削除して、それらを疎結合のユニットに置き換えることです。したがって、次の代わりに：
ad_unit1.js
$("#au1").click(function() { ... });
ad_unit2.js
$("#au2").click(function() { ... });
私は持っています：
ad_unit.js:
var AdUnit = function(elem) {
this.element = elem || new jQuery();
}
AdUnit.prototype.bindEvents = function() {
... Events go here
}
page.js:
var AUs = new AdUnit($("#au1,#au2"));
AUs.bindEvents();
これにより、繰り返しをなくすだけでなく、イベントとマークアップを区分化できます。これは非常に適切なステップであり、後でさらに拡張します。
ステップ 3: フレームワークを選択してください!
モジュール化して繰り返しをさらに減らしたい場合は、MVC (モデル - ビュー - コントローラー) アプローチを実装する素晴らしいフレームワークがたくさんあります。私のお気に入りは Backbone/Spine ですが、Angular、Yii などもあります。リストは続きます。
モデルはデータを表します。
ビューは、マークアップとそれに関連付けられたすべてのイベントを表します
コントローラーはビジネス ロジックを表します。つまり、コントローラーはページに対して、読み込むビューと使用するモデルを指示します。
これは重要な学習ステップになりますが、賞品はそれだけの価値があります。スパゲッティよりもクリーンでモジュール化されたコードが好まれるからです。
他にもできることはたくさんありますが、それらは単なるガイドラインとアイデアです。
コード固有の変更
コードの特定の改善点を次に示します。
$('.new_layer').click(function(){
dialog("Create new layer","Enter your layer name","_input", {
'OK' : function(){
var reply = $('.dialog_input').val();
if( reply != null && reply != "" ){
var name = "ln_"+reply.split(' ').join('_');
var parent = "";
if(selected_folder != "" ){
parent = selected_folder+" .content";
}
$R.find(".layer").clone()
.addClass(name).html(reply)
.appendTo("#layer_groups "+parent);
$R.find(".layers_group").clone()
.addClass(name).appendTo('#canvas '+selected_folder);
}
}
});
});
これは次のように書くとよいでしょう:
$("body").on("click",".new_layer", function() {
dialog("Create new layer", "Enter your layer name", "_input", {
OK: function() {
// There must be a way to get the input from here using this, if it is a standard library. If you wrote your own, make the value retrievable using something other than a class selector (horrible performance + scoping +multiple instance issues)
// This is where the view comes into play. Instead of cloning, bind the rendering into a JS prototype, and instantiate it. It means that you only have to modify stuff in one place, you don't risk cloning events with it, and you can test your Layer stand-alone
var newLayer = new Layer();
newLayer
.setName(name)
.bindToGroup(parent);
}
});
});
コードの早い段階で:
window.Layer = function() {
this.instance = $("<div>");
// Markup generated here
};
window.Layer.prototype = {
setName: function(newName) {
},
bindToGroup: function(parentNode) {
}
}
突然、コードのどこからでも、コピーを貼り付けずに標準レイヤーを作成できるようになりました。これを 5 つの異なる場所で行っています。コピペを 5 回保存しました。
もう1つ：
// アクションのルールセット ラッパー
var PageElements = function(ruleSet) {
ruleSet = ruleSet || [];
this.rules = [];
for (var i = 0; i < ruleSet.length; i++) {
if (ruleSet[i].target && ruleSet[i].action) {
this.rules.push(ruleSet[i]);
}
}
}
PageElements.prototype.run = function(elem) {
for (var i = 0; i < this.rules.length; i++) {
this.rules[i].action.apply(elem.find(this.rules.target));
}
}
var GlobalRules = new PageElements([
{
"target": ".draggable",
"action": function() { this.draggable({
cancel: "div#scrolling, .content",
containment: "document"
});
}
},
{
"target" :".resizable",
"action": function() {
this.resizable({
handles: "all",
zIndex: 0,
containment: "document"
});
}
}
]);
GlobalRules.run($("body"));
// If you need to add elements later on, you can just call GlobalRules.run(yourNewElement);
これは、標準ではないイベントや作成イベントがある場合にルールを登録するための非常に強力な方法です。これは、pub/sub 通知システムと組み合わせて、要素を作成するたびに発生するイベントにバインドすると、非常に厄介です。Fire'n'forget モジュラー イベント バインディング!