Question

我想创建一个有组织的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>

Answer 1

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

函数未定义-外部JS

1 个答案: