Bagaimanakah AngularJS Boleh Mengendalikan Perubahan Ketinggian dengan Cekap?

Meningkatkan Respons AngularJS terhadap Perubahan Ketinggian

Pendekatan tradisional untuk mengendalikan perubahan ketinggian dalam AngularJS, seperti menggunakan pemasa, boleh memperkenalkan kelemahan seperti kelewatan dan ketidakcekapan. Penyelesaian yang lebih berkesan ialah memanfaatkan jam tangan terbina dalam AngularJS.

Arahan Baharu dan Dipertingkat:

emHeightTarget

Arahan emHeightTarget mendaftarkan jam tangan pada sifat __height, yang dikemas kini oleh arahan emHeightSource setiap kitaran ringkasan. Apabila sifat __height berubah, arahan mengemas kini gaya atas margin atas elemen sasaran berdasarkan nilai ketinggian baharu.

<code class="javascript">.directive( 'emHeightTarget', function() {
    return {
        link: function( scope, elem, attrs ) {

            scope.$watch( '__height', function( newHeight, oldHeight ) {
                elem.attr( 'style', 'margin-top: ' + (58 + newHeight) + 'px' );
            } );
        }
    }
} )</code>

emHeightSource

Arahan emHeightSource mendaftarkan jam tangan yang melaksanakan setiap kitaran penghadaman. Ia mengemas kini sifat __height dengan ketinggian semasa elemen.

<code class="javascript">.directive( 'emHeightSource', function() {

    return {
        link: function( scope, elem, attrs ) {

            scope.$watch( function() {
                scope.__height = elem.height();
            } );
        }
    }

} )</code>

Kelebihan:

• Sendiri: penyelesaian terletak semata-mata dalam elemen/arahan HTML yang terlibat, tanpa bergantung pada kod pemuatan data luaran.
• Tiada pemasa atau kelewatan: Jam tangan dicetuskan secara asli oleh AngularJS, menghapuskan keperluan untuk hodoh pemasa dan mengurangkan kelewatan dalam pelarasan kandungan.
• Cekap: Jam tangan机制 hanya tercetus apabila perubahan ketinggian sebenar berlaku, memaksimumkan prestasi.

Atas ialah kandungan terperinci Bagaimanakah AngularJS Boleh Mengendalikan Perubahan Ketinggian dengan Cekap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!