উদাহরণস্বরূপ জাভাস্ক্রিপ্ট মডিউল প্যাটার্ন [বন্ধ]


136

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

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


এটি গত চার বছরে সমস্ত পরিবর্তিত হয়েছে, কিন্তু উদ্যোগী অতিরিক্ত সংযমের জন্য ধন্যবাদ, এই পুরানো তথ্য চিরকালের জন্য স্থির থাকবে । ES6 মডিউলগুলিতে MDN এর পৃষ্ঠা এখানে ।
bbsimonbb

উত্তর:


256

মডুলার ডিজাইনের ধরণের কাছে যেতে হলে আপনাকে প্রথমে এই ধারণাটি বুঝতে হবে:

তাত্ক্ষণিকভাবে অনুরোধ করা ফাংশন এক্সপ্রেশন (IIFE):

(function() {
      // Your code goes here 
}());

ফাংশনগুলি ব্যবহার করতে পারেন এমন দুটি উপায় রয়েছে। 1. ফাংশন ঘোষণা 2. ফাংশন প্রকাশ।

এখানে ফাংশন এক্সপ্রেশন ব্যবহার করা হয়।

নাম স্থান কী? এখন যদি আমরা উপরের কোডের টুকরোটিতে নামস্থান যোগ করি

var anoyn = (function() {
}());

জেএসে বন্ধ কী?

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

var scope = "I am global";
function whatismyscope() {
    var scope = "I am just a local";
    function func() {return scope;}
    return func;
}
whatismyscope()()

এখন আমরা আমাদের প্রথম মডুলার ডিজাইনের ধরণটি সংজ্ঞায়িত করার জন্য উপরে উল্লিখিত এই তিনটি ধারণাটি প্রয়োগ করব:

var modularpattern = (function() {
    // your module code goes here
    var sum = 0 ;

    return {
        add:function() {
            sum = sum + 1;
            return sum;
        },
        reset:function() {
            return sum = 0;    
        }  
    }   
}());
alert(modularpattern.add());    // alerts: 1
alert(modularpattern.add());    // alerts: 2
alert(modularpattern.reset());  // alerts: 0

উপরের কোডের জন্য jsfiddle।

উদ্দেশ্যটি হ'ল বাইরের বিশ্ব থেকে পরিবর্তনশীল অ্যাক্সেসযোগ্যতাটি আড়াল করা।

আশাকরি এটা সাহায্য করবে. শুভকামনা


আইআইফির নাম রাখা কি ভাল হবে? শব্দার্থক উদ্দেশ্যে এবং ভাল স্ট্যাক ট্রেসিং জন্য? এটা কোড কিছু পরিবর্তন করবে?
জেরোইন

2
আপনার প্রথম উদাহরণ (function() { /* Your code goes here */}());আসলে একটি IIFE (অবিলম্বে ফাংশন এক্সপ্রেশন invoking) হয়, ঠিক আছে এটা বেনামী এর Coz এটা কোন নাম আছে তাই আপনি এমনকি এটি একটি IIAFE (অবিলম্বে invoking বেনামী ফাংশন এক্সপ্রেশন) কল উপর IIFE সম্পর্কে আরো দেখতে চাইবেন stackoverflow.com/questions/ 2421911 / ...
Adrien হউন

রিটার্ন স্টেটমেন্ট ব্যবহার করা হয়েছে কেন? যদি আমরা ফিরতি om om বাদ দিই তবে যুক্ত এবং পুনরায় সেট করা ফাংশনটি সর্বজনীন হবে এবং আমার ধারণা তারা স্থানীয় ভেরিয়েবল যোগফলটি অ্যাক্সেস করতে পারে? আমি কি সঠিক?
Mou

আপনার দ্বিতীয় উদাহরণটি কোনও বস্তুর মতো দেখাচ্ছে বা আমি ঠিক নেই?
কারণ

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

39

অ্যাডি ওসমানির বিনামূল্যে বইটি পড়ার জন্য আমি এই বিষয়ে যে কেউ প্রবেশ করার বিষয়ে সত্যই সুপারিশ করব:

"জাভাস্ক্রিপ্ট ডিজাইনের প্যাটার্নগুলি শিখছি"।

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

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


আমি অ্যাডি ওসমানীর বইয়ের আওতায় নেই এমন " সংজ্ঞাবদ্ধ
tmmontague

1
এটি স্টোয়ান
স্টেফানভের

4
স্টোয়ানের বইটি অনেক বেশি বিস্তৃত। এটি কেবলমাত্র উচ্চ স্তরের নিদর্শনগুলির চেয়ে বেশি কভার করে তবে অন্যান্য জেএস সেরা অনুশীলনগুলি সম্পর্কে আরও গভীরতার সাথে কথা বলে।
নভেম্বরে নোভিটিয়েট কোড

1
"জাভাস্ক্রিপ্ট ডিজাইনের প্যাটার্নগুলি শিখতে" এর পর্যালোচনাগুলি: Amazonon
প্রোডাক্ট-

3
স্টোয়ান স্টেফানভ দ্বারা "জাভাস্ক্রিপ্ট প্যাটার্নস" এর পর্যালোচনাগুলি amazon.com/product-reviews/0596806752 । দ্রষ্টব্য: যা "জাভাস্ক্রিপ্ট ডিজাইনের প্যাটার্নগুলি শেখা" থেকে যে কোনওটির চেয়ে অনেক বেশি ভাল বলে মনে হচ্ছে
এড্রিয়েন

19

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

আমি এসি # ব্যাকগ্রাউন্ড থেকে এসেছি তাই সেখান থেকে দরকারী বলে কিছু পরিভাষা যুক্ত করেছি।

এইচটিএমএল

আপনার কাছে কিছু শীর্ষ স্তরের এইচটিএমএল ফাইল থাকবে। এটি আপনার প্রকল্পের ফাইল হিসাবে এটি ভাবতে সহায়তা করে। আপনি প্রকল্পে যুক্ত প্রতিটি জাভাস্ক্রিপ্ট ফাইল এটিতে যেতে চায়, দুর্ভাগ্যক্রমে আপনি এর জন্য সরঞ্জাম সমর্থন পাবেন না (আমি আইডিইএ ব্যবহার করছি)।

এই স্ক্রিপ্ট ট্যাগ সহ আপনার প্রকল্পে ফাইল যুক্ত করতে হবে:

        <script type="text/javascript" src="app/native/MasterFile.js" /></script>
        <script type="text/javascript" src="app/native/SomeComponent.js" /></script>

এটি ট্যাগগুলি ভেঙ্গে যাওয়ার ফলে জিনিসগুলি ব্যর্থ হওয়ার কারণ হয়ে দেখা দেয় - যদিও এটি এক্সএমএল দেখে মনে হচ্ছে এটি সত্যিই ক্রেজিয়ার নিয়ম সহ কিছু!

নেমস্পেস ফাইল

MasterFile.js

myAppNamespace = {};

এটাই. এটি কেবল আমাদের বাকী কোডগুলিতে থাকার জন্য একটি একক বিশ্বব্যাপী পরিবর্তনশীল যুক্ত করার জন্য। আপনি এখানে নেস্টেড নেমস্পেসগুলি ঘোষণা করতে পারেন (বা তাদের নিজস্ব ফাইলগুলিতে)।

মডিউল (গুলি)

SomeComponent.js

myAppNamespace.messageCounter= (function(){

    var privateState = 0;

    var incrementCount = function () {
        privateState += 1;
    };

    return function (message) {
        incrementCount();
        //TODO something with the message! 
    }
})();

আমরা এখানে যা করছি তা হ'ল আমাদের অ্যাপ্লিকেশনটির একটি ভেরিয়েবলের জন্য একটি বার্তা কাউন্টার ফাংশন। এটি এমন একটি ফাংশন যা কোনও ফাংশন দেয় যা আমরা তাত্ক্ষণিকভাবে সম্পাদন করি ।

ধারণা

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

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

আপনি এই স্টাইলটি কোনও ফাংশন ফাংশন দিয়ে ফাংশনটি ফিরিয়ে দিয়ে তাত্ক্ষণিকভাবে ফোন না করে ফিরে এসে কনস্ট্রাক্টরদের সংজ্ঞায়িত করতেও ব্যবহার করতে পারেন।


6

এখানে https://toddmotto.com/mastering-the-module-pattern আপনি প্যাটার্নটি ভালভাবে ব্যাখ্যা করতে পারেন। আমি যুক্ত করব যে মডিউলার জাভাস্ক্রিপ্ট সম্পর্কে দ্বিতীয় জিনিসটি হল একাধিক ফাইলে আপনার কোডটি কীভাবে গঠন করা যায়। অনেক লোকেরা আপনাকে এখানে AMD এর সাথে যেতে পরামর্শ দিতে পারে, তবুও আমি অভিজ্ঞতা থেকে বলতে পারি যে আপনি বেশিরভাগ এইচটিটিপি অনুরোধের কারণে ধীর পৃষ্ঠার প্রতিক্রিয়া নিয়ে কিছুটা শেষ করবেন। যাওয়ার উপায়টি হল আপনার জাভাস্ক্রিপ্ট মডিউলগুলি (প্রতিটি ফাইলের জন্য একটি) সাধারণ জেএস স্ট্যান্ডার্ড অনুসরণ করে একটি একক ফাইলে প্রাক-সংকলন। এখানে নমুনাগুলি একবার দেখুন: http://dsheiko.github.io/cjsc/


সমস্ত এএমডি বাস্তবায়নগুলি একটি একক ফাইলে পূর্বরূপ সরবরাহ করে।
আই-লিন কুও

1
এটি সঠিক, তবে ফলস্বরূপ অপ্টিমাইজড ফাইলটির জন্য লোডার লাইব্রেরি প্রয়োজন (কেবল এটি r.js v2.1.14 দিয়ে পুনরায় পরীক্ষা করা হয়েছে), যা সাধারণত বেশ ভারী। কোড সংকলন করার সাথে সাথে আমাদের অ্যাসিঙ্ক্রোনালি লোড হওয়া নির্ভরতাগুলি সমাধান করার প্রয়োজন হবে না, আমাদের এই লাইব্রেরিটির দরকার নেই। কেবল বিবেচনা করুন: আমরা মডিউলগুলি এএমডিতে মোড়ক করি, এর অর্থ অ্যাসিঙ্ক। লোডিং, তারপরে এগুলিকে একটি একক ফাইলে সংকলন করুন (আর কোনও পৃথক লোড হবে না), তবে তাদের ঠিকানা দেওয়ার জন্য পুরো লাইব্রেরিটি লোড করুন (এখন কী অপ্রয়োজনীয়)। এটি আমার কাছে সর্বোত্তম উপায় হিসাবে শোনাচ্ছে না। কেন আমরা এ্যাসক্রোনালি লোড করি না কেন এএমডি কেন?
দিমিত্রি শেইকো

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

উভয় ফর্ম্যাটগুলি কমনজেএস মডিউল / ২.০ এর বৈধ পাথ এবং একই স্কেলিবিলিটি সরবরাহ করে। আমার হিসাবে - সিজেএস মডিউলগুলি / 1.1 (যা আমি কমনজেএস দ্বারা বোঝাচ্ছি) এর সাথে ডিল করা অনেক সহজ, কোডটি আরও পরিষ্কার দেখায়।
দিমিত্রি শেইকো

আমি এএমডি এর যেমন সুবিধাগুলি পূরণ করেছি: * কেবল জাভাস্ক্রিপ্ট ফাইলের চেয়ে বেশি লোড করতে পারে; * পথের নাম; ঠিক আছে, কমন জেএস সংকলক এগুলি সমাধান করে - এটি ডেটা হিসাবে নন-জাভাস্কিপ্ট / জেএসএন নির্ভরতা লোড করে এবং বিল্ড কনফিগারেশন (এলিয়াস সহ) সরবরাহ করা যেতে পারে। এটির জন্য প্রয়োজন কেবলমাত্র অসুবিধা। তবে আজকাল প্রত্যেকেই সিএসএস প্রি-প্রসেসরগুলির জন্য প্রকল্পটি তৈরি করে। সুতরাং গ্রান্ট /
গুল্পের

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