JavaScript 中的 #ifndef

Question

我正在寻找一种解决方案，只在 Javascript 中使用与编译语言中的#ifndef 类似的东西定义一次函数。我发现了几个应该模仿此功能的库，但它们不起作用。

我正在使用 MVC 3 Razor 并定义了一些 html 帮助程序，将本质上是用户控件的内容放置到页面上。

每个控件都有一组 javascript 函数，用于定义该控件的特定功能，因此存在问题：当在单个页面上多次调用帮助程序时，这些函数会被多次定义。

我希望找到一种方法来保留助手中定义的非常少量的 javascript，而不必将每个小助手的所有 javascript 划分到单独的文件中。

示例：

@helper CmsImage(int id)
{
  var Html = ((System.Web.Mvc.WebViewPage)WebPageContext.Current.Page).Html;

  <text>
    <input type="button" class="editor_function" style="display: none;" onclick="editImage(@id); return false;" />
    <script>
        function editImage(id) {
            $('#alt_text' + id).attr('value', $('#' + id).attr('alt'));
            $('#image_url' + id).attr('value', $('#' + id).attr('src'));
        }

        function saveImage(button, id) {
            $(button).parent().parent().removeClass('color-yellow').addClass('color-red');
            $(button).parent().siblings('div.widget-content').html('<img alt="' + $('#alt_text' + id).val() + '" src="' + $('#image_url' + id).val() + '" id="' + id + '" />');
        }
        #endif 
    </script>
    Image Url:
    <input type="text" id="image_url@{id.ToString();}" /><br />
    Alt Text:
    <input type="text" id="alt_text@{id.ToString();}" /><br />
    <input type="button" value="save" onclick="saveImage(this, @{id.ToString();});" />
    @Html.Raw(GetCurrentContent(id))
  </text>
}

以上内容在浏览器中不起作用，如果出现错误：“48：无法识别的令牌非法”

Answer 1

我想您知道，Javascript 没有像 C/C++ 这样的预处理器指令，但是您可以使用在运行时评估的常规 if 语句，如下所示：

if (typeof myFunc === "undefined") {
    var myFunc = function(a,b) {
        // body of your function here
    }
}

或者对于整个函数库：

if (!window.controlUtilsDefined) {
    window.controlUtilsDefined = true;

    // put control library functions here

    function aaa() {
        // body here
    }

    function bbb() {
        // body here
    }

}

或者如果您想根据其他变量进行检查：

var myFunc;
if (debugMode) {
    myFunc = function(a,b) {
        // body of your function here
    }
} else {
    myFunc = function(a,b) {
        // body of your alternate function here
    }
}

如果您担心的只是每个控件使用的库中具有完全相同的函数名称的多个副本，那么从技术上讲，这在 Javascript 中并不是问题。最后定义的将是可操作的，但如果它们都相同，那么在技术上就不是问题。内存中只会存在一个定义，因为后面的定义将取代前面的定义。

如果您控制控件的源，那么最好将常用实用程序单独分解到它们自己的 JS 文件中，并让主机页仅包含该实用程序脚本文件一次。

或者（需要做更多工作，但对主机页没有额外的责任），每个控件可以从外部 JS 文件动态加载其实用程序，并检查已知的全局变量以查看其他控件是否已加载公共外部 JS。

Answer 2

如果您有一些构建脚本，我建议使用 GPP 预处理器(http://en.nothingisreal.com/wiki/ GPP，或 win 版本 http://makc.googlecode.com/svn/trunk/gpp.2.24-windows/）

因此您需要执行以下步骤：

1. gpp -o _script.js 脚本.js （其中 _script.js - 带预处理器的源文件
   命令）
2. （可选）minify script.js（使用谷歌闭包编译器等）
3. 将 script.js 部署到您的 Web 文件夹。

在这种情况下，您将获得最优化的 js 代码。并且您不需要运行时检查

#define debugMode
#ifdef debugMode
    var myFunc = function(a,b) {
        // body of your function here
    }
#else
    var myFunc = function(a,b) {
        // body of your alternate function here
    }
#endif

Answer 3

我发现当 node.js 不存在时，jfriend 提供的答案有点旧。请。检查最新的 preprocessor.js（可通过 npm install 获取）。

您可以使用如下静态条件（来自文档）

 // #ifdef FULL
console.log("Including extension");
// #include "path/to/extension.js"
// #else
console.log("Not including extension");
// #endif

用法是：

    Usage: preprocess sourceFile [baseDirectory] [-myKey[=myValue], ...] [> outFile]

    preprocess Source.js . -FULL=true > Source.full.js

Answer 4

老主题，但对于任何对所需解决方案感兴趣的人，我编写了 jspreproc 来部署一些 riot 模块，所有这些模块都使用 JavaScript 编写，适用于节点 0.10.0 及更高版本。

jspreproc 是开源的，删除空行，支持保留不同类型注释的过滤器，以及 C 风格的条件注释：

• 带有表达式和 的 #if、#elif、#else、#endif Defined() 支持
• 带有表达式和基本宏替换的#define
• #ifdef, #ifndef
• #include, #include_once

安装和用法示例：

$ npm -g i jspreproc
$ jspp -D RELEASE --empty-lines 0 lib/file1.js lib/file2.js > dist/app.js

阅读更多内容github 上的 jspreproc 存储库。

Answer 5

这是一个老问题，但答案现在有点过时了。如果您想获得更好的内联或消除死代码，您可以使用 google 的 closure 编译器 以及/** @const */ helper

这是一个完全随机的（除了演示之外无用的）@const helper 使用高级优化的示例：

/** @const */
var G=true

if(G){var d=document}
function dummy(){if(!G){var d=document}return d.getElementsByTagName("body")[0]}
function hello(name) {
alert(dummy() + name + dummy());
}
hello('New user');

编译为： alert((void 0).getElementsByTagName("body")[0]+"新用户"+(void 0).getElementsByTagName("body")[0]);

或不带 @const:var a=! 0;function b(){if(!a)var c=document;return c.getElementsByTagName("body")[0]}alert(b()+"New user"+b());

这样做的好处是代码在开发过程中仍然可以工作，而无需在每次运行前进行预处理。 （还有更好优化的额外好处）

Answer 6

在现代，它看起来像是 RequireJS 或等效 AMD 模块的工作。
所有其他答案都讨论了预编译和缩小——这很好，应该另外考虑。

Answer 7

不可能在 JavaScript 中使用预处理器或 #define 函数... JavaScript 是松散耦合和解释性语言...但是您可以在 Typescript 中使用它，因为它是强耦合的并且使用编译器...

Answer 8

如果使用像 apache 这样的 Web 服务器（以及用于本地开发的 XAMPP），请使用 PHP 作为预处理器。只需将扩展名从 .js 更改为 .php，然后插入任意数量（包括零）的 PHP 标签即可。