1. 首页
  2. CSS
  3. Yii2.0 是如何引入js和css？

Yii2.0 是如何引入js和css？

•css•阅读 3222

今天上午没事，重拾知识，此处是关于yii2.0是如何引入js 和css 使用总结

学习连接1：http://www.yiiframework.com/doc-2.0/guide-output-client-scripts.html

学习连接2：http://www.manks.top/article/yii2_load_js_css_in_end

学习连接3：http://www.yii-china.com/post/detail/39.html

问题：在开发web框架中，使用Yii2.0框架，我们也许会疑问，如果使用了layout /main.php 引入了公共的头和尾，以及css 和 js。

对于特别文档，我们想 “单独” 的引入js 和 css 应该怎么办？

通过学习，Yii2.0手册对以上疑问进行了解答：

内联脚本可用于配置和动态生成的代码。

一、内联脚本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 代码

第二个元素是我们决定这段代码插入在视图文件中具体那一个位置，具体参数如下：

第三个元素是表示这段代码的ID,它具有唯一性，如果曾经有过某个ID,则它会替代或取代之前跟它同名的哪一个，如果不写最后一个元素，则js代码本身就是Id，可忽略最后一个元素

$this 指 yii\web\View对象，用于管理和渲染视图

还有这样的一种写法

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

数据块block可以在一个地方指定视图内容在另一个地方显示，通常和布局一起使用

例如：可在内容视图中定义数据块在布局中显示它

　　调用 yii\base\View::beginBlock() 和 yii\base\View::endBlock() 来定义数据块

　　使用 $view->blocks[$blockID] 访问该数据块

　　其中 $blockID 为定义数据块时指定的唯一标识ID。

可见内部写法还是蛮灵活滴~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

　

二、外部脚本registerJsFile()　

使用如下:

<?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]);

　说明：引入外部 js文件

　　第一个参数是文件的绝对路径 Yii::$app->request->baseUrl 加js文件

　　第二个元素是织带它是依赖于谁的，这里它是依赖 backend\assets\AppAsset::className() 对象的

　　第三个元素是引入文件的位置，POS_END 说明是在</body>之前引入

但是：通常不使用这个引入的方式引入外部文件，因为每次引入一个文件都需要指定它是依赖于谁的，相对复杂，通常情况下我们使用包管理asset bundles进行注册；

首先： 在这个文件中 backend\assets\AppAsset.php 可见，我们引入了两个静态方法，完整版的AppAsset类如下：

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']);  
    }  
 }

　addScript() 和 addCss() 方法则是我们在视图文件中进行注册的钥匙，通过如下使用方式，我们就不需要使用 进行注册了

<?php
use 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');

这样是不是更简单一些了呢，不需要在次指定它是依赖于谁谁了~~~~~~~~~~~~~~~

其中需要说明的是，需要注册的文件都会在yii.js和bootstrap.js文件的后面

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。