zoukankan      html  css  js  c++  java
  • Yii2.0 是如何引入js和css

    今天上午没事,重拾知识,此处是关于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手册对以上疑问进行了解答:

    yiiwebView 对象可以注册脚本。专门有两种方法:为内联脚本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 代码

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

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

        $this 指 yiiwebView对象,用于管理和渲染视图

    还有这样的一种写法

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

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

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

      调用 yiiaseView::beginBlock() 和 yiiaseView::endBlock() 来定义数据块

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

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

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

     

    二、外部脚本registerJsFile() 

    使用如下:

    <?php
    use backendassetsAppAsset;
    use yiiwebView;
    AppAsset::register($this);
    //外部引入js文件
    $this->registerJsFile(Yii::$app->request->baseUrl . 'js/mytest_js.js', ['depends' => backendassetsAppAsset::className(), "position"=> $this::POS_END]);

     说明:引入外部 js文件

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

      第二个元素是织带它是依赖于谁的,这里它是依赖 backendassetsAppAsset::className() 对象的

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

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

        首先: 在这个文件中 backendassetsAppAsset.php 可见,我们引入了两个静态方法,完整版的AppAsset类如下:

    namespace backendassets;  
      
    use yiiwebAssetBundle;  
      
    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 = [  
            'yiiwebYiiAsset',  
            'yiiootstrapBootstrapAsset',  
        ];  
      
         //定义按需加载JS方法,注意加载顺序在最后  
        public static function addScript($view, $jsfile) {  
            $view->registerJsFile($jsfile, [AppAsset::className(), 'depends' => 'backendassetsAppAsset']);  
        }  
          
       //定义按需加载css方法,注意加载顺序在最后  
        public static function addCss($view, $cssfile) {  
            $view->registerCssFile($cssfile, [AppAsset::className(), 'depends' => 'backendassetsAppAsset']);  
        }  
     }

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

    <?php
    use backendassetsAppAsset;use yiiwebView;
    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文件的后面

  • 相关阅读:
    sqlserver 日期格式化
    CentOS7系统 ansible自动化部署多台服务器部署
    Linux运维跳槽40道面试精华题
    Linux下SVN创建新的项目
    日志切割
    SVN的安装和启动SVN的安装
    jenkins+Gitlab+maven+tomcat实现自动集成、打包、部署
    nginx启动脚本
    nginx如何调用php
    redis常用命令
  • 原文地址:https://www.cnblogs.com/lccjob/p/5714583.html
Copyright © 2011-2022 走看看