如何使用封装来实现验证 [英] How to implement validation with encapsulation

查看:151
本文介绍了如何使用封装来实现验证的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

请首先查看原始问题:
使用getter封装JavaScript和二传手



@ jacob谢谢Jacob!这是很好的信息。我不太清楚该解决方案的工作原理,但将方法放入返回子句中效果很好。这是我工作的类定义:

pre $ function vehicle(thewheels,thecolour){
var color = thecolour;
var wheels = thewheels> 4? '4':轮子;
return {
getcolour:function(){
return color;
},
setcolour:function(value){
color = value;
},
getwheels:function(){
return wheels;
},
setwheels:function(value){
wheels = value;
}
}
}

构造函数(可能是更复杂的代码)来处理输入数据。我可以将相同的代码放入'setwheels'方法中,以完全保留进入的数据;但肯定必须有一个简单的方式来管理输入数据,而不必复制代码?



我试着将这个新函数放入类定义中:

  setwheels:function(value){
wheels = validwheels(value);
},
validwheels:function(wheelsin){
return wheelsin> 4? 4:轮子;
}

但构造函数看不到'validwheels'函数。有没有什么方法可以在这个类中重新使用验证代码来实例化和设置?

解决方案

这是一个完整的解决方案展示封装和验证。

 < button onclick =testOOP()>请点击@Jacob和@evolutionxbox ME< /按钮> 

< script>
//<! -
function testOOP(){
var v1 = new vehicle(40,red); //在实例化过程中设置新值
var v2 =新车(2,blue);
showVehDetails(v1);
showVehDetails(v2);
v2.wheels = 10; //验证输入限制为4
showVehDetails(v2);
v2.colour =orange;
showVehDetails(v2);


function showVehDetails(v){
document.write(This vehicle is+ v.colour +and has+ v.wheels +wheels。<峰; br />中);
}

// *************'vehicle' - 类定义**************
function vehicle(thewheels,thecolour){
var color = thecolour;
var wheels = validWheels(thewheels);
函数validWheels(wheelsin){
return wheelsin> 4? 4:轮子;
}
return {
get color(){
return color;
},
设置颜色(值){
color = value;
},
获得轮子(){
返回轮子;
},
set wheels(value){
wheels = validWheels(value);
}
}
}
// ************末级定义************** **********
// - >
< / script>


Please first see original question: Encapsulation in JavaScript with getter and setter

@Jacob Thanks Jacob! That is great information.I am not quite sure how that solution works but placing the methods into that return clause works well. Here is my working Class definition:

function vehicle(thewheels, thecolour){
    var colour=thecolour;
    var wheels=thewheels > 4 ? '4' : thewheels;
    return {
            getcolour: function() {
            return colour; 
        },
            setcolour: function(value) { 
            colour = value;
        },
            getwheels: function() {
            return wheels; 
        },
            setwheels: function(value) { 
            wheels = value;
        }
    }
} 

I have put some code into the constructor (presumably it could be more complex code) to process input data. I could place the same code into the 'setwheels' method in order to fully 'gate-keep' the data coming in; BUT surely there must be a simpler way of managing the input data without having to duplicate that code?

I tried placing this new function into the Class definition:

setwheels: function(value) { 
    wheels = validwheels(value);
},
validwheels: function(wheelsin){
    return wheelsin > 4 ? 4 : wheelsin;
}

But the constructor could not see that 'validwheels' function. Is there any way of re-using validation code for instantiation and 'setting' in this class?

解决方案

Here is a complete solution demonstrating encapsulation and validation. Thanks go to @Jacob and @evolutionxbox for their great assistance!

     <button onclick="testOOP()">Click me</button>

     <script>
       //<!-- 
       function testOOP(){
        var v1 = new vehicle(40, "red"); //setting new values during instantiation
        var v2 = new vehicle(2, "blue");
        showVehDetails(v1);
        showVehDetails(v2);
        v2.wheels=10;           //validated input restricted to 4
        showVehDetails(v2);
        v2.colour="orange";     
        showVehDetails(v2);
        }

        function showVehDetails(v){
            document.write("This vehicle is " + v.colour + " and has " + v.wheels + " wheels.<br/>");
        }

        //*************'vehicle' - Class definition**************
function vehicle(thewheels, thecolour){
    var colour=thecolour;
    var wheels=validWheels(thewheels);
    function validWheels(wheelsin){
        return wheelsin > 4 ? 4 : wheelsin;
    }
    return {
            get colour() {
            return colour; 
        },
            set colour(value) { 
            colour = value;
        },
            get wheels() {
            return wheels; 
        },
            set wheels(value) { 
            wheels = validWheels(value);
        }
    }
} 
        //************End class definition************************
       //-->
     </script>

这篇关于如何使用封装来实现验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆