Question

你好我正在为一个正在工作的项目创建一个小api，这里是代码：

var VDSL = (function(){

    var defaults = {

        resolvePhoneNumberUrl: '/domain.com/test'   

    };

    return {

        Map: function(el, options) {

            el = (el.jquery) ? el.get(0) : el;


            this.mapSettings = {
                center:new google.maps.LatLng(37.983716, 23.72931),
                zoom: 10
            };

            $.extend(this.mapSettings, options);

            this.M = new google.maps.Map(el, this.mapSettings);
            this.kmlParser = new geoXML3.parser({map: this.M});

            this.drawArea = function(data) {
                this.kmlParser.parseKmlString(data);
            };

            this.clearArea = function(i) {
                this.kmlParser.hideDocument(i);
                this.kmlParser.docs.splice(i, 1);
            };

            this.clearMap = function() {
                this.kmlParser.hideDocument();
                this.kmlParser.docs = null;
                this.kmlParser = null;
            };

            this.redrawArea = function(data) {  
                this.clearMap();
                this.drawArea(data);
            };          

            return this;
        },

        resolvePhoneNumber: function(phone, callback) {

            var request = $.ajax({
                url: defaults.resolvePhoneNumberUrl,
                type: 'POST',
                data: { 
                    phoneNumber : phone
                },
                dataType: 'text'
            });

            request.done(function( reply ) {
                console.log('success'); 
                if ($.isFunction(callback)) {
                    callback(reply);
                }
            });

            request.fail(function( jqXHR, textStatus ) {
                console.error( "Request failed: " + textStatus );
                console.dir(jqXHR);
            });

            request.always(function(){
                console.log('resolvePhoneNumber request completed.')
            });
        }

    };

})();

我注意到并且不喜欢的是我在浏览器和控制台上加载页面我输入了VDSL，它有2种方法应该有。 Map()和resolvePhoneNumber()

然而，当我在执行后初始化地图时：var x = VDSL.Map($('.vdsl-map')) 我再次进入我的控制台并键入VDSL.并猜测现在新Map（）实例的每个属性也在VDSL中。不应存在的示例VDSL.M，VDSL.kmlParser。那些应该只存在于x的范围内。我该怎么办才能做到这一点？

Answer 1

这是因为您要将值/函数分配给引用当前对象的this VDSL。

要实现此目的，您必须创建一个新对象并为其分配这些值/函数。

为了快速解决问题，我会这样做：

Map: function(el, options) {

        el = (el.jquery) ? el.get(0) : el;

        var myObj = {};

        myObj.mapSettings = {
            center:new google.maps.LatLng(37.983716, 23.72931),
            zoom: 10
        };

        $.extend(myObj.mapSettings, options);

        myObj.M = new google.maps.Map(el, this.mapSettings);
        myObj.kmlParser = new geoXML3.parser({map: this.M});

        myObj.drawArea = function(data) {
            this.kmlParser.parseKmlString(data);
        };

        myObj.clearArea = function(i) {
            this.kmlParser.hideDocument(i);
            this.kmlParser.docs.splice(i, 1);
        };

        [...]          

        return myObj;
    }

但请考虑使用构造函数，例如：

function MyObj (el) {
    this.M = new google.maps.Map(el, this.mapSettings);
    this.kmlParser = new geoXML3.parser({map: this.M});
}
MyObj.prototype.drawArea = function(data) {
    this.kmlParser.parseKmlString(data);
}
[...]

// And instanciate it using new
var myObj = new MyObj(el);

更多信息here

Javascript API获取成员方法的属性

1 个答案: