如何仅加载yii2中所需的javascript文件

时间:2016-08-05 10:01:07

标签: javascript php jquery css

我正在使用yii2并且我的所有JS和CSS文件都包含在资产文件中,例如SiteAsset.com,但是js文件和css文件加载到我在此布局文件中加载的每个页面上说main.php布局文件,这会给我带来很多问题,因为一些不需要的代码可以在我甚至不需要它的页面上运行,并且还会延迟加载所需的时间,如何只加载特定所需的css或JS文件页。一些代码来说明我的意思

my asset file 
public $css = [
    //'css/listing.css',    

    '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css',
    '//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css',
    '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css',
    'css/AdminLTE.min.css',
    'css/skins/_all-skins.min.css',
    //'css/skins/skin-custom-1.css',
    //'css/skins/skin-custom-1-light.css',
    'css/skins/_custom-skins.css',
    //'plugins/iCheck/flat/all.css',
    'css/site.css',
    'css/listing.css', 


];
public $js = [


    '//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js',
    'js/main.js',
    //'plugins/iCheck/icheck.min.js',
    '//code.jquery.com/ui/1.11.4/jquery-ui.min.js',
   '//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js',
    'plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js',
   'js/app.min.js',
    //'js/dashboard.js',
    'js/demo.js',
    'js/listing.js',
    'js/functions.js',

];

如果我有两个页面说index.phpwelcome.php,我想在js/listing.js and js/functions.js中加载index.php,但在welcome.php页面上只加载{{1}并且根本不加载js/functions.js。如何在yii2中实现这一点感谢

1 个答案:

答案 0 :(得分:1)

我假设你没有module

1)assets文件夹中。创建, AppAsset1.php

<强> AppAsset1.php

<?php
namespace app\assets;
use yii\web\AssetBundle;

class AppAsset1 extends AssetBundle
{
  public $basePath = '@webroot';
  public $baseUrl = '@web';
  public $css = [
    '/app/css/style.css', // Your CSS location
    '/app/css/style1.css',
  ];
  public $js = [
    '/app/js/myscript.js', // Your JS location
    '/app/js/myscript1.js',
  ];

  public $depends = [
    // If you want to keep dependence.
    'yii\web\YiiAsset',
    'yii\bootstrap\BootstrapAsset',
    'yii\web\JqueryAsset',
  ];
}

2)现在,在您要显示这些 CSS &amp;的页面中 JS 。包括AppAsset1

<强> MyPage.php

<?php

use app\assets\AppAsset1;
AppAsset1::register($this);

?>

与此类似,您可以创建任意数量的资产,并将其包含在特定页面的任何位置。