详解PHP的Yii框架中自带的前端资源包的使用(3)

可以设置资源包的名称对应false来禁用想禁用的一个或多个资源包,当视图中注册一个禁用资源包, 视图不会包含任何该包的资源以及不会注册它所依赖的包,例如,为禁用yii\web\JqueryAsset,可以使用如下配置:

return [ // ... 'components' => [ 'assetManager' => [ 'bundles' => [ 'yii\web\JqueryAsset' => false, ], ], ], ];

可设置yii\web\AssetManager::bundles为false禁用 所有 的资源包。

资源部署

有时你想"修复" 多个资源包中资源文件的错误/不兼容,例如包A使用1.11.1版本的jquery.min.js, 包B使用2.1.1版本的jquery.js,可自定义每个包来解决这个问题,更好的方式是使用资源部署特性来部署不正确的资源为想要的, 为此,配置yii\web\AssetManager::assetMap属性,如下所示:

return [ // ... 'components' => [ 'assetManager' => [ 'assetMap' => [ 'jquery.js' => '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', ], ], ], ];

yii\web\AssetManager::assetMap的键为你想要修复的资源名,值为你想要使用的资源路径, 当视图注册资源包,在yii\web\AssetBundle::css 和 yii\web\AssetBundle::js 数组中每个相关资源文件会和该部署进行对比, 如果数组任何键对比为资源文件的最后文件名(如果有的话前缀为 yii\web\AssetBundle::sourcePath),对应的值为替换原来的资源。 例如,资源文件my/path/to/jquery.js 匹配键 jquery.js.

注意: 只有相对相对路径指定的资源对应到资源部署,替换的资源路径可以为绝对路径,也可为和yii\web\AssetManager::basePath相关的路径。
资源发布

如前所述,如果资源包放在Web不能访问的目录,当视图注册资源时资源会被拷贝到一个Web可访问的目录中, 这个过程称为资源发布,yii\web\AssetManager会自动处理该过程。

资源默认会发布到@webroot/assets目录,对应的URL为@web/assets, 可配置yii\web\AssetManager::basePath 和 yii\web\AssetManager::baseUrl 属性自定义发布位置。

除了拷贝文件方式发布资源,如果操作系统和Web服务器允许可以使用符号链接,该功能可以通过设置 yii\web\AssetManager::linkAssets 为 true 来启用。

return [ // ... 'components' => [ 'assetManager' => [ 'linkAssets' => true, ], ], ];

使用以上配置,资源管理器会创建一个符号链接到要发布的资源包源路径,这比拷贝文件方式快并能确保发布的资源一直为最新的。

常用资源包

Yii框架定义许多资源包,如下资源包是最常用,可在你的应用或扩展代码中引用它们。

yii\web\YiiAsset: 主要包含yii.js 文件,该文件完成模块JavaScript代码组织功能, 也为 data-method 和 data-confirm属性提供特别支持和其他有用的功能。

yii\web\JqueryAsset: 包含从jQuery bower 包的jquery.js文件。

yii\bootstrap\BootstrapAsset: 包含从Twitter Bootstrap 框架的CSS文件。

yii\bootstrap\BootstrapPluginAsset: 包含从Twitter Bootstrap 框架的JavaScript 文件来支持Bootstrap JavaScript插件。

yii\jui\JuiAsset: 包含从jQuery UI库的CSS 和 JavaScript 文件。

如果你的代码需要jQuery, jQuery UI 或 Bootstrap,应尽量使用这些预定义资源包而非自己创建, 如果这些包的默认配置不能满足你的需求,可以自定义配置,详情参考自定义资源包。

资源转换

除了直接编写CSS 和/或 JavaScript代码,开发人员经常使用扩展语法来编写,再使用特殊的工具将它们转换成CSS/Javascript。 例如,对于CSS代码可使用LESS 或 SCSS, 对于JavaScript 可使用 TypeScript。

可将使用扩展语法的资源文件列到资源包的yii\web\AssetBundle::css 和 yii\web\AssetBundle::js中,如下所示:

class AppAsset extends AssetBundle { public $basePath = '@webroot'; public $baseUrl = '@web'; public $css = [ 'css/site.less', ]; public $js = [ 'js/site.ts', ]; public $depends = [ 'yii\web\YiiAsset', 'yii\bootstrap\BootstrapAsset', ]; }

当在视图中注册一个这样的资源包,yii\web\AssetManager资源管理器会自动运行预处理工具将使用扩展语法 的资源转换成CSS/JavaScript,当视图最终渲染页面时,在页面中包含的是CSS/Javascipt文件,而不是原始的扩展语法代码文件。

Yii使用文件扩展名来表示资源使用哪种扩展语法,默认可以识别如下语法和文件扩展名:

LESS: .less

SCSS: .scss

Stylus: .styl

CoffeeScript: .coffee

TypeScript: .ts

Yii依靠安装的预处理工具来转换资源,例如,为使用LESS,应安装lessc 预处理命令。

可配置yii\web\AssetManager::converter自定义预处理命令和支持的扩展语法,如下所示:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/6f5472fdfac644bab6645b0284f2d5de.html