0

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

弹出（对象方法测试）.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 文件代码在它是唯一的外部 .js 文件时有效，并且这行代码在 HTML 文件中......

设置 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 （对象方法测试）.js）虽然我仍然想保留上面的设置，而不必恢复到下面的设置......

任何帮助和错误修复说明将不胜感激！

4

3 回答 3

0

感谢 HUGO 的评论：将 get/set 函数附加到 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
};

弹出（对象方法测试）.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!
于 2013-08-13T03:02:48.050 回答
0

我无法真正理解您的问题，因为正如山姆所说，您发布的信息太多了。但是，我认为您在 html 文件中以错误的顺序包含了 js 文件。尝试写作：

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

高于一切。

另外，请花一些时间来编辑您的问题。让它更短更清晰。

于 2013-08-12T19:38:57.060 回答
0

您需要为基于 JavaScript 的 Web 应用程序使用更好的设计模式。我建议看一下 Douglas Crockford 的JavaScript: The Good Parts。

作为一种 hacky 方法，您始终可以拥有一个全局对象来存储对您的方法的引用，但从长远来看，我不建议采用这种方法。

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

var globalContext = { 
    fooMethod : foo,
};

现在，您可以以globalContext.fooMethod();. JavaScript 中的{}创建对象存储键-> 值对，值可以是其他类型中的方法。

希望这可以帮助！

于 2013-08-12T20:51:19.483 回答