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上下文和預填充的參數。

一個簡化的例子：

 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"); 

 <input type="text" /> 

如果您想對參數進行更高級的綁定，建議您使用谷歌“ Currying”。 使用某些代碼，可以使函數在調用時使用比所需數量更少的參數時自動返回新函數。

.bind是：

bind方法在Function.prototype定義。 您可以在定義的任何函數上調用它來創建新函數。

進入綁定的第一個參數在新創建的函數中用作this上下文。 例如，您可以執行以下操作：

 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 

 <div>Text in a div</div> 

傳遞給綁定的任何其他參數將自動作為參數傳遞。 例如：

 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