功能未定义 - 外部 JS答案

【问题标题】：Function undefined - External JS功能未定义 - 外部 JS
【发布时间】：2019-04-23 02:20:58
【问题描述】：

我想创建一个有组织的 js 库。用于我的应用程序。

我正在转向外部 js 文件。

但是，当我尝试从我的页面调用我的函数时，它显示为未定义。

我在这里缺少什么？为什么我得到未定义的错误，却能够从未定义的函数登录到控制台？

我的外部 js 看起来像：

var fmp = (function () {

    var _fmp = {};

    ////////////////////
    //layout
    ////////////////////
    _fmp.layout = {
        setLayoutHeight : function (dom, height) {
            console.log(dom, height);
        }
    };



    ////////////////////
    //templates
    ////////////////////
     _fmp.templates = { };

    //Kendo Grid Client Template for Customer Results/List in Card View format
    _fmp.templates.CustomerListCardView = function (data) {
        return '<div class="pure-g">' +
            '<div class="pure-u-8-24"></div>' +
            '<div class="pure-u-16-24">' + data.CustomerId + '</div>' +
            '</div >';
    };


     ////////////////////
    //page specific
    ////////////////////
    _fmp.page = {};

    //Map page
    _fmp.page.Map = {};
    _fmp.page.Map.InitMap = function (dom,height) {
        var map;
        map = new google.maps.Map(document.getElementById(dom), {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8
        });
        console.log(map);
        $("#"+dom).height(height);
    };

    return _fmp;
})();

控制台输出

#app-splitter,section.panel 957.432 

ReferenceError: setLayoutHeight is not defined

我在 html 中将其称为：

<script>
        $(function () {
            //named functions only

            fmp.layout.setLayoutHeight("#app-splitter,section.panel",957.432);
        });
</script>

文档布局如下：

@using FMPWeb.Classes;
@using Microsoft.AspNetCore.Razor.TagHelpers;
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - TelerikAspNetCoreApp1</title>
    <environment names="dev,local,qa">
        <link rel="stylesheet" href="~/css/site.css" />
        <link rel="stylesheet" href="~/css/puregrids.css" />
    </environment>
    <environment names="test,prod">
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/css/puregrids.css" />
    </environment>
    <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
</head>
<body>
    @await Component.InvokeAsync("Header", (int)UiConstants.ComponentHeader.HeaderAuthenticated)
    <application>
        @RenderBody()
    </application>
    @await Component.InvokeAsync("Window", (int)UiConstants.ComponentWindow.WindowMasterNav)
    <link href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css" rel="stylesheet" type="text/css" />
    @*<link href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />*@
    <link href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    @*<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>*@
    <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.aspnetmvc.min.js"></script>

    @RenderSection("scripts", required: true)
    @Html.Kendo().DeferredScripts()

</body>
</html>

【问题讨论】：

发布的代码出现语法错误。
糟糕，错字。已修订。
不会将其包装在 IIFE 中意味着 fmp 未定义？
对不起，这是另一个错字。我应该只是复制和粘贴。请检查agin。
fmp.js 是页面中包含的最后一个脚本。因此，在包含变量之前不会定义该变量

标签： javascript jquery scope

【解决方案1】：

_fmp 只会存在于您的匿名函数的范围内。就目前而言，fmp 实际上并没有返回任何内容，因此当您在此处定义 fmp 时，您只是在运行一个创建局部范围变量、设置其布局属性的函数，然后......什么也不做用它。它很可能只是被垃圾收集起来。如果您想访问_fmp，则必须在定义完所有属性后从该函数中返回它。

【讨论】：

请参阅 cmets。那是一个复制/粘贴错字。我确实返回_fmp。
假设您按照您的说法返回它，并且您在尝试使用它之前包含了您的外部文件，我看不出有什么问题。你能用你的页面的 HTML 来展示吗？
我已更新问题以显示 html 布局和脚本文件的包含。
我不太了解 ASP.net 如何处理其模板，但我注意到您在页面底部一直包含 fmp.js。这意味着它会在其他所有内容之后最后加载，所以我猜您可能正在尝试访问fmp，甚至在它被加载之前。
所以当你登录 fmp.layout 时，你会明白，但如果你尝试在同一个地方调用 fmp.layout.setLayoutHeight()，它会说它是未定义的？这没有多大意义......