জাভাস্ক্রিপ্টের জন্য ব্যবহারিকভাবে প্রযোজ্য এমন কোনও ওও-নীতি রয়েছে কি?


79

জাভাস্ক্রিপ্ট একটি প্রোটোটাইপ-ভিত্তিক অবজেক্ট ওরিয়েন্টেড ভাষা তবে বিভিন্ন উপায়ে ক্লাস-ভিত্তিক হয়ে উঠতে পারে:

  • নিজের দ্বারা ক্লাস হিসাবে ব্যবহার করার জন্য ফাংশনগুলি লিখছি
  • ফ্রেমওয়ার্কে একটি নিফটি ক্লাস সিস্টেম ব্যবহার করুন (যেমন মটুলস ক্লাস। ক্লাস )
  • কফিফ্রিপ্ট থেকে এটি তৈরি করুন

শুরুতে আমি জাভাস্ক্রিপ্টে শ্রেণিভিত্তিক কোড লেখার প্রবণতা দেখিয়েছি এবং এতে প্রচুরভাবে নির্ভর করেছি। সম্প্রতি তবে আমি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কগুলি এবং নোডজেএস ব্যবহার করেছি , যা শ্রেণীর এই ধারণা থেকে দূরে চলে যায় এবং কোডের গতিশীল প্রকৃতির উপর আরও নির্ভর করে যেমন:

  • Async প্রোগ্রামিং, কলব্যাক / ইভেন্টগুলি ব্যবহার করে এমন লিখন কোড ব্যবহার এবং লিখন
  • প্রয়োজনীয় জেএস সহ মডিউলগুলি লোড করা হচ্ছে (যাতে তারা বিশ্বব্যাপী নেমস্পেসে ফাঁস না হয়)
  • কার্যকরী প্রোগ্রামিং ধারণা যেমন তালিকা বোঝার জন্য (মানচিত্র, ফিল্টার, ইত্যাদি)
  • অন্যান্য বিষয়ের মধ্যে

আমি এখন পর্যন্ত যা সংগ্রহ করেছি তা হ'ল যে বেশিরভাগ ওও নীতিগুলি এবং নিদর্শনগুলি আমি পড়েছি (যেমন সোলিড এবং জিওএফ নিদর্শনগুলি) স্মার্টটাক এবং সি ++ এর মতো ক্লাস ভিত্তিক ওও ভাষার জন্য লেখা হয়েছিল। তবে এর মধ্যে কি জাভাস্ক্রিপ্টের মতো প্রোটোটাইপ-ভিত্তিক ভাষার জন্য প্রযোজ্য?

এমন কোন নীতি বা নিদর্শন রয়েছে যা জাভাস্ক্রিপ্টের জন্য সুনির্দিষ্ট? কলব্যাক হেল্ক , অশুভ বিভক্তি বা অন্য কোনও বিরোধী-নিদর্শন ইত্যাদি এড়াতে নীতিগুলি

উত্তর:


116

অনেকগুলি সম্পাদনার পরে, এই উত্তরটি দৈর্ঘ্যে দৈত্যে পরিণত হয়েছে। আমি অগ্রিম ক্ষমাপ্রার্থী.

প্রথমত, eval()সর্বদা খারাপ নয় এবং উদাহরণস্বরূপ অলস-মূল্যায়নে ব্যবহৃত হলে কর্মক্ষমতা থেকে উপকার বয়ে আনতে পারে। অলস-মূল্যায়ন অলস-লোডিংয়ের সমান, তবে আপনি অবশ্যই কোডটি স্ট্রিংয়ের মধ্যে সংরক্ষণ করেন এবং তারপরে কোডটি ব্যবহার evalবা new Functionমূল্যায়নের জন্য। আপনি যদি কিছু কৌশল ব্যবহার করেন তবে তা মন্দের চেয়ে অনেক বেশি কার্যকর হয়ে উঠবে, তবে আপনি যদি তা না করেন তবে এটি খারাপ কাজের দিকে পরিচালিত করতে পারে। আপনি আমার মডিউল সিস্টেমটি দেখতে পারেন যা এই প্যাটার্নটি ব্যবহার করে: https://github.com/TheHydroImpulse/resolve.js । রেজলভ.জেএস প্রতিটি মডিউলে উপলব্ধ new Functionকমনজেএস exportsএবং moduleভেরিয়েবলগুলিকে মডেল করতে প্রাথমিকভাবে পরিবর্তে ইওল ব্যবহার করে এবং আপনার কোডকে new Functionএকটি বেনামি ফাংশনের অভ্যন্তরে আবৃত করে, যদিও আমি ফাংশনটিতে প্রতিটি মডিউল মোড়ানোর কাজটি করি যা আমি এওল এর সাথে সম্মিলিতভাবে এটি করি।

আপনি এটি সম্পর্কে নিম্নলিখিত দুটি নিবন্ধে আরও পড়ুন, পরে প্রথমটি উল্লেখ করে।

সম্প্রীতি জেনারেটর

এখন যে জেনারেটরগুলি অবশেষে ভি 8 এবং এইভাবে নোড.জেজে নেমেছে, একটি পতাকা ( --harmonyবা --harmony-generators) এর নিচে। এগুলি আপনার কাছে থাকা কলব্যাকের পরিমাণকে হ্রাস করে। এটি অ্যাসিক্রোনাস কোডটি সত্যই দুর্দান্ত করে তোলে।

জেনারেটর ব্যবহারের সর্বোত্তম উপায় হ'ল একরকম নিয়ন্ত্রণ-প্রবাহ লাইব্রেরি নিয়োগ করা। এটি জেনারেটরের মধ্যে ফলনের সাথে সাথে প্রবাহ চালিয়ে যেতে সক্ষম করবে।

সংক্ষিপ্তবৃত্তি / সংক্ষিপ্ত বিবরণ:

যদি আপনি জেনারেটরের সাথে অপরিচিত হন তবে তারা বিশেষ ফাংশনগুলির (যেমন জেনারেটর বলে) কার্যকর করা বন্ধ করার একটি অনুশীলন। এই অনুশীলনটিকে কীওয়ার্ড ব্যবহার করে ফলন বলা হয় yield

উদাহরণ:

function* someGenerator() {
  yield []; // Pause the function and pass an empty array.
}

সুতরাং, আপনি যখনই এই ফাংশনটিকে প্রথমবার কল করবেন, এটি কোনও নতুন জেনারেটরের উদাহরণ ফিরে আসবে। এটি আপনাকে next()জেনারেটর শুরু বা পুনরায় শুরু করতে সেই অবজেক্টটিতে কল করার অনুমতি দেয় ।

var gen = someGenerator();
gen.next(); // { value: Array[0], done: false }

আপনি ফিরে nextনা doneআসা পর্যন্ত কল রাখা হবে true। এর অর্থ জেনারেটরটি সম্পূর্ণরূপে এটি কার্যকর করে শেষ করেছে, এবং কোনও yieldবিবৃতি নেই।

নিয়ন্ত্রণ প্রবাহ:

আপনি দেখতে পাচ্ছেন, জেনারেটর নিয়ন্ত্রণ করা স্বয়ংক্রিয় হয় না। আপনার প্রত্যেককে ম্যানুয়ালি চালিয়ে যাওয়া দরকার। এজন্য কো- এর মতো নিয়ন্ত্রণ-প্রবাহের গ্রন্থাগারগুলি ব্যবহৃত হয়।

উদাহরণ:

var co = require('co');

co(function*() {
  yield query();
  yield query2();
  yield query3();
  render();
});

এটি নোডে সমস্ত কিছু লেখার (এবং ফেসবুকের রিজেনারেটর সহ ব্রাউজার যা ইনপুট হিসাবে, সোর্স কোড গ্রহণ করে যা সাদৃশ্য জেনারেটরগুলি ব্যবহার করে এবং সম্পূর্ণ সুসংগত ES5 কোডটি বিচ্ছিন্ন করে) একটি সিঙ্ক্রোনাস শৈলীতে লিখতে পারে ।

জেনারেটরগুলি এখনও বেশ নতুন, এবং এর জন্য নোড.জেএস> = v11.2 প্রয়োজন। আমি যেমন লিখছি, v0.11.x এখনও অস্থির এবং সুতরাং অনেক নেটিভ মডিউলগুলি ভেঙে গেছে এবং v0.12 অবধি থাকবে, যেখানে নেটিভ এপিআই শান্ত হয়ে যাবে।


আমার মূল উত্তর যুক্ত করতে:

আমি সম্প্রতি জাভাস্ক্রিপ্টে আরও কার্যকরী এপিআই পছন্দ করছি। কনভেনশনটি যখন প্রয়োজন হয় তখন পর্দার পিছনে ওওপি ব্যবহার করে তবে এটি সবকিছুকে সহজতর করে।

উদাহরণস্বরূপ দেখুন একটি ভিউ সিস্টেম (ক্লায়েন্ট বা সার্ভার)।

view('home.welcome');

এর চেয়ে পড়া বা অনুসরণ করা অনেক সহজ:

var views = {};
views['home.welcome'] = new View('home.welcome');

viewফাংশন কেবল পরীক্ষা একই দৃশ্য ইতিমধ্যে একটি স্থানীয় মানচিত্রে যদি উপস্থিত থাকে। যদি দৃশ্যটি বিদ্যমান না থাকে তবে এটি একটি নতুন দর্শন তৈরি করবে এবং মানচিত্রে একটি নতুন এন্ট্রি যুক্ত করবে।

function view(name) {
  if (!name) // Throw an error

  if (view.views[name]) return view.views[name];

  return view.views[name] = new View({
    name: name
  });
}

// Local Map
view.views = {};

চূড়ান্ত বেসিক, তাই না? আমি এটি নাটকীয়ভাবে পাবলিক ইন্টারফেসকে সহজতর করে এবং এটি ব্যবহার করা সহজ করে। আমি চেইন-সক্ষমতাও নিযুক্ত করি ...

view('home.welcome')
   .child('menus')
   .child('auth')

টাওয়ার, একটি ফ্রেমওয়ার্ক যা আমি বিকাশ করছি (অন্য কারও সাথে) বা পরবর্তী সংস্করণটি বিকাশ করে (0.5.০) এর বেশিরভাগ ক্ষেত্রেই এই ইন্টারফেসগুলি প্রকাশ করে function

কিছু লোক "কলব্যাক হেল্ক" এড়ানোর উপায় হিসাবে তন্তুগুলির সুবিধা গ্রহণ করে। এটি জাভাস্ক্রিপ্টের পক্ষে একেবারেই আলাদা দৃষ্টিভঙ্গি, এবং আমি এর বিশাল ফ্যান নই, তবে অনেকগুলি ফ্রেমওয়ার্ক / প্ল্যাটফর্ম এটি ব্যবহার করে; উল্কাসহ, যেমন তারা নোড.জেএসকে থ্রেড / প্রতি সংযোগ প্ল্যাটফর্ম হিসাবে বিবেচনা করে।

কলব্যাক হেল্প এড়াতে আমি বরং একটি বিমূর্ত পদ্ধতি ব্যবহার করব। এটি জটিল হয়ে উঠতে পারে তবে এটি প্রকৃত অ্যাপ্লিকেশন কোডটিকে ব্যাপকভাবে সরল করে। যখন নির্মাণের সাহায্য TowerJS ফ্রেমওয়ার্ক, এটা আমাদের সমস্যা অনেক সমাধান, যদিও, আপনি সম্ভবত এখনও callbacks কিছু স্তর আছে, কিন্তু পাখির গভীর নয়।

// app/config/server/routes.js
App.Router = Tower.Router.extend({
  root: Tower.Route.extend({
    route: '/',
    enter: function(context, next) {
      context.postsController.page(1).all(function(error, posts) {
        context.bootstrapData = {posts: posts};
        next();
      });
    },
    action: function(context, next) {
      context.response.render('index', context);
      next();
    },
    postRoutes: App.PostRoutes
  })
});

আমাদের বর্তমানে বিকাশমান, রাউটিং সিস্টেম এবং "কন্ট্রোলার" এর একটি উদাহরণ, যদিও গতানুগতিক "রেলের মতো" থেকে একেবারেই আলাদা। তবে উদাহরণটি অত্যন্ত শক্তিশালী এবং কলব্যাকের পরিমাণকে হ্রাস করে এবং বিষয়গুলি মোটামুটি সুস্পষ্ট করে তোলে।

এই পদ্ধতির সমস্যাটি হ'ল সবকিছু বিমূর্ত। কিছুই যেমন হয় তেমন চালায় না এবং এর পিছনে একটি "কাঠামো" দরকার। তবে যদি এই ধরণের বৈশিষ্ট্য এবং কোডিং স্টাইলটি কোনও কাঠামোর মধ্যে প্রয়োগ করা হয়, তবে এটি একটি বিশাল জয়।

জাভাস্ক্রিপ্টে নিদর্শনগুলির জন্য, এটি সৎভাবে নির্ভর করে। কফিস্ক্রিপ্ট, অ্যাম্বার বা যে কোনও "শ্রেণি" কাঠামো / অবকাঠামো ব্যবহার করার সময় উত্তরাধিকার কেবলমাত্র সত্যই কার্যকর। যখন আপনি একটি "খাঁটি" জাভাস্ক্রিপ্ট পরিবেশের মধ্যে থাকেন, তখন প্রচলিত প্রোটোটাইপ ইন্টারফেস ব্যবহার করে কবজির মতো কাজ করে:

function Controller() {
    this.resource = get('resource');
}

Controller.prototype.index = function(req, res, next) {
    next();
};

কমপক্ষে আমার জন্য, অবজেক্ট তৈরির ক্ষেত্রে ভিন্ন পদ্ধতির ব্যবহার করে এমবার.জেএস শুরু হয়েছিল। প্রতিটি প্রোটোটাইপ পদ্ধতি স্বতন্ত্রভাবে নির্মাণের পরিবর্তে, আপনি একটি মডিউল-জাতীয় ইন্টারফেস ব্যবহার করবেন।

Ember.Controller.extend({
   index: function() {
      this.hello = 123;
   },
   constructor: function() {
      console.log(123);
   }
});

এগুলি পৃথক "কোডিং" শৈলী, তবে আপনার কোড বেসে যুক্ত করবেন না।

পলিমরফিজ্ম

পলিমারফিজম বিশুদ্ধ জাভাস্ক্রিপ্টে বহুল ব্যবহৃত হয় না, যেখানে উত্তরাধিকার নিয়ে কাজ করা এবং "শ্রেণি" -র মতো মডেল অনুলিপি করার জন্য প্রচুর বয়লারপ্লিট কোডের প্রয়োজন হয়।

ইভেন্ট / উপাদান ভিত্তিক নকশা

ইভেন্ট-ভিত্তিক এবং উপাদান-ভিত্তিক মডেলগুলি হ'ল বিজয়ী আইএমও, বা কাজ করা সবচেয়ে সহজ, বিশেষত নোড.জেএস এর সাথে কাজ করার সময়, যার একটি অন্তর্নির্মিত ইভেন্টইমিটার উপাদান রয়েছে, যদিও, এই জাতীয় নির্গমনকারীগুলি প্রয়োগ করা তুচ্ছ, এটি কেবল একটি দুর্দান্ত সংযোজন ।

event.on("update", function(){
    this.component.ship.velocity = 0;
    event.emit("change.ship.velocity");
});

একটি উদাহরণ, তবে এটি কাজ করার জন্য একটি দুর্দান্ত মডেল। বিশেষত একটি গেম / উপাদান কেন্দ্রিক প্রকল্পে।

কম্পোনেন্ট ডিজাইন নিজেই একটি পৃথক ধারণা, তবে আমি মনে করি এটি ইভেন্ট সিস্টেমের সাথে একত্রে অত্যন্ত কার্যকরভাবে কাজ করে। গেমগুলি componentতিহ্যগতভাবে উপাদান ভিত্তিক নকশার জন্য পরিচিত, যেখানে অবজেক্ট ওরিয়েন্টেড প্রোগ্রামিং আপনাকে কেবল এতদূর নিয়ে যায়।

উপাদান ভিত্তিক নকশার ব্যবহার রয়েছে। এটি আপনার বিল্ডিংয়ের সিস্টেমের উপর নির্ভর করে। আমি নিশ্চিত এটি ওয়েব অ্যাপ্লিকেশনগুলির সাথে কাজ করবে তবে এটি গেমিংয়ের পরিবেশে খুব ভালভাবে কাজ করবে কারণ বস্তুর সংখ্যা এবং পৃথক সিস্টেমের কারণে, তবে অন্যান্য উদাহরণ অবশ্যই বিদ্যমান।

পাব / সাব প্যাটার্ন

ইভেন্ট-বাঁধাই এবং পাব / সাব একই। একত্রিত ভাষার কারণে পড / সাব প্যাটার্নটি নোড.জেএস অ্যাপ্লিকেশনগুলিতে সত্যই জ্বলজ্বল করে তবে এটি যে কোনও ল্যাঙ্গুয়েজে কাজ করতে পারে। রিয়েল-টাইম অ্যাপ্লিকেশন, গেমস ইত্যাদিতে অত্যন্ত ভাল কাজ করে ..

model.subscribe("message", function(event){
    console.log(event.params.message);
});

model.publish("message", {message: "Hello, World"});

পর্যবেক্ষক

এটি একটি বিষয়গত হতে পারে, কারণ কিছু লোক পর্যবেক্ষক প্যাটার্নটিকে পাব / সাব হিসাবে ভাবতে পছন্দ করে তবে তাদের পার্থক্য রয়েছে।

"পর্যবেক্ষক হ'ল একটি নকশার প্যাটার্ন যেখানে কোনও বস্তু (বিষয় হিসাবে পরিচিত) তার উপর নির্ভর করে (পর্যবেক্ষক) অবজেক্টের একটি তালিকা বজায় রাখে এবং স্বয়ংক্রিয়ভাবে তাদের রাষ্ট্রের যে কোনও পরিবর্তন সম্পর্কে অবহিত করে" " - অবজারভার প্যাটার্ন

পর্যবেক্ষক প্যাটার্নটি টিপিকাল পাব / সাব সিস্টেমের বাইরে এক ধাপ। বস্তুর একে অপরের সাথে কঠোর সম্পর্ক বা যোগাযোগের পদ্ধতি রয়েছে। একটি বিষয় "বিষয়" নির্ভরকারীদের "পর্যবেক্ষক" এর একটি তালিকা রাখবে। বিষয়টি তার পর্যবেক্ষকদের আপ টু ডেট রাখে।

প্রতিক্রিয়াশীল প্রোগ্রামিং

প্রতিক্রিয়াশীল প্রোগ্রামিং একটি ছোট, আরও অজানা ধারণা, বিশেষত জাভাস্ক্রিপ্টে। এখানে একটি ফ্রেমওয়ার্ক / লাইব্রেরি রয়েছে (যা আমি জানি) এটি এই "প্রতিক্রিয়াশীল প্রোগ্রামিং" ব্যবহারের জন্য এপিআইয়ের সাথে কাজ করা সহজ করে।

প্রতিক্রিয়াশীল প্রোগ্রামিংয়ের সংস্থানসমূহ:

মূলত, এটিতে ডেটা সিঙ্ক করার একটি সেট রয়েছে (এটি ভেরিয়েবল, ফাংশন ইত্যাদি ..)।

 var a = 1;
 var b = 2;
 var c = a + b;

 a = 2;

 console.log(c); // should output 4

আমি বিশ্বাস করি প্রতিক্রিয়াশীল প্রোগ্রামিং যথেষ্ট পরিমাণে লুকানো রয়েছে, বিশেষত জরুরী ভাষায়। এটি একটি আশ্চর্যজনকভাবে শক্তিশালী প্রোগ্রামিং দৃষ্টান্ত, বিশেষত নোড.জেএস-এ in উল্কা এটির নিজস্ব প্রতিক্রিয়াশীল ইঞ্জিন তৈরি করেছেন যাতে কাঠামোটি মূলত উপর ভিত্তি করে। পর্দার আড়ালে উল্কাটির কার্যকারিতা কীভাবে কাজ করে? এটি অভ্যন্তরীণভাবে কীভাবে কাজ করে তার একটি দুর্দান্ত ওভারভিউ।

Meteor.autosubscribe(function() {
   console.log("Hello " + Session.get("name"));
});

এটি এর মান প্রদর্শন করে, সাধারণত সম্পাদন করে nameতবে আমরা যদি এটি পরিবর্তন করি

সেশন.সেট ('নাম', 'বব');

এটি কনসোল.লগ প্রদর্শন করে পুনরায় আউটপুট দেবে Hello Bob। একটি প্রাথমিক উদাহরণ, তবে আপনি এই কৌশলটি রিয়েল-টাইম ডেটা মডেল এবং লেনদেনে প্রয়োগ করতে পারেন। আপনি এই প্রোটোকলের পিছনে অত্যন্ত শক্তিশালী সিস্টেম তৈরি করতে পারেন।

উল্কা এর ...

প্রতিক্রিয়াশীল প্যাটার্ন এবং পর্যবেক্ষক প্যাটার্ন বেশ একই রকম। প্রধান পার্থক্য হ'ল পর্যবেক্ষক প্যাটার্নটি সাধারণত পুরো অবজেক্ট / ক্লাসের সাথে ডেটা প্রবাহকে বনাম প্রতিক্রিয়াশীল প্রোগ্রামিংয়ের পরিবর্তে নির্দিষ্ট বৈশিষ্ট্যে ডেটা-প্রবাহকে বর্ণনা করে।

উল্কা প্রতিক্রিয়াশীল প্রোগ্রামিংয়ের একটি দুর্দান্ত উদাহরণ। জাভাস্ক্রিপ্টের দেশীয় মান পরিবর্তনের ইভেন্টের অভাবের কারণে এটি রানটাইম কিছুটা জটিল। অন্যান্য ক্লায়েন্ট-সাইড ফ্রেমওয়ার্কগুলি, এমবার.জেএস এবং অ্যাঙ্গুলার জেএসও প্রতিক্রিয়াশীল প্রোগ্রামিং ব্যবহার করে (কিছুটা প্রসারিত করার জন্য)।

পরবর্তী দুটি ফ্রেমওয়ার্কগুলি তাদের টেম্পলেটগুলিতে সর্বাধিক উল্লেখযোগ্যভাবে প্রতিক্রিয়াশীল প্যাটার্ন ব্যবহার করে (এটি স্বয়ংক্রিয়ভাবে আপডেট হওয়া)। Angular.js একটি সাধারণ নোংরা চেকিং কৌশল ব্যবহার করে। আমি এটিকে ঠিক প্রতিক্রিয়াশীল প্রোগ্রামিং বলব না, তবে এটি নিকটে, কারণ নোংরা চেকিং রিয়েল-টাইম নয়। এমবার.জেএস বিভিন্ন পদ্ধতির ব্যবহার করে। এম্বার ব্যবহার set()এবং এমন get()পদ্ধতি যা তাদের অবিলম্বে মানগুলি আপডেট করার অনুমতি দেয়। তাদের রানলুপের সাহায্যে এটি অত্যন্ত দক্ষ এবং আরও নির্ভরশীল মানগুলির জন্য অনুমতি দেয়, যেখানে কৌণিকের একটি তাত্ত্বিক সীমা থাকে।

অঙ্গীকার

কলব্যাকগুলির স্থিরতা নয়, কিছুটা ইনডেন্টেশন বের করে, এবং নেস্টেড ফাংশনগুলিকে সর্বনিম্ন রাখে। এটি সমস্যার কিছু সুন্দর বাক্য গঠনও যুক্ত করে।

fs.open("fs-promise.js", process.O_RDONLY).then(function(fd){
  return fs.read(fd, 4096);
}).then(function(args){
  util.puts(args[0]); // print the contents of the file
});

আপনি কলব্যাক ফাংশনগুলিও ছড়িয়ে দিতে পারেন যাতে সেগুলি ইনলাইন না হয় তবে এটি অন্য ডিজাইনের সিদ্ধান্ত।

আরেকটি পদ্ধতি হ'ল ইভেন্টগুলি এবং প্রতিশ্রুতিগুলির সংমিশ্রণ করা যেখানে আপনার যথাযথভাবে অনুষ্ঠান প্রেরণের জন্য কোনও ফাংশন থাকবে, তারপরে আসল কার্যকরী ফাংশনগুলি (যার মধ্যে আসল যুক্তি রয়েছে সেগুলি) একটি নির্দিষ্ট ইভেন্টের সাথে আবদ্ধ হবে। তারপরে আপনি প্রতিটি কলব্যাক পজিশনের মধ্যে প্রেরণকারী পদ্ধতিটি পাস করতে পারবেন, যদিও আপনাকে কিছু কিঙ্কস নিয়ে কাজ করতে হবে যা প্যারামিটারগুলির মতো, কোন ফাংশনে প্রেরণ করা হবে তা জেনে রেখে ...

একক ফাংশন ফাংশন

কলব্যাক হেল্পের একটি বিশাল গণ্ডগোলের পরিবর্তে একটি একক ফাংশনকে একটি টাস্কে রাখুন এবং সেই কাজটি ভালভাবে করুন। কখনও কখনও আপনি নিজের থেকে এগিয়ে যেতে এবং প্রতিটি ফাংশনের মধ্যে আরও কার্যকারিতা যুক্ত করতে পারেন, তবে নিজেকে জিজ্ঞাসা করুন: এটি কি একটি স্বাধীন ফাংশন হতে পারে? ফাংশনটির নাম দিন, এবং এটি আপনার ইনডেন্টেশন পরিষ্কার করে এবং ফলস্বরূপ, কলব্যাক হেল সমস্যাটি পরিষ্কার করে।

শেষ পর্যন্ত, আমি আপনার অ্যাপ্লিকেশনটির জন্য মূলত একটি মেরুদণ্ড তৈরি এবং একটি ছোট "কাঠামো" ব্যবহার করার পরামর্শ দিই এবং বিমূর্ততা তৈরি করতে, ইভেন্ট-ভিত্তিক সিস্টেমের বিষয়ে সিদ্ধান্ত নিতে, বা "ছোট ছোট মডিউলগুলি যেগুলি স্বতন্ত্র "সিস্টেম। আমি বেশ কয়েকটি নোড.জেএস প্রকল্পের সাথে কাজ করেছি যেখানে কোডটি বিশেষত কলব্যাক নরকের সাথে অত্যন্ত অগোছালো ছিল, তবে তারা কোডিং শুরু করার আগে চিন্তারও অভাব ছিল। আপনার এপিআই এবং সিনট্যাক্সের ক্ষেত্রে বিভিন্ন সম্ভাবনার মধ্য দিয়ে ভাবতে সময় দিন।

বেন নাদেল জাভাস্ক্রিপ্ট সম্পর্কে কিছু সত্যই ভাল ব্লগ পোস্ট করেছেন এবং কিছু কিছু কঠোর এবং উন্নত নিদর্শন যা আপনার পরিস্থিতিতে কাজ করতে পারে। কিছু ভাল পোস্ট যা আমি জোর দেব:

নিয়ন্ত্রণ বিপর্যয়

কলব্যাক হেলকের সাথে ঠিক সম্পর্কিত না হলেও এটি সামগ্রিক আর্কিটেকচারকে বিশেষত ইউনিট পরীক্ষায় সহায়তা করতে পারে।

ইনভার্সন-কন্ট্রোলের দুটি প্রধান উপ-সংস্করণ হ'ল ডিপেন্ডেন্সি ইনজেকশন এবং পরিষেবা লোকেটার। নির্ভরতা ইনজেকশনের বিপরীতে আমি সার্ভিস লোকেটারটিকে জাভাস্ক্রিপ্টের মধ্যে সবচেয়ে সহজ বলে মনে করি। কেন? মূলত কারণ জাভাস্ক্রিপ্ট একটি গতিশীল ভাষা এবং কোনও স্ট্যাটিক টাইপিং বিদ্যমান নেই exists জাভা এবং সি #, অন্যদের মধ্যে নির্ভরতা ইনজেকশনের জন্য "পরিচিত" কারণ আপনার প্রকারগুলি সনাক্ত করতে সক্ষম, এবং সেগুলি ইন্টারফেস, শ্রেণি ইত্যাদিতে তৈরি করেছে ... এটি বিষয়গুলি মোটামুটি সহজ করে তোলে। তবে আপনি জাভাস্ক্রিপ্টের মধ্যে এই কার্যকারিতাটি পুনরায় তৈরি করতে পারবেন, যদিও এটি অভিন্ন এবং কিছুটা হ্যাকি হতে পারে না, আমি আমার সিস্টেমে কোনও সার্ভিস লোকেটার ব্যবহার করতে পছন্দ করি।

যে কোনও ধরণের বিপরীতকরণ-নিয়ন্ত্রণ আপনার কোডটি নাটকীয়ভাবে পৃথক মডিউলগুলিতে ডিকুয়াল করবে যা যে কোনও সময় উপহাস বা নকল হতে পারে। আপনার রেন্ডারিং ইঞ্জিনটির দ্বিতীয় সংস্করণটি তৈরি করা হয়েছে? দুর্দান্ত, কেবল নতুনটির জন্য পুরানো ইন্টারফেসের বিকল্প দিন। পরিষেবা হোল্ডারগুলি নতুন হারমোনি প্রক্সিগুলির সাথে বিশেষভাবে আকর্ষণীয়, যদিও কেবলমাত্র নোড.জেএস এর মধ্যে কার্যকরভাবে ব্যবহারযোগ্য, এটি তার পরিবর্তে তার Service.get('render');পরিবর্তে এবং এর পরিবর্তে একটি সুন্দর API সরবরাহ করে Service.render। আমি বর্তমানে এই ধরণের সিস্টেমে কাজ করছি: https://github.com/TheHydroImpulse/Ettore

যদিও স্থির টাইপিংয়ের অভাব (জাভা, সি #, পিএইচপি - তে নির্ভরতা ইনজেকশনে কার্যকর ব্যবহারের কার্যকর কারণ হিসাবে স্ট্যাটিক টাইপিং - এটি স্ট্যাটিক টাইপড নয়, তবে এতে টাইপ ইঙ্গিত রয়েছে)) এটি একটি নেতিবাচক পয়েন্ট হিসাবে দেখা যেতে পারে, আপনি পারেন অবশ্যই এটি একটি শক্তিশালী পয়েন্টে পরিণত করুন। যেহেতু সবকিছু গতিশীল, আপনি একটি "জাল" স্ট্যাটিক সিস্টেম ইঞ্জিনিয়ার করতে পারেন। কোনও সার্ভিস লোকেটারের সাথে একত্রে আপনি প্রতিটি উপাদান / মডিউল / শ্রেণি / উদাহরণ কোনও টাইপের সাথে আবদ্ধ করতে পারেন।

var Service, componentA;

function Manager() {
  this.instances = {};
}

Manager.prototype.get = function(name) {
  return this.instances[name];
};

Manager.prototype.set = function(name, value) {
  this.instances[name] = value;
};

Service = new Manager();
componentA = {
  type: "ship",
  value: new Ship()
};

Service.set('componentA', componentA);

// DI
function World(ship) {
  if (ship === Service.matchType('ship', ship))
    this.ship = new ship();
  else
    throw Error("Wrong type passed.");
}

// Use Case:
var worldInstance = new World(Service.get('componentA'));

একটি সরল উদাহরণ। একটি বাস্তব বিশ্বের, কার্যকর ব্যবহারের জন্য, আপনাকে এই ধারণাটি আরও নেওয়া উচিত, তবে যদি আপনি সত্যিকারের traditionalতিহ্যগত নির্ভরতা ইনজেকশন চান তবে এটি আপনার সিস্টেমে ডিকুয়াল করতে সহায়তা করতে পারে। আপনার এই ধারণাটি নিয়ে কিছুটা ভাবা দরকার। আগের উদাহরণটিতে আমি তেমন চিন্তাভাবনা করি নি।

মডেল দেখুন-কন্ট্রোলার

সবচেয়ে সুস্পষ্ট নিদর্শন এবং ওয়েবে সর্বাধিক ব্যবহৃত। কয়েক বছর আগে, জিকুয়েরি সমস্ত ক্রোধ ছিল এবং তাই, জিকুয়েরি প্লাগইনগুলির জন্ম হয়েছিল। আপনার ক্লায়েন্ট-সাইডে ফুল-অন ফ্রেমওয়ার্কের দরকার নেই, কেবল জ্যাকুয়ারি এবং কয়েকটি প্লাগইন ব্যবহার করুন।

এখন, বিশাল ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক যুদ্ধ রয়েছে। যার বেশিরভাগই এমভিসি প্যাটার্ন ব্যবহার করে এবং তারা সকলেই এটি আলাদাভাবে ব্যবহার করে। এমভিসি সর্বদা একইরকম হয় না।

আপনি যদি theতিহ্যবাহী প্রোটোটাইপাল ইন্টারফেস ব্যবহার করে থাকেন, এমভিসির সাথে কাজ করার সময় আপনার সিনট্যাকটিকাল চিনি বা একটি দুর্দান্ত এপিআই পেতে খুব কষ্ট হতে পারে, যদি না আপনি কিছু ম্যানুয়াল কাজ করতে চান। এমবার.জেএস একটি "শ্রেণি" / অবজেক্ট "সিস্টেম তৈরি করে এটি সমাধান করে A একটি নিয়ামক দেখতে পাবেন:

 var Controller = Ember.Controller.extend({
      index: function() {
        // Do something....
      }
 });

বেশিরভাগ ক্লায়েন্ট-সাইড লাইব্রেরিগুলি ভিভি-হেল্পারদের (ভিউ হওয়া) এবং টেমপ্লেটগুলি (ভিউ হয়ে ওঠা) প্রবর্তন করে এমভিসি প্যাটার্নটি প্রসারিত করে।


নতুন জাভাস্ক্রিপ্ট বৈশিষ্ট্য:

এটি কেবল তখন কার্যকর হবে যদি আপনি নোড.জেএস ব্যবহার করেন তবে তা অমূল্য। ব্রেন্ডন আইচের নোডকনফ-এ এই আলোচনাটি কিছু নতুন নতুন বৈশিষ্ট্য নিয়ে এসেছে। প্রস্তাবিত ফাংশন সিনট্যাক্স এবং বিশেষত Task.js জেএস লাইব্রেরি।

এটি সম্ভবত ফাংশন নেস্টিংয়ের বেশিরভাগ সমস্যার সমাধান করবে এবং ফাংশন ওভারহেডের অভাবের কারণে কিছুটা আরও ভাল পারফরম্যান্স নিয়ে আসবে।

আমি খুব নিশ্চিত নই যে ভি 8 এটিকে দেশীয়ভাবে সমর্থন করে কিনা, সর্বশেষে আমি আপনাকে কয়েকটি পতাকা সক্রিয় করার জন্য প্রয়োজনীয় পরীক্ষা করেছিলাম তবে এটি স্পাইডারমনকি ব্যবহার করে এমন নোড.জেএস এর একটি বন্দরে কাজ করে

অতিরিক্ত সংস্থান:


2
ভাল লেখার। আমার ব্যক্তিগতভাবে এমভি-র কোনও ব্যবহার নেই? লাইব্রেরি। আরও বৃহত্তর জটিল অ্যাপ্লিকেশনগুলির জন্য আমাদের কোডটি সংগঠিত করার জন্য আমাদের প্রয়োজনীয় সমস্ত কিছুই রয়েছে। সার্ভার-ক্লায়েন্ট যোগাযোগের ক্ষেত্রে আসলে কী ঘটছে সে সম্পর্কে তারা সবাই জাভা এবং সি # তাদের বিভিন্ন ক্রেপ-পর্দা ফেলে দেওয়ার চেষ্টা করায় আমাকে খুব বেশি স্মরণ করিয়ে দেয়। আমরা একটি ডিওএম পেয়েছি। আমরা ইভেন্ট প্রতিনিধি পেয়েছি। আমরা ওওপি পেয়েছি। আমি আমার নিজের ইভেন্টগুলিকে ডেটা পরিবর্তনগুলির সাথে সংযুক্ত করতে পারি tyvm।
এরিক রেপেন

2
"কলব্যাক হেল্পের একটি বিশাল গণ্ডগোলের পরিবর্তে একক কার্যের জন্য একটি ফাংশন রাখুন এবং সেই কাজটি ভালভাবে করুন do" - কবিতা
কৌতূহল ওয়েব ডেভেলপার

1
জাভাস্ক্রিপ্ট যখন 2000 এর দশকের গোড়ার দিকে খুব অন্ধকার বয়সের মধ্য দিয়ে যায় তখন খুব কম লোক কীভাবে এটি ব্যবহার করে বড় অ্যাপ্লিকেশন লিখতে পারে তা বুঝতে পারে। @ এরিকরেপ্পেনের মতো বলেছেন, আপনি যদি জেএস অ্যাপ্লিকেশনটিকে জাভা বা সি # অ্যাপ্লিকেশনটির মতো দেখছেন তবে আপনি এটি ভুল করছেন।
ব্যাকপ্যাককডার

3

ড্যানিয়েলে উত্তর যুক্ত করা:

পর্যবেক্ষণযোগ্য মান / উপাদান

এই ধারণা MVVM ফ্রেমওয়ার্ক থেকে ধার করা হয় Knockout.JS ( ko.observable ,) ধারণা যে মূল্যবোধ ও বস্তু পর্যবেক্ষণযোগ্য বিষয় হতে পারে, এবং একবার পরিবর্তনের একটি মান ঘটে অথবা এটি স্বয়ংক্রিয়ভাবে সব পর্যবেক্ষক আপডেট হবে আপত্তি। এটি মূলত জাভাস্ক্রিপ্টে প্রয়োগ করা পর্যবেক্ষক প্যাটার্ন এবং এর পরিবর্তে সর্বাধিক পাব / উপ ফ্রেমওয়ার্কগুলি কীভাবে প্রয়োগ করা হয় তা "কী" নিজেই একটি স্বেচ্ছাচারিত বস্তুর পরিবর্তে বিষয় subject

ব্যবহার নিম্নলিখিত:

// the subjects
// plain old javascript object with observable values
var shipComponent = {
    velocity : observable(0)
};

// the observer, a player user interface
// implemented with revealing module pattern
var playerUi = (function(ship) {

  var module = {
    setVelocity: function (x) { 
      // ... sets the velocity on the player user interface
    },

    // only called once
    init: function() {

      // subscribe to changes on the velocity value
      // using the module's function as callback
      module.velocity.onChange(playerUi.setVelocity);
    }
  };

  return module;
})(shipComponent).init();

// the player ui will change when the velocity value is changed
shipComponent.velocity.set(10);

ধারণাটি হ'ল পর্যবেক্ষকরা সাধারণত জানেন যে বিষয়টি কোথায় এবং কীভাবে এটিতে সাবস্ক্রাইব হয়েছে। রিফ্যাক্টরিং পদক্ষেপ হিসাবে বিষয়গুলি অপসারণ করা আরও সহজ কারণ আপনাকে কোডটি অনেক পরিবর্তন করতে হলে পব / সাবটির পরিবর্তে এর সুবিধাটি লক্ষণীয়। আমি এটি বোঝাতে চাইছি কারণ আপনি একবার বিষয় সরিয়ে ফেললে এর উপর নির্ভরশীল সবাই ব্যর্থ হয়ে যাবে। যদি কোডটি দ্রুত ব্যর্থ হয় তবে আপনি কীভাবে বাকী রেফারেন্সগুলি সরিয়ে ফেলতে পারবেন তা জানেন। এটি পুরোপুরি ডিউপলড সাবজেক্টের সাথে বিপরীত (যেমন পাব / সাব প্যাটার্নে স্ট্রিং কী সহ) এবং কোডে থাকার উচ্চতর সম্ভাবনা রয়েছে বিশেষত যদি গতিশীল কীগুলি ব্যবহার করা হত এবং রক্ষণাবেক্ষণ প্রোগ্রামারকে এটি সম্পর্কে সচেতন না করা হত (মৃত রক্ষণাবেক্ষণ প্রোগ্রামিং কোড কোড একটি বিরক্তিকর সমস্যা)।

গেম প্রোগ্রামিংয়ে এটি আপনার পুরানো আপডেট লুপের প্যাটার্নের প্রয়োজনীয়তা এবং আরও বেশি সন্ধ্যায় / প্রতিক্রিয়াশীল প্রোগ্রামিং আইডিয়ামকে হ্রাস করে , কারণ কিছু পরিবর্তন হওয়ার সাথে সাথে বিষয়টি আপডেট লুপটির জন্য অপেক্ষা না করেই স্বয়ংক্রিয়ভাবে পরিবর্তনের উপর সমস্ত পর্যবেক্ষককে আপডেট করবে because চালানো. আপডেট লুপের জন্য এমন কিছু ব্যবহার রয়েছে (যেগুলিকে অতিবাহিত গেমের সময়ের সাথে সিঙ্ক্রোনাইজ করা দরকার) তবে কখনও কখনও আপনি যখন এগুলি নিখুঁত করতে চান না যখন উপাদানগুলি নিজেরাই এই প্যাটার্নটির সাথে নিজেকে আপডেট করতে পারে।

পর্যবেক্ষণযোগ্য ফাংশনের প্রকৃত বাস্তবায়নটি আশ্চর্যজনকভাবে লিখতে এবং বুঝতে সহজ (বিশেষত যদি আপনি জাভাস্ক্রিপ্ট এবং পর্যবেক্ষক প্যাটার্নে অ্যারে পরিচালনা করতে জানেন ):

var observable = function(v) {
    var val = v, subscribers = [];

    // the observable object,
    // as revealing module
    var output = {

        // subscribes to event
        onChange : function(func) {
            // idiomatic JS to add object to the
            // subscribers array
            subscribers.push(func);

            return output: // enables chaining
        },

        // the method that changes the observable object
        // and emits the event
        set : function(v) {
            var i;
            val = v;
            for (i = 0, i < subscribers.length; i++) {
                // this is hardly fault tolerant but as long
                // as subscribers are functions it'll work
                subscribers[i](v);
            }

            return output;
        }

    };

    return output;
};

আমি জেএসফিডালে পর্যবেক্ষণযোগ্য অবজেক্টের একটি বাস্তবায়ন করেছি যা পর্যবেক্ষণকারী উপাদানগুলি এবং গ্রাহকরা অপসারণ করতে সক্ষম হওয়ায় এটি অবিরত থাকে। জেএসফিডলটি নিরবচ্ছিন্নভাবে পরীক্ষা করুন।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.