Pertanyaan Dojo require () dan AMD (1.7)


Saya mengalami heckuva saat bertransisi ke Dojo dan struktur AMD baru, dan saya benar-benar berharap seseorang dapat menjelaskan konsep keseluruhan. Saya telah tinggal di Google selama beberapa minggu terakhir untuk mencari informasi tentang bukan penggunaan, tetapi struktur dan tren pola desain dalam menggunakan ini.

Saya merasa aneh bahwa untuk aplikasi javascript yang relatif rumit, seperti untuk halaman utama di mana Dijits harus dibuat dan ditata, elemen DOM dibuat, dll, yang harus saya perlukan, dan karena itu gunakan, TON modul yang berbeda yang jika tidak tersedia di namespace dojo sebelum sistem AMD (atau, setidaknya, tidak ditugaskan ke 23 var yang berbeda).

Contoh:

require(['dijit/form/ValidationTextBox', 'dijit/form/SimpleTextarea', 'dijit/form/CheckBox', 'dijit/Dialog', 'dijit/form/Form'])
require(['dojo/ready', 'dojo/parser', 'dojo/dom-style', 'dijit/registry', 'dojo/dom', 'dojo/_base/connect', 'dojo/dom-construct'], 
function(ready, parser, style, registry, dom, event, construct){
    //...etc
}

Itu hanya beberapa modul untuk salah satu halaman yang sedang saya kerjakan. Tentunya ada cara rilis yang lebih baik, tanpa pemecahan masa depan dalam mengakses metode ini, dll. Maksud saya, apakah saya benar-benar harus mengimpor modul yang sepenuhnya baru untuk digunakan byId()? Dan satu lagi untuk menghubungkan acara? Di atas semua itu, semua kekacauan yang dibuat dengan harus menetapkan nama variabel dalam daftar argumen fungsi untuk melekat hanya tampak seperti langkah mundur.

Saya pikir mungkin Anda akan melakukannya require() modul hanya bila diperlukan, seperti query modul, tetapi jika saya membutuhkannya lebih dari sekali, maka kemungkinan variabel yang ditugaskan untuk keluar dari ruang lingkup, dan saya harus memasukkannya ke dalam domReady! atau ready panggilan. reaalllly .... ??!

Itu sebabnya saya hanya bisa berasumsi itu adalah kurangnya pemahaman saya untuk dojo.

Saya benar-benar telah mencari dan mencari dan membeli buku-buku (meskipun, yang pertama AMD), tetapi perpustakaan ini benar-benar memberi saya uang saya. Saya menghargai cahaya siapa pun dapat mencurahkan ini.

Edit untuk Contoh

require(['dijit/form/ValidationTextBox'])
require(['dojo/ready', 'dojo/parser', 'dojo/dom-style', 'dijit/registry', 'dojo/dom', 'dojo/_base/connect', 'dojo/dom-construct'], function(ready, parser, style, registry, dom, event, construct){
    /* perform some tasks */
    var _name = new dijit.form.ValidationTextBox({
        propercase : true,
        tooltipPosition : ['above', 'after']
    }, 'name')

    /*
    Let's say I want to use the query module in some places, i.e. here.
    */
    require(['dojo/query', 'dojo/dom-attr'], function(query, attr){
        query('#list li').forEach(function(li){
            // do something with these
        })
    })
}

Didasarkan dari format ini, yang digunakan dengan banyak contoh baik dari orang-orang dojo toolkit maupun situs pihak ketiga, itu akan, IMHO, benar-benar konyol untuk memuat semua modul yang diperlukan sebagai yang pertama function(ready, parser, style, registy... akan semakin panjang dan panjang, dan menciptakan masalah dengan penamaan tabrakan, dll.

Bersemangat dan require()ing semua modul yang saya perlukan selama kehidupan naskah tampaknya konyol bagi saya. Yang sedang berkata, saya harus melihat beberapa skrip "manajer paket". Tapi untuk contoh ini, jika saya ingin menggunakan modul kueri di tempat-tempat tertentu, saya harus memuatnya dengan yang lain di utama require() pernyataan. Saya mengerti mengapa sampai batas tertentu, tetapi apa yang begitu buruk dengan ruang nama dot-sintaks generik? dojo.whatever? dijit.findIt ()? Mengapa memuat modul, referensi dalam nama yang unik, melewati penutupan, bla bla?

Saya berharap ini adalah pertanyaan yang lebih mudah untuk ditanyakan, tetapi saya harap itu masuk akal.

Kejengkelan

Panggil aku newb, tapi ini benar-benar ... sungguh membuatku gila. Saya tidak noob ketika datang ke Javascript (ternyata tidak) tapi wow. Saya tidak bisa memikirkan ini  di luar!

Inilah yang saya kumpulkan. Di adder.js:

define('adder', function(require, exports){
    exports.addTen = function(x){
        return x + 10
    }
})

Di beberapa halaman master atau apa pun:

require(['./js/cg/adder.js'])

... yang tidak mengikuti rapi require(['cg/adder'])format tetapi apa pun. Tidak penting sekarang.

Kemudian, penggunaan adder seharusnya:

console.log(adder.addTen(100)) // 110

Yang paling dekat saya dapatkan adalah console.log(adder) kembali 3. Ya. 3. Kalau tidak, itu adder is not defined.

Mengapa ini harus begitu sulit? Saya menggunakan kartu noob saya tentang ini, karena saya benar-benar tidak tahu mengapa ini tidak datang bersama.

Terima kasih teman-teman.


32
2018-02-08 00:06


asal


Jawaban:


Format array ketergantungan:

define(["a", "b", "c"], function (a, b, c) {
});

memang bisa menjengkelkan dan rawan kesalahan. Mencocokkan entri array ke parameter fungsi adalah rasa sakit yang nyata.

Saya lebih suka require format ("Simplified CommonJS Wrapper"):

define(function (require) {
    var a = require("a");
    var b = require("b");
    var c = require("c");
});

Ini membuat garis Anda pendek dan memungkinkan Anda mengatur ulang / menghapus / menambahkan garis tanpa harus mengingat untuk mengubah berbagai hal di dua tempat.

Format yang terakhir tidak akan berfungsi pada peramban seluler PS3 dan Opera yang lebih lama, tetapi semoga Anda tidak peduli.


Adapun mengapa melakukan ini bukan secara manual menunjuk objek, jawaban @ peller memberikan gambaran yang baik tentang mengapa modularitas adalah hal yang baik, dan jawaban saya untuk pertanyaan serupa berbicara tentang mengapa AMD dan sistem modul sebagai cara mencapai modularitas adalah hal yang baik.

Satu-satunya hal yang akan saya tambahkan ke jawaban @ peller adalah memperluas "memperhatikan ketergantungan sebenarnya membuat kode yang jauh lebih baik." Jika modul Anda membutuhkan terlalu banyak modul lain, itu pertanda buruk! Kami memiliki aturan longgar dalam basis kode JavaScript 72K LOC kami bahwa modul harus ~ 100 baris panjang dan membutuhkan antara nol dan empat dependensi. Ini melayani kita dengan baik.


20
2018-02-08 05:05



requirejs.org memberikan gambaran yang cukup bagus tentang apa itu AMD dan mengapa Anda ingin menggunakannya. Ya, Dojo bergerak menuju modul yang lebih kecil yang akan Anda rujuk secara individual. Hasilnya adalah Anda memuat lebih sedikit kode, dan referensi Anda ke situ bersifat eksplisit. Memperhatikan ketergantungan sebenarnya membuat kode yang jauh lebih baik, saya kira. AMD memungkinkan pengoptimalan, dan setelah migrasi selesai, Anda tidak perlu memuat semuanya ke dalam dunia global lagi. Tidak ada tabrakan lagi! Blok require () membungkus kode yang menggunakan berbagai modul. domReady! berkaitan dengan pemuatan DOM dan tidak ada hubungannya dengan variabel dalam lingkup.

Bagaimanapun, ini menyimpang dari Q & A format SO. Anda mungkin ingin mengajukan pertanyaan spesifik.


12
2018-02-08 01:27