JavaScript 开闭原则OCP

转载

mob604757001c56 2013-08-30 11:33:00 ©著作权

文章标签 html javascript i++ jquery xml 文章分类 其他其它

JavaScript 开闭原则OCP
https://blog.51cto.com/u_15127657/4221865

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" >
        //不同的question内相同的操作
        //不同的question只覆盖my.renderInput
        //被不同的具体question类调用
        function questionCreator(spec, my) {
            var that = {};

            my = my || {};
            my.label = spec.label;

            my.renderInput = function () {
                throw "not implemented";
            };

            that.render = function (target) {
                var questionWrapper = document.createElement('div');
                questionWrapper.className = 'question';

                var questionLabel = document.createElement('div');
                questionLabel.className = 'question-label';
                var label = document.createTextNode(spec.label);
                questionLabel.appendChild(label);

                var answer = my.renderInput();

                questionWrapper.appendChild(questionLabel);
                questionWrapper.appendChild(answer);
                return questionWrapper;
            };

            return that;
        }
        //下拉框类
        function choiceQuestionCreator(spec) {

            var my = {},
            that = questionCreator(spec, my);

            my.renderInput = function () {
                var input = document.createElement('select');
                var len = spec.choices.length;
                for (var i = 0; i < len; i++) {
                    var option = document.createElement('option');
                    option.text = spec.choices[i];
                    option.value = spec.choices[i];
                    input.appendChild(option);
                }

                return input;
            };

            return that;
        }
        //输入文本框类
        function inputQuestionCreator(spec) {

            var my = {},
            that = questionCreator(spec, my);

            my.renderInput = function () {
                var input = document.createElement('input');
                input.type = 'text';
                return input;
            };

            return that;
        }

        var view = {
            render: function (target, questions) {
                for (var i = 0; i < questions.length; i++) {
                    target.appendChild(questions[i].render());
                }
            }
        };
        //这里的questions是一个方法数组 
        //其实这个方法组里面返回的也是对象
        var questions = [choiceQuestionCreator({
            label: 'Have you used tobacco products within the last 30 days?',
            choices: ['Yes', 'No']
        }), inputQuestionCreator({
            label: 'What medications are you currently using?'
        })];
        $(function () {
            var questionRegion = document.getElementById('questions');

            view.render(questionRegion, questions);
        });
    </script>
</head>
<body>
问题：
<div id="questions"></div>
</body>
</html>