javascript - 如何从函数中获取所选元素并将其作为另一个函数的参数传递

Question

几周以来，我一直试图为我的学校俱乐部建立一个没有jQuery的个人图书馆，到目前为止，当涉及到将元素或对象传递到另一个函数时，我正在努力。我想要的符号是：

CC(function(){
    CC('id:wrapper').set('html','Hello World!');
});

这是我的测试代码，库看起来如下：

    "use strict";

    var CC = function () {
        var args = arguments[0] || {};
        if(typeof args === "object") {
            args = args || {};
        }
        else if(typeof args === "function") {
        args = arguments[0];
        return window.onload = args;
    }
    else if(typeof args !== "object" || typeof args !== "function") {
        var elem = get(args);
        return elem;
    }
};

CC({
    //Can only be done once. Will return TypeError because '$' won't exist afterward
    noConflict : function (name) {
        name = new CC();
        return name;
    }
});
//The way to modify things
CC.mod = CC.prototype = {};
CC.extend = CC.mod.extend = function () {
    var args = arguments[0] || {};
    var target = get(args);
    return target;
};
CC.mod.extend({
    //Use psuedo types to set specific values (required)
    set : function(type, value) {
        return set(this.target, type, value);
    }
});
//General get function to get selectors, generate functions, or return values
function get() {
    var args = arguments[0] || {};
    //Check if the argument is a function
    //If it is, return the function on page load
    if (typeof args === "function") {
        return window.onload = args;
    }
    //Check argument type
    if(typeof args !== "object") {
        args = arguments[0];
        return args;
    }
    else {
        args = {};
        return args;
    }
    //Check if args has an elem psuedo
    if(args.indexOf("id:") > -1 || args.indexOf("class:") > -1 || args.indexOf("tag:") > -1) {
        var target = args;
        //Run id psuedo
        if(target.indexOf("id:") > -1) {
            target = target.replace('id:','');
            console.log(target);
            return document.getElementById(target);
        }
        //Run class psuedo
        else if(target.indexOf("class:") > -1) {
            target = target.replace('class:','');
            console.log(target);
            return document.getElementsByClassName(target);
        }
        //Run tag psuedo
        else if(target.indexOf("tag:") > -1) {
            target = target.replace('class:','');
            console.log(target);
            return document.getElementsByTagName(target);
        }
    }
    //Check if args is not null
    //If not, then return args value
    if(args !== null) {
        return args.value;
    }
    else {
        return null;
    }
}
//General function to set things for elements
function set(elem, property, value) {
    //If the element provided is part of getting an element
    //If it is, run the psuedo checker
    if(elem.indexOf("id:") > -1 || elem.indexOf("class:") > -1 || elem.indexOf("tag:") > -1) {
        elem = get(elem);
        //Rerun the set() function to set properties and values
        set(elem, property, value);
    }
    //If not, then run the type psuedo checker
    else {
        //Check if style
        if(property.indexOf("css:") > -1 || property.indexOf("style:") > -1) {
            //Check for the independent types
            if(property.indexOf("css:") > -1) {
                property = property.replace('css:','');
                return elem.style[property] = value;
            }
            else if(property.indexOf("style:") > -1) {
                property = property.replace('style:','');
                return elem.style[property] = value;
            }
        }
        //Check if attribute
        else if(property.indexOf("attr:") > -1) {
            property = property.replace('attr:','');
            return elem.setAttribute(property, value);
        }
        //Check if html
        else if(property.indexOf("html") > -1) {
            return elem.innerHTML = value;
        }
        //To add more, just add another else if(condition...) {Code} statement
        //Condition must be defined in psuedo selectors
        //Condition must be property.indexOf("selector:" > -1)
        //return statement must consist of a return value from the value     parameter
        }
    }

我不知道如何让我的方法正确传递，我不知道如何让我的方法应用于CC('id:wrapper')代码中的元素。我已经有了'伪相选择器'来摆脱id:代码。任何帮助将不胜感激！

Answer 1

您已经发布了一些我无法快速上手的代码，因此我不确定这是否会帮助您。

基本思想是，CC方法始终必须使用set方法返回对象。如果没有id="wrapper"的元素，您必须找到处理异常的方法。

您可以使用bind从先前定义的函数创建一个新函数，该函数具有预先绑定的this上下文并预填充参数。

简化示例：

＆＃13;

＆＃13;

var CC = function(query) {
  return {
    set: set.bind(null, document.querySelector(query))
  };
}


function set(element, attr, val) {
   element.setAttribute(attr, val); 
}


CC("input").set("placeholder", "I was set by js");

＆＃13;

<input type="text" />

＆＃13;

＆＃13;

＆＃13;

如果你想对参数进行更高级的绑定，我建议你google＆＃34; Currying＆＃34;。使用一些代码，您可以使用少于所需的参数调用函数自动返回新函数。

.bind的作用：

bind方法在Function.prototype中定义。您可以在已定义的任何功能上调用它来创建新功能。

进入bind的第一个参数用作新创建函数中的this上下文。例如，您可以这样做：

＆＃13;

＆＃13;

var myDiv = document.querySelector("div");

var logText = function() {
  console.log(this.innerText);  
};

var logDivText = logText.bind(myDiv);
logText(); // Bound to window, logs undefined
logDivText(); // Bound to div, logs text

＆＃13;

<div>Text in a div</div>

＆＃13;

＆＃13;

＆＃13;

传递给bind的任何其他参数都会自动作为参数传递。例如：

＆＃13;

＆＃13;

var sum = function(a, b) {
    return a + b;
};

var sum3 = sum.bind(null, 3); // we don't use this, so we don't define it

console.log(sum3(5)); // Prints 8

＆＃13;

＆＃13;

＆＃13;