README

动态处理插入到页眉和页脚的资产，允许您排队您的JS和CSS文件、元标签等。

这是用来做什么的？

网络性能最佳实践建议

将所有样式表加载在页面的 <HEAD>...</HEAD> 部分中。这样浏览器会提前加载样式表，并使用它们正确渲染页面。如果不遵循此规则，您将看到在加载过程中页面外观和布局发生变化的页面 - 这时样式表已经加载。
将所有JavaScript加载在页面底部，紧接在 </BODY> 标签之前。因为JavaScript可能会改变页面的内容并修改其结构，所以 <SCRIPT> 标签会阻塞并冻结浏览器对HTML的渲染。

遵循这些规则，您通常需要在准备渲染页面之前准备好JavaScript脚本和文件、样式表和元标签。这正是 Assoto 旨在帮助解决的问题。它会在您开始打印页面之前预先收集您的资产，并在您开始打印页面时交付它们。

堆栈

在准备渲染页面时，您开始积累资产。这是通过将它们堆叠在所谓的 "堆栈" 中来实现的。有两个堆栈

"head" (Assoto\Stack::STACK_HEAD) 用于页面的 <HEAD>...</HEAD> 部分
"footer" (Assoto\Stack::STACK_FOOTER) 用于页面底部，紧接在 </BODY> 标签之前

遵循最佳实践，Assoto 将将所有样式表放入 "head"，并将所有脚本放在 "footer" 的底部。

要查看堆栈中已经添加的内容，请调用 Assoto\Stack::stack($stack)。如果您想重置堆栈并清空它，请调用 Assoto\Stack::reset($stack)。

如何使用？

您首先堆叠资产。

	/* adds my.js as javascript file asset */
	Assoto\JS::file('my.js');

	/* adds my.css as stylesheet asset */
	Assoto\CSS::stylesheet('my.css');

	/* adds the <title> tag as asset */
	Assoto\HTML::title('Hello World!');

当是时候渲染页面时，您调用 Assoto\Stack::display() 来打印堆栈中积累的资产。以下是一个使用非常简单的PHP页面的示例

<html>
<head><?php echo Assoto\Stack::display('head'); ?></head>
<body>

	<h1>Assoto Example</h1>

<?php echo Assoto\Stack::display('footer'); ?>
</body>
</html>

渲染的输出将是

<html>
<head><link href="my.css" rel="stylesheet" type="text/css"/><title>Hello World!</title></head>
<body>

	<h1>Assoto Example</h1>

<script type="text/javascript" src="my.js"/>
</body>
</html>

就这样。非常简单直接。这将与您使用的任何类型的模板引擎一起工作，它只需要一些额外的代码来传递累积的资产。

资产

有几个类具有 预定义的 方法用于添加不同类型的资产：样式表、脚本、元标签和链接。

在底层，它们实际上都在调用 Assoto\Stack::add() 方法。根据资产类型，这些预定义方法添加一些额外的默认值，并指向正确的堆栈。

Assoto\HTML::title("Hello World!") - 向 "head" 资产堆栈添加 <title>...</title> 标签
Assoto\CSS::style("body{background:#fff}") - 向 "head" 资产堆栈添加内联 <style>...</style> 块
Assoto\CSS::stylesheet("my.css") - 向 "head" 资产堆栈添加CSS样式表
Assoto\JS::inline("console.log(somevar);") - 向 "footer" 资产堆栈添加javascript内联 <script>...</script> 块
Assoto\JS::file("my.js") - 向 "footer" 资产堆栈添加javascript文件
Assoto\Meta::link('//assets-cdn.github.com', 'dns-prefetch') - 向 "head" 资产堆栈添加 "dns-prefetch" 链接标签
Assoto\Meta::canonical('http://github.com/kktsvetkov/assoto') - 向 "head" 资产堆栈添加规范链接元素
Assoto\Meta::icon('favicon.ico') - 向 "head" 资产堆栈添加图标链接
Assoto\Meta::meta('keywords', 'assets, enqueue') - 向 "head" 资产堆栈添加 "keywords" 元标签
Assoto\Meta::property('og:type', 'website') - 向 "head" 资产堆栈添加带有属性（用于Open Graph协议）的元标签

资产识别

每个添加的资产都会获得一个 "id"。在某些情况下，这种识别用于检查资产是否已存在于堆栈中，而在某些情况下，它用于确保您只有一个该类型的资产。

您可以直接调用 Assoto\Stack::add() 方法时手动设置 "id"。大多数预定义方法也支持将资产 "id" 作为它们的参数之一。有些方法故意省略 "id" 参数，因为那些资产只能有一个实例 - 例如 Assoto\Meta::canonical() 和 Assoto\HTML::title()

让我们堆叠一些资产

	Assoto\HTML::title('Hello World!');
	Assoto\CSS::stylesheet('my.css');

这两个资产都被分配到 "head" (Assoto/Stack::STACK_HEAD) 堆栈。让我们查看该堆栈并查看每个资产的 "id"。

print_r(Assoto\Stack::stack(Assoto\Stack::STACK_HEAD));

Array
(
    [css:my.css] => <link href="my.css" rel="stylesheet" type="text/css"/>
    [html:title] => <title>Hello World!</title>
)

文件类型的资产（如样式表和JavaScript文件）使用它们的URL来组成它们的id。这作为防止添加相同的资产文件多次的一种预防措施。您可以多次调用以添加相同的资产，但最终它只会被添加一次，这是通过锁定到它的 "id" 来实现的。

要检查资产是否在堆栈中存在，请调用 Assoto\Stack::exists($stack, $id)。如果要删除已添加的资产，请调用 Assoto\Stack::delete($stack, $id)。

更多示例

内联favicon图像

 	Assoto\Meta::icon('data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAgCAYAAADnnNMGAAADDUlEQVRIib2WX2iOURzHP+/T0pKWTi4kLe1sN/Kvpfy74UaijJTRrI2xlVJkJ0YR0XAuKLsxtOxCmvwrVlwgf0fChRbLqSW5kE7ScqH15uL5PXvPu9737X1f5VtPzznf5/f7fc+f3/mdJ0WR8NrMAD4BCnihnF1RrG9UrKHYTpN2VQl+JYmESP8PkZLwX0QqkobXZg5wD6gEfgtdDfQqZw3wJ1cAr81ZoBX4KlQlMAVoUM6+h+yZdANzgRpgnjxVQKfXZq1y9mdgnxaB3cBeYHrgUyuD604Cp8R4rcwCYAB4CSwBtgj3DWgG+iTAbeC02CW4BrwClgGbhWtUzg6kvDYRcf7XAoPK2XXBUvTJUgCMysxUsDSz5d2rnO0I/B4BK4EvQF0EnBcBgC6y0QaMSHuOCCTBE4E3oYBgl7yrge4IWBB8bA4tlbNpYBP5z8V3YF0OfmbQXh0BjcCYEJ1em9ZJQh+AhhyB0sAq5ez3kPTaVAP3A2p/ro3/BQwRZ1JEnLoeWE+mrEC8Lw+IlzHBGHGG1Uj/gHL2TCoYwUngUI4Rl4sB5WwjBOdEOXsYeFxGsFz7NQI0JZ2KSR+bgA3ESzQOfATOAksLiFwCLgL14lMF3FXOjicGqTyOAHhtFgHvCtkAw8B8ycScyFsgpZY9D6gR4Ie0n8kDcSl6WmgUharwDWCqtD8DW8mk+jBxWiejX+61uVCSiDjUB1STcvYtMEv61cpZD2wPbNq9NjuLEvHa7ADaA6pLOfta7vgsKGf7gXMBddFrs7igiGz05YAaUM6eyjcgEdoHPAyo616bqaHNhKPXZgpwK/j2ITlMRWAT8XUAcQW4kVMEuEKmRPwRx6IgF1pov8ZrcyRLxGtzkMwFBbBROTtCCVDODgEtAXXMa7MeIPLabCO4KoGjytnBUgQCoX6gJ6DueG2WR2RX0ZvK2ePlCARCe4AnAVUfKWdPAB3EB6ztXwQCtBBf103K2Z5I1HuBhbKB/wzl7ChQp5y9CtmlfjyfU5lCE/HK/YMsya8U4zSZAjlWyHAy/gJwnedKs9gq+QAAAABJRU5ErkJggg==');

Hreflang备选链接标签

	Assoto\Meta::hreflang('//example.com/en-us');
	Assoto\Meta::hreflang('//example.com/de-de', 'de-de');
	Assoto\Meta::hreflang('//example.com/en-ca', 'en-ca');

Open Graph协议

	Assoto\Meta::property('og:image', 'https://avatars3.githubusercontent.com/u/694812?s=400&amp;v=4');
	Assoto\Meta::property('og:site_name', 'GitHub');
	Assoto\Meta::property('og:type', 'object');
	Assoto\Meta::property('og:title', 'kktsvetkov/Assoto');
	Assoto\Meta::property('og:url', 'https://github.com/kktsvetkov/Assoto');
	Assoto\Meta::property('fb:app_id', '1401488693436528');

Google站点验证

	Assoto\Meta::meta('google-site-verification', 'KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU');

Atom源

	Assoto\Meta::link(
		'https://github.com/kktsvetkov/Assoto/commits/master.atom',
		'alternative',
		'', // empty id, let the id be auto-generated
		array(
			'type' => 'application/atom+xml',
			'title' => 'Recent Commits to Assoto'
		));

Apple Touch图标

 	Assoto\Meta::link(
		'//assets-cdn.github.com/apple-touch-icon-114x114.png',
		'apple-touch-icon',
		'', // empty id, let the id be auto-generated
		array('sizes' => '114x114')
		);

Bootstrap JavaScript文件

 Assoto\JS::file(
 	'https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.7/js/bootstrap.min.js',
 	'', // empty id, let the id be auto-generated
 	array(
 		'integrity' => 'sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa',
 	 	'crossorigin' => 'anonymous',
 		'async'
 	)
 );

kktsvetkov / assoto

维护者

详细信息

README

这是用来做什么的？

堆栈

如何使用？

资产

资产识别

更多示例