整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
么是JS延遲加載？
JS延遲加載，也就是等頁面加載完成之后再加載JavaScript文件
為什么讓JS實現(xiàn)延遲加載？
js的延遲加載有助于提高頁面的加載速度。
Js延遲加載的方式有哪些？一般有以下幾種方式：
·defer屬性
·async屬性
·動態(tài)創(chuàng)建DOM方式
·使用jQuery的getScript方法
·使用setTimeout延遲方法
·讓JS最后加載
HTML 4.01為<script>標簽定義了defer屬性。標簽定義了defer屬性元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行標簽定義了defer屬性。
用途：表明腳本在執(zhí)行時不會影響頁面的構(gòu)造。也就是說，腳本會被延遲到整個頁面都解析完畢之后再執(zhí)行在<script>元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行
<!DOCTYPE html>
<html>
<head>
<script src="test1.js" defer="defer"></script>
<script src="test2.js" defer="defer"></script>
</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>說明：雖然<script>元素放在了<head>元素中，但包含的腳本將延遲瀏覽器遇到</html>標簽后再執(zhí)行HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行。在現(xiàn)實當中，延遲腳本并不一定會按照順序執(zhí)行defer屬性只適用于外部腳本文件。支持HTML5的實現(xiàn)會忽略嵌入腳本設(shè)置的defer屬性
HTML5 為<script>標簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。
目的：不讓頁面等待腳本下載和執(zhí)行，從而異步加載頁面其他內(nèi)容。異步腳本一定會在頁面 load 事件前執(zhí)行。不能保證腳本會按順序執(zhí)行
<!DOCTYPE html>
<html>
<head>
<script src="test1.js" async></script>
<script src="test2.js" async></script>
</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>async和defer一樣，都不會阻塞其他資源下載，所以不會影響頁面的加載。
缺點：不能控制加載的順序
//這些代碼應(yīng)被放置在</ body>標簽前(接近HTML文件底部)
<script type="text/javascript">
function downloadJSAtOnload() {
varelement = document .createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window. addEventListener)
window.addEventListener("load" ,downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload) ;
else
window. onload =downloadJSAtOnload;
</script>$.getScript("outer.js" , function(){ //回調(diào)函數(shù)，成功獲取文件后執(zhí)行的函數(shù)
console.log(“腳本加載完成")
});<script type="text/javascript" >
function A(){
$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
alert("Hello");
});
}
$(function (){
setTimeout('A()', 1000); //延遲1秒
})
</script>把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度例如引入外部js腳本文件時，如果放入html的head中,則頁面加載前該js腳本就會被加載入頁面，而放入body中，則會按照頁面從上倒下的加載順序來運行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度。
上述方法2也會偶爾讓你收到Google頁面速度測試工具的“延遲加載javascript”警告。所以這里的解決方案將是來自Google幫助頁面的推薦方案。
//這些代碼應(yīng)被放置在</body>標簽前(接近HTML文件底部)
<script type= "text/javascript">
function downloadJSAtonload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent )
window.attachEvent("onload", downloadJSAtonload);
else window.onload = downloadJSAtOnload;
</script>這段代碼意思等到整個文檔加載完后，再加載外部文件“defer.js”。
使用此段代碼的步驟：
6.1）復(fù)制上面代碼
6.2）粘貼代碼到HTML的標簽前 (靠近HTML文件底部)
6.3）修改“defer.js”為你的外部JS文件名
6.4）確保文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。
注意：
這段代碼直到文檔加載完才會加載指定的外部js文件。因此，不應(yīng)該把那些頁面正常加載需要依賴的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁面需要而立即加載的javascript代碼，另外一組是在頁面加載后進行操作的javascript代碼(例如添加click事件。
于安全和隱私的原因，web 應(yīng)用程序不能直接訪問用戶設(shè)備上的文件。如果需要讀取一個或多個本地文件，可以通過使用input file和FileReader來實現(xiàn)。在這篇文章中，我們將通過一些例子來看看它是如何工作的。
由于瀏覽器中的 JS 無法從用戶的設(shè)備訪問本地文件，我們需要為用戶提供一種方法來選擇一個或多個文件供我們使用。這可以通過文件選擇器<input type='fule' />來完成。
<input type="file" id="fileInput">如果想允選擇多個文件，可以添加multiple屬性:
<input type="file" id="fileInput" multiple>我們可以通過change事件來監(jiān)聽文件的選擇，也可以添加另一個 UI 元素讓用戶顯式地開始對所選文件的處理。
input file 具有一個files屬性，該屬性是File對象的列表（可能有多個選擇的文件）。
File對象如下所示：
讀取文件，主要使用的是[FileReader][1]類。
「該對象擁有的屬性：」
「FileReader.error」 ：只讀，一個DOMException，表示在讀取文件時發(fā)生的錯誤 。
「FileReader.readyState」：只讀 表示 FileReader 狀態(tài)的數(shù)字。取值如下：
常量名值描述EMPTY0還沒有加載任何數(shù)據(jù)LOADING1數(shù)據(jù)正在被加載DONE2已完成全部的讀取請求
「FileReader.result」：只讀，文件的內(nèi)容。該屬性僅在讀取操作完成后才有效，數(shù)據(jù)的格式取決于使用哪個方法來啟動讀取操作。
「該對象擁有的方法：」
readAsText(file, encoding)：以純文本形式讀取文件，讀取到的文本保存在result屬性中。第二個參數(shù)代表編碼格式。
readAsDataUrl(file)：讀取文件并且將文件以數(shù)據(jù)URI的形式保存在result屬性中。
readAsBinaryString(file)：讀取文件并且把文件以字符串保存在result屬性中。
readAsArrayBuffer(file)：讀取文件并且將一個包含文件內(nèi)容的ArrayBuffer保存咋result屬性中。
FileReader.abort()：中止讀取操作。在返回時，readyState屬性為DONE。
「文件讀取的過程是異步操作，在這個過程中提供了三個事件：progress、error、load事件?！?/strong>
progress：每隔50ms左右，會觸發(fā)一次progress事件。
error：在無法讀取到文件信息的條件下觸發(fā)。
load：在成功加載后就會觸發(fā)。
在下面的示例中，我們將使用readAsText和readAsDataURL方法來顯示文本和圖像文件的內(nèi)容。
為了將文件內(nèi)容顯示為文本，change需要重寫一下：
首先，我們要確保有一個可以讀取的文件。如果用戶取消或以其他方式關(guān)閉文件選擇對話框而不選擇文件，我們就沒有什么要讀取和退出函數(shù)。
然后我們繼續(xù)創(chuàng)建一個FileReader。reader的工作是異步的，以避免阻塞主線程和 UI 更新，這在讀取大文件(如視頻)時非常重要。
reader發(fā)出一個'load'事件(例如，類似于Image對象)，告訴我們的文件已經(jīng)讀取完畢。
reader將文件內(nèi)容保存在其result屬性中。此屬性中的數(shù)據(jù)取決于我們使用的讀取文件的方法。在我們的示例中，我們使用readAsText方法讀取文件，因此result將是一個文本字符串。
如果我們想要顯示圖像，將文件讀取為字符串并不是很有用。FileReader有一個readAsDataURL方法，可以將文件讀入一個編碼的字符串，該字符串可以用作<img>元素的源。本例的代碼與前面的代碼基本相同，區(qū)別是我們使用readAsDataURL讀取文件并將結(jié)果顯示為圖像:
1）由于安全和隱私的原因，JavaScript 不能直接訪問本地文件。
2）可以通過 input 類型為 file 來選擇文件，并對文件進行處理。
3） file input 具有帶有所選文件的files屬性。
4） 我們可以使用FileReader來訪問所選文件的內(nèi)容。
作者: Martin Splitt 譯者：前端小智 來源：dev
原文：https://dev.to/g33konaut/reading-local-files-with-javascript-25hn
們可以使用以下的方式去渲染html
func main() {
router := gin.Default()
router.LoadHTMLGlob("templates/*")
//router.LoadHTMLFiles("templates/template1.html", "templates/template2.html")
router.GET("/index", func(c *gin.Context) {
c.HTML(http.StatusOK, "index.tmpl", gin.H{
"title": "Main website",
})
})
router.Run(":8080")
}在html中我們可以使用特殊的雙花括號來渲染title這個值
<html>
<h1>
{{ .title }}
</h1>
</html>
值得注意的是這種方式并不是gin特有的，而是golang特有的，它還有其他的模板語法。
{{$article := "hello"}}也可以給變量賦值
{{$article := .ArticleContent}}{{funcname .arg1 .arg2}}{{if .condition}}
{{end}}{{if .condition1}}
{{else if .contition2}}
{{end}}{{if not .condition}}
{{end}}{{if and .condition1 .condition2}}
{{end}}{{if or .condition1 .condition2}}
{{end}}{{if eq .var1 .var2}}
{{end}}{{if ne .var1 .var2}}
{{end}}(less than){{if lt .var1 .var2}}
{{end}}{{if le .var1 .var2}}
{{end}}{{if gt .var1 .var2}}
{{end}}{{if ge .var1 .var2}}
{{end}}{{range $i, $v := .slice}}
{{end}}{{template "navbar"}}*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
