変数がすでに定義されていると、「未定義」エラーが発生しているのはなぜですか

Question

 <link href="/content/shared/styles/examples-offline.css" rel="stylesheet">
 <link href="/styles/kendo.common.min.css" rel="stylesheet">
<link href="/styles/kendo.rtl.min.css" rel="stylesheet">
<link href="/styles/kendo.default.min.css" rel="stylesheet">

<script src="/js/jquery.min.js"></script>
<script src="/js/kendo.web.min.js"></script>
<script src="/content/shared/js/console.js"></script>
<script>
    $(function () {
        datasource123 = new kendo.data.DataSource({
            transport: {
                read: {
                     url:"http://localhost/KendoServices/Web/GetProductDetails",
                     dataType: 'jsonp'
                }
            }
        });
    });
    $('#products').kendoGrid({
        dataSource: datasource123
    });
</script>

.

例外の取得：

'datasource123'未定義！

Answer 1

datasource123は、ドキュメントの準備ができるまで定義されていませんが、dataSource: datasource123はその前に実行されます。私はあなたがそれを文書の準備ができていると思うことができると思います、そして変数が関数にスコープされています...

<script>
    $(function () {
        var datasource123 = new kendo.data.DataSource({
            transport: {
                read: {
                     url:"http://localhost/KendoServices/Web/GetProductDetails",
                     dataType: 'jsonp'
                }
            }
        });
        $('#products').kendoGrid({
            dataSource: datasource123
        });
    });
</script>

.

Answer 2

DataSourceの作成は、DOMが準備ができたまで実行されないjQuery Ready関数で行われています。datasource123の最初の使用はすぐに行われています。そのため、datasource123は、使用しようとするまで作成されません。

この変更をjQuery Ready関数の両方に置き、指定されたスコープであなたのdatasource123変数を宣言することをお勧めしますので、暗黙のグローバル：

$(function () {
    var datasource123 = new kendo.data.DataSource({
        transport: {
            read: {
                 url:"http://localhost/KendoServices/Web/GetProductDetails",
                 dataType: 'jsonp'
            }
        }
    });
    $('#products').kendoGrid({
        dataSource: datasource123
    });
});

.