正所谓命由己造, 相由心生, 那么我们的问题又是怎么抛出来的喃?
这个问题也算是个比较久远但是经常会有人要问到的问题究其原因,
一来实际开发中不可避免, 二来也就是刚接触 yii 的小伙伴喜欢揪着不放那
为啥了解过这个问题的人就不纠结了喃? 外星人: 楼主你 si 不 si 撒, 人家都了解怎么做了还纠结这个问题干嘛
那行, 关乎所以的人看看就行
一般来说, 网页内部的 js 文件或代码, 都是放置在网页底部的前面, 这是因为网页自上而下加载, 用户在访问我们页面的时候尽量不要因为加载 js 展现过长时间的空白页面, 停留时间过长就白白流失了用户量
yii2 中是集成了 jQuery 的, 而且 jQuery 文件是加载在页面底部的, 因此, 如果我们的 js 代码段不在页面底部加载, 就很大可能会发生 $ 未定义的友好提示
我这废话一大堆得毛病确实需要去挂个号看看了...
先来看看 js 代码段怎么处理
- registerJs('
- $(function () {
- // 为所欲为的写你想要写的 js 代码吧
- $......
- });
- ', \yii\web\View::POS_END);
对, 就是用上面的 registerJs 方法注册, 有小伙伴听不懂了, 啥是注册, 简单理解就是把你的 js 代码放置在你想要放的页面位置
第一个参数嘛, 很好理解, 就是我们要写的 js 代码块第二个参数就是我们需要指定代码块插入在页面的具体位置了
第二个参数这里只讨论 \yii\web\View::POS_END, 意思就是页面底部之前插入
当然还有第三个参数, 意思是 js 代码块的一个 id 标示, 不指定会默认生成, 此处忽略
哦对了, 上面的 $this 不要混淆, 这里是指 yii\web\View 对象
接下来一起看看怎么引入外部的 js 文件
官网的例子是这样给的
$this->registerJsFile('http://example.com/js/main.js', ['depends' => [\yii\web\JqueryAsset::className()]]);
但是人家说了, 我们不建议这么用, 这样依赖来依赖去关系复杂
好了, 我们来看看怎么使用包管理 asset bundles 进行注册吧
我们先打开文件 backend\assets\AppAsset.php 文件瞅瞅是什么高大上的东西, 我擦, 果然高深, 我张作完全看不懂的样子, 完了, 下面没法写了, 看不懂怎么讲, 回归正题, 我们要抓紧时间扩展下
我们在 AppAsset 类里添加了两个静态方法, 完整版的 AppAsset 类如下:
- namespace backend\assets;
- use yii\web\AssetBundle;
- /**
- * @author Qiang Xue
- * @since 2.0
- */
- class AppAsset extends AssetBundle
- {
- public $basePath = '@webroot';
- public $baseUrl = '@web';
- public $CSS = [
- 'css/site.css',
- ];
- public $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 有啥作用, 意图是啥, 上面说了, 不建议在 view 层直接用 $this->registerJsFile 方法注册文件, 这里呢, 我们添加的 addScript 方法, 以后 view 层直接调用这个方法对文件进行注册
那为啥这个就好了呢? 好处是非常明显的, 调用该方法避免了每次注册文件都要填写依赖关系, 十分方便
其中需要说明的是, 需要注册的文件都会在 yii.js 和 bootstrap.js 文件的后面, 这也正是我们所需要的
这样一来, 我们在 view 层加载外部 js 文件也就灰常简单了, 像下面这样,
- use backend\assets\AppAsset;
- AppAsset::register($this);
- AppAsset::addScript($this,'/css/main.js');
而不必像下面这样繁琐:
- $this->registerJsFile('/css/main.js',['depends'=>['backend\assets\AppAsset'], 'position'=> $this::POS_END]);
- $this->registerJsFile('/css/left.js',['depends'=>['backend\assets\AppAsset']]);
- $this->registerJsFile('/css/extension.js',['depends'=>['backend\assets\AppAsset']]);
到此喃, 我们就完整的实现了在 yii2 中页面底部加载 css,js 代码或外部文件了
如果你还想深入了解更多, 可以继续参考官方文档
官方文档 http://www.yiiframework.com/doc-2.0/guide-structure-assets.html
http://www.yiiframework.com/doc-2.0/guide-output-client-scripts.html
来源: https://www.php1.cn/detail/php-1f0f69b814.html