如何在JavaScript中为自定义对象创建带有参数的方法？

Question

I have a real problem that I can't solve and I'm really good at computers. Building an object using javascript has pushed me over the edge. I have three external js files and the HTML file that initiates the call...

SETUP 1

popup.HTML FILE Code:

...

<script type="text/javascript" src="MethodObjects.js"></script>
<script type="text/javascript" src="popup (test Objects).js"></script>

...

MethodObject.js FILE Code:

var URLDisectorO={

    function URLDisector(URL){

        //HERE THE COMPILER SAYS: Unexpected identifier Uncaught ReferenceError:

        //I need to pass a URL into this from another function...
        //test if the URL has google search in it

        var myURL = "" + URL;
        var index = mySearch(myURL, "https://www.google.com/search?q=");

        if(index==-1){
            document.getElementById('currentLink').innerHTML = myURL + "<br /><br />This URL <font color='blue'><b><u><i>WON'T</i></u></b></font> be blocked!";
        }
        else{
            if(index==0){
                document.getElementById('currentLink').innerHTML = myURL + "<br /><br />This URL <font color='red'><b><u><i>WILL</i></u></b></font> be blocked!";
            }
            else{
                return "ERROR";
            }
        }
    }

    function mySearch(str, str1){

    //Searches the URL for the two strings passed in...

        var index=-1;
        var strlength=str.length;
        var str1length=str1.length;
        var length=0;

        if(strlength>str1length){
            length=str1length;
        }
        else length=strlength;

        for(var i=0; i<length; i++){

            if(str.charAt(i)==str1.charAt(i)){

                if(i>index && index==-1 && i<1){
                    index=i;
                }

                for(var j=i; j<length-1; j++){
                    if(str.charAt(j+1)==str1.charAt(j+1)){
                        i=j;
                        break;
                    }
                    else{
                        index=-1;
                        break;
                    }
                }//end of inner for loop

                if(index==-1){
                    break;
                }
            }
        }//end of outer for loop

        if(index>0){
            return -1;
        }
        else{
            return index;
        }
    }//end my search method
}

popup (Object Methods test).js FILE Code:

//This is the file doing the calling and passing in stuff to the other file above...

//The HTML file called the JS file and it starts and it works until it gets down to...

var txtU="";

function getURL(){
chrome.tabs.getSelected(null, function(tab) {
    var URL="";
    document.getElementById('currentLink').innerHTML = tab.url;
    URL = "" + document.getElementById('currentLink').innerHTML;
    txtU+=URL;
    alert("The URL is:\n\n" + txtU);
    URLDisectorO.URLDisector(txtU);
    //Object Call Here!
    //HERE THIS DOESN'T WORK!!!
    //The compiler says: Uncaught SyntaxError: URLDisectorO is not defined.

});
}

getURL();//The Call! The main method's call!

The thing that bothers me is: popup.js FILE Code works when it is the only external .js File and this line of code is in the HTML FILE...

SETUP 2

HTML FILE CODE:

...

<script type="text/javascript" src="MethodObjects.js"></script>

...

popup.js File Code:

var txtU="";

function getURL(){
chrome.tabs.getSelected(null, function(tab) {
    var URL="";
    document.getElementById('currentLink').innerHTML = tab.url;
    URL = "" + document.getElementById('currentLink').innerHTML;
    txtU+=URL;
    alert("The URL is:\n\n" + txtU);
    URLDisector(txtU);
});
}

getURL();//The Call! The main method's call!

function URLDisector(URL){

    var myURL = "" + URL;
    var index = mySearch(myURL, "https://www.google.com/search?q=");

    if(index==-1){
        document.getElementById('currentLink').innerHTML = myURL + "<br /><br />This URL <font color='blue'><b><u><i>WON'T</i></u></b></font> be blocked!";
    }
    else{
        if(index==0){
            document.getElementById('currentLink').innerHTML = myURL + "<br /><br />This URL <font color='red'><b><u><i>WILL</i></u></b></font> be blocked!";
        }
        else{
            return "ERROR";
        }
    }
}

function mySearch(str, str1){

    var index=-1;
    var strlength=str.length;
    var str1length=str1.length;
    var length=0;

    if(strlength>str1length){
        length=str1length;
    }
    else length=strlength;

    for(var i=0; i<length; i++){

        if(str.charAt(i)==str1.charAt(i)){

            if(i>index && index==-1 && i<1){
                index=i;
            }

            for(var j=i; j<length-1; j++){
                if(str.charAt(j+1)==str1.charAt(j+1)){
                    i=j;
                    break;
                }
                else{
                    index=-1;
                    break;
                }
            }//end of inner for loop

            if(index==-1){
                break;
            }
        }
    }//end of outer for loop

    if(index>0){
        return -1;
    }
    else{
        return index;
    }
}//end of method

The thing is: I want to use objects so that I have access to these methods all the time instead of just one specific case... Objects would make this code a little more flexible... calling them where needed (SETUP 1 - popup (Object Methods test).js) though I still want to keep the setup above and not have to revert to the setup below...

Any help and error fix instructions would be greatly appreciated!

Answer 1

I can't really understand your problem because as Sam I am said, you have posted way too much information. However, I think that you have included the js files in a wrong order inside the html file. Try writing :

<script type="text/javascript" src="popup.js"></script>

above all the other.

Also, take some time to edit your question. Make it shorter and more clear.

Answer 2

You need to use a better design pattern for your JavaScript based web application. I would recommend taking a look at the JavaScript: The Good Parts , by Douglas Crockford.

As a hacky approach, you can always have a global object that stores reference to your methods, but I would not recommend taking this approach for the long run.

var foo = function () {
    alert("hello world");
};

var globalContext = { 
    fooMethod : foo,
};

Now, you can access it as globalContext.fooMethod(); . The {} in JavaScript create objects which store key->value pairs, and values can be methods among other types.

Hope this helps!

Answer 3

Thanks to the comment from HUGO on: attach get/set function to objects property in js , I was able to understand what I needed to do.

Here is the solution:

I needed to create a variable and store a function in it. The function, stored inside the variable, serves as the object encapsulation structure (sorry about my vocabulary--I might use words in the wrong context though with good intent). Then I needed to create an instance of this object in another class. From then on I could have access to the methods and variables provided inside that object.

Look at the code to see what is different. The comments will guide you and tell you why that had to be instead...

popup.HTML FILE Code:

...

<script type="text/javascript" src="MethodObjects.js"></script>
<script type="text/javascript" src="popup (test Objects).js"></script>

...

MethodObject.js FILE Code:

var global=function(){ //The declaration of a global variable set to a function object value...
    var URL="";

    this.URLD=function URLDisector(URL){ //This is different.

/*With this in front of the property name... this displays the correct format of how to include a function as a property of the Object...

*The correct way to call a method inside this object is:
*
*this.propertyName(parameter); OR this.propertyName();
*
*Though a correct declaration of this looks like:
*
*this.URLD=function URLDisector(URL){
*...code inside the method...
*};
*/
        var myURL = "" + URL;
        var index = this.search(myURL, "https://www.google.com/search?q="); //This is different.

        if(index==-1){
            document.getElementById('currentLink').innerHTML = myURL + "<br /><br />This URL <font color='blue'><b><u><i>WON'T</i></u></b></font> be blocked!";
        }
        else{
            if(index==0){
                document.getElementById('currentLink').innerHTML = myURL + "<br /><br />This URL <font color='red'><b><u><i>WILL</i></u></b></font> be blocked!";
            }
            else{
                return "ERROR";
            }
        }
    }
    //end first inside Function

    this.search=function mySearch(str, str1){ //This is different.

        var index=-1;
        var strlength=str.length;
        var str1length=str1.length;
        var length=0;

        if(strlength>str1length){
            length=str1length;
        }
        else length=strlength;

        for(var i=0; i<length; i++){

            if(str.charAt(i)==str1.charAt(i)){

                if(i>index && index==-1 && i<1){
                    index=i;
                }

                for(var j=i; j<length-1; j++){
                    if(str.charAt(j+1)==str1.charAt(j+1)){
                        i=j;
                        break;
                    }
                    else{
                        index=-1;
                        break;
                    }
                }//end of inner for loop

                if(index==-1){
                    break;
                }
            }
        }//end of outer for loop

        if(index>0){
            return -1;
        }
        else{
            return index;
        }
    }
    //end my search method
};

popup (Object Methods test).js FILE Code:

var txtU="";

var g = new global(); /*This is different.
This line declares that:
We have an object with the instance name "g"
"g" contains the properties found inside the object or class called "global".*/

function getURL(){
    chrome.tabs.getSelected(null, function(tab) {
        var URL="";
        document.getElementById('currentLink').innerHTML = tab.url;
        URL = "" + document.getElementById('currentLink').innerHTML;
        txtU+=URL;
        alert("The URL is:\n\n" + txtU);

        g.URLD(txtU);

/*This is different.
*This line says that we want to call the object name and, in this case,
*call the method property name "URLD" and pass in "txtU" as the parameter to it.
    });
}

getURL(); //The Call! The main method's call!