আমি এমন কিছু সাধারণ জিনিস নিয়ে যাব যা আপনাকে সহায়তা করতে পারে বা নাও পারে। কিছু সুস্পষ্ট হতে পারে, কিছু চূড়ান্ত arcane হতে পারে।
পদক্ষেপ 1: আপনার কোডটি বিভাগীয় করুন
আপনার কোডকে একাধিক, মডিউলার ইউনিটগুলিতে পৃথক করা একটি খুব ভাল প্রথম পদক্ষেপ। "একসাথে" কী কাজ করে তা গোটা করুন এবং তাদের নিজস্ব সামান্য এনসেডড ইউনিটে রাখুন। আপাতত ফর্ম্যাটটি নিয়ে চিন্তা করবেন না, এটিকে ইনলাইন রাখুন। কাঠামোটি পরবর্তী পয়েন্ট।
সুতরাং, ধরুন আপনার মতো একটি পৃষ্ঠা রয়েছে:
বগিটি করা বোধগম্য হবে যাতে রক্ষণাবেক্ষণের স্বাচ্ছন্দ্যের জন্য (এবং 1000 লাইনের মধ্য দিয়ে চলাচল না করার জন্য) সমস্ত শিরোনাম সম্পর্কিত ইভেন্ট হ্যান্ডলার / বাইন্ডার সেখানে থাকে।
এরপরে গ্রুন্টের মতো কোনও সরঞ্জাম ব্যবহার করতে পারেন আপনার জেএসটিকে পুনরায় একক ইউনিটে তৈরি করতে।
পদক্ষেপ 1 ক: নির্ভরতা ব্যবস্থাপনা
এএমডি নামক কিছু বাস্তবায়নের জন্য প্রয়োজনীয় জেএস বা কমনজেএস এর মতো একটি লাইব্রেরি ব্যবহার করুন । অ্যাসিঙ্ক্রোনাস মডিউল লোডিং আপনাকে আপনার কোডটি কীসের উপর নির্ভর করে তা স্পষ্ট করে জানাতে দেয় যা এরপরে আপনাকে কোডটিতে লাইব্রেরি-কলিং অফলোড করতে দেয়। আপনি কেবল আক্ষরিকভাবে বলতে পারেন "এটির jQuery প্রয়োজন" এবং এএমডি এটি লোড করবে এবং jQuery উপলভ্য হলে আপনার কোডটি কার্যকর করবে ।
এটিতে একটি লুকানো রত্নও রয়েছে: লাইব্রেরি লোডিংটি দ্বিতীয়টি ডোম প্রস্তুতের পরে সম্পন্ন হবে, আগে নয়। এটি আর আপনার পৃষ্ঠার লোড-আপকে থামায় না!
পদক্ষেপ 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: একটি কাঠামো বাছুন!
যদি আপনি আরও পুনরাবৃত্তিগুলি আধুনিকীকরণ এবং হ্রাস করতে চান তবে এমভিসি (মডেল - দেখুন - নিয়ামক) পদ্ধতির বাস্তবায়ন করে এমন চারপাশে দুর্দান্ত কিছু ফ্রেমওয়ার্ক রয়েছে। আমার প্রিয় ব্যাকবোন / মেরুদণ্ড, তবে, কৌণিক, ইআইআই, এছাড়াও রয়েছে ... তালিকাটি চলছে।
একটি মডেল আপনার ডেটা উপস্থাপন করে।
একটি ভিউ আপনার মার্ক আপ এবং এর সাথে সম্পর্কিত সমস্ত ইভেন্টের প্রতিনিধিত্ব করে
একটি কন্ট্রোলার আপনার ব্যবসায়ের যুক্তি উপস্থাপন করে - অন্য কথায়, নিয়ামক পৃষ্ঠাটি কী লোড করতে হবে এবং কোন মডেলগুলি ব্যবহার করতে হবে তা জানিয়ে দেয়।
এটি একটি তাৎপর্যপূর্ণ শিক্ষণীয় পদক্ষেপ হবে তবে পুরষ্কারটি মূল্যবান: এটি স্প্যাগেটির চেয়ে পরিষ্কার, মডুলার কোডের পক্ষে।
আপনি করতে পারেন এমন প্রচুর অন্যান্য জিনিস রয়েছে, সেগুলি কেবল গাইডলাইন এবং ধারণা।
কোড-নির্দিষ্ট পরিবর্তন
আপনার কোডে কিছু নির্দিষ্ট উন্নতি এখানে রয়েছে:
$('.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) {
}
}
হঠাৎ করে, আপনার অনুলিপি পেস্ট না করে আপনার কোডের যে কোনও জায়গা থেকে একটি স্ট্যান্ডার্ড স্তর তৈরি করার উপায় রয়েছে। আপনি পাঁচটি ভিন্ন জায়গায় এটি করছেন। আমি সবেমাত্র আপনার পাঁচটি অনুলিপি-পেস্ট সংরক্ষণ করেছি।
আরো একটা:
// কর্মের জন্য নিয়ম মোড়ক
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);
নিয়মগুলি নিবন্ধভুক্ত করার এটি একটি খুব শক্তিশালী উপায় যদি আপনার যদি মানক না হয় বা তৈরির ইভেন্ট হয় না। এটি যখন পব / সাব নোটিফিকেশন সিস্টেমের সাথে একত্রিত হয় এবং যখনই আপনি উপাদান তৈরি করেন তখন আপনি গুলি চালানোর সময় আবদ্ধ হয়েও গুরুতরভাবে কিক-অ্যাস হয়। ফায়ার'অনফরজেট মডিউলারের ইভেন্ট বন্ধন!