প্রয়োজনীয়তা.জেএস এবং ডমটিতে কেবল একটি <script> উপাদান তৈরি করার মধ্যে পার্থক্য কী? [বন্ধ]

Question

প্রয়োজনীয়তা ব্যবহারের মধ্যে পার্থক্য কী? জেএস এমডি কেবল ডিওমে একটি <script>উপাদান তৈরি করে ?

প্রয়োজনীয়তা.জেএস সম্পর্কে আমার উপলব্ধি হ'ল এটি নির্ভরতা লোড করার ক্ষমতা সরবরাহ করে, তবে এটি কেবল একটি তৈরি করে করা যায় না <script> তবে প্রয়োজনীয় বাহ্যিক জেএস ফাইল লোড করে এমন উপাদান ?

উদাহরণস্বরূপ, দেয় অনুমান করছি যে ফাংশন আছে doStuff(), যা ফাংশন প্রয়োজন needMe()। doStuff()বাহ্যিক ফাইলে থাকে do_stuff.js, যখন needMe()বাহ্যিক ফাইলে থাকে need_me.js।

এটি প্রয়োজনীয়.জেএসের পদ্ধতিতে করা:

define(['need_me'],function(){
    function doStuff(){
        //do some stuff
        needMe();
        //do some more stuff
    }
});

কেবল একটি স্ক্রিপ্ট উপাদান তৈরি করে এটি করা:

function doStuff(){
    var scriptElement  = document.createElement('script');
    scriptElement.src = 'need_me.js';
    scriptElement.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(scriptElement);

    //do some stuff
    needMe();
    //do some more stuff
}

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

Comments

ব্রাউজারের ক্যাচিংয়ের কী দরকার, এটির সাথে কী হস্তক্ষেপ করা উচিত?

— মুহাম্মাদ উমার

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

— রামেন শেফ

Answer 1

এটি এজেক্সিয়ান ডটকমের কেন সুন্দরভাবে ব্যবহার করা যায় তা সম্পর্কে নিবন্ধটি এখানে:

প্রয়োজনীয় জেএস: অ্যাসিনক্রোনাস জাভাস্ক্রিপ্ট লোড হচ্ছে

• কিছু ধরণের # অন্তর্ভুক্ত / আমদানি / প্রয়োজনীয়
• নেস্টেড নির্ভরতা লোড করার ক্ষমতা
• বিকাশকারীদের জন্য ব্যবহারের সহজতা কিন্তু তারপরে একটি অপ্টিমাইজেশন সরঞ্জাম সমর্থন করে যা মোতায়েন করতে সহায়তা করে

Comments

আমি সেগুলি পড়েছি, তবে এখন আমি এটি সম্পর্কে আরও চিন্তা করি বুঝতে পারি যে নেস্টেড নির্ভরতাগুলির ধারণাটি কেবল <script> ট্যাগ লিখেই অর্জন করা যায় না। ধন্যবাদ।

— ম্যাক্সিডিসন

"বিকাশকারীদের জন্য ব্যবহারের সহজতা" সত্য থেকে আরও দূরে হতে পারে না। এটি অবশ্যই আপনার এবং অন্য যে কেউ এই প্রকল্পে কাজ করতে আসবে তাদের জন্য খাড়া শেখার বক্ররেখা রয়েছে।

— সাহাত ইয়ালকাবভ

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

— জেসন সেব্রিং

আমি সংগ্রাম করতেছি. বিশেষত এমন মডিউলগুলির সাথে যা নিজেকে বিশ্বব্যাপী বস্তুর সাথে সংযুক্ত করার চেষ্টা করে। (প্রতিক্রিয়া মডিউল) ...

— geilt

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

— ডেভ

Answer 2

ডিওমে একটি উপাদান তৈরি করার তুলনায় কী কী সুবিধা প্রয়োজন? জেএস প্রস্তাব করে?

আপনার উদাহরণে, আপনি স্ক্রিপ্ট ট্যাগটি অবিচ্ছিন্নভাবে তৈরি করছেন, যার অর্থ আপনার needMe()ফাংশনটি আগে ডাকা হবে অবিচ্ছিন্নভাবে me.js ফাইলটি লোডিং শেষ । যেখানে আপনার ফাংশনটি সংজ্ঞায়িত করা হয়নি সেখানে অনাবৃত ব্যতিক্রমের ফলস্বরূপ।

পরিবর্তে, আপনি যা বাস্তবে কাজ করছেন তার পরামর্শ দেওয়ার জন্য আপনাকে এ জাতীয় কিছু করার প্রয়োজন হবে:

function doStuff(){
    var scriptElement  = document.createElement('script');
    scriptElement.src = 'need_me.js';
    scriptElement.type = 'text/javascript';

    scriptElement.addEventListener("load", 
        function() { 
            console.log("script loaded - now it's safe to use it!");

            // do some stuff
            needMe();
            //do some more stuff

        }, false);

    document.getElementsByTagName('head')[0].appendChild(scriptElement);

}

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

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

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

Answer 3

প্রয়োজনীয় জেএস ব্যবহার করা কেন অন্য কিছু খুব সুস্পষ্ট কারণ:

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

এই গিস্টে এখানে rmurphey এর মন্তব্য থেকে নেওয়া ।

বিমূর্ততার স্তরগুলি শিখতে এবং তার সাথে সামঞ্জস্য করার জন্য দুঃস্বপ্ন হতে পারে তবে এটি যখন কোনও উদ্দেশ্য করে এবং এটি ভালভাবে সম্পাদন করে, তখন তা বোঝা যায়।

Comments

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

— jmort253

আমি @ jmort253 এর সাথে সম্পূর্ণরূপে একমত, এটি শুরুতে লড়াই ছিল, তবে এখন আমি এটি খুব পছন্দ করি। তিনটি বিষয়ই ঠিক! এবং একটি লাইব্রেরিটিকে এএমডিফাই করা এমন কঠিন হওয়া উচিত নয় ... বা শিম ব্যবহার করা উচিত নয়।

— কিংবদন্তি

Answer 4

এখানে আরও দৃ concrete় উদাহরণ।

আমি project০ টি ফাইল সহ একটি প্রকল্পে কাজ করছি। এটি চালানোর জন্য আমাদের কাছে 2 টি ভিন্ন পদ্ধতি রয়েছে।

1. সংক্ষিপ্ত সংস্করণ, 1 টি বড় ফাইল লোড করুন। (উৎপাদন)

2. সমস্ত 60 ফাইল লোড করুন (বিকাশ)

আমরা একটি লোডার ব্যবহার করছি সুতরাং ওয়েবপৃষ্ঠায় আমাদের কেবল একটি স্ক্রিপ্ট রয়েছে

<script src="loader.js"></script>

এটি মোড # 1 এ ডিফল্ট হয়েছে (একটি বৃহত সংযুক্ত ফাইল লোড হচ্ছে)। মোডে # 2 চালানোর জন্য (পৃথক ফাইল) আমরা কিছু পতাকা সেট করি। এটা কিছু হতে পারে। ক্যোয়ারী স্ট্রিংয়ের একটি কী। এই উদাহরণে আমরা কেবল এটি করি

<script>useDebugVersion = true;</script>
<script src="loader.js"></script>

loader.js দেখতে এরকম কিছু দেখাচ্ছে

if (useDebugVersion) {
   injectScript("app.js");
   injectScript("somelib.js");
   injectScript("someotherlib.js");
   injectScript("anotherlib.js");
   ... repeat for 60 files ...
} else {
   injectScript("large-concatinated.js");
}

বিল্ড স্ক্রিপ্টটি কেবল একটি .sh ফাইল যা দেখতে এটির মতো দেখাচ্ছে

cat > large-concantinated.js app.js somelib.js someotherlib.js anotherlib.js

ইত্যাদি ...

যদি কোনও নতুন ফাইল যুক্ত হয় তবে আমরা সম্ভবত # 2 মোড ব্যবহার করব যেহেতু আমরা উন্নয়ন করছি আমাদের একটি অ্যাড করতে হবে injectScript("somenewfile.js") লোডার.জেজে লাইন যুক্ত করতে হবে

তারপরে উত্পাদনের জন্য পরে আমাদের বিল্ড স্ক্রিপ্টে কিছুnewfile.js যুক্ত করতে হবে। এমন একটি পদক্ষেপ যা আমরা প্রায়শই ভুলে যাই এবং তারপরে ত্রুটির বার্তা পাই।

এএমডি স্যুইচ করে আমাদের 2 টি ফাইল সম্পাদনা করতে হবে না। লোডার.জেএস এবং বিল্ড স্ক্রিপ্ট সিঙ্কে রাখার সমস্যা চলে যায়। ব্যবহার r.jsবা webpackএটি নির্মাণের জন্য কোডটি পড়তে পারেlarge-concantinated.js

এটি নির্ভরতাগুলির সাথেও মোকাবিলা করতে পারে, উদাহরণস্বরূপ আমাদের কাছে 2 টি ফাইল ছিল lib1.js এবং lib2.js এর মতো লোড হয়েছে

injectScript("lib1.js");
injectScript("lib2.js");

lib2 এর জন্য lib1 দরকার। এর ভিতরে কোড রয়েছে যা কিছু পছন্দ করে

lib1Api.installPlugin(...);

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

require.config({
    paths: {
        lib1: './path/to/lib1',
        lib2: './path/to/lib2',
    },
    shim: {
        lib1: {
            "exports": 'lib1Api',
        },
        lib2: {
            "deps": ["lib1"],
        },
    }
});

আমি আমাদের মডিউলটি লাইব 1 ব্যবহার করি আমরা এটি করি

define(['lib1'], function(lib1Api) {
   lib1Api.doSomething(...);
});

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

এটি উন্নয়নকে সুন্দর করে তোলে (কোনও বিল্ড স্টেপ নয়, লোডিং অর্ডার সম্পর্কে কোনও উদ্বেগজনক নয়) এবং এটি উত্পাদনকে সুন্দর করে তোলে (প্রতিটি স্ক্রিপ্ট যুক্ত করার জন্য একটি বিল্ড স্ক্রিপ্ট আপডেট করার দরকার নেই)।

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

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

এই সমস্ত কিছুই স্ক্রিপ্ট ট্যাগ ব্যবহার না করে এবং এএমডি ব্যবহার করে অর্জন করা হয়