Yii 资源
资源是在网页中被引用的文件(css、js、视频、音频或图像等)。Yii在 资源包 中管理资源。资源包的目的是在代码库中有一组相关的 JS 或 CSS 文件,并能够通过单个PHP调用来注册它们。资源包也可以依赖于其他资源包。
在assets文件夹中,您会找到基本应用程序模板的资源包 −
上面的类指定了资产文件位于 @webroot 文件夹中,该文件夹对应URL @web 。该捆绑包不包含 JS 文件,只有一个 CSS 文件。该捆绑包依赖于其他捆绑包- **yii\web\YiiAsset和yii\bootstrap\BootstrapAsset。****
AssetBundle的属性
以下是AssetBundle的属性。
- basePath - 定义一个web可访问的目录,其中包含此捆绑包中的资产文件。
-
baseUrl - 指定与basePath属性对应的URL。
-
js - 定义此捆绑包中包含的JS文件数组。
-
css - 定义此捆绑包中包含的CSS文件数组。
-
depends - 定义此捆绑包依赖的其他捆绑包的数组。这意味着当前资产捆绑包的CSS和JS文件将在 depends 属性声明的捆绑包之后包含。
-
sourcePath - 定义包含资产文件的根目录。如果根目录不可通过web访问,则应设置此属性。否则,应设置 basePath 和 baseUrl 属性。
-
cssOptions - 定义将传递给 yii\web\View∷registerCssFile 函数的选项。
-
jsOptions - 定义将传递给 yii\web\View::registerJsFile 函数的选项。
-
publishOptions - 指定将传递给 yii\web\AssetManager::publish 函数的选项。
资产的分类
根据位置,资产可以分为-
- 源资产 - 资产位于无法直接通过Web访问的目录中。为了在页面中使用源资产,它们应该被复制到Web目录中。这个过程称为 资产发布 。
-
发布资产 - 资产位于具有Web访问权限的目录中。
-
外部资产 - 资产位于另一台Web服务器上。
使用资产捆绑包
步骤1 - 在 assets 文件夹内,创建一个名为 DemoAsset.php 的新文件,内容如下。
步骤2 − 我们刚刚声明了一个新的资源包,其中包含一个名为demo.js的文件。现在,在web/js文件夹中创建一个名为demo.js的文件,并将以下代码放入其中。
步骤3 - 要注册新创建的资产包,请转到views/layouts目录,并在main.php文件的顶部添加以下行。
步骤4 - 如果将您的网络浏览器指向 http://localhost:8080/index.php ,您应该会看到以下的chrome控制台输出。
您还可以定义 jsOptions 和 cssOptions 属性,以自定义 CSS 和 JS 文件在页面中的包含方式。默认情况下,JS 文件在闭合的 body 标签之前被包含。
步骤5 - 要在 head 部分包含 JS 文件,按照以下方式修改 DemoAsset.php 文件。
步骤6 − 现在,请打开 http://localhost:8080/index.php ,您应该看到 demo.js 脚本被包含在页面的 head 部分中。
对于运行在生产模式下的Web应用程序来说,启用HTTP缓存以提高性能是一种常见做法。这样做可以在所有发布的资源文件中附加上最后修改的时间戳。
步骤7 - 进入 config 文件夹并修改 web.php 文件,如下所示。
我们已添加了 AssetManager 组件并设置了 appendTimestamp 属性。
步骤8 - 现在在Web浏览器的地址栏中输入 http://localhost:8080/index.php 。您会注意到所有资产现在都有一个时间戳,如下图所示。
核心 Yii 资源包
以下是核心 Yii 资源包。
-
yii\web\JqueryAsset - 包含了 jquery.js 文件。
-
yii\web\YiiAsset - 包含了 yii.js 文件,它实现了一个模块化组织 JS 代码的机制。
-
yii\bootstrap\BootstrapAsset - 包含了 Twitter Bootstrap 框架的 CSS 文件。
-
yii\bootstrap\BootstrapPluginAsset - 包含了 Twitter Bootstrap 框架的 JS 文件。
-
yii\jui\JuiAsset - 包含了 jQuery UI 库的 CSS 和 JS 文件。