QT應(yīng)用程序中執(zhí)行javascript腳本文件

使用QJSEngine引擎編譯和運(yùn)行JavaScript腳本時(shí)，你可以將JavaScript代碼保存在一個(gè)獨(dú)立的文件中，并使用QFile讀取該文件內(nèi)容，然后使用QJSEngine的evaluate()方法執(zhí)行該代碼。下面是一個(gè)示例，演示如何加載并執(zhí)行一個(gè)獨(dú)立的JavaScript文件：

#include <QCoreApplication>
#include <QDebug>
#include <QFile>
#include <QJSEngine>
#include <QJSValue>

int main(int argc, char *argv[])
{
    QCoreApplication a(argc, argv);

    // 讀取JavaScript文件內(nèi)容
    QFile file("script.js");
    if (!file.open(QIODevice::ReadOnly | QIODevice::Text)) {
        qDebug() << "Failed to open script file!";
        return -1;
    }
    QString script=file.readAll();
    file.close();

    QJSEngine engine;

    // 執(zhí)行JavaScript腳本
    QJSValue result=engine.evaluate(script);

    // 檢查結(jié)果并輸出
    if (result.isNumber()) {
        int sum=result.toInt();
        qDebug() << "Sum: " << sum;
    } else {
        qDebug() << "Error evaluating script!";
    }

    return a.exec();
}

在上面的示例中，我們首先使用QFile打開并讀取名為"script.js"的JavaScript文件的內(nèi)容。然后，我們創(chuàng)建了一個(gè)QJSEngine對象，并使用evaluate()方法執(zhí)行從文件中讀取的JavaScript代碼。最后，我們檢查結(jié)果的類型并輸出。

確保將實(shí)際的JavaScript文件命名為"script.js"并與可執(zhí)行文件位于同一目錄下。你可以在JavaScript文件中編寫復(fù)雜的功能，包括定義函數(shù)、使用對象等。

這是一個(gè)簡單的示例，演示了如何使用QJSEngine引擎加載和執(zhí)行一個(gè)獨(dú)立的JavaScript文件

么是JS延遲加載？

JS延遲加載，也就是等頁面加載完成之后再加載JavaScript文件

為什么讓JS實(shí)現(xiàn)延遲加載？

js的延遲加載有助于提高頁面的加載速度。

Js延遲加載的方式有哪些？一般有以下幾種方式：

·defer屬性

·async屬性

·動(dòng)態(tài)創(chuàng)建DOM方式

·使用jQuery的getScript方法

·使用setTimeout延遲方法

·讓JS最后加載

1、defer屬性

HTML 4.01為<script>標(biāo)簽定義了defer屬性。標(biāo)簽定義了defer屬性元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行標(biāo)簽定義了defer屬性。

用途：表明腳本在執(zhí)行時(shí)不會影響頁面的構(gòu)造。也就是說，腳本會被延遲到整個(gè)頁面都解析完畢之后再執(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>標(biāo)簽后再執(zhí)行HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行。在現(xiàn)實(shí)當(dāng)中，延遲腳本并不一定會按照順序執(zhí)行defer屬性只適用于外部腳本文件。支持HTML5的實(shí)現(xiàn)會忽略嵌入腳本設(shè)置的defer屬性

2、async屬性

HTML5 為<script>標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標(biāo)簽定義了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一樣，都不會阻塞其他資源下載，所以不會影響頁面的加載。

缺點(diǎn)：不能控制加載的順序

3、動(dòng)態(tài)創(chuàng)建DOM方式

//這些代碼應(yīng)被放置在</ body>標(biāo)簽前(接近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>

4、使用jQuery的getScript()方法

$.getScript("outer.js" , function(){	//回調(diào)函數(shù)，成功獲取文件后執(zhí)行的函數(shù)
	console.log(“腳本加載完成")
});

5、使用setTimeout延遲方法的加載時(shí)間延遲加載js代碼，給網(wǎng)頁加載留出更多時(shí)間

<script type="text/javascript" >
	function A(){
		$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
			alert("Hello");
		});
	}
	$(function (){
		setTimeout('A()', 1000);	//延遲1秒
	})
</script>

6、讓JS最后加載

把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度例如引入外部js腳本文件時(shí)，如果放入html的head中,則頁面加載前該js腳本就會被加載入頁面，而放入body中，則會按照頁面從上倒下的加載順序來運(yùn)行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度。

上述方法2也會偶爾讓你收到Google頁面速度測試工具的“延遲加載javascript”警告。所以這里的解決方案將是來自Google幫助頁面的推薦方案。

//這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近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>

這段代碼意思等到整個(gè)文檔加載完后，再加載外部文件“defer.js”。

使用此段代碼的步驟：

6.1）復(fù)制上面代碼

6.2）粘貼代碼到HTML的標(biāo)簽前 (靠近HTML文件底部)

6.3）修改“defer.js”為你的外部JS文件名

6.4）確保文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。

注意：

這段代碼直到文檔加載完才會加載指定的外部js文件。因此，不應(yīng)該把那些頁面正常加載需要依賴的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁面需要而立即加載的javascript代碼，另外一組是在頁面加載后進(jìn)行操作的javascript代碼(例如添加click事件。

先，上幾道我編寫的 js 題，作為分析的樣本。

請根據(jù)代碼，選擇正確的選項(xiàng)。

第一題

var a=0;
function test(){
 alert(a);
}
test();

A. 0

B. null

C. undefined

第二題

var a=0;
function test(){
 alert(a);
 a=100;
}
test();

A. 0

B. null

C. undefined

第三題

var a=0;
function test(){
 alert(a);
 var a=100;
}
test();

A. 0

B. 100

C. undefined

正確答案：

A ， A ， C

前兩題沒啥好說的，之前關(guān)于閉包的博文中已經(jīng)講得很清楚了，函數(shù) test 形成了自己的閉包，所以能夠訪問到全局作用域里面的變量 a 。

第三題可能有人會覺得有點(diǎn)奇怪，為啥是 undefined 的呢？雖然我在閉包內(nèi)定義了 var a=100 , 可是它分明是在 alert 語句的下面啊，所以不是應(yīng)該先打印出全局作用域里的 a 嗎？

不要著急，我們來講一個(gè)故事吧，當(dāng)你將這段代碼放進(jìn)瀏覽器跑起來的那一個(gè)瞬間，到底發(fā)生了哪些有趣的事情。

當(dāng)你刷新瀏覽器之后。。。

0.00000001 毫秒的時(shí)候

Paste_Image.png

編譯器看到了這句話，

var a=0;

編譯器： ‘nice,發(fā)現(xiàn)一個(gè)活的 a 變量，我要把它丟到作用域中去囚禁它！

于是

0.00000002 毫秒的時(shí)候

編譯器： nice,發(fā)現(xiàn)一個(gè)活的 test 變量，我擦，還是一個(gè)函數(shù)類型，作用域，又有新貨了！

作用域： ‘可以呀，小伙子！’

于是：

編譯器順便把 test 函數(shù)給“扒”了，又發(fā)現(xiàn)里面有這么一句話：

var a=100;

編譯器：小樣，別以為你躲在 test 函數(shù)的私有作用域里面我就找不到你了，全局作用域中的a和你沒關(guān)系，你也進(jìn)去！

編譯器：嗯，沒找到什么變量定義了，好，我去休息啦。

0.00000003 毫秒的時(shí)候

js引擎：終于輪到我出場了。

var a=0;

a(全局)： js引擎大哥，給我吃飯吧。。。

js引擎：吵啥子吵，先給你個(gè)undefined，吃這個(gè)吧。

于是：

a(全局)：只要心中有夢想，undefined也是嚼勁十足！

js引擎：等號右邊有一個(gè) 0 ，我把它給你吧。

a(全局)：謝謝引擎大哥。

同樣的，test 變量也吃上了飯。

a(局部) ：大哥，我別這么偏袒全局作用域啊，同樣是 a 變量，我也要吃飯??！

js引擎：你在函數(shù)內(nèi)部，我還沒執(zhí)行函數(shù)呢，怎么給你吃飯呀，先給你個(gè)undefined吧。

a(局部) ：可是我旁邊有一個(gè)100啊。

js引擎：我剛才不是說了嗎，我還沒執(zhí)行你呢，別挑了，有個(gè)undefined啃啃也不錯(cuò)了。

0.00000004 毫秒的時(shí)候

test();

js引擎：我要開始執(zhí)行test函數(shù)了。

alert(a);

js引擎：作用域在嗎，我知道alert是一個(gè)內(nèi)置函數(shù)，當(dāng)我在執(zhí)行它的時(shí)候，發(fā)現(xiàn)有一個(gè)a變量作為參數(shù)傳進(jìn)去了，你見過它么？

作用域：有啊，就那個(gè)剛才還吵著要吃飯的家伙。

js引擎：哦，我想起來了，現(xiàn)在它估計(jì)還在啃undefined呢，行吧，你把它給我吧，alert方法點(diǎn)名要找他呢。

作用域：OK。

故事到這里就講完了，現(xiàn)在你應(yīng)該明白為什么第三題的答案是undefined了吧。

附加題：

var a=0;
function test(){
 alert(a);
 if(false){
 var a=100;
 }
}
test();

A. 0

B. 100

C. undefined

別猶豫，大聲說出你的答案吧！

可以將答案寫在評論中哦！

在線咨詢

上一篇：「虛幻4」初學(xué)者系列教程-《基礎(chǔ)入門》#1
下一篇：H5 音樂播放實(shí)例，音樂詳情頁制作，播放按鈕制作

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

QT應(yīng)用程序中執(zhí)行javascript腳本文件

1、defer屬性

2、async屬性

3、動(dòng)態(tài)創(chuàng)建DOM方式

4、使用jQuery的getScript()方法

5、使用setTimeout延遲方法的加載時(shí)間延遲加載js代碼，給網(wǎng)頁加載留出更多時(shí)間

6、讓JS最后加載

您的項(xiàng)目需求

1、defer屬性

2、async屬性

3、動(dòng)態(tài)創(chuàng)建DOM方式

5、使用setTimeout延遲方法的加載時(shí)間延遲加載js代碼，給網(wǎng)頁加載留出更多時(shí)間