古いMS Ajaxの新しい外観

1年ちょっと前に、1つのサイトに出会いました。 一見すると、それは何百もの類似したサイトと何の違いもありませんでしたが、私の同僚は、機能要素をクリックすると小さなモジュールが複数更新されることに気付きました。 さらに発見されたのは、過負荷なしで動作することです。 今日、私たち一人一人はあまり感心しませんが、このサイトは5年以上運営されています。

サイトの2日間の分析の後、質問に対する答えが見つかりました-「どのように機能しますか？ 「。 このサイトの中心はmsajax.jsというファイルであり、インターネットを検索するように促されました。 情報はほとんどありませんでしたが、実験を開始するには十分です。



このライブラリは、小さな要素を作成するための一連のクラスを提供し、そこから完全なサイトを構築できます。

接続するには、 ScriptManagerをページに追加し、すべてのファイルのScriptReferenceを記述します。

小さな要素の作成を始めましょう。

Type.registerNamespace('MyNamespace'); // ctor MyNamespace.Widget = function (element, someData) { var t = this; t.template = "<span><label></label></span>"; if (!element) { element = $(t.template); } MyNamespace.Widget.initializeBase(t, [element]); }; //methods MyNamespace.Widget.prototype = { initialize: function () { var t = this; MyNamespace.Widget.callBaseMethod(t, 'initialize'); }, dispose: function () { var t = this; MyNamespace.Widget.callBaseMethod(t, 'dispose'); }, someMethod: function(){ var t = this; } }; MyNamespace.Widget.registerClass('MyNamespace.Widget', Sys.UI.Control);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この要素は、コンストラクターと一連のメソッドで構成されています。 コンストラクターは、要素のインスタンスを作成しようとするときに呼び出され、常に最初のパラメーターとして要素を受け取ります。これは、表示されるDOM要素です。 次に、基本クラスの初期化が呼び出されます。 この場合、 registerClassを呼び出すときに指定したのはSys.UI.Controlです。 このメソッドは、3番目のパラメーターとしてインターフェイスを取ることができますが、この投稿に誰かが興味を持っている場合は、次回はそれについて詳しく説明します。

メソッドのセットには、常に2つのメソッドがあります。名前によって、それらが何をしているのか明確であり、それらを説明する意味がありません。さまざまなイベントの登録を解除します。 作成されたインスタンスを介して利用できるさまざまなメソッドを記述することもできます。 html要素のid属性の名前を取得する$ getメソッドを使用して要素を渡すことができます。

  Global.widget = new MyNamespace.Widget($get("ID")); Global.widget.initialize();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私が考える最大のプラスは、 Sys.UI.Controlクラスのget_element（）メソッドです。これにより、個別のエンティティとして要素を操作できます。

  initialize: function () { var t = this; ... $("label",t.get_element()).html("Hello world!"); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私たちはDOM全体ではなく、そのほんの一部で作業します。これは、サイトの速度にのみプラスの影響を与えます。

このライブラリには、コールバック関数のストレージとして使用できる別の優れたSys.EventHandlerListクラスがあります。

 BaseControl = function (element) { var t = this; BaseControl.initializeBase(t, [element]); t.handlers = new Sys.EventHandlerList(); }; BaseControl.prototype = { initialize: function () { var t = this; BaseControl.callBaseMethod(t, "initialize"); }, dispose: function () { var t = this; t.handlers = null; BaseControl.callBaseMethod(t, "dispose"); }, addEventHandler: function (name, h) { var t = this; t.handlers.addHandler(name, h); }, removeEventHandler: function (name, h) { var t = this; if (t.handlers) { t.handlers.removeHandler(name, h); } }, raiseEventHandler: function (name, args) { var t = this; var h = t.handlers.getHandler(name); if (h) h(args); } }; BaseControl.registerClass("BaseControl", Sys.UI.Control);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このクラスから継承することで、要素が状態の変化についてすべてのサブスクライバーに通知できるようにします。 addEventHandlerメソッドを呼び出すサブスクライバーは、対象のイベントをサブスクライブし、その名前を渡します。 わずかな問題があります。メソッドへの参照を渡すだけではなく、 Function.createDelegateを使用してデリゲートを作成して渡す必要があります。 これが行われない場合、このクラスのすべての要素はオブジェクトの状態の変化に関するメッセージを受け取り、そのような目標を追求しません。 最後に、これらのデリゲートを削除する必要があります。そうしないと、サイトで要素の不可解な動作を観察できます。



このライブラリを使用して、私のチームは非常に豊富な機能を備えたサイトを実装し、非常に良い結果を得ました。