README

WebLibraryManager：一个用于管理项目中的JavaScript/CSS依赖项的PHP类

教程

如果您需要关于如何使用Mouf管理JS/CSS文件的简介，请阅读“用mouf完成任务”项目的JS/CSS简介。

简介

WebLibraryManager是一个Mouf包，允许您以简单的方式在项目中导入CSS/JavaScript。自v4起，WebLibraryManager使用container-interop/service-provider，因此与框架无关。

安装后，WebLibraryManager包将创建一个Mouf\Html\Utils\WebLibraryManager\WebLibraryManager实例。

使用很简单：当您想要导入一个新的JavaScript/CSS库时，您创建一个WebLibrary实例，将CSS/JS文件列表放入其中，并将其添加到WebLibraryManager。当您调用WebLibraryManager的toHtml()方法时，它将首先输出导入CSS文件的HTML标签，然后输出所有JS文件。

如果您的WebLibrary依赖于其他Web库（例如，如果您导入jQueryUI，它需要jQuery），WebLibraryManager将为您管理所有依赖项。如果您对导入CSS/JS文件的方式有特殊需求，您可以开发自己的WebLibraryRenderer来渲染您的库（例如使用内联JS等）

安装WebLibraryManager

WebLibraryManager作为一个composer包（包名为mouf/html.utils.weblibrarymanager）提供。通常，您不需要自己安装此包。它应该是您将使用的Mouf模板的依赖项。

仍然想手动安装？使用packagist包

composer.json

{
    "require": {
        "mouf/html.utils.weblibrarymanager": "^4"
    }
}

获取WebLibraryManager的实例

大多数情况下，您将通过Mouf模板使用WebLibraryManager。您可以从模板简单地获取WebLibraryManager的实例

class MyController {
	/**
	 * @var $template TemplateInterface
	 */
	protected $template;

	...

	public function myAction() {
		$webLibraryManager = $this->template->getWebLibraryManager();
		...
	}
}

编程添加JS或CSS文件

WebLibraryManager最简单的用法是将JS或CSS文件添加到您的网页中。为此，您只需编写

// Import a JS file from your project
// The file is relative to your ROOT_URL
$webLibraryManager->addJsFile('src/javascript/myJsFile.js');

// Import a JS file from a CDN
$webLibraryManager->addJsFile('https://code.jqueryjs.cn/jquery-2.1.1.min.js');

// Import a CSS file from your project
// The file is relative to your ROOT_URL
$webLibraryManager->addCssFile('src/css/myStyle.css');

当您包含一个文件时，如果该文件不以'/'开头，则相对于您的根URL。如果文件以'/'开头，则它是绝对路径。

您可以使用以下方法在<head>标签的末尾添加任何类型的脚本

$webLibraryManager->addAdditionalScript('<script>alert("Hello world!")</script>');

您也可以声明一个完整的WebLibrary对象并将其添加。

$webLibrary = new WebLibrary(
	["javascript/file1.js", "javascript/file2.js"],
	["css/style1.css", "css/style2.css"]);

$webLibraryManager->addLibrary($webLibrary);

此代码创建一个新的WebLibrary并将其添加到WebLibraryManager。第一个参数是JavaScript文件的数组，第二个参数是CSS文件的数组。

另外，如果您想在您的 <head> 标签中添加一些 CSS 样式或 Javascript 脚本（或其他任何内容），您可以使用 InlineWebLibrary 类，它允许您在 JS、CSS 或模板的附加部分添加所需的内容。

输出结果

只需使用 toHtml() 方法输出 WebLibraryManager 的内容。

$webLibraryManager->toHtml();

通常，这个调用由您的模板执行。

WebLibraryManager 会将其输出分为 3 类

首先是 CSS 声明
然后是 JS 文件声明
最后是其他任何内容（通常是直接放在网页中的 JS 脚本）

通过配置添加新的 WebLibrary

您可以使用服务提供商在您的容器中注册一个新的 WebLibrary。

假设您使用 Funky 创建服务提供商，您的代码将如下所示

use TheCodingMachine\Funky\ServiceProvider;

class MyWebLibraryServiceProvider extends ServiceProvider {
    /**
     * @Factory(name="myWebLibrary", tags={@Tag(name="webLibraries")})
     */
    public static function createWebLibrary(ContainerInterface $container): WebLibrary
    {
        return new WebLibrary(['foo/bar.js', 'http://exemple.com/foo.js'],
            ['foo/bar.css', 'http://exemple.com/foo.css'], $container->get('root_url'));
    }
};

注意：不要以 / 开头 JS 或 CSS 文件路径。这样，路径相对于 ROOT_URL（您的 web 应用的根目录）。如果您想使用托管库、CDN 等，也可以输入完整路径（http://...）

编写您自己的 WebLibraries

如果您有特定的需求，WebLibrary 类可能不够用。例如，您可能想要输出除 <script> 标签之外的内容。

对于这些用例，您可以编写一个实现 WebLibraryInterface 接口的类。由于 WebLibraryManager 使用 Mouf 的渲染系统，您需要为您的类提供包含 3 个不同上下文的模板：“js”、“css”和“additional”。

以下是一个简单的示例

GoogleAnalyticsWebLibrary 是一个简单的类，它将输出 Google Analytics 所需的 Javascript。这个类除了包含两个必需的属性（accountKey 和 domainName）外，几乎不包含其他内容。

渲染由这里的 3 个模板执行

JS 模板是空的
CSS 模板是空的
附加模板包含 Google Analytics 代码。

因为 Google Analytics 跟踪代码在“附加”部分，所以它将在所有 CSS 和 JS 文件加载后显示。

mouf / html.utils.weblibrarymanager

维护者

详细信息