如何在JavaScript中为自定义对象创建包含参数的方法?

时间:2013-08-12 19:00:16

标签: javascript object methods parameters

我有一个我无法解决的真正问题,我非常擅长计算机。使用javascript构建对象已经让我超越了优势。我有三个外部js文件和启动呼叫的HTML文件...

设置1

popup.HTML文件代码:

...

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

...

MethodObject.js文件代码:

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(对象方法测试).js文件代码:

//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!
困扰我的是: popup.js FILE代码在它是唯一的外部.js文件时工作,这行代码在HTML文件中......

SETUP 2

HTML文件代码:

...

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

...

popup.js文件代码:

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

问题是:我想使用对象,以便我可以一直访问这些方法,而不仅仅是一个特定的情况......对象会使这些代码更灵活......在需要的地方调用它们(SETUP 1 - 弹出(对象方法测试).js)虽然我仍然想保持上面的设置而不必恢复到下面的设置...

非常感谢任何帮助和错误修复说明!

3 个答案:

答案 0 :(得分:0)

我无法理解你的问题,因为据我所说,你发布的信息太多了。但是,我认为您在html文件中以错误的顺序包含了js文件。试着写:

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

高于其他所有。

另外,请花点时间编辑您的问题。让它更短更清晰。

答案 1 :(得分:0)

您需要为基于JavaScript的Web应用程序使用更好的设计模式。我建议看一下道格拉斯·克罗克福德的JavaScript: The Good Parts

作为一种hacky方法,你总是可以拥有一个存储对你的方法的引用的全局对象,但我建议不要长期采用这种方法。

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

var globalContext = { 
    fooMethod : foo,
};

现在,您可以globalContext.fooMethod();访问它。 JavaScript中的{}创建存储key-&gt;值对的对象,值可以是其他类型的方法。

希望这有帮助!

答案 2 :(得分:0)

感谢HUGO对attach get/set function to objects property in js的评论,我能够理解我需要做什么。

以下是解决方案:

我需要创建一个变量并在其中存储一个函数。存储在变量中的函数用作对象封装结构(抱歉我的词汇 - 我可能会在错误的上下文中使用单词,但意图很好)。然后我需要在另一个类中创建该对象的实例。从那时起,我可以访问该对象内提供的方法和变量。

查看代码以了解有何不同之处。评论将指导您并告诉您为什么必须改为......

popup.HTML文件代码:

...

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

...

MethodObject.js文件代码:

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(对象方法测试).js文件代码:

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!