কীভাবে জিনিসগুলি ম্যাজেন্টো 2 কলগুলি "মিক্সিন" প্রয়োগ করা হয়?

Question

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

var config = {
    'config':{
        'mixins': {
            //the module to modify
            'Magento_Checkout/js/view/form/element/email': {
                //your module that will do the modification
                'Pulsestorm_RequireJsRewrite/hook':true
            }
        }
    }
};

তারপরে, আপনার hook.js(বা আপনার কনফিগার করা প্রয়োজনীয় জেএস মডিউলটি থাকা) দরকার,

define([], function(){
    console.log("Hello");
    return function(theObjectReturnedByTheModuleWeAreHookingInto){
        console.log(theObjectReturnedByTheModuleWeAreHookingInto);
        console.log("Called");
        return theObjectReturnedByTheModuleWeAreHookingInto;
    };
});

একটি ফাংশন ফিরে। আপনি সংশোধন করতে চান "মডিউল" এর একটি রেফারেন্স পেরিয়ে ম্যাজেন্টো এই ফাংশনটিকে কল করবে। আমাদের উদাহরণে এটি প্রয়োজনীয় জেএস মডিউল দ্বারা প্রত্যাবর্তিত বস্তু হবে Magento_Checkout/js/view/form/element/email। এটি কোনও ফাংশন, এমনকি স্কেলারের মানও হতে পারে (প্রয়োজনীয় জেএস মডিউলটি কী দেয় তার উপর নির্ভর করে)।

এই সিস্টেমটি ডাকা হবে বলে মনে হচ্ছে mixinsকারণ এটি যদি আপনার প্রয়োজনীয় প্রয়োজন জেএস মডিউল দ্বারা প্রত্যাবর্তিত বস্তুটি extendপদ্ধতিটিকে সমর্থন করে তবে আপনাকে আচরণের মতো মিক্সিন তৈরি করতে দেয় ।

define([], function(){
    'use strict';
    console.log("Hello");

    var mixin = {
        ourExtraMethod = function(){
            //...
        }
    };

    return function(theObjectReturnedByTheModuleWeAreHookingInto){
        console.log(theObjectReturnedByTheModuleWeAreHookingInto);
        console.log("Called");


        return theObjectReturnedByTheModuleWeAreHookingInto.extend(mixin);
    };
});

যাইহোক, সিস্টেম নিজেই মডিউল অবজেক্ট তৈরির একমাত্র উপায়।

উপস্থাপিকা সমাপ্ত - কেউ কি জানেন যে কীভাবে ম্যাজেন্টো এই কার্যকারিতাটি কার্যকর করেছে? RequireJS ওয়েবসাইটটি মিশ্রণের কথা উল্লেখ করেছে বলে মনে হয় না (যদিও গুগল মনে করে আপনি প্রয়োজনীয় জেএস এর প্লাগইন পৃষ্ঠাটি চাইতে পারেন )।

requirejs-config.jsফাইলগুলির বাইরে , ম্যাজেন্টো 2 এর মূল জাভাস্ক্রিপ্ট কেবল mixinsতিনটি ফাইলে উল্লেখ করেছে

$ find vendor/magento/ -name '*.js' | xargs ack mixins
vendor/magento/magento2-base/lib/web/mage/apply/main.js
73:                            if (obj.mixins) {
74:                                require(obj.mixins, function () {
79:                                    delete obj.mixins;

vendor/magento/magento2-base/lib/web/mage/apply/scripts.js
39:            if (_.has(obj, 'mixins')) {
41:                data[key].mixins = data[key].mixins || [];
42:                data[key].mixins = data[key].mixins.concat(obj.mixins);
43:                delete obj.mixins;

vendor/magento/magento2-base/lib/web/mage/requirejs/mixins.js
5:define('mixins', [
24:     * Adds 'mixins!' prefix to the specified string.
30:        return 'mixins!' + name;
76:     * Iterativly calls mixins passing to them
80:     * @param {...Function} mixins
84:        var mixins = Array.prototype.slice.call(arguments, 1);
86:        mixins.forEach(function (mixin) {
96:         * Loads specified module along with its' mixins.
102:                mixins   = this.getMixins(path),
103:                deps     = [name].concat(mixins);
111:         * Retrieves list of mixins associated with a specified module.
114:         * @returns {Array} An array of paths to mixins.
118:                mixins = config[path] || {};
120:            return Object.keys(mixins).filter(function (mixin) {
121:                return mixins[mixin] !== false;
126:         * Checks if specified module has associated with it mixins.
137:         * the 'mixins!' plugin prefix if it's necessary.
172:    'mixins'
173:], function (mixins) {
237:        deps = mixins.processNames(deps, context);
252:            queueItem[1] = mixins.processNames(lastDeps, context);

mixins.jsফাইলটি একটি RequireJS প্লাগ ইন উপস্থিত হতে পারে (উপর ভিত্তি করে !...মন্তব্য উল্লেখ করেছে - এই অধিকার হয়) কিন্তু এটা না 100% পরিষ্কার যখন main.jsবা scripts.jsMagento দ্বারা প্রার্থনা করা হয়, বা কীভাবে কাস্টম mixinsকনফিগারেশন থেকে এটা তোলে requirejs-config.jsশ্রোতা / হুক সিস্টেমের মধ্যে উপরে বর্ণিত.

এই "সিস্টেমটি কীভাবে প্রয়োগ / প্রয়োগ করা / আর্কিটেটেড করা হয়েছিল" কেন একটি "মিক্সিন" প্রয়োগ করা যেতে পারে বা না করা যেতে পারে তার দিকে নজর রেখেই কী কারোর ব্যাখ্যা রয়েছে?

Answer 1

আমি সরাসরি আপনার প্রশ্নগুলিতে যেতে চাই এবং তারপরে আপনি মিক্সিন প্লাগইনটি দিয়ে আসলে কী করতে পারবেন সে সম্পর্কে আমি এটি পরিষ্কার করার চেষ্টা করব । সুতরাং, প্রথম জিনিস।

বাস্তবায়ন

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

ম্যাজেন্টো কাস্টম মিক্সিন প্লাগইন আসলে কী তা এই স্কেচি বাস্তবায়নটি একবার দেখুন :

// RequireJS config object.
// Like this one: app/code/Magento/Theme/view/base/requirejs-config.js
{
    //...

    // Every RequireJS plugin is a module and every module can
    // have it's configuration.
    config: {
        sampleMixinPlugin: {
            'path/to/the/sampleModule': ['path/to/extension']
        }
    }
}

define('sampleMixinPlugin', [
    'module'
] function (module) {
    'use strict';

    // Data that was defined in the previous step.
    var mixinsMap = module.config();

    return {
        /**
         * This method will be invoked to load a module in case it was requested
         * with a 'sampleMixinPlugin!' substring in it's path,
         * e.g 'sampleMixinPlugin!path/to/the/module'.
         */
        load: function (name, req, onLoad) {
            var mixinsForModule = [],
                moduleUrl = req.toUrl(name),
                toLoad;

            // Get a list of mixins that need to be applied to the module.
            if (name in mixinsMap) {
                mixinsForModule = mixinsMap[name];
            }

            toLoad = [moduleUrl].concat(mixinsForModule);

            // Load the original module along with mixins for it.
            req(toLoad, function (moduleExport, ...mixinFunctions) {
                // Apply mixins to the original value exported by the sampleModule.
                var modifiedExport = mixinFunctions.reduce(function (result, mixinFn) {
                        return mixinFn(result);
                }, moduleExport);

                // Tell RequireJS that this is what was actually loaded.
                onLoad(modifiedExport);
            });
        }
    }
});

শেষ এবং সবচেয়ে চ্যালেঞ্জিং অংশটি হল 'নমুনা মিক্সিনপ্লাগিন!' অনুরোধ করা মডিউলগুলিতে সাবস্ট্রিং। এটি করার জন্য আমরা বাধা defineও অনুরোধ requireজানাই এবং নির্ভরতার তালিকাটি মূল প্রয়োজনীয়তা জেএস লোড পদ্ধতি দ্বারা প্রক্রিয়া করার আগে তাদের সংশোধন করি। এটি কিছুটা জটিল এবং lib/web/mage/requirejs/mixins.jsআপনি কীভাবে এটি কাজ করতে চান তা বাস্তবায়নের দিকে নজর দেওয়ার পরামর্শ দেব ।

ডিবাগ

আমি এই পদক্ষেপগুলি সুপারিশ করব:

• নিশ্চিত করুন যে 'মিক্সিংস' এর জন্য কনফিগারেশন! প্লাগইন আসলে আছে ।
• কোনও মডিউলটির পথটি সংশোধন করা হচ্ছে তা পরীক্ষা করুন । অর্থাত তা থেকে দেখা যাচ্ছে path/to/moduleকরার mixins!path/to/module।

এবং সর্বশেষ তবে অন্তত নয়, requiresjs/mixins.jsএর সাথে main.jsবা script.jsমডিউলগুলির কোনও সম্পর্ক নেই কারণ তারা data-mage-initবৈশিষ্ট্যটি থেকে কনফিগারেশনটি কেবল পাসওয়ার্ডকেই প্রসারিত করতে পারে :

<div data-mage-init='{
    "path/to/module": {
        "foo": "bar",
        "mixins": ["path/to/configuration-modifier"]
    }
}'></div>

আমি বোঝাতে চাইছি যে পূর্ববর্তী দুটি ফাইল কোনও মডিউল দ্বারা প্রত্যাবর্তিত মানটি নিয়ে গণ্ডগোল করে না, পরিবর্তে তারা কোনও উদাহরণের প্রাক-প্রক্রিয়া কনফিগারেশন।

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

প্রথমে আমি রেকর্ডটি সেট করতে চাই যা তথাকথিত "মিক্সিনস" (আপনি নাম বদলে দেওয়ার বিষয়ে ঠিক বলেছেন) আসলে আপনি যেভাবে চান মডিউলটির রফতানি মূল্য পরিবর্তন করতে পারবেন। আমি বলব যে এটি একটি উপায় আরও জেনেরিক প্রক্রিয়া।

মডিউল দ্বারা রফতানি করা ফাংশনে অতিরিক্ত কার্যকারিতা যুক্ত করার একটি দ্রুত নমুনা এখানে দেওয়া হয়েছে:

// multiply.js
define(function () {
    'use strict';

    /**
     * Multiplies two numeric values.
     */
    function multiply(a, b) {
        return a * b;
    }

    return multiply;
});

// extension.js
define(function () {
    'use strict';

    return function (multiply) {
        // Function that allows to multiply an arbitrary number of values.
        return function () {
            var args = Array.from(arguments);

            return args.reduce(function (result, value) {
                return multiply(result, value);
            }, 1);
        };
    };
});

// dependant.js
define(['multiply'], function (multiply) {
    'use strict';

    console.log(multiply(2, 3, 4)); // 24
});

আপনি কোনও মডিউল দ্বারা প্রত্যাবর্তিত যে কোনও অবজেক্ট / ক্রিয়াকলাপের জন্য একটি প্রকৃত মিশ্রিন প্রয়োগ করতে পারেন এবং আপনাকে কোনও extendপদ্ধতিতে নির্ভর করতে হবে না ।

কনস্ট্রাক্টর ফাংশন বাড়ানো:

// construnctor.js
define(function () {
    'use strict';

    function ClassA() {
        this.property = 'foo';
    }

    ClassA.prototype.method = function () {
        return this.property + 'bar';
    }

    return ClassA;
});

// mixin.js
define(function () {
    'use strict';

    return function (ClassA) {
        var originalMethod = ClassA.prototype.method;

        ClassA.prototype.method = function () {
            return originalMethod.apply(this, arguments) + 'baz';
        };

        return ClassA;
    }
});

আমি আশা করি এটি আপনার প্রশ্নের উত্তর দেয়।

শুভেচ্ছা।

Comments

ধন্যবাদ! ঠিক আমি যা খুঁজছিলাম - কেবলমাত্র আমার অন্য প্রশ্নটি হ'ল - mixinsকনফিগারেশন x-magento-initএবং data-mage-initকনফিগারেশনগুলি কী করে? যেমন - আপনার উপরের উদাহরণে, এমন path/to/configuration-modifierকোনও কলব্যাকও ফেরত দেবে যা কনফিগারেশন ডেটা সংশোধন করতে পারে? অথবা অন্য কিছু?

— অ্যালান ঝড়

হ্যাঁ, অবশ্যই! এমন একটি কলব্যাক ফেরত দেওয়ার কথা যা থেকে আপনি কনফিগারেশন ডেটা পরিবর্তন করতে পারেন।

— ডেনিস রুল

আপনি সামনের প্রান্তের স্টাফগুলি প্রায় খুব ভালভাবে জানেন বলে মনে হয় - এই দুটি প্রশ্নের কোনও অন্তর্দৃষ্টি? magento.stackexchange.com/questions/147899/… magento.stackexchange.com/questions/147880/…

— অ্যালান ঝড়

Answer 2

ডেনিস রুলের উত্তরকে গোল করে ফেলার জন্য ।

সুতরাং, আপনি যদি কোনও ম্যাজেন্টো পৃষ্ঠার দিকে তাকান, তবে ম্যাগেন্টো <script/>লোড করা তিনটি ট্যাগ এখানে ।

<script  type="text/javascript"  src="http://magento.example.com/pub/static/frontend/Magento/luma/en_US/requirejs/require.js"></script>
<script  type="text/javascript"  src="http://magento.example.com/pub/static/frontend/Magento/luma/en_US/mage/requirejs/mixins.js"></script>
<script  type="text/javascript"  src="http://magento.example.com/pub/static/_requirejs/frontend/Magento/luma/en_US/requirejs-config.js"></script>

এটি হ'ল RequireJS নিজে ( require.js), mixins.jsপ্লাগইন এবং মার্জ করা প্রয়োজনীয় JS কনফিগারেশন ( requirejs-config.js)।

mixins.jsফাইলটি একটি RequireJS প্লাগ ইন সংজ্ঞায়িত করে। এই প্লাগইনটি প্রয়োজনীয় জেএস মডিউলগুলি লোড করা এবং কল করার জন্য দায়ী যা অন্যান্য প্রয়োজনীয় জেএস মডিউলের তাত্ক্ষণিকতার জন্য শোন।

এই প্লাগ এছাড়াও পরে এটি mixin প্লাগইন সংজ্ঞায়িত একটি requirejs প্রোগ্রাম রয়েছে।

require([
    'mixins'
], function (mixins) {
    'use strict';
    //...

    /**
     * Overrides global 'require' method adding to it dependencies modfication.
     */
    window.require = function (deps, callback, errback, optional) {
        //...
    };

    //...

    window.define = function (name, deps, callback) {
        //...
    };

    window.requirejs = window.require;
});

এই দ্বিতীয় প্রোগ্রাম লোড শুধু সংজ্ঞায়িত mixinsনির্ভরশীলতার প্লাগইনটি, এবং তারপর redefines বিশ্বব্যাপী require, defineএবং requirejsফাংশন। এই পুনরায় সংজ্ঞাটি নিয়মিত ক্রিয়াকলাপগুলিতে জিনিসগুলি ফেরত দেওয়ার আগে "জাস্ট ম্যাক্সিন নয়" সিস্টেমটি প্রয়োজনীয় জেএস মডিউলের প্রাথমিক ইনস্ট্যান্টিশনে প্রবেশের অনুমতি দেয়।