Dojo AMD: لا يمكن استدعاء وظيفة داخل

StackOverflow https://stackoverflow.com//questions/9626821

  •  09-12-2019
  •  | 
  •  

سؤال

أنا حقا مبتدئ إلى دوجو ولكن كما بدأت تطوير تطبيق جديد مع DOJO الإصدار 1.7.2 أردت أيضا استخدام بناء جملة AMD الجديد للوظائف. لسوء الحظ، لا يبدو أنني أحصل عليه. :-(

ما يزعجني هو أنه لا يمكنني ببساطة الاتصال بأي وظيفة داخل "تتطلب". على سبيل المثال، لدي صفحة تعمل على فتح جدول ديناميكي مع العديد من الحاجيات في كل صف. ثم لدي زر يضيف صف واحد فارغ في كل مرة يتم الضغط عليها.

بدون بناء جملة AMD سيكون من السهل:
- ضع كل ما عندي من "dojo.require ()" في الرأس
- ثم قم بإنشاء مجموعة من وظائفي الخاصة لإنشاء الجدول والحاجيات
- وظيفة إضافة صف يمكن الوصول بسهولة إلى أي متغيرات عالمية وظيفتي السابقة معتمدة

ولكن مع AMD مثل هذا:

الوظيفة الأولية تنشئ الجدول والحاجيات: giveacodicetagpre.

الآن "إضافة زر صف فارغ" يستدعي وظيفة خاصة به "AddemptRow".
ولكن في هذه الوظيفة لا بد لي من:
- هل تتطلب الآخر لكل وحدة دوجو مرة أخرى
- لا يمكنني استخدام أي من الوظائف التي "داخل" من "FillReportTable" -Function. على سبيل المثال "CreateNewrow" -Function giveacodicetagpre.

يبدو أن كل شيء معقد كثيرا مع AMD.
أم أنني أفتقد شيئا واضحا هنا؟ مع AMD إذا قمت بفصل التعليمات البرمجية الخاصة بك إلى الكثير من الوظائف الصغيرة، هل تفعل "طلب" داخل كل وظيفة مرة أخرى؟ أو هل وضعت جميع الوظائف داخل واحد "تتطلب" مع القائمة الكاملة؟
إذا قمت بذلك بالطريقة الثانية، كيف يمكنك استدعاء هذه الوظائف من أحداث القطعة؟

هل كانت مفيدة؟

المحلول

The easiest way would be to define your own module. Take a look at this tutorial first:

http://dojotoolkit.org/documentation/tutorials/1.7/modules/

Now define your own module, e.g. "./js/mymodules/mymodule.js" (relative to HTML page):

define([
    "dojo/dom-construct",
    "dojo/dom-attr",
    "dijit/form/FilteringSelect",
    "dojo/data/ItemFileReadStore",
    "dijit/form/ComboBox",
    "dijit/form/DateTextBox",
    "dijit/form/Select",
    "dojo/store/Memory"
], function (domConstruct, domAttr, FilteringSelect, ItemFileReadStore, ComboBox, DateTextBox, Select, Memory) {

    function fillReportTable(repId) {
       // a lot of code to create the table, consisting of SEVERAL functions 
       function createNewRow(tbl) { ...} 
       function function1 () {... } 
       function function2 () {... } 
       function function3 () {... } 
    }

    function addEmptyRow() {
       // a lot of code to create the table, consisting of SEVERAL functions
    }

    // Return an object that exposes two functions
    return {
        fillReportTable: fillReportTable,
        addEmptyRow: addEmptyRow
    }

});

And use your module like this:

<html>

<head>

<script>
var dojoConfig = {
    baseUrl: "./js/",
    packages: [
        { name: "dojo", location: "lib/dojo" },
        { name: "dijit", location: "lib/dijit" },
        { name: "dojox", location: "lib/dojox" }
    ]
};
</script>

<script data-dojo-config="async: true" src="js/lib/dojo/dojo.js"></script>

</head>

...

<script>
require([
    "mymodules/mymodule"
], function (mymodule) {
    mymodule.fillReportTable(...);
    mymodule.addEmptyRow(...);
});
</script>

نصائح أخرى

Try this:

require([...], function() {
    var myFunctions = dojo.getObject('myFunctions', true);
    myFunctions.createNewRow = function(...) {
        ...
    };
});

You can now call your functions from anywhere by using 

myFunctions.createNewRow();

If you don't want 'myFunctions', you could do

require([...], function() {
    var createNewRow = function(...) {};

    dojo.setObject('createNewRow', createNewRow);
});

Paul Grime gave you a good example, so I'm just sharing some thoughts.

You don't define all the modules in each function, that's a huge waste of space. Although, even if you try to load a module multiple times, Dojo will only load it once anyway.

This is a simplified module from my latest project, with quite meaningless functionality:

//app module in 'my' folder

define(
[
    'app/elements',
    'dojo/query',
    'dojo/on',
    'dojo/fx',
    'dojo/_base/fx',
    'dojo/dom-construct',
    'dojo/_base/event'

    //and so on.....
], 

function(elements, q, on, fx, baseFx, constr, event)
{   
    return {

        init : function()
        {
            var node = q(elements.loading);
            this.removeNode(node);

            this.addEvents();
        },

        removeNode : function(node)
        {
            node.remove();
        },

        addEvents : function()
        {
            $(elements.buttons).on('click', function(e)
            {
                alert(q(e).attr('id') + ' was clicked!');
            });
        }   
    }
}

Then I get the module by using

define(
[
    'my/app',
], 

function (app) 
{
    app.init();
}
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top