yii2 페이지 하단에 CSS와 JS를 로드하는 방법 CSS 둥근 모서리 CSS 레이아웃 CSS 정의

작성자: Bailang 출처: www.manks.top/article/yii2_load_js_css_in_end

이 글의 저작권은 작성자에게 있으며, 이 글을 재인쇄하셔도 좋지만, 이 내용은 작성자의 동의 없이 유지되어야 합니다. , 기사 페이지의 눈에 띄는 위치에 제공됩니다. 원본 텍스트에 대한 링크를 제공하십시오. 그렇지 않으면 당사는 법적 책임을 추구할 권리를 보유합니다.

운명은 스스로 만들고 외모는 마음에서 생긴다는 말처럼 우리의 문제는 어떻게 발생하는가?

이 질문은 비교적 오래되었지만 사람들이 자주 묻는 질문입니다. 그 이유는

첫째, 실제 개발에서는 어쩔 수 없는 부분이고, 둘째, Yii를 처음 접하는 친구들은 그걸 붙잡고 싶어한다는 것입니다. 그렇다면

이 문제를 이해하는 사람들은 왜 걱정하지 않는 걸까요? 외계인: 모두가 방법을 알고 있는데 왜 아직도 이 문제로 어려움을 겪고 계시나요?

괜찮습니다. 모두가 걱정된다면 한번 살펴보세요.

일반적으로 웹페이지 내부의 js 파일이나 코드는 웹페이지의 하단에 배치됩니다 이는 웹페이지가 위에서 아래로 로드되기 때문입니다. 우리 페이지에 접속할 때 js를로드하고 표시하는 빈 페이지가 너무 오래 머무르기 때문에 사용자를 헛되이 잃지 마십시오.

yii2는 jQuery와 통합되어 있으며 jQuery 파일은 페이지 하단에 로드됩니다. 따라서 js 코드 조각이 페이지 하단에 로드되지 않으면 $undefound 프롬프트가 나타날 가능성이 높습니다. 발생합니다.

정말 말도 안되는 일을 많이 등록해야 해요...

먼저 js 코드 조각을 처리하는 방법을 살펴보겠습니다

<?php
$this->registerJs('
$(function () {
//为所欲为的写你想要写的js代码吧
$......
});
', \yii\web\View::POS_END);

네, 그냥 사용하세요 위의 RegisterJs 메소드를 사용하여 등록하는 방법을 이해하지 못하는 친구도 있습니다. 간단한 이해는 원하는 페이지 위치에 JS 코드를 배치하는 것입니다.

첫 번째 매개변수는 이해하기 쉽습니다. 우리가 작성하려는 js 코드 블록입니다. 두 번째 매개변수는 페이지에서 코드 블록이 삽입되는 특정 위치를 지정해야 한다는 것입니다.

여기서만 두 번째 매개변수인 yiiwebView::POS_END에 대해 설명합니다. 이는 페이지 하단의 앞에 삽입된다는 의미입니다.

물론 js 코드 블록의 id 표시를 의미하는 세 번째 매개변수가 있습니다. 지정하지 않으면 기본적으로 생성되며 여기서는 무시됩니다.

아, 그런데 위의 $this와 혼동하지 마세요. yiiwebView 객체를 의미합니다

외부 js 파일을 도입하는 방법을 살펴보겠습니다.

공식 홈페이지의 예는 다음과 같습니다

$this->registerJsFile('http://example.com/js/main.js', ['depends' => [\yii\web\JqueryAsset::className()]]);

그러나 사람들은 이 방법을 사용하는 것이 복잡하기 때문에 권장하지 않는다고 말했습니다.

자, 패키지 관리 에셋 번들을 사용하여 등록하는 방법을 살펴보겠습니다.

먼저 backendassetsAppAsset.php 파일을 열어서 내용을 살펴보겠습니다. 정말 고급스러워서 전혀 이해할 수 없을 것 같았습니다. 어쨌든, 주제로 돌아가서, 우리는 확장할 시간을 가져야 합니다.

AppAsset 클래스에 두 개의 정적 메소드를 추가했습니다. AppAsset 클래스의 전체 버전은 다음과 같습니다.

namespace backend\assets;
use yii\web\AssetBundle;
/**
 * @author Qiang Xue <qiang.xue@gmail.com>
 * @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',
    ];<br>    //定义按需加载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의 기능에 대해 이야기하겠습니다. 의도는 위에서 언급했듯이 $this->registerJsFile 메소드를 직접 사용하여 뷰 레이어에 파일을 등록하는 것은 권장하지 않습니다. 여기서는 앞으로는 뷰 레이어에서 이 메소드를 직접 호출하게 됩니다. 파일을 등록합니다.

그럼 이게 왜 좋은 걸까요? 이점은 매우 분명합니다. 이 메서드를 호출하면 각 등록 파일의 종속성을 채우지 않아도 되므로 매우 편리합니다.

등록해야 하는 파일은 우리에게 꼭 필요한 yii.js 및 bootstrap.js 파일 뒤에 있다는 점에 유의해야 합니다.

이런 식으로 다음과 같이 번거로운 작업 대신

use backend\assets\AppAsset;
AppAsset::register($this);
AppAsset::addScript($this,'/css/main.js');

과 같이 뷰 계층에 외부 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

위 내용은 CSS와 yii 내용을 포함하여 페이지 하단에 yii2가 CSS와 js를 로드하는 방법을 소개하고 있어 PHP 튜토리얼에 관심이 있는 친구들에게 도움이 되기를 바랍니다.