cari

Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang contoh pembangunan modular menggunakan Requirejs dalam kemahiran Html_javascript

Penjelasan terperinci tentang contoh pembangunan modular menggunakan Requirejs dalam kemahiran Html_javascript

WBOY
WBOYasal
2016-05-16 15:05:161438semak imbas

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: {
...
}
});

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);
});

atau 

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

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>

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>

Kemudian dalam modul yang sepadan: 

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

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!

Kenyataan：
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
Artikel sebelumnya：Analisis kaedah jQuery merentasi json_jqueryArtikel seterusnya：Analisis kaedah jQuery merentasi json_jquery

Artikel berkaitan

Lihat lagi