亚洲精品久久久中文字幕-亚洲精品久久片久久-亚洲精品久久青草-亚洲精品久久婷婷爱久久婷婷-亚洲精品久久午夜香蕉

您的位置:首頁技術文章
文章詳情頁

yii2.0 靈活使用AssetBundle管理CSS樣式及JS腳本

瀏覽:85日期:2024-05-24 13:33:16

2.0的變化相信大家都看到了,其中對一個資源包概念做出了很完美的實現,那就是AssetBundle,但是很多初學者朋友可能不太能夠正確的領會其中的含義

我畫了一張圖,大家可以將就看一下:

yii2.0 靈活使用AssetBundle管理CSS樣式及JS腳本

其中,控制器動作的視圖(view)渲染順序是優先于我們的模板頁(layout)的,那么一旦我們在某個視圖中使用了新的JS庫,或新的CSS樣式文件,那么我們如何去處理呢?

以下方式是錯誤的,請避免使用:有的人會直接在視圖里添加對css或者js的link引用,這樣引入的文件是在視圖區域,而yii的默認JS加載會放在模板頁的最后,這樣可能導致依賴關系混亂。比如你視圖中引用的js文件里調用了jquery包,但是執行時jquery的加載代碼在HTML頁面的末尾,這樣導致頁面腳本錯誤。

還有人會圖省事,直接把項目中所有的js或css文件都書寫layout模板頁里,這樣產生大量的無效樣式或js,影響了加載效率及頁面錯位風險。

所以正確的方式應該是通過AssetBundle去解決這個問題,先發一個簡單的類給大家看一下:

namespace appassets;use yiiwebAssetBundle;class AppAsset extends AssetBundle { public $basePath = ’@webroot’; public $baseUrl = ’@web’; public $css = [’public/skin/default_skin/css/theme.css’, ]; public $js = [’public/vendor/jquery/jquery-1.11.1.min.js’,’public/vendor/jquery/jquery_ui/jquery-ui.min.js’,’public/js/bootstrap/bootstrap.min.js’, ]; //依賴包 public $depends = [//這里寫你的依賴包即可,沒有就別寫 ]; //導入當前頁的功能js文件,注意加載順序,這個應該最后調用 public static function addPageScript($view, $jsfile) {$view->registerJsFile($jsfile, [AppAsset::className(), ’depends’ => ’appassetsAppAsset’]); } //導入編輯器 public static function addCkeditor($view) {$view->registerJsFile(’/public/js/utility/ckeditor/ckeditor.js’, [AppAsset::className(), ’depends’ => ’appassetsAppAsset’]); } }可以看到上面我創建的類中已經預定義了兩個靜態方法addPageScript和addCkeditor,其中addCkeditor是一個第三方的js組件,是個編輯器,具體的開發環境中你們可以寫別的方法名及加載別的組件。那么上的這個東西寫好后應該如何去使用呢?我們在模板頁開頭部分加上這句話://自動加載資源AppAsset::register($this);這樣會在模板頁加載基礎的項目資源文件,比如css和js什么的。現在我們有一個視圖叫create-mail,需要使用ckeditor編輯器,那么我們應該在create-mail視圖的開頭加上這句話://導入ckeditor包資源appassetsAppAsset::addCkeditor($this);最后解釋一下,addCkeditor()方法是我們預先定義好的,這樣我們可以把一些常見的包都拆包并預處理好,如果你覺得麻煩可以直接使用如下的方式://導入ckeditor包資源appassetsAppAsset::addPageScript($this,’js文件相對路徑或url’);以上的例子只是使用了js文件作為一個簡單的介紹,css樣式的加載也是一樣的道理。這樣做的好處是,即使在視圖里加載css或js也會因為依賴關系而出現在視圖外面的常規加載區域中,規范了很多。同時也因為依賴關系,你在視圖里加載的文件肯定會排在你的基礎樣式或腳本的后面,不會出錯。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 免费看欧美一级特黄a毛片 免费看欧美一级特黄α大片 | 亚洲国产另类久久久精品小说 | 毛片在线播放观看日本 | 亚洲国产成人九九综合 | 91麻豆精品国产自产在线 | 亚洲欧美在线精品一区二区 | 在线日产一区二区 | 99久久爱re热6在播放 | 成人午夜视频在线观 | 一级黄色片一级黄色片 | 91福利在线观看视频 | 影音先锋ady69色资源网站 | 国产精品第一区在线观看 | 香蕉香蕉国产片一级一级毛片 | 成人在线免费视频观看 | 欧美三级黄色 | 日本黄色大片 | 林美仑在线三级播放 | 日本高清xxxx免费视频 | 国产成人精品一区二区视频 | 免费精品国产日韩热久久 | 国产精品麻豆一区二区 | 成人欧美1314www色视频 | 麻豆视频在线免费看 | 精品久久洲久久久久护士 | 日韩国产毛片 | 日本大片成人免费播放 | 国产精品久久久久久久成人午夜 | 黄色一级片毛片 | 在线观看国产精品日本不卡网 | 久久网免费视频 | 欧美老人另类视频 | 欧美性xxxxx极品老少 | 亚洲精品不卡在线 | 欧美黑人巨大白妞出浆 | 五月天婷婷综合 | 久久国产亚洲高清观看5388 | 最近手机中文字幕无吗 | 快射影院 | 久久综合九色综合欧美9v777 | 亚洲精品成人网 |