Question

我有一个名为js/jsClasses.js的javascript文件，该文件与index.html文件相关。

此文件包含一些嵌套函数。这是代码 -

function JSClass(){ //notice the capital J which though doesn't change execution is a convention indicating a class constructor
var langSetting;
this.setLanguage = function(){
    langSetting = "en-GB";
    console.log(langSetting);
}
this.getLanguage = function(){
    return langSetting;
}

}

我需要在langSetting中设置变量index.html的值。这将是全局变量，在所有后续页面中，我需要访问langSetting的值并以相应的语言加载页面。

目前，我正试图从js/jsClasses.js

访问index.html文件

<html>
    <script src="js/jsClass.js">
        var object1 = new JSClass();
        object1.setLanguage();
        object1.getLanguage();
    </script>



</html>

当我点击按钮时，没有任何反应。有人可以帮忙吗？

Answer 1

有两种方法可以解决这个问题，一种是坏的，一种是普通的，一种是好的，

糟糕的一个是从var移除langSetting关键字，这会使langSetting成为全局变量。

好的方法是让JSClass返回langSetting或者更广泛地说明一个对象，揭示它是什么，正如模块愿意揭示的那样，这被称为揭示模块模式，这里是an excellent book chapter on it by Google developer Addy Osmani

在您的情况下，这是一个很好的解决方案：

var jsClass= function(){


    var langSetting = "en"; // this is javascript's version of a private variable, it is 'closed' in your jsClass

    var getLanguage = function(){
        return langSetting;
    }

    var setLanguage = function(){
        navigator.globalization.getPreferredLanguage(function (language){
            langSetting = language.value; //set the local variable
            console.log(langSetting);
        }, function(){
            console.log("there was an error");
        });
    }
    return {
        getLanguage:getLanguage,
        setLanguage:setLanguage
    };
}

然后在你的代码中你可以做

var obj = new jsClass(); // is exactly the same as var obj = jsClass , when functions return objects it doesn't matter if you use the 'new' keyword
obj.getLanguage(); //returns en

另一种解决方案是使用constructor pattern。有些人认为构造函数模式是实现java开发人员迁移到javascript的错误，尽管它在业界和许多库中被广泛使用。这将看起来如下：

function JSClass(){ //notice the capital J which though doesn't change execution is a convention indicating a class constructor
    var langSetting;
    this.setLanguage = function(){
        //setter code here
    }
    this.getLanguage = function(){
        //getter code here
    }
}

然后使用new关键字，它看起来像：

var myClass = new JSClass();
myClass.getLanguage();//getter result

另外，请注意我注意到您正在使用Apache Cordova API进行全球化，请注意，这会使setLanguage异步，因此您可能希望让它接受callback parameter，这意味着您可以“挂钩”何时完成。有关回调及其使用方法的详细信息，请参阅This stackoverflow question。

在javascript中调用嵌套函数

1 个答案: