且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何使用封装来实现验证

更新时间:2022-10-14 23:17:13

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

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

< 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>