初识javascript编程模式

最新推荐文章于 2020-08-20 11:28:29 发布
啊哈前端
最新推荐文章于 2020-08-20 11:28:29 发布
阅读量339
点赞数
分类专栏： javascript
javascript 专栏收录该内容
62 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编程模式</title>
    <style>
        body {
            width: 100%;
            height: 1000px;
        }
    </style>
</head>
<body>
这是body的内容！
<script>
  //一、行为隔离
    /*
    * 1.1、内容(html)
    * 1.2、外观(css)
    * 1.3、行为(javascript)
    *1.4、准则：
    *    1.4.1、尽量避免在HTML标签中使用样式类的属性。
    *    1.4.2、不要使用与外观有关的HTML标签，例如<font>
    *    1.4.3、尽量根据语义需要选择标签，而不是去考虑浏览器会如何绘制它们。
    *
    *二、命名空间
    * 2.1、将对象用做命名空间
    *
    *
    *
    *
    * */
    var MYAPP = MYAPP || {};
    MYAPP.event = {};
    MYAPP.event = {
        addListener: function(el,type,fn){
                console.log("自定义监听……");
        },
        remvoeListener: function(el,type,fn){
                console.log("移除自定义监听");
        },
        getEvent: function(){
            console.log("得到事件类型");
        }
    }

    /*
    * 2.2、命名空间中的构造器应用
    *
    * */
    MYAPP.dom = {};
    MYAPP.dom.Element = function(type, prop){
        var tmp = document.createElement(type);
        for(var i in prop){
            tmp.setAttribute(i,prop[i]);
        }
        return tmp;
    }
    /*
    *
    * 三、namespace()方法？？？
    * */
    var app = {};
    app.namespace = function(name){
        var parts = name.split('.');
        var current = app;
        var i = 0,
            len = parts.length;
        for(;i < len; i++){
            if(!current[parts[i]]){
                current[parts[i]] = {};
            }
            current = current[parts[i]];
        }
    };
    app.namespace('dom.style.css');
    console.log(app);
    /*
    * 四、初始化分支
    *  在加载脚本时，在模块初始化的过程中就将部分代码进行分支处理。
    *  利用javascript代码可以动态定义的特性，我们可以为不同的浏览器定制不同的实现方法。
    * */
    //事件绑定
    var branch = {};
    branch.event = {
        addListener: null,
        removeListener: null
    };

    if(typeof window.addEventListener === "function"){
        branch.event.addListener = function(el,type,fn){
            el.addEventListener(type, fn, false);
        }
    }else if(typeof document.attachEvent === 'function'){
        branch.event.addListener = function(el, type ,fn){
            el.attachEvent('on' + type, fn);
        }
    }
    else {
        branch.event.addListener = function(el, type , fn){
            el['on' + type] = fn;
        }
    }

    if(typeof window.removeListener === "function"){

        branch.event.removeListener = function(el, type, fn){
            el.removeEventListener(type,fn,false);
        };

    }
    else if(typeof document.detachEvent){

        branch.event.removeListener = function(el, type, fn){
            el.attachEvent('on' + type, fn);
        };

    }
    else {
            el['on' + type] = null;
    }
/*    window.onload = function(){

        branch.event.addListener(document.body,'click',function(e){
            alert(e.target);
        });

    };*/
    /*
    * 五、延迟定义？？？
    *
    *
    * */
    var i=0;
    var deffer = {};
    deffer.myevent = {
        addListener: function(el, type, fn){
            debugger;
            console.log("我被调用了"+ (++i)+"次");
            if(typeof el.addEventListener === 'function'){
                deffer.myevent.addListener = function(el, type, fn){
                    el.addEventListener(type, fn, false);
                };
            }
            else if (typeof el.attachEvent === 'function'){
                deffer.myevent.addListener = function(el, type, fn){
                    el.attachEvent('on' + type, fn);
                }
            }
            else {
                deffer.myevent.addListener = function(el, type, fn){
                    el['on' + type] = fn;
                }
            }
                deffer.myevent.addListener(el, type, fn);
        }
    };
    deffer.myevent.addListener(document.body,'click',function(e){
        alert(e.target);
    });
    deffer.myevent.addListener(document.body,'click',function(e){
        alert(e.target);
    });

    /*
    * 六、配置对象
    * 该模式适合于有很多个参数的函数或方法。
    * 用单个对象来替代多个参数有以下几点优势：
    *   6.1、不用考虑参数的顺序。
    *   6.2、可以跳过某些参数的设置。
    *   6.3、函数的扩展性更强，可以适应将来的扩展需要。
    *   6.4、代码的可读性更好，因为在代码中我们看到的是配置的属性名称。
    * */
    var butApp = {};
    butApp.dom = {};
    butApp.dom.Button = function(text, conf){
           var type = conf.type||'submit';
           var font = conf.font|| '微软雅黑';
           var button = document.createElement('input');
           button.type = type || 'submit';
           button.value = text;
           return button;
    };
    var config = {
        font: 'Arial, Verdana, sans-serif',
        color: 'white'
    };
    document.body.appendChild(new butApp.dom.Button('这是我创建的按钮',config));
    /*
    * 七、私有属性和方法
    *
    * */
    var private = {};
    private.dom = {};
    private.dom.Button = function(text, conf){
            var styles = {
                font: 'Verdana',
                border: '1px solid black',
                color: 'black',
                background: 'gray'
            };
            function setStyles() {
                for(let i in styles){
                    b.style[i] = conf[i] || styles[i];
                }
            }
            conf = conf || {};
            var b = document.createElement('input');
            b.type = conf['type']||'submit';
            b.value = text;
            setStyles();
            return b;
    }
    /*
    * 八、自执行函数
    * 保证全局空间不被污染，把代码封装在一个匿名函数中并立刻自行调用。
    * 该函数中的所有变量都是局部的，并在函数返回时被销毁(前提是它们不属于闭包)
    * */

    /*
    * 自执行方法也可以用于创建和返回对象
    *
    * */
    var iif = {};
    iif.dom = function(){
        function _private(){
            //...
        }
        return {
            getStyle: function(el, prop){
                 console.log('getStyle');
                 _private();
            },
            setStyle: function(el,prop,value){
                console.log('setStyle');
            }
        }
    }();
    /*
    * 九、链式调用
    *  使用方法返回的实例来调用其他方法，这就是所谓的链式调用。
    * */
    var chain = {};
        chain.dom = {};

    chain.dom.element = function(element){

        var elem = document.createElement(element);

            this.elem = elem;
            this.setText = function(text){

                elem.innerHTML = text;
                return this;
            };

            this.setStyle = function(styles){
                var argNum = arguments.length;
                if(argNum == 2){
                    if(typeof arguments[0] === "string"&&typeof arguments[1]==="string"){
                        elem.style[arguments[0]] = arguments[1];
                    }
                }
                if(typeof styles === "object"){
                    for(let i in styles){
                        elem.style[i] = styles[i];
                    }
                }
                    return this;
            };

    };

    var spans = new chain.dom.element('div');
        spans.setText('hello').setStyle('color', 'red').setStyle('font', 'Verdana');
        document.body.appendChild(spans.elem);
    //十、JSON
 var json = {
        'name':'Stoyan',
      'family': 'Stefanov',
       'books': ['php','java','html5']
    };
    /*

     <?xml version='1.1' encoding = 'iso-8859-1'?>
     <response>
        <name>Stoyan</name>
        <family>Stefanov</family>
        <books>
            <book>php</book>
            <book>java</book>
            <book>html5</book>
        </books>
     </response>
     */
    // var obj = eval('('+ xhr.responseText +')');
     alert(obj.name);
     alert(json.books[2]);
</script>
</body>
</html>