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

Muatkan modul bergantung js mengikut kemahiran fail_javascript konfigurasi

WBOY
Lepaskan: 2016-05-16 16:23:36
asal
923 orang telah melayarinya

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"));
Label berkaitan:
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan