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

How do you create a method with parameters for a custom object in JavaScript?

本文关键字:创建 参数 方法 对象 自定义 JavaScript      更新时间:2023-09-26

我有一个真正的问题无法解决,而且我真的很擅长计算机。使用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 FILE。。。

设置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-popup(Object Methods test).js),尽管我仍然想保留上面的设置,而不必恢复到下面的设置。。。

如有任何帮助和错误修复说明,我们将不胜感激!

我真的不能理解你的问题,因为正如Sam所说,你发布了太多信息。然而,我认为您在html文件中以错误的顺序包含了js文件。尝试写作:

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

高于一切。

另外,花点时间编辑你的问题。使其更短、更清晰。

您需要为基于JavaScript的web应用程序使用更好的设计模式。我建议大家看看Douglas Crockford的JavaScript:the Good Parts。

作为一种技巧性的方法,您总是可以有一个全局对象来存储对方法的引用,但从长远来看,我不建议采用这种方法。

var foo = function () {
    alert("hello world");
};
var globalContext = { 
    fooMethod : foo,
};

现在,您可以将其作为globalContext.fooMethod();进行访问。JavaScript中的{}创建存储键值对的对象,值可以是其他类型的方法。

希望这能有所帮助!

感谢HUGO关于将get/set函数附加到js中的objects属性的评论,我能够理解我需要做什么。

以下是解决方案:

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

查看代码以了解不同之处。评论会引导你,并告诉你为什么必须这样做。。。

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!