あなたを助けるかもしれないし、そうでないかもしれないいくつかの簡単なことを説明します。明白なものもあれば、非常に難解なものもあります。
ステップ1：コードを区分する
コードを複数のモジュール式ユニットに分離することは、非常に優れた最初のステップです。「一緒に」機能するものを切り上げ、それらを小さな専用の収納ユニットに入れます。現時点ではフォーマットについて心配する必要はありません。インラインにしてください。構造は後のポイントです。
したがって、次のようなページがあるとします。
メンテナンスを容易にするために、ヘッダー関連のすべてのイベントハンドラー/バインダーがそこにあるように区分けすることは理にかなっています（そして1000行をふるいにかける必要はありません）。
その後、Gruntなどのツールを使用して、JSを1つのユニットに再構築できます。
ステップ1a：依存関係の管理
AMDと呼ばれるものを実装するには、RequireJSやCommonJSなどのライブラリを使用します。非同期モジュールロードを使用すると、コードが依存しているものを明示的に示すことができます。これにより、ライブラリ呼び出しをコードにオフロードできます。文字通り「これにはjQueryが必要です」と言うだけで、AMDがそれをロードし、jQueryが利用可能になったときにコードを実行します。
これには隠されたgemもあります。ライブラリのロードは、DOMが準備できた2番目に行われます。これにより、ページのロードが停止することはありません。
ステップ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などもあります...リストは続きます。
A モデルは、あなたのデータを表します。
A Viewは、あなたのマークアップとそれに関連するすべてのイベントを表し
A コントローラは、ビジネスロジックを表します-言い換えれば、コントローラは、使用する負荷に何を望むと何モデルのページに指示します。
これは重要な学習ステップになりますが、賞はそれだけの価値があります。スパゲッティよりもクリーンでモジュール化されたコードが優先されます。
あなたができることは他にもたくさんありますが、それらは単なるガイドラインとアイデアです。
コード固有の変更
ここにあなたのコードへのいくつかの特定の改善があります：
$('.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モジュールイベントバインディング！