আমি কীভাবে নোড.জেএস এবং ব্রাউজারের মধ্যে কোড ভাগ করতে পারি?


242

আমি একটি জাভাস্ক্রিপ্ট ক্লায়েন্ট (ব্রাউজারে চালিত) এবং একটি নোড.জেএস সার্ভার দিয়ে একটি ছোট অ্যাপ্লিকেশন তৈরি করছি যা ওয়েবস্কট ব্যবহার করে যোগাযোগ করছে।

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

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

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


4
এই প্রশ্নের অতিরিক্ত উত্তর পোস্ট করার জন্য সবাইকে ধন্যবাদ। এটি স্পষ্টভাবে একটি বিষয় যা দ্রুত পরিবর্তন এবং বিকশিত হবে।
সাইমন গুহা

উত্তর:


168

আপনি যদি এমন কোনও মডিউল লিখতে চান যা ক্লায়েন্টের পাশ এবং সার্ভার উভয় দিকই ব্যবহার করা যায় তবে দ্রুত এবং সহজ পদ্ধতিতে আমার একটি সংক্ষিপ্ত ব্লগ পোস্ট রয়েছে: নোড.জেএস এবং ব্রাউজারের জন্য লেখা , মূলত নিম্নলিখিতটি (যেখানে thisএকই হিসাবে রয়েছে window) :

(function(exports){

    // Your code goes here

   exports.test = function(){
        return 'hello world'
    };

})(typeof exports === 'undefined'? this['mymodule']={}: exports);

বিকল্পভাবে কিছু যেমন Marak এর মত ক্লায়েন্ট সাইড উপর Node.js এপিআই, বাস্তবায়ন নিশানা প্রকল্প হলো মিথুন

আপনি ডিএনডেও আগ্রহী হতে পারেন , যা আপনাকে একটি জাভাস্ক্রিপ্ট ফাংশন প্রকাশ করতে দেয় যাতে এটি একটি সাধারণ জেএসওএন-ভিত্তিক নেটওয়ার্ক প্রোটোকল ব্যবহার করে অন্য মেশিন থেকে কল করা যায়।


চমৎকার। তথ্যের জন্য ধন্যবাদ, ক্যালান।
সাইমন গুহা

2
সত্যিই দুর্দান্ত নিবন্ধ Caolan। আমি বুঝতে পেরেছি, এটি কাজ করে, এখন আমি আবার ঘূর্ণায়মান। ফ্যান্টাস্টিক!
মাইকেল দাউসমান

2
আমি আমার নিজস্ব প্রজেক্টে RequireJs ব্যবহার করছি , যা আমাকে ক্লায়েন্ট এবং সার্ভারে আমার মডিউলগুলি ভাগ করতে দেয়। আমরা দেখব যে এটি কীভাবে কার্যকর হয়।
কামরানিকাস

5
@ কওলান সেই লিঙ্কটি মারা গেছে
কমল রেড্ডি

5
মিথুন লিঙ্কটি মারা গেছে।
বোরিসদিয়াকুর

42

এপিলির এখানে একটি দুর্দান্ত সমাধান রয়েছে http://epeli.github.com/piler/ এমনকি লাইব্রেরি ছাড়াও কাজ করে, একে শেয়ার.js নামক একটি ফাইলে রাখুন

(function(exports){

  exports.test = function(){
       return 'This is a function from shared module';
  };

}(typeof exports === 'undefined' ? this.share = {} : exports));

সার্ভারে কেবল এইটি ব্যবহার করুন:

var share = require('./share.js');

share.test();

এবং ক্লায়েন্ট দিকে কেবল js ফাইলটি লোড করুন এবং তারপরে ব্যবহার করুন

share.test();

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

আমার এক্সপ্রেস ফোল্ডারে স্ট্যাটিক (পাবলিক) ফোল্ডারের পাশাপাশি আমার কাছে 'শেয়ারড' নামে একটি ফোল্ডারও রয়েছে যা ক্লায়েন্টের থেকে 'পাবলিক' ফোল্ডারের মতো অ্যাক্সেসযোগ্য: অ্যাপ.ইউজ (এক্সপ্রেস.স্ট্যাটিক ('পাবলিক')) ; app.use (express.static ( 'ভাগ')); এবং আপনার পোস্টটি ক্লায়েন্ট এবং সার্ভারের সাথে ফাইলগুলি ভাগ করে নেওয়ার আমার ধারণাটি প্রসারিত করে। এটাই আমার দরকার ছিল। ধন্যবাদ!
একত্রিত করুন

এই সমাধানটি + গিট সাবট্রি == দুর্দান্ত। ধন্যবাদ!
কেভিনমাইক 24'19

@ ব্রোয়েশ এটি ES6 এ কীভাবে কাজ করবে? কিছু ES6- নির্দিষ্ট সমস্যা সহ আমি এটি একটি নতুন প্রশ্ন হিসাবে জিজ্ঞাসা করেছি , তবে আমি এখানে একটি সম্পাদনা দেখে যেমন খুশি হব!
টেডস্কোভস্কি

15

ব্রাউজারে নোড.জেএস মডিউল প্যাটার্ন, এএমডি মডিউল প্যাটার্ন এবং বিশ্বব্যাপী এই কাজটি করে এমন jQuery উত্স কোডটি চেকআউট করুন:

(function(window){
    var jQuery = 'blah';

    if (typeof module === "object" && module && typeof module.exports === "object") {

        // Expose jQuery as module.exports in loaders that implement the Node
        // module pattern (including browserify). Do not create the global, since
        // the user will be storing it themselves locally, and globals are frowned
        // upon in the Node module world.
        module.exports = jQuery;
    }
    else {
        // Otherwise expose jQuery to the global object as usual
        window.jQuery = window.$ = jQuery;

        // Register as a named AMD module, since jQuery can be concatenated with other
        // files that may use define, but not via a proper concatenation script that
        // understands anonymous AMD modules. A named AMD is safest and most robust
        // way to register. Lowercase jquery is used because AMD module names are
        // derived from file names, and jQuery is normally delivered in a lowercase
        // file name. Do this after creating the global so that if an AMD module wants
        // to call noConflict to hide this version of jQuery, it will work.
        if (typeof define === "function" && define.amd) {
            define("jquery", [], function () { return jQuery; });
        }
    }
})(this)

এটি সর্বোত্তম পদ্ধতি (আমার যা প্রয়োজন তার জন্য)। এখানে আমি তৈরির একটি কার্যকারী উদাহরণ: gist.github.com/drmikecrowe/4bf0938ea73bf704790f
মাইক ক্রো

13

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

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

গেমটির জন্য আমার বিল্ড সিস্টেমটি একটি সরল বাশ স্ক্রিপ্ট যা সি প্রিপ্রোসেসরের মাধ্যমে ফাইলগুলি চালায় এবং তারপরে কিছু জাঙ্ক সিপিপি পাতা পরিষ্কার করার জন্য সেডের মাধ্যমে, যাতে আমি # অন্তর্ভুক্ত, # ডেফাইন, # আইফডিফের মতো সমস্ত সাধারণ প্রিপ্রসেসর সামগ্রী ব্যবহার করতে পারি ইত্যাদি


2
স্ট্রিং হিসাবে জাভাস্ক্রিপ্ট ফাংশন সিরিয়ালিং আমার কাছে কখনও ঘটেনি। বখশিশের জন্য ধন্যবাদ.
সাইমন গুহা

13

আমি নোড.জেএস এর জন্য প্রয়োজনীয় জেএস অ্যাডাপ্টারের সন্ধান করার পরামর্শ দেব । সমস্যাটি হ'ল ডিফল্টরূপে নোড.জেএস ব্যবহার করে কমনজেএস মডিউল প্যাটার্নটি অ্যাসিঙ্ক্রোনাস নয়, যা ওয়েব ব্রাউজারে লোডিং বন্ধ করে। প্রয়োজনীয় জেএস এএমডি প্যাটার্ন ব্যবহার করে, যা আপনি r.jsঅ্যাডাপ্টারটি ব্যবহার করেন যতক্ষণ না উভয়ই অ্যাসিনক্রোনাস এবং উভয় সার্ভার এবং ক্লায়েন্টের সাথে সামঞ্জস্যপূর্ণ ।



11

সম্ভবত এটি পুরোপুরি প্রশ্নের সাথে সামঞ্জস্য নয় তবে আমি ভেবেছিলাম এটি ভাগ করে নেব।

আমি স্ট্রিং.প্রোটোটাইপে ঘোষণা করা বেশ কয়েকটি সাধারণ স্ট্রিং ইউটিলিটি ফাংশন তৈরি করতে চেয়েছিলাম, নোড এবং ব্রাউজার উভয়ের জন্যই উপলব্ধ। আমি এই ফাংশনগুলি কেবল ইউটিলিটিস.জে (একটি সাবফোল্ডারে) নামক একটি ফাইলে রাখি এবং এটি সহজেই আমার ব্রাউজার কোডের স্ক্রিপ্ট-ট্যাগ থেকে এবং আমার নোড.জেএস স্ক্রিপ্টে প্রয়োজনীয় (.js এক্সটেনশন বাদ দিয়ে) ব্যবহার করে reference :

my_node_script.js

var utilities = require('./static/js/utilities')

my_browser_code.html

<script src="/static/js/utilities.js"></script>

আমি আশা করি এটি আমার ব্যতীত অন্য কারও পক্ষে দরকারী তথ্য।


1
আমি এই পদ্ধতির পছন্দ করি তবে আমি দেখতে পাই যে আমার স্ট্যাটিক ফাইলগুলি প্রায় অনেকটা স্থানান্তরিত হয়েছে। একটি সমাধান আমি খুঁজে পেয়েছি মডিউলটি পুনরায় রফতানি করা। উদাহরণস্বরূপ, utilites.jsএকটি একক লাইন দিয়ে তৈরি করুন module.exports = require('./static/js/utilities');। আপনি যদি চারপাশে জিনিসপত্র পরিবর্তন করেন তবে আপনাকে কেবলমাত্র একটি পাথ আপডেট করতে হবে।
টম মাকিন

আমি এই ধারনাটি পছন্দ করি. পথটিতে কেবল একটি নোট যা আমাকে বের করতে কিছুটা সময় নিয়েছিল। আমার utilities.jsরয়েছে sharedপ্রকল্পের অধীনে ফোল্ডার। ব্যবহার require('/shared/utilities')আমাকে ত্রুটি দিয়েছে Cannot find module '/shared/utilities'require('./../../shared/utilities')এটি কাজ করতে আমাকে এই জাতীয় কিছু ব্যবহার করতে হবে। সুতরাং, এটি সর্বদা বর্তমান ফোল্ডার থেকে যায় এবং মূল থেকে নীচে নীচে পর্যন্ত ভ্রমণ করে।
নিউম্যান

এখন আমি ভাগ করা মডিউলটি কোথায় রাখতে হবে তা স্থির ফোল্ডারে। তথ্যের জন্য ধন্যবাদ!
একত্রিত করুন

9

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

উদাহরণস্বরূপ, আপনার নিম্নলিখিত কোড sum.js রয়েছে:

সাধারণ নোড.জেএস মডিউল: যোগ.জেএস

const sum = (a, b) => {
    return a + b
}

module.exports = sum

নোড.জেজে মডিউলটি ব্যবহার করুন

const sum = require('path-to-sum.js')
console.log('Sum of 2 and 5: ', sum(2, 5)) // Sum of 2 and 5:  7

সম্মুখভাগে এটি পুনরায় ব্যবহার করুন

import sum from 'path-to-sum.js'
console.log('Sum of 2 and 5: ', sum(2, 5)) // Sum of 2 and 5:  7

4

সার্ভারটি সহজেই জাভাস্ক্রিপ্ট উত্স ফাইলগুলি ক্লায়েন্টকে (ব্রাউজারে) প্রেরণ করতে পারে তবে কৌশলটি হ'ল ক্লায়েন্টকে এটি করার আগে একটি মিনি "রফতানি" পরিবেশ সরবরাহ করতে হবে exec কোড হবে এবং মডিউল হিসাবে এটি সংরক্ষণ করবে।

এই জাতীয় পরিবেশ তৈরির একটি সহজ উপায় হ'ল বন্ধ ব্যবহার করা। উদাহরণস্বরূপ, বলুন যে আপনার সার্ভারটি এইচটিটিপি-র মাধ্যমে উত্স ফাইল সরবরাহ করে http://example.com/js/foo.js। ব্রাউজারটি একটি এক্সএমএলএইচটিপিআরকুয়েস্টের মাধ্যমে প্রয়োজনীয় ফাইলগুলি লোড করতে পারে এবং কোডটি এমনভাবে লোড করতে পারে:

ajaxRequest({
  method: 'GET',
  url: 'http://example.com/js/foo.js',
  onSuccess: function(xhr) {
    var pre = '(function(){var exports={};'
      , post = ';return exports;})()';
    window.fooModule = eval(pre + xhr.responseText + post);
  }
});

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



1
আমি ব্যবহার করতাম window.fooModule = {}; (new Function('exports', xhr.responseText))(window.fooModule)
জিঞ্জারপ্লাসপ্লাস

2

পূর্ববর্তী কোনও সমাধান ব্রাউজারে কমনজেএস মডিউল সিস্টেমটি নিয়ে আসে না।

অন্যান্য উত্তরে উল্লিখিত হিসাবে, ব্রাউজারিফাই বা পাইলারের মতো সম্পদ পরিচালক / প্যাকেজার সমাধান রয়েছে এবং সেখানে ডিএনড বা নওজেসের মতো আরপিসি সমাধান রয়েছে

তবে আমি ব্রাউজারের জন্য (একটি require()ফাংশন এবং exports/ module.exportsঅবজেক্টস ইত্যাদিসহ) কমনজেএসের কোনও প্রয়োগকরণ খুঁজে পাইনি । সুতরাং আমি আমার নিজের লিখেছিলাম, কেবল পরে আবিষ্কার করার জন্য যে আমার চেয়ে আরও ভাল এটি অন্য কেউ লিখেছিলেন: https://github.com/weepy/brequire । এটিকে ব্রেকুইয়ার (ব্রাউজারের জন্য সংক্ষিপ্ত) বলা হয়।

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

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

তবে, আমি যদি ব্যক্তিগত ব্যবহারের জন্য বা কমনজেএস ( এম্পারস্যান্ড সম্প্রদায়ের মতো) এর জন্য মানক করা একটি সম্প্রদায়ের জন্য মডিউল লিখছি তবে আমি সেগুলি কেবল কমনজেএস ফর্ম্যাটে লিখব এবং ব্রাউজারফি ব্যবহার করব


1

now.js দেখতেও মূল্যবান। এটি আপনাকে ক্লায়েন্ট-পাশ থেকে সার্ভার-সাইড এবং সার্ভার-পাশ থেকে ক্লায়েন্ট-সাইড ফাংশনগুলি কল করতে দেয়


1
প্রকল্পটি বন্ধ করে দেওয়া হয়েছে - আপনি কি এর কোনও ভাল প্রতিস্থাপন সম্পর্কে জানেন? গ্রুপ.google.com/forum/#!msg/nowjs/FZXWZr22vn8/UzTMPD0tdVQJ
অ্যান্ডারসন গ্রীন

আমি জানি কেবলমাত্র অন্য একটি সেতুটি ছিল এবং এটি একই লোকেরা ছিল, তাই পরিত্যক্তও হয়েছিল। Socket.io এর 0.9 সংস্করণটি ইভেন্টগুলির জন্য কলব্যাকগুলি সমর্থন করে - তবে এখনের.জেএসএসের ভাগ করে নেওয়ার কোডের মতো কিছুই নয় তবে এটি যথেষ্ট ভাল কাজ করে।
বালুপটন

এছাড়াও রয়েছে শেয়ারজগুলি, যা সক্রিয়ভাবে রক্ষণাবেক্ষণ করা হয় বলে মনে হয়। sharejs.org
অ্যান্ডারসন সবুজ

1

আপনি যদি নিজের ব্রাউজারটি নোড.জেএস-এর মতো স্টাইলে লিখতে চান তবে আপনি দ্বিগুণ করার চেষ্টা করতে পারেন

কোনও ব্রাউজার কোড সংকলন নেই, তাই আপনি সীমাবদ্ধতা ছাড়াই আপনার অ্যাপ্লিকেশনটি লিখতে পারেন।


1

আপনার কোডটি প্রয়োজনীয় জেএস মডিউল এবং জেসমিন পরীক্ষা হিসাবে আপনার পরীক্ষাগুলি লিখুন ।

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

এখানে এটির জন্য একটি কার্যকারী উদাহরণ


1

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

সমস্যা: আপনি ব্যবহার করতে পারবেন না window(নোড.জেএস-তে বিদ্যমান নেই )ও নয়global (ব্রাউজারে নেই)।

সমাধান:

  • ফাইল কনফিগারেশন:

    var config = {
      foo: 'bar'
    };
    if (typeof module === 'object') module.exports = config;
  • ব্রাউজারে (index.html):

    <script src="config.js"></script>
    <script src="myApp.js"></script>

    আপনি এখন ডেভ সরঞ্জামগুলি খুলতে এবং গ্লোবাল ভেরিয়েবল অ্যাক্সেস করতে পারেন config

  • নোড.জেএস (app.js) এ:

    const config = require('./config');
    console.log(config.foo); // Prints 'bar'
  • বাবেল বা টাইপস্ক্রিপ্ট সহ:

    import config from './config';
    console.log(config.foo); // Prints 'bar'

1
এই জন্য আপনাকে ধন্যবাদ.
মাইক্রোসিস

ফলোআপ: ধরা যাক আমার কাছে দুটি ফাইল রয়েছে যা সার্ভার.জে এবং ক্লায়েন্ট.জেএস এর মধ্যে ভাগ করা আছে: shared.jsএবং helpers.js- shared.jsথেকে ফাংশন ব্যবহার করে helpers.js, তাই এটি const { helperFunc } = require('./helpers')সার্ভার-সাইডে কাজ করার জন্য শীর্ষে প্রয়োজন । সমস্যা ক্লায়েন্টে রয়েছে, এটি requireকোনও ফাংশন না হওয়ার বিষয়ে অভিযোগ করে, তবে আমি যদি প্রয়োজনীয় লাইনটি if (typeof module === 'object') { ... }গুটিয়ে রাখি তবে সার্ভার বলে যে হেল্পারফঙ্ক () বিবরণী নয় (যদি বিবৃতিটির বাইরে থাকে)। এটি উভয় উপর কাজ করতে কোন ধারণা?
মাইক্রোসিস

আপডেট: আমি মনে করি এটি এটিকে শীর্ষে রেখে কাজ করে চলেছে shared.js: helperFunc = (typeof exports === 'undefined') ? helperFunc : require('./helpers').helperFunc;- দুর্ভাগ্যক্রমে প্রতিটি রফতানি কার্যের জন্য একটি লাইন প্রয়োজন হবে তবে আশা করি এটির একটি ভাল সমাধান?
মাইক্রোসিস

1

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

ব্যবহারের উদাহরণ

1. মডিউল সংজ্ঞা

log2.jsআপনার স্থিতিশীল ওয়েব ফাইল ফোল্ডারের ভিতরে একটি ফাইলে নিম্নলিখিতটি রাখুন :

let exports = {};

exports.log2 = function(x) {
    if ( (typeof stdlib) !== 'undefined' )
        return stdlib.math.log(x) / stdlib.math.log(2);

    return Math.log(x) / Math.log(2);
};

return exports;

সরল!

2. মডিউল ব্যবহার

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

  • নোডে

নোডে, এটি সহজ:

var loader = require('./mloader.js');
loader.setRoot('./web');

var logModule = loader.importModuleSync('log2.js');
console.log(logModule.log2(4));

এই ফিরে আসা উচিত 2

যদি আপনার ফাইলটি নোডের বর্তমান ডিরেক্টরিতে না loader.setRootথেকে থাকে তবে আপনার স্থির ওয়েব ফাইল ফোল্ডারের (বা যেখানে আপনার মডিউল যেখানেই আছে) পাথ দিয়ে কল করতে ভুলবেন না ।

  • ব্রাউজারে:

প্রথমে ওয়েব পৃষ্ঠাটি সংজ্ঞায়িত করুন:

<html>
    <header>
        <meta charset="utf-8" />
        <title>Module Loader Availability Test</title>

        <script src="mloader.js"></script>
    </header>

    <body>
        <h1>Result</h1>
        <p id="result"><span style="color: #000088">Testing...</span></p>

        <script>
            let mod = loader.importModuleSync('./log2.js', 'log2');

            if ( mod.log2(8) === 3 && loader.importModuleSync('./log2.js', 'log2') === mod )
                document.getElementById('result').innerHTML = "Your browser supports bilateral modules!";

            else
                document.getElementById('result').innerHTML = "Your browser doesn't support bilateral modules.";
        </script>
    </body>
</html>

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

যদি সবকিছু ঠিকঠাক হয় তবে এটি প্রদর্শিত হবে:

এখানে চিত্র বর্ণনা লিখুন


0

আমি এটি লিখেছি, আপনি যদি সমস্ত পরিবর্তনশীলকে বৈশ্বিক সুযোগে সেট করতে চান তবে এটি ব্যবহার করা সহজ:

(function(vars, global) {
    for (var i in vars) global[i] = vars[i];
})({
    abc: function() {
        ...
    },
    xyz: function() {
        ...
    }
}, typeof exports === "undefined" ? this : exports);
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.