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

Question

I have been trying for days upon weeks with trying to build a personal library without jQuery for my school club, and so far I am hitting a rut when it comes to passing through an element or objects through to another function. The notation I am trying for is this :

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

That is my test code, and the library looks as it does below:

    "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
        }
    }

I don't know how to get my methods to pass through correctly and I don't know how to get my methods to apply to the element in the CC('id:wrapper') code. I already have the 'psuedo selector' made to get rid of the id: code. Any help would be much appreciated!

Answer 1

You've posted quite some code which I wasn't able to get to work quickly, so I'm not sure if this will help you out.

The basic idea is that your CC method will always have to return an object with a set method. If there's no element with id="wrapper" , you'll have to figure out a way to handle exceptions.

You can use bind to create a new function from an earlier defined function with a pre-bound this context and pre-filled in arguments.

A simplified example:

 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" /> 

If you want to do more advanced binding of arguments, I'd suggest you google "Currying". With some code, you can make functions automatically return new functions when called with less arguments than needed.

What .bind does:

The bind method is defined in Function.prototype . You can call it on any function you've defined to create a new function.

The first argument that goes in to bind, is used as the this context in the newly created function. You could, for example, do:

 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> 

Any other arguments passed to bind, are automatically passed as arguments. For example:

 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