Question

我注意到W3Schools对他们所谓的W3.JS有一个tutorial，这似乎至少是与jQuery竞争的部分尝试。我甚至无法从他们以外的任何人那里找到有关它的信息。

W3Schools似乎确实至少有一些倾向promote semi-abandonware作为下一个伟大的事情。这是什么？

这个库实际上是否在任何地方使用？有没有人知道它的历史（特别是它的发布历史），以及它是否真的会被开发成值得考虑使用的东西？

注意：我不是在这里寻求图书馆推荐 - 我确实意识到这是明确的偏离主题 - 我只是要求提供有关此特定的背景信息库。

Answer 1

W3.JS，似乎至少部分尝试与jQuery竞争。

它确实涵盖了与jQuery相同的基本领域。即它是添加了Ajax的DOM辅助函数的通用库。

我甚至无法从他们以外的任何人那里找到有关它的信息。

那是因为它是他们的图书馆（在名称的开头采用他们的＃34; Slap W3并且希望人们将它与W3C＆＃34;与极端相关联）并且实际上没有其他人在困扰它。

W3Schools似乎确实至少有一些倾向促使半弃软件成为下一个伟大的东西。这是什么？

看起来确实如此，但那是对未来的推测。

这个库实际上是否在任何地方使用？

无处可去。有些人正在使用它来绊倒W3School并通过向他们学习创建WWW的第一步。有关它的问题不时出现在Stackoverflow上。

有没有人知道它的历史（特别是它的发布历史）

download page有一些信息。

它包含了相当无用的声明 W3.JS可以免费使用。无需许可证（这是非常模糊的;出于某种原因存在自由软件许可证。）

底部还有一个更改日志。

在任何地方都没有版本控制存储库的迹象。

如果这实际上会发展成实际值得考虑使用的东西？

意见，所以没有评论。

Answer 2

W3 JS库有几个吸引人的特性它很精简。 2.学习曲线不大;我能够得到一些东西＆＃34;工作＆＃34;几乎没有文档（除了w3schools.com之外，那里并不多。）

我在图书馆尝试了几种不同的功能，这就是我对它的看法。为了尝试分离关注点，我偶然发现了这个库，希望能够使用类似PHP的include语句来引入HTML片段文件。 W3.JS提供了向div元素添加属性的功能

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

使用JQuery UI-esque初始化语句，文件的内容将被加载到客户端的div元素中。

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

这确实有效，但它完成了所有工作。我在继承的遗留应用程序上使用了库，这是在服务器端的Classic ASP中完成的。我从JQuery那里得到的一件事就是对我用作数据访问层的粗糙ASP页面的POST请求的AJAX函数。＆＃34;该页面将使用类似枚举的POST变量来告诉它要调用哪个函数，然后根据需要在每个函数中调用后续变量。下面是W3.JS执行Web请求然后使用它的显示对象函数和HTML对象（这里是一个无序列表）来显示检索到的具有属性＆＃的JSON对象的能力的示例。 34;客户＆＃34;那是一个数组。这将生成具有innerHTML的LI元素，innerHTML是每个客户实例的属性; ＆＃34;客户名称＆＃34; （{{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请求的查询字符串，我没有遇到任何问题。但是，在Lieu中使用了JQuery AJAX请求和一个vanilla 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解决方案大约需要4.5秒，包括~2.5秒的请求。 W3.JS解决方案需要17到27秒才能完成。我做了一些调整，认为我犯了一个错误，这是＆＃34; Better＆amp; amp;更快的Javascript库＆＃34;可能运行得很糟糕，但似乎没有。我不知道为什么，但W3 JS解决方案显然无法在我的应用中使用。

我上周初尝试再次使用这个库;认为应用程序数据密集程度较低可能会更好。如果您已经阅读了这篇文章，我将为您节省更多的阅读内容....它不是。这个应用程序使用经典ASP与另一个＆＃34;数据访问层＆＃34;键入ASP页面，再次使用JQuery和Vanilla JS使用AJAX函数。我构建了一个JS函数作为param / function ptr传递，如此

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
}

这又是代码密集型的，每次点击列标题时（我使用SQLite查询的排序功能）而不是自定义JS函数，我都不想触发Web请求。所以我尝试使用w3.sortHTML（）函数来完成这项工作。它看起来像这样，但我保持我的JQuery AJAX代码最初加载表并使用sortHTML（）函数post load进行排序。 w3.sortHTML函数按顺序接受参数

重复元素容器唯一选择器（＆＃34;选择，UL，OL，表等＆＃34;）。
重复元素组选择器（选项，li，tr等）在这个例子中，我使用.faq，因为我已将它应用于所有表格 - ＆gt; tr实例。
选择重复组的属性/元素进行排序（在内部跟踪升序/降序排序顺序。）
FAQ号码 FAQ名称 1 Tug Speedman 2 Alpa Chino 3 柯克拉撒路 ...

我使用此页面显示来自HelpDesk系统的常见问题解答数据（使用我的登录信息将数据存储到SQLite数据库中，这样任何用户都可以查看常见问题解答数据，而无需登录/获取帮助台系统的许可证。） web请求返回大小约为430 KB的JSON字符串，并创建320个包含5个表列的表行（例如，我们的编码只有两列。）此请求需要约3秒才能完成。我的JQuery / JS AJAX请求w /回调函数总共约为5.5秒，包括~3秒的Web请求/响应。我的自定义排序fn花了不到1秒的时间，不管按列排序（只有示例中显示的id），对我的ret数据obj进行排序（排序为全局对象＆＃34; JSONObj＆＃34;），清除表并重新填充排序行的表。再一次，很多代码都是这样做的，所以我认为W3 JS可能会帮助我。我的W3 JS排序实现需要大约8秒来排序整数/数字数据，大约10秒来排序文本/字符串数据。这对我的需求来说太长了（再次），所以我回到了我的JQuery / JS解决方案。

总之，似乎任何大于琐碎大小的东西都会在这个库中产生非常糟糕的表现。我认为W3.JS的创建者的功能要求是正确的，因为该库确实拥有一些非常有用的抽象功能，但它不能替代JQuery和其他现有框架，甚至是你老式的Javascript代码。希望事情已经成功;会非常有帮助的。

编辑 - 所以我一直在浏览库的源代码，虽然Web 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;
            }

        }

您将看到httpCallBack被用作内部xhr对象的onreadystatechange事件的侦听器，因为它就是这样。为了在我的实例中工作，我必须在打开请求之前设置content-type标头，以便正确解释我的xml / param参数。因此W3.JS可以执行POST请求，但是w3.http（）函数只不过是Javascript XMLHttpRequest（）对象的简单包装器。此外，请求是异步调用的，并且没有办法改变这种行为所以只有FYI。

- 第二次编辑。所以我的工作有点平静，我觉得我可能比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字符串，然后使用w3.displayObject（）和我检索到的JSON对象来填充带行的表。我之前尝试过类似的场景，表现非常差，但在我查看的源代码中，我没有看到任何明显的瓶颈，所以我想我会再试一次。我的Web请求大约需要9秒来查询750K的数据。我用这个对象来重新测试w3.displayObject并且感到很惊讶。使用上面的占位符，这是简单的我解析的JSON对象的{{attribute names}}，我能够在几百毫秒内加载每行5列的677行。因此，对于简单的抓取和走动类型操作，我认为这是可接受的。那么我尝试使用w3.sortHTML（）函数按第一列（整数值）对行进行排序。当我开始工作时遇到了问题，工作花了大约30秒，它冻结了我的浏览器几次。然后当它最终打印出＆＃34; sort＆＃34;行，它们不是按整数或数值排序，而是按字符串排序，因此值为＆＃34; 100＆＃34;之后是价值＆＃34; 11＆＃34;因为第一个字符匹配，但第二个字符匹配，＃34; 1＆＃34; alphachar高于＆＃34; 0＆＃34;。我做了一些工具，我重新阅读了源代码，以确认没有快乐;因为这种功能对我来说是一个很大的帮助。我发现虽然W3.JS支持排序列表和表格，但它会对冒泡排序进行修改，并通过在DOM中删除和插入行/项来实现，而不是在内存中。因此，我要确认我之前的断言，即此功能不是一个实际的排序实现。

我在上面提到JS Array对象有一个sort函数，你可以提供+，0或 - int值。为了比较，我编写了自己的函数来对表进行排序。它的工作原理是对一组数组进行排序（每个表行列＆＃34; td＆＃34;＆lt; innerHTML被放入一个数组中然后被推送到一个包含数组。然后我在第一个上写了一个修改过的冒泡排序专栏（我的ID专栏。）我遇到了一些问题，我花了2个多小时才能做好。首先，我花了3-4次尝试正确地深度复制数组。这就是我认为应该做的但是它似乎不是。

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

这是什么工作：

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

然后我用这个切掉了我正在移动的阵列：

dataObj.sortElements.splice(i, 1);

最后，我再次使用splice将数组插入其正确的位置而不切割任何索引。如果它没有遇到更大的比较值，我也会在最后使用push来解决它。我的排序功能在向升序方向排序值时起作用，但是，从我的数据结构过程中消除内存，我无法记住我需要快速修改以便在降序方向进行搜索的所有内容。所以我作弊，只是对Asc进行了排序，然后使用array.reverse（）来获得我需要的东西。我定时我的自定义函数，最坏的情况是需要56毫秒进行排序，最好的情况需要花费.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的实用功能而言，我在相邻函数中实现了Vanilla JS解决方案，并且它们的util函数似乎像宣传的那样工作，虽然有些似乎是重复的（例如addClass，removeClass，toggleClass。只需要一个param for toggleClass？）

所以w3.http，有一点定制，似乎工作得很充分，w3.displayObject也值得一试。引起我注意的最后一件事是带有以下签名的w3.filterHTML（）函数。 w3.filterHTML（＆＃39; #responseTable＆＃39;，＆＃39; .dataRow＆＃39;，this.value）

它是你的表/列表的唯一选择器，tr或ul元素的选择器和要过滤的值（在这种情况下是文本输入的值。）经过一些修补，我能够过滤使用w3.http检索并使用w3.displayObject（）显示的数据。此函数遍历行的所有行和所有单元格，以查看匹配值是否包含在字段的文本中。无法强制进行数字比较，但响应很快，没有明显的滞后。因此，对于我的实际最终结论，这个库确实提供了一些至少值得为自己进行基准测试的功能，并且它非常轻，但它不会将您从JQuery中解放出来。也就是说，你可以在我的例子中看到，W3.JS可以做的大多数事情也可以在很好的情况下发挥作用。老式香草JS。几十年来，JQuery一直是几乎所有Web应用程序的依赖项，并且如果您继承了一个引用过时版本的JQuery而不能简单替换的Web应用程序，您会怎么做？在我最近的Web应用程序项目中发生了这种情况，我必须学习如何使用常规JavaScript执行大多数JQuery函数。这真的不是那么难，它让我从另一个外部依赖中解放出来，我敢说，有些它很有趣。所以亲自试试吧。即使您不使用它，您也可能会发现一些有助于存档的内容供以后使用。干杯！

Answer 3

我不确定你为什么要问这个问题，确切地说;如果你担心jQuery在某种程度上是不合适的，那就不要了：jQuery是一个很棒的库，它将在很长一段时间内继续成为JS社区的一部分。

W3Schools将自己作为一个易于上手的资源推销给全新的编程学生，因此他们网站上的欢快着色方案和他们文章中使用的简化语言。他们可能正在努力迎合那些对jQuery的复杂性感到恐惧的用户。不管这种尝试是否成功，我都说不出来。

Answer 4

W3.js是一个小型，易于故障排除的辅助库，具有修剪功能。我在快速，折腾的应用程序中使用它，因为我发现它更容易进行故障排除和记录，并且对于不熟悉jQuery广泛功能集的人来说更容易接近。它有点像一个非优化的，“无文化”的jQuery，因为它很难理解部落/文化知识。

我没有看到W3schools会去任何地方，它经常被新手开发者经常光顾，这似乎是它的w3.css和w3.js的目标。如果你确实使用它，我可能会回避将它从它们的站点/ CDN链接起来。如果/当文件不可用时，可能最好有本地副本，否则会使您的网站无法正常运行。我也不相信它在大规模生产应用程序中只是因为正如其他人所提到的那样，人们可能没有充分利用它会发现其代码出现问题。我知道我只把它用于宠物项目，老实说，我从来没有挖过源头。（我现在可能会想到这一点）

Answer 5

w3js =小巧，功能强大，直观

就像某人时不时地做着我们所做的一切：实现一个以前存在的有用框架的较小子集，并仅提供95％的项目真正使用的那些功能。也就是说，

添加/删除类，样式，HTML元素
Ajax通讯
基于模型的HTML迭代器（列表）

还有 sorting ，它非常有用和直接：您看一下即可立即使用。它只是工作。那就是我对w3.js的最爱-以及大小，似乎是13k（未压缩，最小）。我什至都不想去缩小它。

jQuery 改变了我们的思维方式，这是一个很好的框架。但是您并不总是需要jQuery，并且选择并实现了这个实用的子集。

什么是W3.JS以及为什么W3Schools推广它？

5 个答案:

w3js =小巧，功能强大，直观