当前位置：网站首页>Composite mode example

Composite mode example

2022-06-10 10:09:00 【Qwe7】

5、 ... and 、 Portfolio model

The combination mode is used to combine multiple parts into a whole . It's like we went to McDonald's and ordered a hamburger 、 Two French fries and a coke . We can think of these things as parts or components , Through combination, the whole package can be output to customers . This is the combination mode

1、 Example of combination mode

For example, we often make some forms in our work , For example, login. 、 register , Or fill in some information, etc , These forms are actually similar , If you make a registration form today , Make a questionnaire form tomorrow , Would you be in trouble , Some feeling of repetitive work . It will be much better to learn the combination mode

notes ： Combination mode belongs to that kind of , The larger the amount of code , The greater the need for repetition （ It's the kind where only a small part of the code is inconsistent between two pages , But you can't use the requirement of component code ）, The more efficient . If it's just a small capacity system , There is basically no need to use composite mode to create forms .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
    
    window.onload = function() {
        //  Combined parasitic inheritance 
        function inheritPrototype(subClass, superClass) {
            function F() {};
            F.prototype = superClass.prototype
            subClass.prototype = new F()
            subClass.prototype.constructor = subClass
        }
        //  Container base class 
        function Container() {
            this.children = []
            this.element = null
        }
        Container.prototype = {
            init: () => {
                throw new Error(' Please rewrite init Method ')
            },
            add: function(child){
                this.children.push(child);
                this.element.appendChild(child.element)
                return this //  Convenient chain call 
            }
        }
        //  Create a form container based on the container base class 
        function CreateForm(id, method, action, parent) {
            Container.call(this)
            this.id = id || ''
            this.method = method || ''
            this.action = action || ''
            this.parent = parent || ''

            this.init()
        }
        inheritPrototype(CreateForm, Container);

        CreateForm.prototype.init = function() {
            this.element = document.createElement('form')
            this.element.id = this.id
            this.element.method = this.method
            this.element.action = this.action
        }

        CreateForm.prototype.show = function() {
            this.parent.appendChild(this.element)
        }

        //  Row container component 
        function CreateLine(className) {
            Container.call(this)
            this.className = className === undefined ? 'form-line' : 'form-line' + className
            this.init()
        }
        inheritPrototype(CreateLine, Container);
        CreateLine.prototype.init = function() {
            this.element = document.createElement('div')
            this.element.className = this.className
        }

        // label //  The lowest leaf node does not need to inherit the methods of the container base class 
        function CreateLabel(text, forName) { 
            this.text = text || ''
            this.forName = forName || ''
            this.init()
        }
        CreateLabel.prototype.init = function() {
            this.element = document.createElement('label')
            this.element.setAttribute('for', this.forName)
            this.element.innerHTML = this.text
        }

        // input
        function CreateInput(type, id, name, defaultValue) {
            this.type = type || ''
            this.id = id || '';
            this.name = name || '';
            this.defaultValue = defaultValue || '';
            this.init()
        }
        CreateInput.prototype.init = function() {
            this.element = document.createElement('input')
            this.element.type = this.type
            this.element.id = this.id
            this.element.name = this.name
            this.element.value = this.defaultValue
        }

        var form = new CreateForm('owner-form', 'GET', '/aaa.html', document.body);

        var userLine = new CreateLine()
                       .add( new CreateLabel(' user name ', 'user') )
                       .add( new CreateInput('text', 'user', 'user')) 
        
        var passwordLine = new CreateLine()
                           .add( new CreateLabel(' password ', 'pwd') )
                           .add( new CreateInput('password', 'pwd', 'pwd')) 
        
        var submitLine = new CreateLine()
                       .add( new CreateLabel('submit', '', '', ' Sign in ') )
        
        form.add(userLine).add(passwordLine).add(submitLine).show()
    }
    // var aa = new Container()

    </script>
    
</head>
<body>
    <!--  Implement forms in a normal way  -->
    <!-- <form action="xxx" method="GET">
        <div class = 'form-line'>
            <label for="user"> user name </label>
            <input type="text" id = "user" name ="user"/>
        </div>
        <div class = 'form-line'>
            <label for="pwd"> user name </label>
            <input type="password" id = "pwd" name ="pwd"/>
        </div>
        <div class = 'form-line'>
            <input type="submit" value=" Sign in "/>
        </div>
    </form>
     -->
</body>
</html>
原网站

版权声明
本文为[Qwe7]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/161/202206100950548740.html

边栏推荐

猜你喜欢

随机推荐