pengaturcaraan modular JavaScript (nota)_kemahiran javascript

Saya sentiasa mempunyai sedikit pengetahuan tentang JS. Saya menghadapi masalah ini baru-baru ini, jadi saya mempelajarinya dalam talian saya masih tidak memahaminya sepenuhnya, jadi saya akan menyiarkan nota saya dahulu

Bab 1 Pengaturcaraan Modular JavaScript

(1): Cara menulis modul

1 Tulisan asal
// Modul ialah satu set kaedah untuk melaksanakan fungsi tertentu selagi fungsi berbeza (dan pembolehubah yang merekodkan status) disatukan, ia adalah modul; Fungsi m1(){                // ...
}
Fungsi m2(){
               // ...
}
// Fungsi di atas m1() dan m2() membentuk modul sahaja; // Kelemahan: Pembolehubah global "Tercemar"; tidak ada jaminan bahawa nama pembolehubah tidak akan bercanggah dengan modul lain, dan tiada hubungan langsung antara ahli modul;

2 Kaedah Penulisan Objek

3 Bagaimana untuk menulis fungsi pelaksanaan segera

// 把模块写成一个对象,所有的模块成员都放到这个对象里面;
  var module = new Object({
    _count:0,
    m1:function(){
      // ...
    },
    m2:function(){
      // ...
    }
  });
// 上面的函数m1()和m2(),都封装在module对象里;使用时直接调用这个对象的属性;
  module.m1();
// 但是,这样的写法会暴露所有模块成员,内部状态可以被外部改写;
  module._count = 4;

Empat mod zum

  var module = (function(){
    var _count = 0;
    var m1 = function(){
      // ...
    };
    var m2 = function(){

    };
    return {
      m1:m1,
      m2:m2
    };
  })();
// 使用上面的写法,外部代码无法读取内部的_count变量;
  console.info(module._count); // undefined;
// 上面的写法就是JavaScript模块的基本写法;

5 mod zum lebar

// 如果模块很大,必须分成几个部分,或者一个模块需要继承另一个模块,这时就有必要采用"放大模式";
  var module = (function(mod){
    mod.m3 = function(){
      // ...
    };
    return mod;
  })(module);
// 上面的代码为module模块添加了一个新方法m3(),然后返回新的module模块;

6 Masukkan pembolehubah global

// 在浏览器环境中,模块的各个部分通常都是从网上获取的,有时无法知道哪个部分会先加载;
// 如果采用上一节的写法,第一个执行的部分有可能加载一个不存在的空对象,这时就要采用"宽放大模式";
  var module = (function(mod){
    // ...
    return mod;
  })(window.module || {});
// 与"放大模式"相比,"宽放大模式"就是"立即执行函数"的参数可以是空对象;

Bab 2 Pengaturcaraan Modular JavaScript (2): Spesifikasi AMD

1 Spesifikasi Modul
// Pada masa ini, terdapat dua spesifikasi modul JavaScript yang popular: CommonJS dan AMD

2 CommonJS
// node.js menggunakan bahasa JavaScript untuk pengaturcaraan sebelah pelayan, yang menandakan kelahiran rasmi "pengaturcaraan modular JavaScript"
// Sistem modul node.js dilaksanakan dengan merujuk kepada spesifikasi CommonJS; Dalam CommonJS, terdapat kaedah global require() untuk memuatkan modul; var math = require('math'); var math = require('math'); // Muatkan modul;
Math.add(2,3); // Kaedah modul panggilan =>5;

3 Persekitaran penyemak imbas

// Kod dalam bahagian sebelumnya akan menghadapi masalah besar apabila dijalankan dalam penyemak imbas;

var math = memerlukan('math');
Math.add(2,3);
// Masalah: Anda mesti menunggu math.js dimuatkan dalam require('math') sebelum math.add(2,3);
// Oleh itu, modul penyemak imbas tidak boleh menggunakan "pemuatan segerak" dan hanya boleh menggunakan "pemuatan tak segerak";==>AMD;

Empat AMD

AMD (Takrifan Modul Tak Segerak) takrifan modul tak segerak;

// Gunakan pemuatan asynchronous modul Pemuatan modul tidak menjejaskan pelaksanaan penyataan berikutnya. Semua pernyataan yang bergantung pada modul ini ditakrifkan dalam fungsi panggil balik,
// Fungsi panggil balik ini tidak akan dijalankan sehingga pemuatan selesai; // AMD juga menggunakan pernyataan require() untuk memuatkan modul, tetapi ia memerlukan dua parameter:
memerlukan([modul],panggilan balik);
// modul: ialah tatasusunan, ahli di dalamnya ialah modul yang akan dimuatkan; // panggil balik: ialah fungsi panggil balik selepas berjaya dimuatkan; ​ memerlukan(['matematik'],fungsi(matematik){
Math.add(2,3);
});
// math.add() dan pemuatan modul matematik tidak disegerakkan, dan penyemak imbas tidak akan membekukan, AMD lebih sesuai untuk persekitaran pelayar;
Bab 3 Pengaturcaraan Modular JavaScript (3): Penggunaan require.js
1. Mengapa menggunakan require.js
// Berbilang fail js perlu dimuatkan dalam urutan;
// Kelemahan:
// 1. Apabila memuatkan, penyemak imbas akan berhenti memaparkan halaman web Semakin banyak fail dimuatkan, semakin lama halaman web akan kehilangan respons; // 2. Disebabkan kebergantungan antara fail js, susunan pemuatan mesti dijamin dengan ketat Apabila kebergantungan itu rumit, penulisan dan penyelenggaraan kod akan menjadi sukar // Jadi require.js menyelesaikan dua masalah ini:

// 1. Laksanakan pemuatan tak segerak bagi fail js untuk mengelakkan halaman web kehilangan respons; // 2. Uruskan kebergantungan antara modul untuk memudahkan penulisan dan penyelenggaraan kod

2 Memuatkan require.js

1. Memerlukan.js
5aa48892af07e9715ddd8d60ef066bf32cacc6d41bbb37262a98f745aa00fbf0
// Atribut async menunjukkan bahawa fail ini perlu dimuatkan secara tidak segerak untuk mengelakkan halaman web daripada kehilangan respons; 2. Muatkan main.js
35be17e58c59207c30045b58673f385a2cacc6d41bbb37262a98f745aa00fbf0
// Fungsi atribut data-main adalah untuk menentukan modul utama program web => main.js. Fail ini akan menjadi yang pertama dimuatkan oleh require.js

// Memandangkan akhiran fail lalai require.js ialah js, main.js boleh disingkatkan sebagai main;

3 Cara menulis modul utama main.js
1. Jika main.js tidak bergantung pada mana-mana modul lain, kod JavaScript boleh ditulis terus
// main.js
alert('Berjaya dimuatkan!');
2. Jika main.js bergantung pada modul, anda mesti menggunakan fungsi require() yang ditakrifkan oleh spesifikasi AMD; // main.js
​ memerlukan(['moduleA','moduleB','moduleC'],fungsi(modulA,moduleB,moduleC){
               // ...

})

// fungsi require() menerima dua parameter: // Parameter 1: Tatasusunan, menunjukkan modul yang bergantung padanya, iaitu, tiga modul yang bergantung pada modul utama; //Parameter dua: fungsi panggil balik, yang akan dipanggil selepas semua modul yang dinyatakan sebelum ini berjaya dimuatkan ke dalam fungsi sebagai parameter, supaya modul ini boleh digunakan di dalam fungsi panggil balik; // require() memuatkan modul secara tidak segerak, dan pelayar tidak akan kehilangan respons; Contoh:
memerlukan(['jquery','underscore','backbone'],function($,_,Backbone){                // ...
});

Empat modul dimuatkan
//Gunakan kaedah require.config() untuk menyesuaikan gelagat pemuatan modul
// require.config() ditulis di kepala modul utama (main.js); // Parameter ialah objek, dan atribut laluan bagi objek ini menentukan laluan pemuatan setiap modul; // Tetapkan fail bagi tiga modul berikut untuk menggunakan direktori yang sama seperti main.js secara lalai; ​ require.config({
        laluan:{
"jquery":"jquery.min",
"underscore":"underscore.min",
"tulang belakang":"tulang belakang.min"
}
});

// Jika modul yang dimuatkan dan modul utama tidak berada dalam direktori yang sama, anda mesti menentukan laluan satu demi satu
​ require.config({

        laluan:{

"jquery":"lib/jquery.min",
"underscore":"lib/underscore.min",
"tulang belakang":"lib/backbone.min"
}
});
// Atau tukar terus direktori asas (baseUrl)
​ require.config({
        baseUrl:"js/lib",
        laluan:{
"jquery":"jquery.min",
"underscore":"underscore.min",
"tulang belakang":"tulang belakang.min"
}
});

// Jika modul berada pada hos lain, anda juga boleh menentukan URLnya terus
​ require.config({

        laluan:{

"jquery":"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}
});
// require.js memerlukan setiap modul ialah fail js yang berasingan, jika berbilang modul dimuatkan, berbilang permintaan HTTP akan dikeluarkan, yang akan menjejaskan kelajuan pemuatan halaman web; // Oleh itu, require.js menyediakan alat pengoptimuman Selepas modul digunakan, anda boleh menggunakan alat ini untuk menggabungkan berbilang modul ke dalam satu fail untuk mengurangkan bilangan permintaan HTTP

Cara menulis lima modul AMD

// Modul yang dimuatkan oleh require.js menggunakan spesifikasi AMD, iaitu, modul mesti ditulis mengikut peraturan AMD

// Secara khusus, modul mesti ditakrifkan menggunakan fungsi define() khusus jika modul tidak bergantung pada modul lain, ia boleh ditakrifkan secara langsung dalam fungsi define() // Takrifkan modul matematik dalam math.js // math.js

define(function(){

        var add = function(x,y){
               pulangkan x y;
        };
         kembali {
              add:add
        };
});
//Muatkan modul matematik dalam main.js
​ memerlukan(['matematik'],fungsi(matematik){
alert(math.add(1,1));
});
// Jika modul ini juga bergantung pada modul lain, maka parameter pertama fungsi define() mestilah tatasusunan untuk menunjukkan kebergantungan modul
// math.js
define(['myLib'],function(myLib){
         fungsi foo(){
myLib.doSomething();
}
         kembali {
foo:foo
        };
});
// Apabila fungsi require() memuatkan modul di atas, fail myLib.js akan dimuatkan dahulu


6 Memuatkan modul bukan standard

// Untuk memuatkan modul bukan standard, sebelum memuatkannya dengan require(), anda mesti menggunakan kaedah require.config() dahulu untuk mentakrifkan beberapa cirinya; ​ require.config({
shim:{
             'garis bawah':{
                   eksport:'_'
            },
            'tulang belakang':{
               deps:['underscore','jquery'],
eksport:'Backbone'
            }
}
});
// require.config() menerima objek konfigurasi Selain atribut laluan yang dinyatakan sebelum ini, objek ini juga mempunyai atribut shim, yang digunakan khas untuk mengkonfigurasi modul yang tidak serasi // (1) Tentukan tatasusunan deps untuk menunjukkan kebergantungan modul; // (2). Tentukan nilai eksport (nama pembolehubah keluaran), menunjukkan nama modul ini apabila dipanggil secara luaran; Contohnya: pemalam jQuery
shim:{
          'jquery.scroll':{
           deps:['jquery'],
Eksport:'jQuery.fn.scroll'
}
};

Tujuh pemalam require.js

1.domready: Fungsi panggil balik boleh dijalankan selepas struktur DOM halaman dimuatkan; ​ memerlukan(['domready!'],function(doc){

               // dipanggil setelah DOM sedia;

})  

2.teks dan imej: Benarkan require.js memuatkan fail teks dan imej; Tentukan(['text!review.txt','image!cat.jpg'],function(review,cat){

console.log(ulasan);
           document.body.appendChild(kucing);
});