শিম কনফিগার কেন এবং কখন ব্যবহার করতে হবে তা প্রয়োজন ire


98

আমি এপিআই থেকে প্রয়োজনীয় js ডকুমেন্টটি পড়েছি

requirejs.config({
    shim: {
        'backbone': {
            //These script dependencies should be loaded before loading
            //backbone.js
            deps: ['underscore', 'jquery'],
            //Once loaded, use the global 'Backbone' as the
            //module value.
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'foo': {
            deps: ['bar'],
            exports: 'Foo',
            init: function (bar) {
                //Using a function allows you to call noConflict for
                //libraries that support it, and do other cleanup.
                //However, plugins for those libraries may still want
                //a global. "this" for the function will be the global
                //object. The dependencies will be passed in as
                //function arguments. If this function returns a value,
                //then that value is used as the module export value
                //instead of the object found via the 'exports' string.
                return this.Foo.noConflict();
            }
        }
    }
});

তবে আমি এর শিম অংশ পাচ্ছি না । কেন আমি শিম ব্যবহার করব এবং কীভাবে কনফিগার করব, আমি আরও কিছু স্পষ্টতা পেতে পারি

কেন এবং কখন আমাদের শিম ব্যবহার করা উচিত, দয়া করে কেউ উদাহরণ সহ ব্যাখ্যা করতে পারেন। ধন্যবাদ

উত্তর:


110

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

require(['underscore', 'backbone']
, function( Underscore, Backbone ) {

    // do something with Backbone

}

অ্যান্ডোরকোর এবং ব্যাকবোন উভয়ের জন্য অ্যাসিঙ্ক্রোনাস অনুরোধ রিকোয়ারজেজেস সরিয়ে দেবে, তবে আপনি জানেন না কোনটি প্রথমে ফিরে আসবে তাই সম্ভবত ব্যাকবোন বোঝার আগে অ্যান্ডস্কোর দিয়ে কিছু করার চেষ্টা করবে।

দ্রষ্টব্য: এই উভয় লাইব্রেরি AMD সমর্থন করার আগে এই আন্ডারস্কোর / ব্যাকবোন উদাহরণটি লেখা হয়েছিল। তবে নীতিটি আজ কোনও লাইব্রেরির ক্ষেত্রে সত্য যে এটি এএমডি সমর্থন করে না।

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

আরও পটভূমি:


আপনার উদাহরণ কোডের মতো, Underscoreএবং Backboneএখানে সাধারণের মতো ব্যবহার করুন, shimএই ক্ষেত্রে কী করবেন? আমি কি ব্যবহার করতে পারি require( function() { _.extend({}); })? এটা কি বোঝে _?
উত্তেজিত

"আবশ্যক জেএস উভয়ই ইনডকোর এবং ব্যাকবোন উভয়ের জন্য অ্যাসিনক্রোনাস অনুরোধ শুরু করবে" -> গ্রন্থাগারটি ইতিমধ্যে লোড হয়েছে এমন ক্ষেত্রে, এটি কি প্রতিরোধ করা সম্ভব?
কোডি মারি

4
@ কোডি ঠিক আছে, লাইব্রেরিটি ইতিমধ্যে লোড করা থাকলে এটি অন্য সার্ভারের অনুরোধটি বন্ধ করে দেবে না, তবে প্রয়োজনীয় জেএসের বিষয়টি হ'ল যে / কীভাবে ঘটে তা আপনার কোডের যত্ন নেওয়ার দরকার নেই। আপনার বিশেষ ব্যবহারের ক্ষেত্রে সম্ভবত একটি নতুন প্রশ্ন শুরু করবেন?
বিস্মৃত

63

প্রয়োজনীয় জেএস এপিআই ডকুমেন্টেশন অনুসারে শিম আপনাকে অনুমতি দেয়

পুরানো, traditionalতিহ্যবাহী "ব্রাউজার গ্লোবাল" স্ক্রিপ্টগুলির জন্য নির্ভরতা, রফতানি এবং কাস্টম ইনিশিয়ালাইজেশন কনফিগার করুন যা নির্ভরতা ঘোষণা করতে এবং কোনও মডিউল মান সেট করতে সংজ্ঞায়িত () ব্যবহার করে না।

- নির্ভরতা কনফিগার করা

বলুন যে আপনার কাছে দুটি জাভাস্ক্রিপ্ট মডিউল রয়েছে (মডিউলএ এবং মডিউলবি) এবং এর মধ্যে একটি (মডিউলএ) অন্য (মডিউলবি) এর উপর নির্ভর করে। এগুলি উভয়ই আপনার নিজস্ব মডিউলের জন্য প্রয়োজনীয় যাতে আপনি প্রয়োজনীয়তা () বা সংজ্ঞায়িত () এর মধ্যে নির্ভরতাগুলি নির্দিষ্ট করেন

require(['moduleA','moduleB'],function(A,B ) {
    ...
}

তবে যেহেতু এএমডি নিজেই অনুসরণ করা প্রয়োজন, তাই কোনটি তাড়াতাড়ি আনা হবে তা আপনার কোনও ধারণা নেই। এখানেই শিম উদ্ধার করতে আসে।

require.config({
    shim:{
       moduleA:{
         deps:['moduleB']
        } 
    }

})

এটি মডিউলবি লোড হওয়ার আগে মডিউলবি সর্বদা আনতে হবে তা নিশ্চিত করবে।

- রফতানি কনফিগার করা

শিম রফতানি গ্লোবাল অবজেক্টের কোন সদস্য প্রয়োজনীয় উইন্ডোজকে জানায় (উইন্ডোটি, আপনি ব্রাউজারে ধরে নিচ্ছেন অবশ্যই) প্রকৃত মডিউল মান। আসুন বলি যে মডিউলএ নিজেকে window'মোডা' হিসাবে যুক্ত করে (ঠিক যেমন jQuery এবং আন্ডারস্কোর যথাক্রমে $ এবং _ হিসাবে করে), তারপরে আমরা আমাদের রফতানি মানকে 'মোডা' করি।

require.config({
    shim:{
       moduleA:{
         exports:'modA'
        } 
    }

এটি RequireJS কে এই মডিউলটির স্থানীয় রেফারেন্স দেবে। বিশ্বব্যাপী মোডা এখনও পৃষ্ঠায় উপস্থিত থাকবে।

পুরানো "ব্রাউজার গ্লোবাল" স্ক্রিপ্টগুলির জন্য কাস্টম সূচনা ization

এটি শিম কনফিগারেশনের সম্ভবত সবচেয়ে গুরুত্বপূর্ণ বৈশিষ্ট্য যা আমাদের নিজস্ব মডিউলে নির্ভরতা হিসাবে 'ব্রাউজার গ্লোবাল', 'নন-এএমডি' স্ক্রিপ্টগুলি (যেগুলি মডিউল প্যাটার্ন অনুসরণ করে না) যুক্ত করতে দেয়।

আসুন বলতে দিন যে মডিউলবি মাত্র দুটি ফাংশন ফানকিএ () এবং ফানকবি () সহ সাধারণ পুরানো জাভাস্ক্রিপ্ট।

function funcA(){
    console.log("this is function A")
}
function funcB(){
    console.log("this is function B")
}

যদিও এই দুটি ফাংশন উইন্ডো স্কোপতে উপলব্ধ তবে প্রয়োজনীয় জেএস তাদের বিভ্রান্তি এড়াতে তাদের বিশ্বব্যাপী সনাক্তকারী / হ্যান্ডেলের মাধ্যমে এগুলি ব্যবহার করার পরামর্শ দেয়। তাই শিম হিসাবে কনফিগার করা

shim: {
    moduleB: {
        deps: ["jquery"],
        exports: "funcB",
        init: function () {
            return {
                funcA: funcA,
                funcB: funcB
            };
        }
    }
}

আরআই ফাংশন থেকে ফেরত মানটি 'রফতানি' স্ট্রিংয়ের মাধ্যমে পাওয়া বস্তুর পরিবর্তে মডিউল রফতানি মান হিসাবে ব্যবহৃত হয়। এটি আমাদের নিজস্ব মডিউলে ফানকিবি ব্যবহার করতে দেয়

require(["moduleA","moduleB"], function(A, B){
    B.funcB()
})

আশা করি এটি সাহায্য করেছে।


4
সহজে বোধগম্য! একটি প্রশ্ন: শেষ উদাহরণে, "রফতানি" সম্পত্তি কি কেবল উপেক্ষা করা হয়?
নিকো বেলিক

না, এটিকে অগ্রাহ্য করা হচ্ছে না। শেষ উদাহরণে যদি "রফতানি" সম্পত্তিটিকে অগ্রাহ্য করা হত, তবে আপনি যে পরামিতি হিসাবে প্যারামিটার হিসাবে ('বি') উত্তীর্ণ হন তা অপরিবর্তিত হবে কারণ মডিউলবিএম এএমডি অনুগত নয় এবং প্রয়োজনীয় জেএস ব্যবহার করার জন্য কোনও বস্তু ফিরিয়ে আনবে না ( সুতরাং 'B.funcB' কাজ করবে না)।
নালিংক

হুঁ। আমি ভেবেছিলাম যে রফতানির মানটি init ফাংশনে ফিরে আসা অবজেক্টটির দ্বারা ওভাররড হয়ে যাবে। সুতরাং প্যারামিটার বিটি হ'ল {ফানকাএ: ফানকাএ, ফানকবি: ফানকিবি}, কেবল নিজেরাই ফানকবি নয়। এটা কি সত্য নয়?
নিকো বেলিক

4
নিকো বেলিক ঠিক বলেছেন, রফতানি IS উপেক্ষা করা হয়েছে (আমি এটি পরীক্ষা করেছি)। অবজেক্ট বি হ'ল 'আরবি' অংশে নির্দিষ্ট ফাংশন দ্বারা প্রত্যাবর্তিত বস্তু। আপনি যদি 'থিম' অংশটি সরিয়ে ফেলেন তবে অবজেক্ট বি ফাংশন ফানকবিতে পরিণত হবে, সুতরাং আপনি কেবল বিফুনসিবি () এর পরিবর্তে বি () করবেন। এবং স্পষ্টতই funcA ক্ষেত্রে অ্যাক্সেসযোগ্য হয়ে উঠবে।
user4205580

-2

আপনাকে অবশ্যই ঘোষণা করতে প্রয়োজনীয় js.config এ পাথগুলি যুক্ত করতে হবে, উদাহরণস্বরূপ:

requirejs.config({
    paths: {
          'underscore' : '.../example/XX.js' // your JavaScript file
          'jquery' : '.../example/jquery.js' // your JavaScript file
    }
    shim: {
        'backbone': {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'foo': {
            deps: ['bar'],
            exports: 'Foo',
            init: function (bar) {
                return this.Foo.noConflict();
            }
        }
    }
});

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

কোনও ইতিবাচক প্রতিক্রিয়া ছাড়াই অনুলিপি করুন
william.eyidi

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