javascript - 将内联 JavaScript 初始化逻辑与 html 分开，以实现严格的内容安全策略

Question

我想使用非常严格的内容安全策略，不允许内联 Javascript。我的 View 是用 php 渲染的。整个应用程序所需的所有 Javascript 逻辑都已外部连接在一个 Javascript 文件 app.js 中。只有页面特定的初始化逻辑内联在 php View 中，例如:

<script>
jQuery(document).ready(function(){
        cebIntranet.home.init();
});
</script>

现在我的问题是如何外部化内联 Javascript 初始化逻辑。我可以想到以下方法，但我对它们不满意。有更好的解决方案吗？推荐的最佳实践有哪些？

1. 为每个页面创建一个单独的 Javascript 文件，该文件仅执行以下操作保留初始化逻辑 => 我不喜欢请求的想法一个附加文件，其中至少只有一行。
2. 将初始化逻辑也移至 app.js 文件中并使其依赖于 body id 或 class。 => 我不喜欢这个主意有一个很大的 if 语句来选择正确的初始化逻辑取决于主体类别或 ID。

Answer 1

创建一个具有数组变量和两个成员函数的类，即带有以下参数的 addJs 和 writeJs

1. Addjs 参数
   • $jsstring => Javascript代码/文件名，将字符串添加到数组变量中。
   • $type => 就像 1) inline => 编写内联代码。 2) file => 从文件中获取代码。
2. writeJs => 不需要参数。

为类创建一个全局可访问的对象，并使用 addJS 而不是直接将脚本写入文件。

无论脚本添加到数组变量中，当在浏览器上显示 html 时，都需要使用 writeJs 函数将代码写入文件。

它应该适合你。