您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了在Html中使用Requirejs進(jìn)行模塊化開(kāi)發(fā)的示例,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶大家一起來(lái)研究并學(xué)習(xí)一下“在Html中使用Requirejs進(jìn)行模塊化開(kāi)發(fā)的示例”這篇文章吧。
html的全稱(chēng)為超文本標(biāo)記語(yǔ)言,它是一種標(biāo)記語(yǔ)言,包含了一系列標(biāo)簽.通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一,使分散的Internet資源連接為一個(gè)邏輯整體,html文本是由html命令組成的描述性文本,html命令可以說(shuō)明文字,圖形、動(dòng)畫(huà)、聲音、表格、鏈接等,主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁(yè)。
如何使用requirejs加載html
Reuqirejs有一個(gè)text的插件,它可以讀取指定文件的內(nèi)容,讀取到的內(nèi)容就是文本。
如何下載text插件
第一種方法,可以通過(guò)npm下載:
npm install requirejs/text
第二種方法,也可以直接去官方github上面直接下載。
直接拷貝內(nèi)容到text.js中即可。
如何安裝text插件
在requirejs的main.js中配置text插件的依賴(lài)即可,跟jquery差不多,只要保證能通過(guò)正常的加載方式加載到它就行。
requirejs.config({ baseUrl: './', paths: { 'text':path+'/require/text', ... }, shim: { ... } });
也可以直接放在baseUrl里面。
如何使用text
在目標(biāo)模塊中,按照下面的語(yǔ)法即可:
define(function(require){ var html = require("text!html/test.html"); console.log(html); });
或者
define(["text!html/test.html"],function(html){ console.log(html); });
如何進(jìn)行html的模塊化開(kāi)發(fā)?
看過(guò)上面你已經(jīng)會(huì)使用text了,但是仍然不知道怎么組織前端代碼。
舉個(gè)栗子:
博客園的網(wǎng)站頁(yè)面會(huì)根據(jù)上方的導(dǎo)航跳轉(zhuǎn)到不同的頁(yè)面。如果是在單頁(yè)面中,很容易想到原始的做法是,導(dǎo)航的按鈕對(duì)應(yīng)不同的p,點(diǎn)擊那個(gè)按鈕,就顯示與之對(duì)應(yīng)的p;其他的p則隱藏掉。
那么,前端的代碼可能會(huì)這樣:
<html> <body> <nav> 導(dǎo)航按鈕1、導(dǎo)航按鈕2、導(dǎo)航按鈕3 </nav> <p style="display:block">按鈕1對(duì)應(yīng)的頁(yè)面</p> <p style="display:none">按鈕2對(duì)應(yīng)的頁(yè)面</p> <p style="display:none">按鈕3對(duì)應(yīng)的頁(yè)面</p> </body> </html>
這樣的代碼會(huì)很雜亂...而且前端Html會(huì)很長(zhǎng)...不利于維護(hù)。
那么有了reuqirejs的text插件以后,就可以這樣了:
<html> <body> <nav> 導(dǎo)航按鈕1、導(dǎo)航按鈕2、導(dǎo)航按鈕3 </nav> <p id="target"></p> </body> </html>
然后在對(duì)應(yīng)的模塊中:
$('#target').html(require("text!目標(biāo)按鈕對(duì)應(yīng)的頁(yè)面.html"));
這樣就隨性多了吧!前端代碼也可以跟著模塊一起有效的管理了!
不過(guò)需要注意的是:這種方式會(huì)導(dǎo)致Jquery綁定的事件失效——所以一定要在html()方法后面,重新綁定下事件。
以上就是關(guān)于“在Html中使用Requirejs進(jìn)行模塊化開(kāi)發(fā)的示例”的內(nèi)容,如果改文章對(duì)你有所幫助并覺(jué)得寫(xiě)得不錯(cuò),勞請(qǐng)分享給你的好友一起學(xué)習(xí)新知識(shí),若想了解更多相關(guān)知識(shí)內(nèi)容,請(qǐng)多多關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。