Penjelasan terperinci tentang contoh pembangunan modular menggunakan Requirejs dalam kemahiran Html

Penjelasan terperinci tentang contoh pembangunan modular menggunakan Requirejs dalam kemahiran Html_javascript

WBOY

Lepaskan： 2016-05-16 15:05:16

asal

1415 orang telah melayarinya

Apabila bahagian hadapan dimodulasi, bukan sahaja js memerlukan pengurusan modular, tetapi kadangkala html juga memerlukan pengurusan modular. Di sini kami akan memperkenalkan cara melaksanakan pembangunan modular kod HTML melalui requirejs.

Cara memuatkan html menggunakan requirejs

Reuqirejs mempunyai pemalam teks, yang boleh membaca kandungan fail yang ditentukan, dan kandungan yang dibaca ialah teks.

Cara memuat turun pemalam teks

Kaedah pertama boleh dimuat turun melalui npm:

npm install requirejs/text

Untuk kaedah kedua, anda juga boleh memuat turunnya terus dari github rasmi.

Cuma salin kandungan terus ke dalam text.js.

Cara memasang pemalam teks

Hanya konfigurasikan kebergantungan pemalam teks dalam main.js requirejs, yang serupa dengan jquery Cuma pastikan ia boleh dimuatkan melalui kaedah pemuatan biasa.

requirejs.config({
baseUrl: './',
paths: {
'text':path+'/require/text',
...
},
shim: {
...
}
});

Salin selepas log masuk

juga boleh diletakkan terus dalam baseUrl.

Cara menggunakan teks

Dalam modul sasaran, ikut sintaks berikut:

define(function(require){
var html = require("text!html/test.html");
console.log(html);
});

Salin selepas log masuk

atau

define(["text!html/test.html"],function(html){
console.log(html);
});

Salin selepas log masuk

Bagaimana untuk menjalankan pembangunan modular html?

Selepas membaca perkara di atas, anda sudah tahu cara menggunakan teks, tetapi anda masih tidak tahu cara mengatur kod bahagian hadapan.

Beri saya contoh:

Halaman laman web Blog Park akan melompat ke halaman yang berbeza mengikut navigasi di atas. Jika ia berada pada satu halaman, mudah untuk berfikir bahawa pendekatan asal ialah butang navigasi sepadan dengan div yang berbeza Klik butang itu untuk memaparkan div lain yang disembunyikan.

Kemudian, kod bahagian hadapan mungkin kelihatan seperti ini:

<html>
<body>
<nav>
导航按钮1、导航按钮2、导航按钮3
</nav>
<div style="display:block">按钮1对应的页面</div>
<div style="display:none">按钮2对应的页面</div>
<div style="display:none">按钮3对应的页面</div>
</body>
</html>

Salin selepas log masuk

Kod sedemikian akan menjadi sangat kemas... dan Html bahagian hadapan akan menjadi sangat panjang... yang tidak kondusif untuk penyelenggaraan.

Kemudian dengan pemalam teks reuqirejs, anda boleh melakukan ini:

<html>
<body>
<nav>
导航按钮1、导航按钮2、导航按钮3
</nav>
<div id="target"></div>
</body>
</html>

Salin selepas log masuk

Kemudian dalam modul yang sepadan:

$('#target').html(require("text!目标按钮对应的页面.html"));

Salin selepas log masuk

Ia akan menjadi lebih kasual dengan cara ini! Kod bahagian hadapan juga boleh diuruskan dengan berkesan bersama-sama dengan modul!

Walau bagaimanapun, perlu diambil perhatian bahawa kaedah ini akan menyebabkan peristiwa yang diikat oleh Jquery menjadi tidak sah - jadi pastikan anda mengikat semula acara selepas kaedah html().

Itu sahaja pengetahuan yang berkaitan tentang menggunakan Requirejs dalam Html untuk pembangunan modular saya harap ia akan membantu anda!