javascript - 更高级的 javascript 模式的困难

Question

我在创建一个小型 Javascript 库来模拟 jQuery 和其他库的练习时遇到了一些麻烦。截至目前，它还不起作用。我对 Javascript 和脚本编写都很陌生，因为我才刚刚开始自学，所以很可能我只是错过了对大多数人来说显而易见的东西。我尝试过寻找解决方案，但一直找不到解决方案，所以我只能自己询问。

这是库本身:

(function(window, undefined) {
var document = window.document
var $m = function(obj) {
if (typeof obj === "object") {
    return obj
}
else {
    return document.getElementById(obj)
}

class: function(name){
    var ele = document.getElementsByTagName('*')
    var objects = []

    for (var q = 0 ; q < ele.length ; ++q){
    if (ele[q].className === name){
        objects.push(ele[q])
    }
    }
    return objects
}

s: function(){
    return this.style
}

window.$m = $m

})(window)

简要编辑:$m 旨在成为具有方法 class 和 s 的对象。

这就是在简单测试页面中引用它的方式:

<h1 class="heading" onmouseover="$m(this).s.setAttribute('text-decoration', 'underline')" onmouseout="$m(this).s.setAttribute('text-decoration', 'none')">Testing.</h1>

另一个编辑:我尝试这样做，虽然它没有抛出任何错误，但它无法正常工作。我对到底什么没有被调用有点困惑。

这是新库:

(function(window, undefined) {
    //set document to this local scope
    var document = window.document
    //create $m object
    var $m = function(obj) {
    //if it is anything but an element return itself
        if (typeof obj === "object") {
        return new init(obj);
        }
    //if it is an element return that element
        else {
        return new init(document.getElementById(obj));
        }
    }

    function init(elem){
        //set properties
        this.elem = elem;
    }

    init.prototype = {
        //return style
        sty: function() {
            return this.elem.style;
        },

            //return all objects with a certain class

        cla: function() {
        var allelem = document.getElementsByTagName('*')
        var give = []

        //gather all elements in the document and get those with matching class
            for (var q = 0 ; q < allelem.length ; ++q){
        if (allelem[q].className === this.elem.className){
            give.push(allelem[q]);
        }
        }
        //return found elements
        return give;
    }
    }
    //expose $m to global scope
    window.$m = $m;
})(window)

并尝试修复它的引用方式:

<h1 class="heading" id="test" onmouseover="$m(this).sty.textDecoration='underline'" onmouseout="$m(this).sty.textDecoration='none'">Testing.</h1>

Answer 1

这里有一些问题。首先，正如user1689607所说，你的语法无效；你想要(我认为)最后一部分如下:

function class(name){
    var ele = document.getElementsByTagName('*')
    var objects = []

    for (var q = 0 ; q < ele.length ; ++q){
        if (ele[q].className === name){
            objects.push(ele[q])
        }
    }
    return objects
}

function s() {
    return this.style
}

但这仍然行不通，因为 class 是 reserved word .

此外，您的代码将不允许您在 HTML 中执行您想要执行的操作。您要寻找的是创建一个新对象，其中包含作为字段传递给 $ 的参数，以及您定义为成员的函数。

尝试以下操作:

function MyObjConstructor(param) {
    this.field = param;
}

MyObjConstructor.prototype = 
{
    s:function(){...}//As your S function, but replace "this" with "this.field"
    clazz:function(){...}//As your class function, but replace "this" with "this.field"
}

最后

function $m(obj) {
    if (typeof obj === "object") {
        return new MyObjConstructor(obj);
    }
    else {
        return new MyObjConstructor(document.getElementById(obj));
    }
}

这会导致传递给 $ 函数的每个对象都被包装，并公开适当的方法。我不确定 jQuery 是如何做到的，但这可能是一个很好的起点。