如何添加特定于块的JS（和CSS）-_right

所以我花了几个小时在谷歌上搜索，阅读，学习等等，但是没有人（甚至没有艾伦·斯托姆！）都向我说明了这一点。似乎整个互联网都对将JS或CSS添加到Magento 2 的特定页面感兴趣，但是我正在寻找的是将JS / CSS添加到特定的块。

简而言之，这是我的问题：

将JS（以及CSS）添加到特定块的最佳方法是什么，以便如果该块存在于页面（*）上，则将加载JS / CSS，如果该块不存在，则没有CSS / JS？？

*这意味着任何块都可以通过layout.xml在页面/模板上，在我的模块的自定义页面上，通过块/页面的toHtml方法或最重要的是嵌入在所见即所得中的块来设置/产品说明/ CMS阻止/ CMS页面。

我已经读了很多Alan的精彩文章（再次对这个人表示敬意！），更不用说其他有关此方面的文章了，但是我感到每个人都想添加到页面，特定页面，而不是任何地方使用块。

我觉得我对各种技术很熟悉，但是我可能会在这里遗漏一些东西，所以我希望获得社区的共识，或者为所有前端开发人员提供一个路标，以期向全栈开发人员寻求帮助。类似的问题，并思考我的选择。

以前，在Magento 1中，我将查看块构造器，获取布局，获取头引用并在那里调用addJs / addCss，或者如果可能的话，使用layout.xml中的方法。这意味着将JS “添加”到块构造函数的资源列表中（在主题级别输出头块之前）。但这似乎不可能。

我已经阅读了有关添加JS / CSS的方法（这不是一个简单的“我怎么做？”，这是更简洁的“什么是正确的/ mag2方式？”），并且对这些方法很熟悉技术：

/view/[area]/layout/[default/page_id].xml技术，使用<head></head>根元素
将Head块添加到我的模块中，并添加到head.additional中，其中包含有关是否加载了我的块的某种逻辑
使用\ Asset \ GroupedCollection和\ Asset \ Repository对象从页面/模板的构造者中注入（虽然这似乎没有与块结合），但是潜在地是加载顺序？
使用RequireJS并将requireJS配置应用到我的模块

我错过了什么吗？

有人认为正确的方法是使用RequireJS库，以及x-magento-init属性或仅require("my_module", function(){ ... })使用内联脚本中带有语法的脚本。但这对我来说似乎很笨拙？我将不得不设置脚本来加载脚本，被迫至少内联一些我的JS，但是似乎最直接的方式是说“这是我的块，现在需要我一些JS”，方法是将其弹出到我的phtml中。

但是，我真的很希望能够通过PHP做到这一点，作为一个后端/堆栈程序员，我理想地希望将JS封装起来，并且（理想情况下）允许我的前端团队根据需要编写它。简而言之，要照顾好加载（后端开发到前端开发“如果需要，可将phtml放到主题中，在主题中覆盖，同样是js文件，从属的libs和这里的块的css”）。

这表明__construct对资产系统具有注入依赖关系的方法。但是我无法使它正常工作，这似乎在Alan Storms的快速文章中得到了证实：Magento Quickies：Magento 2：以编程方式添加前端资产文件

注意标志“因此，创建带有前端资产的模块的想法不在了。” ...真可惜:(

谢谢你们花时间阅读和考虑。我期待着您的回音！

PS>显然，这是StackExchange，所以我将答案标记为我要实现的最佳课程（阻止特定的资源加载），但是我将尽一切努力在所有内容的底部列出参考要么增加讨论范围，要么提出可靠的解决方案！

— 天鹅数字
source

对于js来说应该很容易，因为magento 2使用require.js。
因此，这意味着您可以在需要时动态添加一个js。

在大多数情况下，必须使用模板来渲染块。
因此，您需要在模板中添加它：

<script type="text/javascript">
    require([
        "jquery",
        .... //any other js dependencies you have
        "Namespace_Module/js/filename_here"
    ], function(){
        //some js code here. 
        //if you don't need any additional js code just have an empty function
    });
</script>

现在view/adminhtml|frontend/web/js/filename_here.js，在其中包含所有js代码的地方创建您的js文件。

require.js 将知道如何在请求时提取您的文件。

对于css文件，我不知道是否可能。
css文件应该转到head页面的该部分，但是例如，如果您将块放在这样的cms页面的内容之内{{block class="..." template="..."}}，则当应该处理cms页面的内容时，已经渲染到该位置的html因此您无法通过php将其他任何内容添加到head块中。您可以尝试将其添加到模板中，<style...但这不是您想要的（我想）。

— 马里斯
source

谢谢Marius，我正在将requireJS路线作为我上面列出的可能性之一进行探索，但是感谢您提供的简单示例！我同意，但是它没有提供CSS问题的解决方案，但是由于Magento的Less编译器等，这可能是一个沉默点。另外，它有点抽象，但是我想我们可以使用requireJS来加载我们的JS，这反过来又可以将指向样式表的链接添加到DOM，至少是异步的！！！

— cygnus digital

实际上，我在requirejs页面上发现了如何使用RequireJS加载CSS！：requirejs.org/docs/faq-advanced.html#css

— cygnus digital

@cygnusdigital。真好所以问题解决了:)

— 马吕斯

嗨，马里乌斯，是的，不是，从某种意义上说，它是该解决方案的一个很好的候选者，它符合要求，因此，我感谢您的输入，但我正在寻求讨论和替代方案。也许只是我是恐龙，但是我确实觉得在构造函数中加载JS / CSS更为简洁。“如果构建/包含了该块，则将其添加到头部。” ：DI确实想知道是否有可能有条件地动态添加到head.additional块中。（即，在模块构造器阶段将我模块的head块添加到head.additional）。

— 天鹅座数字

您可以使用通过布局文件添加的常规块来执行此操作，但是正如我所解释的，您无法通过{{block}}指令对页面内容中包含的块执行此操作，因为在实例化块类时已经渲染了头部。

— 马里斯（Marius）

如何添加特定于块的JS（和CSS）-_right_方式？