當前位置:星座運勢大全官網 - 周易占卜 - 如何在Yii2.0中引入JS包文件

如何在Yii2.0中引入JS包文件

yii\web\View對象可以註冊腳本。有兩個特殊的方法:for inline script registerJs()?和外部腳本registerJsFile()。內聯腳本可用於配置和動態生成代碼。

首先,內聯腳本registerJs()

按如下方式使用:

//內部註冊的js代碼$ JSString = " $(function(){ alert(123);});";$ this-& gt;registerjs($jsString,View::POS _ END);或者$ this->;registerJs("var options = "。json_encode($options)。";",View::POS_END,'我的-選項');

描述:

第壹個元素是我們想要在視圖文件中編寫的js代碼。

第二個元素是我們決定在視圖文件中插入這段代碼的地方。具體參數如下:

View::POS_HEAD?用於頭部。

View::POS_BEGIN?就在打開之後?& ltbody & gt。

View::POS_END?就在關門前?& lt/body & gt;。

View::POS_READY?用於在文檔上執行代碼?準備好了嗎?事件。這會註冊嗎?jQuery?自動地。

View::POS_LOAD?用於在文檔上執行代碼?加載?事件。這會註冊嗎?jQuery?自動地。

第三個元素是這個代碼的Id,它是唯壹的。如果有壹個ID,它將替換或替換同名的前壹個。如果最後壹個元素沒有寫,js代碼本身就是ID,最後壹個元素可以忽略。

$這是指yii\web\View對象,用於管理和呈現視圖。

有這麽壹種寫法。

& lt?PHP $ this-& gt;beginBlock("aaa ")?& gt

$(function () {?//在這裏寫妳的js代碼});& lt?PHP $ this-& gt;endBlock()?& gt

& lt?PHP $ this-& gt;register js($ this-& gt;blocks["aaa"],\ yii \ web \ View::POS _ END);?& gt

數據塊可以指定視圖內容在壹個地方顯示,在另壹個地方顯示,通常與布局壹起使用。

例如,您可以在內容視圖中定義壹個數據塊,以便在布局中顯示它。

調用yii\base\View::beginBlock()和yii\base\View::endBlock()來定義數據塊。

使用$ view-& gt;Blocks[$blockID]訪問數據塊。

其中$blockID是定義數據塊時指定的唯壹標識ID。

可見內部寫的還是挺靈活的~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~

二、外部腳本registerJsFile()

按如下方式使用:

& lt?服務器端編程語言(Professional Hypertext Preprocessor的縮寫)

使用backend \ assets \ AppAsset

使用yii \ web \ View

app asset::register($ this);//介紹js文件$ this-& gt;register jsfile(Yii::$ app-& gt;請求-& gt;baseUrl。js/mytest_js.js ',[' depends ' = & gt;back end \ assets \ app asset::class name()," position " = & gt$ this::POS _ END]);

描述:導入外部js文件。

第壹個參數是文件的絕對路徑?yii::$ app-& gt;請求-& gt;BaseUrl加js文件?

第二個元素是絲帶。這取決於誰?在這裏,它是依賴的。back \ assets \ app asset::class name()對象的。

第三個元素是導入文件的位置,POS_END?描述在

但通常不用於導入外部文件,因為每次導入文件都需要指定依賴誰,相對復雜。通常,我們使用包管理資產捆綁包來註冊。

首先:在這個文件裏?後退\資產\ AppAsset.php表明我們已經引入了兩個靜態方法。appasset類的完整版本如下:

命名空間後端\資產;?

使用yii \ web \ AssetBundle?

類AppAsset擴展AssetBundle?{ ?

public $ basePath = ' @ webroot?

public $ baseUrl = ' @ web?

//全局CSS?

public $css = [?

css/animate.css ',?

' css/style.min.css ',?

];

//全局JS?

public $js = [?

js/jquery-2.1.1.js '?

];

//依賴?

public $depends = [?

' yii\web\YiiAsset ',?

yii\bootstrap\BootstrapAsset ',?

];?

//定義按需加載JS的方法,註意最後的加載順序?

公共靜態函數addScript($view,$jsfile) {?

$ view-& gt;registerJsFile($jsfile,[AppAsset::className(),' depends ' = & gtback end \ assets \ app asset ']);?

} ?

//定義按需加載css的方法,註意最後的加載順序?

公共靜態函數addCss($view,$cssfile) {?

$ view-& gt;registerCssFile($cssfile,[AppAsset::className(),' depends ' = & gtback end \ assets \ app asset ']);?

} ?

}

addScript()?和addCss()方法是我們在視圖文件中註冊的關鍵。我們不需要通過使用以下方法來使用它們?$ this-& gt;registerJsFile?註冊了。

& lt?phpuse backend \ assets \ AppAsset使用yii \ web \ View

app asset::register($ this);

//css文件appasset:: addcss ($ this,yii::$ app->;請求-& gt;baseUrl。"/CSS/blog . CSS ");

AppAsset::addScript($this,Yii::$ app-& gt;請求-& gt;baseUrl。/js/waibu _ js . js’);