Rumah hujung hadapan web tutorial js Muatkan modul bergantung js mengikut kemahiran fail_javascript konfigurasi

Muatkan modul bergantung js mengikut kemahiran fail_javascript konfigurasi

May 16, 2016 pm 04:23 PM
js memuatkan

Keperluan:

Mengikut fail konfigurasi di bawah

Salin kod Kod adalah seperti berikut:

modul=[
{'name':'jquery','src':'/js/lib/jquery-1.8.3.js'},
{'name':'swfobject','src':'/js/utils/swfobject.js'},
{'name':'fancybox','src':'/js/jquery/jquery.fancybox.js','require':['jquery']},
{'name':'uploadify','src':'/js/utils/uploadify.js','require':['swfobject']},
{'name':'jqform','src':'/js/jquery/jquery.form.js','require':['jquery']},
{'name':'register','src':'/js/page/reg.js','require':['jqform']},
{'name':'login','src':'/js/page/login.js','require':['fancybox','jqform']},
{'name':'upload','src':'/js/page/upload.js','require':['fancybox','jqform','uploadify']}
]

Tulis fungsi

def getfiles(nama)

Kembali untuk memuatkan halaman yang ditentukan oleh nama tertentu, senarai fail js yang akan dimuatkan dan fail yang mempunyai kebergantungan mesti dimuatkan dahulu

Penyelesaian snek

Soalan ini kelihatan mudah pada pandangan pertama, tetapi tidak.

Kesukarannya terletak pada masa memuatkan modul bergantung. Jika terdapat hubungan pergantungan sedemikian: A-B&C, B-C, modul A bergantung pada modul B dan modul C, dan modul B bergantung pada modul C, kami tidak boleh membiarkan C dimuatkan dua kali!

Penyelesaian yang diberikan oleh Xiaocai hanyalah idea mesti ada algoritma yang lebih baik daripada ini Xiaocai berpendapat ia boleh diselesaikan dengan algoritma seperti pokok binari, tetapi Xiaocai tidak tahu bagaimana~~~

Algoritma ini tidak menganggap kebergantungan bulat.

Kodnya adalah seperti berikut:

Salin kod Kod adalah seperti berikut:

/**
* Tidak menganggap kebergantungan bulat
* @type {Fungsi}
,*/
var loadModule = (function(){
/**
* Enkapsulasi logik perniagaan
* @type {{chainHead: {}, chainCurrent: {}, srcCache: {}, main: main, load: load, findModule: findModule}}
'*/
var logik = {
Kepala rantai: {}, // Pautan
         rantaiSemasa: {}, //Nod semasa senarai terpaut
           srcCache: {},         //modul src cache
           /**
* Antara muka luaran
* Modul @param Objek konfigurasi
* @param nama Nama modul
* @returns {Array} Senarai modul bergantung, disusun mengikut urutan pemuatan
                       */
           utama: fungsi (modul, nama){
            var nameArray = [], //Senarai nama modul
Srcarray = [], // Senarai modul bergantung
Namestr = "", // Set rentetan nama modul
                                                                                                                                                                                                                                  … 🎜>                    i = 0;
//Muat kasar semua modul bergantung
This.load(modul, nama)
//Bina set rentetan nama modul
This.chainCurrent = this.chainHead;
             sementara (this.chainCurrent.next){
nameArray.push(this.chainCurrent.name);
This.chainCurrent = this.chainCurrent.next;
            }
                  nameStr = nameArray.join(" ") " "; // Satukan standard, tambahkan ruang di hujung
                             // Penyahduplikasi modul bergantung
​​​​​​while(repeatRegex.exec(nameStr)){
nameStr = nameStr.replace(repeatRegex, function(g0, g1, g2){
                            kembali g0.substring(0, (g0.length - g2.length));
                 });
            }
                 nameStr = nameStr.substring(0, (nameStr.length - 1)); //Alih keluar ruang tambahan tambahan
//Tukar nama modul bergantung kepada laluan modul
nameArray = nameStr.split(" ");
untuk(i = 0; i < nameArray.length; i ){
                  srcArray.push(this.srcCache[nameArray[i]]);
            }
                 kembalikan srcArray;
         },
          /**
* Muatkan modul secara rekursif
* Modul @param Objek konfigurasi
* @param nama Nama modul
           */
Beban: fungsi(modul, nama){
            nod var = {},
                      modul = this.findModule.call(modul, "nama", nama),
                   i = 0;
//Tentukan sama ada modul itu wujud
Jika(!modul){
throw Error("Nama modul bergantung " " tidak dijumpai");
            }
//Bina senarai pergantungan modul
                 node.name = nama;
// node.src = module.src;
This.srcCache[name] = module.src;
Node.next = this.chainHead;
This.chainHead = nod;
//Pergantungan rekursif
Jika(modul.memerlukan && modul.memerlukan.panjang){
untuk(i = 0;i < modul.memerlukan.panjang; i ){
This.load(modules, module.require[i]);
                 }
            }
         },
           /**
* Cari modul berdasarkan nama atribut dan nilai atribut yang ditentukan
* Nama @param Nama atribut
* Nilai @param Nilai atribut
* @kembali {*}
                       */
           findModule: function(nama, nilai){
            tatasusunan var = ini,
Item = {},
                   i = 0;
//Modul lintasan
untuk(i = 0; i < tatasusunan.panjang; i ){
Item = tatasusunan[i];
//Dapatkan modul yang ditentukan
Jika(item && item[nama] === nilai){
                             pulangkan item;
                 }
            }
//Tidak dapat ditemui dan mengembalikan null
              kembalikan null;
         }
};
//Dedahkan antara muka luaran
Kembalikan fungsi(){
            kembalikan logics.main.apply(logik, hujah);
};
}());
 /**
  * Kes Penggunaan Ujian
  * @taip {*[]}
 */
 var modul=[
     {'name':'jquery','src':'/js/lib/jquery-1.8.3.js'},
     {'name':'swfobject','src':'/js/utils/swfobject.js'},
     {'name':'fancybox','src':'/js/jquery/jquery.fancybox.js','require':['jquery']},
     {'name':'uploadify','src':'/js/utils/uploadify.js','require':['swfobject']},
     {'name':'jqform','src':'/js/jquery/jquery.form.js','require':['jquery']},
     {'name':'register','src':'/js/page/reg.js','require':['jqform']},
     {'name':'login','src':'/js/page/login.js','require':['fancybox','jqform']},
     {'name':'upload','src':'/js/page/upload.js','require':['fancybox','jqform','login','uploadify']}
 ];
 console.log(loadModule(modul, "muat naik"));
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Tag artikel panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Ralat memuatkan pemalam dalam Illustrator [Tetap] Ralat memuatkan pemalam dalam Illustrator [Tetap] Feb 19, 2024 pm 12:00 PM

Ralat memuatkan pemalam dalam Illustrator [Tetap]

Sari kata Stremio tidak berfungsi; ralat memuatkan sari kata Sari kata Stremio tidak berfungsi; ralat memuatkan sari kata Feb 24, 2024 am 09:50 AM

Sari kata Stremio tidak berfungsi; ralat memuatkan sari kata

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta Nov 21, 2023 am 10:00 AM

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi pan peta

Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS Dec 17, 2023 pm 06:55 PM

Alat penting untuk analisis saham: Ketahui langkah-langkah untuk melukis carta lilin dengan PHP dan JS

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik Apr 03, 2024 am 11:55 AM

Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik

Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok Dec 18, 2023 pm 03:39 PM

Petua Pembangunan PHP dan JS: Kuasai Kaedah Melukis Carta Lilin Stok

Cara membuat carta candlestick saham menggunakan PHP dan JS Cara membuat carta candlestick saham menggunakan PHP dan JS Dec 17, 2023 am 08:08 AM

Cara membuat carta candlestick saham menggunakan PHP dan JS

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi lukisan poligon peta Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi lukisan poligon peta Nov 21, 2023 am 10:53 AM

Cara menggunakan Peta JS dan Baidu untuk melaksanakan fungsi lukisan poligon peta

See all articles