Uncaught TypeError：Request.callPostは関数ではありませんか？

Question

私のコードは動作しますが、htmlで呼び出すと動作しません。わかりません。 私はhtmlで電話するとエラーが出る

Uncaught TypeError: Request.call Post is not a function

なぜですか？

<button onclick="Request.callPost('/Api/Page/start/','mypost')" >My button</button> 
<br> <br><br> 
(function($){ 
$(document).ready(function(){ 

    var Request={ 
     init:function(){ 

      this.callPost('/Api/Page/all','data'); //ok it work 
     }, 
     callPost:function(link,data){ 
      $.ajax({ 
       url:link, 
       type:'POST', 
       data:data, 
       dataType:'json', 
       success:function(response){ 
        console.log(response); 
        return response; 
       } 
      }); 
     }, 
     callGet:function(link,data){ 
      $.ajax({ 
       url:link, 
       type:'GET', 
       data:data, 
       dataType:'json', 
       success:function(response){ 
        return response; 
       } 
      }); 
     }, 
    } 

    Request.init(); 
}) 
})(jQuery); 

Answer 1

簡単にするためには、あなたのコードは次のように構成されている：それはグローバルスコープに存在しないため

が

(function($){ 
    $(document).ready(function(){ 

     var Request = 'something'; 

    }); 
})(jQuery); 

// trying to use 'Request' here 

あなたはグローバルスコープでRequestを使用することはできません。これはready()関数に渡されたfunction内にのみ存在し、別の無名関数内でも発生しています。これらの機能の外には、その変数を見ることはできません。あなたは必要あなたの変数はグローバルスコープ内に存在する場合

、あなたはそこにそれを宣言することができます：あなたは、一般的にだけでグローバルスコープにすべてを移動したくないよう

var Request; 

(function($){ 
    $(document).ready(function(){ 

     Request = 'something'; 

    }); 
})(jQuery); 

// you can use 'Request' here 

は、このアプローチには注意してください任意のエラーが発生した時刻。これは、ではありません。あなたが使い慣れて欲しいゴールデンハンマーです。 がグローバルスコープにあることがRequestである必要がある場合、これはトリックを行います。

代わりに、が利用可能なスコープ内でクリックハンドラを添付することを検討してください。このような何か：

(function($){ 
    $(document).ready(function(){ 

     var Request = /.../; 

     $('#yourButton').click(Request.callPost('/Api/Page/start/','mypost')); 

    }); 
})(jQuery); 

// no need to use 'Request' here 

は意味を確認する必要がありますが、この質問に求められているものの外、あなたのコードの構造に基づいて行うために必要があるだろうおそらくいくつかの変更が、この場合原則があります。グローバルスコープ（あなたの場合はHTMLインラインハンドラ）でコードを使用するのではなく、狭いスコープのコードにアクセスし、そのスコープ内のコードを狭いスコープのコードでグローバルスコープのオブジェクトにアクセスさせます（場合によってはHTML要素） 。コードの複雑さが増大し、テスト容易性がより重要になってきたよう

、あなたはグローバルオブジェクト完全に抽象化したいと思うし、は狭いスコープのコードににそれを提供ではなく、その狭いスコープのコード内からそれを求めています。しかし、私たちはそのようなことに何時間も費やすことができ、私はそれがここで尋ねられているものの外にあると思います。

あなたがやっているのは狭い範囲のものにアクセスすることです。そして、即座に解決することは、その何かをより広い範囲に入れるか、あるいはコードをどのように構造化するかを変更して、最初にアクセスする必要がないようにすることです。前者は表示しているコードの方が早いアプローチで、後者はよりクリーンです。