Home Backend Development PHP Tutorial Yii核心组件AssetManager原理分析_PHP

Yii核心组件AssetManager原理分析_PHP

May 31, 2016 pm 06:15 PM
yii core components

本文我们通过yii自带的demo-blog程序来分析Yii核心组件AssetManager,他可以自动加载css和javascript,并且只需要一句代码即可。具体分析如下:

打开blog的首页,会看到如下的引入js的html代码:

代码如下:




这些js文件的路径都在assets文件夹下,assets后面跟着一个显然经过hash的文件夹路径,同属于jq的js代码的路径相同,这段代码从何而来呢?

直接看view文件看不到任何引入js的代码,因此应该是使用widget引入的:

代码如下:

$this->widget('zii.widgets.CListView', array(
'dataProvider'=>$dataProvider,
'itemView'=>'_view',
'template'=>"{items}n{pager}",
));
?>

这个widget也是yii自带的zii扩展,于是乎我们可以找到zii的CListView代码,而CListView又是继承CBaseListView,因此先看CBaseListView的run方法:

代码如下:

public function run()
{
$this->registerClientScript();
echo CHtml::openTag($this->tagName,$this->htmlOptions)."n";
$this->renderKeys();
$this->renderContent();
echo CHtml::closeTag($this->tagName);
}

请注意第一个方法registerClientScript,这个方法是在CListView中实现的:

代码如下:

public function registerClientScript()
{
……
$cs=Yii::app()->getClientScript();
$cs->registerCoreScript('jquery');
$cs->registerCoreScript('bbq');
……
}

看到jquery和bbp似乎离真相近了些,接下来我们看CClientScript::registerCoreScript方法:

代码如下:

public function registerCoreScript($name)
{
$this->_hasScripts=true;
$this->_coreScripts[$name]=$name;
$params=func_get_args();
$this->recordCachingAction('clientScript','registerCoreScript',$params);
}

这里其实主要是记录了最终页面要render的js,而实际生成render的url是通过getCoreScriptUrl方法:

代码如下:

public function getCoreScriptUrl()
{
if($this->_baseUrl!==null)
return $this->_baseUrl;
else
return $this->_baseUrl=Yii::app()->getAssetManager()->publish(YII_PATH.'/web/js/source');
}

接下来我们看看publish的具体过程:

代码如下:

public function publish($path,$hashByName=false,$level=-1,$forceCopy=false)
{
if(is_file($src))
{
$dir=$this->hash($hashByName ? basename($src) : dirname($src));
$fileName=basename($src);
……
else if(is_dir($src))
{
$dir=$this->hash($hashByName ? basename($src) : $src);
$dstDir=$this->getBasePath().DIRECTORY_SEPARATOR.$dir;
……
}

这里通过对路径做了hash处理,因此我们看到的路径是不规则的,而由于jq系列的js代码均在同一路径下(都在framework/web/js/source下),所以hash值是相同的。

另外,除了如上所述,CAssetManager使得多个模块可以复用相同的代码制外,使用CAssetManager的另外一个好处是安全隔离,将真实的代码放在受保护的路径下,按需加载。

希望本文所述对大家基于yii框架的PHP程序设计有所帮助。

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to install the Windows 10 old version component DirectPlay How to install the Windows 10 old version component DirectPlay Dec 28, 2023 pm 03:43 PM

Many users always encounter some problems when playing some games on win10, such as screen freezes and blurred screens. At this time, we can solve the problem by turning on the directplay function, and the operation method of the function is also Very simple. How to install directplay, the old component of win10 1. Enter "Control Panel" in the search box and open it 2. Select large icons as the viewing method 3. Find "Programs and Features" 4. Click on the left to enable or turn off win functions 5. Select the old version here Just check the box

How to implement calendar component using Vue? How to implement calendar component using Vue? Jun 25, 2023 pm 01:28 PM

Vue is a very popular front-end framework. It provides many tools and functions, such as componentization, data binding, event handling, etc., which can help developers build efficient, flexible and easy-to-maintain Web applications. In this article, I will introduce how to implement a calendar component using Vue. 1. Requirements analysis First, we need to analyze the requirements of this calendar component. A basic calendar should have the following functions: display the calendar page of the current month; support switching to the previous month or next month; support clicking on a certain day,

Angular components and their display properties: understanding non-block default values Angular components and their display properties: understanding non-block default values Mar 15, 2024 pm 04:51 PM

The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.

How to open the settings of the old version of win10 components How to open the settings of the old version of win10 components Dec 22, 2023 am 08:45 AM

Win10 old version components need to be turned on by users themselves in the settings, because many components are usually closed by default. First we need to enter the settings. The operation is very simple. Just follow the steps below. Where are the win10 old version components? Open 1. Click Start, then click "Win System" 2. Click to enter the Control Panel 3. Then click the program below 4. Click "Enable or turn off Win functions" 5. Here you can choose what you want to open

Apple M3 Ultra launches new version, adding 32 CPU cores and 80 GPU cores Apple M3 Ultra launches new version, adding 32 CPU cores and 80 GPU cores Nov 13, 2023 pm 11:13 PM

This chip may be equipped with up to 80 GPU cores, making it the most powerful product in the M3 series. Max has twice the number of cores. Judging from the development model of the M1 and M2 series, Apple's "Ultra" version of the chip basically has twice the number of cores of the "Max" version. This is because Apple actually uses two Max chips internally. The connection technologies are combined to form M1Ultra and M2Ultra. 80 GPU cores M3Ultra may have "up to 80 graphics processing cores." This prediction is based on the development path of Apple's chips: from the basic version to the "Pro" version, to the "Max" version with twice the number of graphics cores, and the "Ultra" version with double the number of CPU and GPU cores. For example

Vue component practice: paging component development Vue component practice: paging component development Nov 24, 2023 am 08:56 AM

Vue component practice: Introduction to paging component development In web applications, the paging function is an essential component. A good paging component should be simple and clear in presentation, rich in functions, and easy to integrate and use. In this article, we will introduce how to use the Vue.js framework to develop a highly customizable paging component. We will explain in detail how to develop using Vue components through code examples. Technology stack Vue.js2.xJavaScript (ES6) HTML5 and CSS3 development environment

How to handle dynamic loading and switching of components in Vue How to handle dynamic loading and switching of components in Vue Oct 15, 2023 pm 04:34 PM

Handling dynamic loading and switching of components in Vue Vue is a popular JavaScript framework that provides a variety of flexible functions to handle the dynamic loading and switching of components. In this article, we will discuss some methods of handling dynamic loading and switching of components in Vue, and provide specific code examples. Dynamically loading components means dynamically loading components at runtime as needed. This improves the performance and loading speed of your application because relevant components are loaded only when needed. Vue provides async and awa

How to use Vue to implement an imitation photo wall component? How to use Vue to implement an imitation photo wall component? Jun 25, 2023 am 08:19 AM

In modern web development, componentization is a very popular development model. Vue.js is a front-end framework that is very suitable for componentization. In this article, we will introduce how to create a faux photo wall component using Vue.js. Before we get started, we need to make some preparations. First, we need to install Vue.js. The installation method is very simple, just enter the following command in the terminal: npminstallvue After the installation is complete, we can create a file named

See all articles