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:无法识别的令牌ILLEGAL'

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,或赢取版本http://makc.googlecode.com/svn/trunk/gpp.2.24-windows/)

因此,您需要执行以下步骤:

1. gpp -o _script.js script.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提供的答案有点旧.PLS.检查最新的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