Yii2.0里面如何引入JS包文件
yii\web\View 对象可以注册脚本。专门有两种方法:为内联脚本registerJs() 和 外部脚本registerJsFile()。内联脚本可用于配置和动态生成的代码。
一、内联脚本registerJs()
使用如下:
//内部注册js代码$jsString = "$(function(){ alert(123); });";$this->registerjs($jsString, View::POS_END);或则$this->registerJs("var options = ".json_encode($options).";", View::POS_END, 'my-options');
说明：
第一个元素是我们在视图文件中要写入的 js 代码
第二个元素是我们决定这段代码插入在视图文件中具体那一个位置，具体参数如下：
View::POS_HEAD for head section.
View::POS_BEGIN for right after opening <body>.
View::POS_END for right before closing </body>.
View::POS_READY for executing code on document ready event. This will register jQuery automatically.
View::POS_LOAD for executing code on document load event. This will register jQuery automatically.
- <?php $this->beginBlock("aaa") ?>
- $(function () { //这里写你的js代码 });<?php $this->endBlock() ?>
- <?php $this->registerJs($this->blocks["aaa"], \yii\web\View::POS_END); ?>
- <?php
- use backend\assets\AppAsset;
- use yii\web\View;
- AppAsset::register($this);//外部引入js文件$this->registerJsFile(Yii::$app->request->baseUrl . 'js/mytest_js.js', ['depends' => backend\assets\AppAsset::className(), "position"=> $this::POS_END]);
- namespace backend\assets;
- use yii\web\AssetBundle;
- class AppAsset extends 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方法，注意加载顺序在最后
- public static function addScript($view, $jsfile) {
- $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']);
- }
- //定义按需加载css方法，注意加载顺序在最后
- public static function addCss($view, $cssfile) {
- $view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'backend\assets\AppAsset']);
- }
- }
- <?phpuse backend\assets\AppAsset;use yii\web\View;
AppAsset::register($this); - //外部引入css文件AppAsset::addCss($this,Yii::$app->request->baseUrl."/css/blog.css");
- AppAsset::addScript($this, Yii::$app->request->baseUrl . '/js/waibu_js.js');
第三个元素是表示这段代码的ID,它具有唯一性，如果曾经有过某个ID,则它会替代或取代之前跟它同名的哪一个，如果不写最后一个元素，则js代码本身就是Id，可忽略最后一个元素
$this 指 yii\web\View对象，用于管理和渲染视图
还有这样的一种写法
数据块block可以在一个地方指定视图内容在另一个地方显示，通常和布局一起使用
例如：可在内容视图中定义数据块在布局中显示它
调用 yii\base\View::beginBlock() 和 yii\base\View::endBlock() 来定义数据块
使用 $view->blocks[$blockID] 访问该数据块
其中 $blockID 为定义数据块时指定的唯一标识ID。
可见内部写法还是蛮灵活滴~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
二、外部脚本registerJsFile()
使用如下:
说明：引入外部 js文件
第一个参数是文件的绝对路径 Yii::$app->request->baseUrl 加js文件
第二个元素是织带它是依赖于谁的，这里它是依赖 backend\assets\AppAsset::className() 对象的
第三个元素是引入文件的位置，POS_END 说明是在</body>之前引入
但是：通常不使用这个引入的方式引入外部文件，因为每次引入一个文件都需要指定它是依赖于谁的，相对复杂，通常情况下我们使用包管理asset bundles进行注册；
首先： 在这个文件中 backend\assets\AppAsset.php 可见，我们引入了两个静态方法，完整版的AppAsset类如下：
addScript() 和 addCss() 方法则是我们在视图文件中进行注册的钥匙，通过如下使用方式，我们就不需要使用 $this->registerJsFile 进行注册了
