yii2中可使用布局layout /main.php 引入公共的头和尾,以及css 和 js,但很多时候个别页面需要单独引入js、css文件,若放入全局只会使页面加载资源过多造成性能浪费。

        yii2中视图对象yii\web\View可以注册内联脚本registerJs()  和 外部脚本registerJsFile(),内联脚本可用于配置和动态生成的代码。

内联脚本registerJs() 

直接在视图中加入以下代码

<?php
$this->registerJs("
$(function () {
//你想要的js代码
});
", \yii\web\View::POS_END,options);
?>

sp161104_064002(1).png

说明:

第一个参数是在视图文件中要写的js代码

第二个参数是将js代码插入到页面中哪个位置:    

View::POS_HEAD <head>与</head>之间.

View::POS_BEGIN <body>开始位置.

View::POS_END </body>前.

View::POS_READY 文档 ready 事件执行代码时。这将自动注册[[yii\web\JqueryAsset|jQuery]].

View::POS_LOAD 文档load事件执行代码时,这将自动注册[[yii\web\JqueryAsset|jQuery]].

第三个参数是用来识别代码块的唯一脚本 ID ,ID 相同将替换存在的脚本代码而不是添加新的。如不提供, JS 代码会用自己来做脚本 ID 

还可以用块数据来做,通常不会这样写,显得有点多余,至少是一种思路:

<?php $this->beginBlock("script") ?>
    $(function () {
      //你的js代码
    });
<?php $this->endBlock() ?>
<?php $this->registerJs($this->blocks["script"], \yii\web\View::POS_END); ?>

外部脚本registerJsFile() 

<?php
use bagesoft\assets\Admini;
Admini::register($this);
$this->registerJsFile(Yii::$app->request->baseUrl . 'js/my.js', ['depends' => bagesoft\assets\Admini::className(), "position"=> $this::POS_END]);
或
$this->registerJsFile('http://example.com/js/my.js', ['depends' => backend\assets\AppAsset::className(), "position"=> $this::POS_END]);
?>

第一个参数是文件的路径 ,可以是本地绝对路径也可以是一个Url

第二个参数是依赖于谁,这里它是依赖 bagesoft\assets\Admini::className() 对象

第三个参数是引入文件的位置,POS_END 说明是在</body>之前引入

上面这种方式是不被常用,因为每次引入一个文件都需要指定依赖对象,但是若多个加载文件位置不同时就需要使用这种方式单独指定position位置。

下面这种试是经常被使用的,先看一个完整的文件:

<?php
namespace bagesoft\assets;
use yii\web\AssetBundle;
class Admini extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    /**
     * 全局CSS
     * @var [type]
     */
    public $css = [
        'static/plugins/font-awesome/css/font-awesome.min.css',
    ];
    /**
     * 全局JS
     * @var [type]
     */
    public $js = [
        'static/bootstrap/js/bootstrap.min.js',
    ];
    /**
     * 依赖
     * @var [type]
     */
    public $depends = [
        'yii\web\YiiAsset',
        'yii\bootstrap\BootstrapAsset',
    ];
    /**
     * 自定义script
     * @param [type] $view   [description]
     * @param [type] $jsfile [description]
     */
    public static function addScript($view, $jsfile)
    {
        $view->registerJsFile($jsfile, [Admini::className(), 'depends' => 'bagesoft\assets\Admini']);
    }
    /**
     * 自定义css
     * @param [type] $view    [description]
     * @param [type] $cssfile [description]
     */
    public static function addCss($view, $cssfile) {  
        $view->registerCssFile($cssfile, [Admini::className(), 'depends' => 'bagesoft\assets\Admini']);  
    }  
}
?>

引入了两个静态方法,addScript和addCss,使用这2个文件引入文件就不需要每次填写依赖关系,在视图中就可以像下面这样简写:

<?php
use bagesoft\assets\Admini;
Admini::register($this);
Admini::addScript($this,Yii::$app->request->baseUrl."/js/my.js");
Admini::addScript($this,"http://example.com/js/my.js");
?>

CSS也是使用同样的方法引入资源的