W3.JSとは何ですか？なぜW3Schoolsはそれを宣伝していますか？

Question

私は、W3SchoolsがW3.JSと呼んでいるところにtutorialがあることに気付いていました。これは少なくともjQueryと競合する部分的な試みです。私は他の人からそれに関する情報を見つけることさえ困っていました。

W3Schoolsは、少なくとも次の偉大なものとしてpromote semi-abandonwareへの傾向があるように見えます。これはこれですか？

このライブラリは実際にどこの場所で使用されていますか？誰もがその歴史（特にそのリリースの履歴）を知っていて、実際に使用する価値のあるものに実際に開発しようとしているのでしょうか？

注：私はここで、ライブラリの推薦を求めていないよ - 私はそれがオフトピック明示的だと実感します - 私はちょうどの背景情報については、この特定のライブラリを求めています。

Answer 1

W3.JS（これは、少なくとも部分的にjQueryと競合するように見えます）。

jQueryと同じ基本的な領域をカバーしています。つまり、Ajaxが追加されたDOMヘルパー関数の汎用ライブラリです。

私は他の人からそれに関する情報を見つけることさえ問題でした。それは自分のライブラリ（の彼らのアプローチ取って極端に「名前の最初にスラップW3をご希望の人はW3Cに関連付ける」）で、実質的に誰もがそれを悩ませていないためである

。

W3Schoolsは、次の大きな問題として準放棄ソフトウェアを促進する傾向が少なくともあるようです。これはこれですか？

これは表示されますが、将来は推測しています。

このライブラリは実際にどこの場所で使用されていますか？

メジャーはありません。 W3Schoolsに遭遇し、WWWの学習の第一歩を踏み出している人は、それを使っています。それについての質問は、Stackoverflowで時折切り詰めます。

誰もがdownload pageは、いくつかの情報があり、その歴史（特にそのリリース履歴）

を知っています。

これはむしろ役に立たない文を含んでいますW3.JSは自由に使用できます。ライセンスは必要ありません（これは非常に曖昧ですが、理由によりフリーソフトウェアライセンスが存在します）。

また、下部に変更ログがあります。

どこにでもバージョン管理リポジトリの兆候はありません。

実際に使用することを検討する価値のあるものに実際に展開する予定がある場合は、

意見ですので、コメントはありません。

Answer 2

なぜこの質問をしたいのかわかりません。 jQueryが何らかの形で不十分であると懸念される場合は、jQueryは素晴らしい図書館であり、JSコミュニティの一部であり続けます。

W3Schoolsは、まったく新しいプログラミング学生のための拾いやすいリソースであるため、サイトの明るい色分けスキームと記事で使用される簡略化された言語として市場に出ています。彼らはおそらく、jQueryの複雑さに悩まされるユーザーに対応しようとしています。この試みがうまくいくかどうかはわかりません。

Answer 3

W3 JSライブラリには、魅力的な特性がいくつかあります。
1.非常に軽いです。 2.学習曲線はあまりありません。ドキュメントがほとんどなくても（そしてw3schools.comを超えてもそれほど多くはない）いくつかのことを「働く」ことができました。

私はライブラリにいくつかの機能を試しました。 懸念を取り除くために、私はこのライブラリを見つけて、PHPのようなインクルードステートメントを使用してHTMLフラグメントファイルを取得する機能を探しました。 W3.JSはdiv要素

<div w3-include-html="frags/content.html"></div> 

とjQuery UI風の初期化ステートメントを使用してに属性を追加する機能を提供し、ファイルの内容は、クライアント側でのあなたのdiv要素にロードされるだろう。

<script> 
w3.includeHTML(); 
</script> 

これはうまくいきますが、それはすべてです。私はサーバー側のClassic ASPで行われた継承した従来のAppでライブラリを使用しました。私がJQueryに依存していたことの1つは、「データアクセスレイヤー」として使用された粗ASPページへのPOST要求のためのAJAX関数でした。このページでは、列挙型のようなPOST変数を使用して、どの関数を呼び出すかを示し、その後、各関数で必要に応じて後続の変数を使用します。以下はW3.JSのWebリクエストを実行し、HTMLオブジェクト（ここでは順序付けられていないリスト）を持つdisplay-object関数を使用して、 "customers"という属性を持つ検索JSONオブジェクトを表示する例ですアレイ。これにより、各customerインスタンスの属性であるinnerHTMLを持つLI要素が生成されます。 "顧客名。" （{{CustomerName}}）はここにプレースホルダです。

<ul id="id01"> 
<li w3-repeat="customers">{{CustomerName}}</li> 
</ul> 
<script> 
    w3.getHttpObject("CommonServerFns.asp?operation=1", controllerFn); 
    function controllerFn(myObject) { 
     //myObject looks like {"customers":[{"CustomerName":"Mike Jones"}]} 
     w3.displayObject("id01", myObject); 
    } 
</script> 

そうでも、私は私がに問題を持っていなかったGETリクエストのクエリ文字列を使用するように私のデータ・ページに変換しなければならなかった上記の例を試してみます。しかし、以下のように、JQuery AJAXリクエストとバニラJSコールバック関数の代わりに使用されます。

$.ajax({ 
     url: "ServerCommonFns.asp", 
     type: "POST", 
     data: '{"operation":1}', 
     complete: function(jqXHR, statusMsg){ 
      //if status is 200, jqXHR.responseText has my serialized JSON 
      var retData = JSON.parse(jqXHR.responseText); 
      var tgtListElement = document.getElementById("id01"); 
      //Clear the placeholder code from the list and go to work... 
      tgtListElement.innerHTML = ""; 
      for(var index = 0;index<retData.length;index++){ 
       var listNode = document.createElement("li"); 
       listNode.innerHTML = retData[index].CustomerName; 
       tgtListElement.appendChild(listNode); 
      } 
     }); 

したがって、W3JSは推奨されるソリューションのように見えますが、コードは少なくなります。しかし、私が取り組んだアプリでは、両方の方法のWeb要求をタイムリーにして、結果は衝撃的でした。リクエストは約737KのサイズのJSON文字列を返し、要求は完了するまでに約2.5秒かかりました。私のJQueryソリューションは〜2.5秒のリクエストを含めて約4.5秒かかりました。 W3.JSソリューションは、完了までに17〜27秒かかりました。私は間違いを犯してしまったと思っていましたが、これが "良い&高速Javascriptライブラリ"がうまく動作していない可能性がある唯一の方法でした。私は理由を知りませんが、W3 JSソリューションは明らかに私のアプリケーションで使用できませんでした。

先週先週、このライブラリをもう一度使ってみました。アプリケーションのデータ集約性が低いと思うと、はるかにうまくいくかもしれません。これまで読んだことがあれば、私はあなたにいくつかの読書ラインを保存します....それはそうではありませんでした。このアプリケーションでは、Classic ASPを別の「データアクセスレイヤー」タイプのASPページとともに使用し、AJAX機能を使用してJQueryおよびVanilla JSで再び利用しました。私は、これは再びかなり集中的なコードであるので、

var sortAsc = true; 
//JSONObj looks like {"faqs":[{id:1,createdBy:"Les Grossman"}, 
//{id:2,createdBy:"Jeff Portnoy"}]}; 
var JSONObj = null; 
function compareFn(a, b){ 
    if(a.id < b.id) return sortAsc ? 1 : -1; 
    if(a.id > b.id) return sortAsc ? -1 : 1; 
    return 0; 
} 
//Assign my onclick event handler 
document.getElementById("faqId").onclick = function(){ 
    JSONObj.sort(compareFn); 
    sortAsync = !sortAsync; 
    //Logic below to clear and reload the rows in my HTML table... 
    //See above example for pretty much identical code 
} 

ようPARAM /ファンクションPTRとして渡すJS関数を構築し、私は（使用するたび列ヘッダーがクリックされたWebリクエストの火を持っていたくありませんでしたカスタムJS関数ではなく、SQLiteクエリのソート機能）を使用します。だから私は仕事をするためにw3.sortHTML（）関数を使ってみました。それはこのように見えましたが、最初にテーブルをロードするためのJQuery AJAXコードを保持し、sortHTML（）関数のポストロードをソートに使用しました。 w3.sortHTML関数は、この順序でparamsをとります。

1. 反復要素コンテナ固有のセレクタ（ "Select、UL、OL、Table、etc."）。
2. 繰り返し要素グループセレクタ（option、li、trなど）このインスタンスでは、すべてのtable - > trインスタンスに適用したので、私は.faqを使用します。

3. によってソートする反復グループの属性/要素のセレクタは、（内部ソート降順/昇順を追跡する。）

   FAQ番号 FAQ名 綱引きスピードマン アルパチノ カークラザロ ...

私はこのページを使用してヘルプデスクシステムからFAQデータを表示しています（私のログインを使用してSQLiteデータベースにデータをスクレイプし、ヘルプデスクシステムのログイン/ライセンスを必要とせずにFAQデータを見ることができます）。 WebリクエストはJSON文字列を返します。サイズは約430 KBで、5つのテーブルカラムを持つ320個のテーブル行を作成します（例： 2つの列のみがコード化されます）。この要求は完了するまでに約3秒かかります。私のJQuery/JS AJAXリクエストは、Webリクエスト/レスポンスの〜3秒を含む約5.5秒のコールバック機能を備えています。私のカスタムソートfnは、列ごとのソート（例ではidのみ）、retデータobj（グローバルオブジェクト "JSONObj"としてソート）、テーブルのクリア、ソートされた行のリフィル。繰り返しますが、これを行うためのコードがたくさんあるので、W3 JSが私を助けてくれるかもしれないと思いました。私のW3 JSソートの実装では、整数/数値データをソートするのに8秒、テキスト/文字列データをソートするのに〜10秒かかる。これは私のニーズには長すぎます（再度）ので、私はJQuery/JSソリューションに戻りました。

結論として、このライブラリでは、ささいなサイズよりも大きいものは、実際にはパフォーマンスが悪いと思われます。私は、W3.JSの作成者は、ライブラリが非常に有用な抽象化された機能を備えているので、機能的な要件が正しいと思うが、JQueryやその他の既存のフレームワークや、古い旧式のJavascriptコードに代わるものではない。物事がうまくいったことを願います。本当に役に立ちました。

EDIT - ウェブREQSのためのいくつかの速記方法がありながら、だから私は、ライブラリのソースを通過してきた、次のシグネチャを持つw3.http（）メソッドは、単にそこにあります。

function (target, readyfunc, xml, method) 

paramsは、文字列値であるxmlを除いて、適切に名前が付けられます。 POSTリクエストを処理する前述のASPページでこれを動作させることができました。私はそれをそう呼びました。

w3.http("ServerCommonFns.asp", httpCallBack, "operation=1", "post"); 
function httpCallBack(){ 
      if(this.readyState == 1){ 
       console.log("Setting needed header..."); 
       this.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); 
      } 
      else if(this.readyState == 4){ 
       console.log("Parsing response...."); 
       //document.getElementById("main").innerHTML = JSON.stringify(this.responseText); 
       var responseObj = JSON.parse(this.responseText); 
       var respDataObj = JSON.parse(responseObj.retdata); 
       var tableObj = document.getElementById("responseTable"); 
       tableObj.innerHTML = ""; 
       for(var index=0;index<respDataObj.length;index++){ 
        var newRow = document.createElement("tr"); 
        newRow.innerHTML = "<td>" + respDataObj[index].MACHINE_ID + "</td>"; 
        tableObj.appendChild(newRow); 
       } 
       return false; 
      } 

     } 

あなたはそれだけではあるので、それは内部XHRオブジェクトのonreadystatechangeにイベントのリスナーだようhttpCallBackが使用されて表示されます。私のインスタンスで動作させるために、xml/param引数が正しく解釈されるように、リクエストが開かれる前にcontent-typeヘッダを設定しなければなりませんでした。したがって、W3.JSはPOST要求を行うことができますが、w3.http（）関数はJavascriptのXMLHttpRequest（）オブジェクトを囲む単純なラッパーではありません。また、リクエストは非同期的に呼び出され、その動作を変更する方法はありません。

--SECOND EDIT。だから私は仕事が鈍っているし、私はW3.JSをそれよりも少なくすると感じた。今日私はいくつかのことを実験し、少しの洞察の源を調べました。私は、私が少なくともきちんと見つけたいくつかのものを見つけたので、私はそれらのテキストの壁を完成させると思った。以下は、私が今日したことの原因です。私はいくつかのW3.JS関数を、私がMFG Q/Aの人々のために書いたアプリケーション用の既存のデータソースと組み合わせることを試みました。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Test Page</title> 
     <script src="https://www.w3schools.com/lib/w3.js"></script> 
     <script> 
      var xhrObj = null; 
      var jsonObj = null; 
      var sortAsc = true; 
      function w3ReadyStateChanged(){ 
       if(this.readyState == 1){ 
        console.log("Preparing Request/Setting needed header..."); 
        this.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); 
       } 
       else if(this.readyState == 4){ 
        console.log("Parsing response...."); 
        //document.getElementById("main").innerHTML = JSON.stringify(this.responseText); 
        var responseObj = JSON.parse(this.responseText); 
        if(responseObj.retcode != 1){ 
         console.log("A retcode of: " + responseObj.retcode + " has indicated a failed web request..."); 
         return false; 
        } 

        jsonObj = {}; 
        //var respDataObj = JSON.parse(responseObj.retdata); 
        jsonObj.retdata = JSON.parse(responseObj.retdata); 
        // 
        console.log("Starting Display: " + new Date()) 
        w3.displayObject("responseTable", jsonObj); 
        console.log("Display Finished: " + new Date()) 
        //This is to stop page refresh. 
        return false; 
       } 

      } 
      function tryw3xhr(){ 
       w3.http("ParCommonFns.asp", w3ReadyStateChanged, "operation=13&useCriteria=false&openPARs=1", "POST"); 
      } 
      function compareFn(a, b){ 
       if(parseInt(a[0]) > parseInt(b[0])) 
        return 1; 
       else if(parseInt(a[0]) < parseInt(b[0])) 
        return -1; 
       else 
        return 0; 
      } 
      function sortContainerData(containerElementId, repeatingSelector, sortByIndex){ 
       //w3.sortHTML('#responseTable','tr.dataRow') 
       var dataObj = {}; 
       var containerElement = document.getElementById(containerElementId); 
       if(!containerElement){ 
        console.log("Couldn't locate a table or list with ID: " + containerElementId); 
        return false; 
       } 
       // 
       var sortElements = containerElement.querySelectorAll(repeatingSelector); 
       if(!sortElements || sortElements.length == 0){ 
        console.log("repeatingSelector failed to yield results: "); 
        return false; 
       } 
       // 
       dataObj.sortElements = new Array(sortElements.length); 
       for(var i = 0;i<sortElements.length;i++){ 
        var tempArray = new Array(sortElements[i].children.length); 
        for(var j = 0;j<sortElements[i].children.length;j++){ 
         tempArray[j] = sortElements[i].children[j].innerHTML; 
        } 
        dataObj.sortElements[i] = tempArray; 
       } 
       //w3.sortHTML('#responseTable', '.dataRow', 'td') 
       console.log("Starting Sort: " + new Date()); 
       var t0 = performance.now(); 
       var doCustom = false, didSwap = false; 
       if(doCustom){ 
        var sortLen = dataObj.sortElements.length; 
        var j = 0; 
        //if (parseInt(dataObj.sortElements[i][sortByIndex]) == dataObj.sortElements[i][sortByIndex]) 
        // compareInt = true; 
        for (var i = 0; i < sortLen - 1; i++){ 
         didSwap = false; 
         j = i + 1; 
         while (j < sortLen && parseInt(dataObj.sortElements[i][sortByIndex]) >= parseInt(dataObj.sortElements[j][sortByIndex])) { 
          j++; 
         } 
         //If j equals sortLen, then i is greater than all others so we stick it on top..... 
         if (i + 1 == j) 
          break; 
         if (j == sortLen) { 

          dataObj.sortElements.push(dataObj.sortElements[i].slice()); 
          dataObj.sortElements.splice(i, 1); 
          didSwap = true; 
         } else if (j > (i + 1)) { 
          dataObj.sortElements.splice(j, 0, dataObj.sortElements[i].slice()); 
          dataObj.sortElements.splice(i, 1); 
          didSwap = true; 
         } 
         if (didSwap) 
          i--; 
         //if(i % 50 == 0) 
         // console.log("Handled: " + i); 
        } 
        //This is cheating but it should work..... 
        if (!sortAsc) dataObj.sortElements.reverse(); 
       } 
       else{ 
        dataObj.sortElements.sort(compareFn); 
       } 
       sortAsc = !sortAsc; 
       console.log("Sort Time (MS): " + (performance.now() - t0)); 
       // 
       console.log("Starting Reload: " + new Date()) ; 
       var containerBody = containerElement.querySelector("tbody"); 
       containerBody.innerHTML = ""; 
       for(var i = 0;i<dataObj.sortElements.length ;i++){ 
        var newRow = document.createElement("tr"); 
        newRow.classList.add("dataRow"); 
        // 
        for(var j =0;j<dataObj.sortElements[i].length;j++){ 
         var newCol = document.createElement("td"); 
         newCol.innerHTML = dataObj.sortElements[i][j]; 
         newRow.appendChild(newCol); 
        } 
        // 
        containerBody.appendChild(newRow); 
       } 
       console.log("Ops complete: " + new Date()) ; 
       return false; 
      } 
      window.onload = function() { 
       document.getElementById("invokeBtn").disabled = true; 
       tryw3xhr(); 
       document.getElementById("invokeBtn").disabled = false; 
       w3.hide("#conditionalContent"); 
      }; 
      // 
      function runW3JSFn() { 
       var w3TargetId = "#w3Target"; 
       var w3FunctionsSelect = document.getElementById("w3Functions"); 
       if (w3FunctionsSelect.value == "show") { 
        w3.show(w3TargetId); 
       } 
       else if (w3FunctionsSelect.value == "hide") { 
        //Doesn't preserve space.... 
        w3.hide(w3TargetId); 
       } 
       else if (w3FunctionsSelect.value == "toggle") { 
        w3.toggleShow(w3TargetId); 
       } 
       else if (w3FunctionsSelect.value == "addStyle") { 
        //But no remove style? 
        w3.addStyle(w3TargetId, 'border', '2px solid green'); 
       } 
       else if (w3FunctionsSelect.value == "addClass") { 
        w3.addClass(w3TargetId, 'w3Class'); 
       } 
       else if (w3FunctionsSelect.value == "removeClass") { 
        //Italics should go away..... 
        w3.removeClass(w3TargetId, 'w3Class'); 
       } 
       else if (w3FunctionsSelect.value == "toggleClass") { 
        //Italics should go away..... 
        w3.toggleClass(w3TargetId, 'w3Class'); 
       } 
       else if (w3FunctionsSelect.value == "filterTable") { 
        //Italics should go away..... 
        document.querySelector(w3TargetId).innerHTML = "<h2> Try an ID # in the box below....</h2>"; 
       } 
       else { document.querySelector(w3TargetId).innerHTML = "<h2> Invalid function specified....</h2>"; } 
      } 
      // 
      function doVanillaJSFn() { 
       var w3TargetId = "#w3Target"; 
       var w3FunctionsSelect = document.getElementById("w3Functions"); 
       if (w3FunctionsSelect.value == "show") { 
        document.querySelector(w3TargetId).style.display = 'block'; 
       } 
       else if (w3FunctionsSelect.value == "hide") { 
        //Doesn't preserve space.... 
        document.querySelector(w3TargetId).style.display = 'none'; 
       } 
       else if (w3FunctionsSelect.value == "toggle") { 
        var tgtElement = document.querySelector(w3TargetId); 
        if (tgtElement.style.display == 'block') 
         tgtElement.style.display = 'none'; 
        else 
         tgtElement.style.display = 'block'; 
       } 
       else if (w3FunctionsSelect.value == "addStyle") { 
        //$(tgtElement).css("attr", "val"); 
        //Works.... 
        document.querySelector(w3TargetId).setAttribute("style", "border: 4px solid green"); 
        //But better..... 
        if(confirm("Try Better way ?")) 
         document.querySelector(w3TargetId).border = "4px solid green"; 
       } 
       else if (w3FunctionsSelect.value == "addClass") { 
        document.querySelector(w3TargetId).classList.add("w3Class"); 
       } 
       else if (w3FunctionsSelect.value == "removeClass") { 
        //Italics should go away..... 
        document.querySelector(w3TargetId).classList.remove("w3Class"); 
       } 
       else if (w3FunctionsSelect.value == "toggleClass") { 
        //Italics should go away..... 
        var tgtElement = document.querySelector(w3TargetId); 
        if (tgtElement.classList.contains("w3Class")) 
         tgtElement.classList.remove("w3Class"); 
        else 
         tgtElement.classList.add("w3Class"); 
       } 
       else if (w3FunctionsSelect.value == "filterTable") { 
        //Italics should go away..... 
        document.querySelector("#filterCtrl").oninput = function() { myCustomFilter() }; 
        document.querySelector(w3TargetId).innerHTML = "<h2> Try it now....</h2>"; 
       } 
       else { document.querySelector(w3TargetId).innerHTML = "<h2> Invalid function specified....</h2>"; } 
      } 
      function myCustomFilter() { 
       var tableElement = document.getElementById("responseTable"); 
       var filterData = document.getElementById("filterCtrl").value.trim().toLowerCase(); 
       //// 
       for (var i = 1; i < tableElement.rows.length; i++) { 
        var foundRowMatch = false; 
        if (filterData == "") { 
         tableElement.rows[i].style.display = 'table-row'; 
         continue; 
        } 
        for (var j = 0; j < tableElement.rows[i].cells.length; j++) { 
         var cellSplit = tableElement.rows[i].cells[j].innerHTML.trim().split(' '); 
         for (var k = 0; k < cellSplit.length; k++) { 
          if (cellSplit[k].trim().toLowerCase() == filterData) { 
           foundRowMatch = true; 
           break; 
          } 
         } 
         if (foundRowMatch) break; 
        } 
       // // 
        if (!foundRowMatch) tableElement.rows[i].style.display = 'none'; 
        else tableElement.rows[i].style.display = 'table-row'; 
       } 
       // 
       return false; 
      } 

</script> 
<style> 
    #parHeaders{ 
     background-color: red; 
     border-bottom: 4px solid black; 
    } 
    .w3Class { 
     font-style:italic; 
    } 

</style> 
    </head> 
    <body> 
     <select id="w3Functions"> 
      <option value="show">Show</option> 
      <option value="hide">Hide</option> 
      <option value="toggle">Toggle</option> 
      <option value="addStyle">Add Style</option> 
      <option value="addClass">Add Class</option> 
      <option value="removeClass">Remove Class</option> 
      <option value="toggleClass">Toggle Class</option> 
      <option value="filterTable">Filter Table</option> 
     </select> &nbsp; &nbsp; 
      <button id="invokeBtn" onclick="runW3JSFn(); return false;">Try w3 function</button> &nbsp; &nbsp; 
      <button id="invokeBtnAlternate" onclick="doVanillaJSFn(); return false;">Try JS Alternate Function</button> 
      <div id="w3Target"><h2>This Is My W3 Functions Target!!!!</h2></div> 
      <br/><br/> 
      Filter Data By Id: <input id="filterCtrl" type="text" oninput="w3.filterHTML('#responseTable', '.dataRow', this.value);" /> 
      <br/> 
    <div><table id="responseTable"> 
     <thead> 
      <tr id="parHeaders"> 
       <th id="parIdHdr" onclick="sortContainerData('responseTable', 'tr.dataRow', 0);return false;">ID</th> 
       <th id="parTypeHdr">TYPE</th> 
       <th id="dateSubmittedHdr">SUBMITTED DATE</th> 
       <th id="priorityLevelHdr">PRIORITY LEVEL</th> 
       <th id="issueDescHdr">ISSUE DESC</th> 
      </tr> 
     </thead> 
     <tbody> 
     <tr class = "dataRow" w3-repeat="retdata"> 
      <td>{{PAR_ID}}</td> 
      <td>{{PAR_TYPE}}</td> 
      <td>{{DATE_SUBMITTED}}</td> 
      <td>{{PRIORITY_LEVEL}}</td> 
      <td>{{ISSUE_DESC}}</td> 
     </tr> 
      </tbody> 
    </table></div> 
     <div id="conditionalContent"><h2>Loading.......</h2></div> 
    </body> 
</html> 

だから私がやろうとしていたものは、（使用w3.httpた）（まだ古典的なASPページを）私の未修正のデータ・ソースからJSON文字列を取得し、その後、私の取得したJSONでw3.displayObject（）を使用するにはオブジェクトを使用してテーブルに行を移入します。以前も同様のシナリオを試してみたところ、性能は非常に劣りましたが、調査した情報源には明らかなボトルネックはありませんでしたので、もう一度やり直すと思いました。私のWebリクエストは750K分のデータを照会するのに9秒かかります。私はこのオブジェクトを使ってw3.displayObjectを再テストし、驚いた。私の解析されたJSONオブジェクトの上記のプレースホルダ（単純に {{属性名}）を使用して、数百ミリ秒で行あたり5列の677行を読み込むことができました。だから単純なグラブアンドゴータイプの操作のために、私はこれを受け入れられると評価します。そこで、w3.sortHTML（）関数を使用して、最初の列、つまり整数値で行をソートしようとしました。これは私がそれを働かせたときに問題を抱えていた、それは働くのに30秒かかり、それは私のブラウザを数回凍らせた。そして、最後にソートされた行を印刷したとき、整数または数値ではなく文字列でソートされていたので、最初の文字は一致したが、値は "100"の後に値 "11"第2に、 "1"アルファベットは "0"よりも高い。私はもう少しツールを作りました。そして、私は、喜びを確認するためにソースを再読しました。この種の機能が私にとって大きな助けになるからです。私は、W3.JSがリストだけでなくテーブルもソートすることをサポートしていますが、バブルソートの変更バージョンを実行し、メモリー内ではなくDOM内の行/アイテムを削除して挿入することを確認しました。だから私は、この機能性が実用的なソートの実装ではないという私の以前の主張を確認するつもりです。

JS Arrayオブジェクトには、+、0、または - int値を指定できるソート関数があります。比較するために、私は自分のテーブルをソートする関数を書いた。それは、配列の配列をソートすることで動作します（各テーブル行の列 "td"のinnerHTMLは配列に入れられ、次に格納された配列にプッシュされます）。最初に、アレイを正しく深くコピーするために3〜4回の試行が必要でしたが、これは私がトリックを行うべきだと思ったものですが、そうではないように見えます。

var tempArray = new Array(dataObj.sortElements[i]); 

仕事は、この何をしたんでした：

var tempArray = dataObj.sortElements[i].slice(); 

は、その後、私は私がこれを使用して動いていた配列を切り取っ：

dataObj.sortElements.splice(i, 1); 

は最後に、私はに配列を挿入するために、再びスプライスを使用それは適切な場所ですが、インデックスを分解しません。私はまた、それが大きな比較値に遭遇しなければ、最後にプッシュするためにプッシュを使用した。昇順で値を並べ替えるときにマイソート機能が働いていましたが、自分のデータ構造から完全なメモリを取り除くと、降順で検索をすばやく変更するために必要なすべてを覚えていませんでした。だから私は不正行為をし、ちょうどAscをソートし、次にarray.reverse（）を使って必要なものを取得しました。私は自分のカスタム関数と最悪の場合、56ミリ秒でソートし、最善のケースでは0.05ミリ秒かかりました（テーブルがソートされれば近ければ良いほど良いでしょう）。次に、比較のためにarray.sort（）関数を試しました。

function compareFn(a, b){ 
      if(parseInt(a[0]) > parseInt(b[0])) 
       return 1; 
      else if(parseInt(a[0]) < parseInt(b[0])) 
       return -1; 
      else 
       return 0; 
     } 
//Invoked like so..... 
dataObj.sortElements.sort(compareFn); 

最悪のケースでは、組み込み関数は4.5 MSと最悪の場合2.5でした。したがって、データベースエンジンを使用してデータをソートできない場合は、時間と手間を省き、圧倒的なボリュームのデータ以外のものに対して一貫性のある結果を得るためにarray.sort（）を使用してください。

W3.JSのユーティリティ機能までは、隣接する関数でバニラJSソリューションを実装しましたが、それらのutil関数は広告されたとおりに動作するように見えましたが、繰り返しのように見えました（addClass、removeClass、toggleClassなど）。 toggleClass？）

だから、少しカスタマイズしてw3.httpが適切に動作しているように見え、w3.displayObjectもチェックアウトする価値があります。私の注目を集めた最後のものは、次の署名付きのw3.filterHTML（）関数でした。 w3.filterHTML（ '＃responseTable'、 '.dataRow'、this.value）

これは、テーブル/リストの一意のセレクタ、tr要素またはul要素のセレクタ、およびフィルタする値（値いくつかの調整の後、私はw3.httpを使用して取得したデータをフィルタリングし、w3.displayObject（）を使用して表示できました。この関数は、行のすべての行とすべてのセルを繰り返して、一致する値がフィールドのテキストに含まれているかどうかを調べます。数値比較を強制する方法はありませんでしたが、レスポンスは認識可能な遅れがなくてうかがいました。私の実際の最終的な結論として、このライブラリは、あなた自身のために少なくともベンチマーク価値のある機能をいくつか提供していますが、それは非常に軽いですが、JQueryからあなたを解放するものではありません。つまり、私の例では、W3.JSができることのほとんどが良いオールファッションのバニラJSの下に置くことができます。 JQueryはこれまでの10年間のあらゆるWebアプリケーションに依存していましたが、単純に置き換えることができない古いバージョンのJQueryを参照するWebアプリケーションを継承するとどうしますか？これは私の最新のWebアプリケーションプロジェクトで私に起こったことで、通常のJavaScriptでほとんどのJQuery関数を実行する方法を学ばなくてはなりませんでした。それは本当にそれほど難しいことではありませんでした。それは、もう一つの外的依存から私を解放しました。私はそれを言うつもりです、それはちょっと楽しいものでした。それで自分で試してみてください。あなたがそれを使用しなくても、後で使うためにアーカイブするのに役立つ何かを発見するかもしれません。乾杯！