• 自我学习——javascript——常用的对象创建模式


      1.sandbox沙盒模式

        沙盒模式是一种比较常见的模式,YUI就是用这种模式实现的

        沙盒模式特点:

          1.沙盒模式提供了一个可用于模块运行的环境,并且不会对其他模式和个人沙盒造成任何影响

          2.沙盒模式和命名空间模式对比把对单个全局变量的依赖变为对应用程序的全局变量依赖

          3.按需加载需要的模块,代码模块性更强

        sandbox的简单实现:(ps:sandbox只是一个构造函数)

    function Sandbox() {
        //将传入的参数转化为一个数组
        var args = Array.prototype.slice.call(arguments),
            //截取回调函数存为callback
            callback = args.pop(),
            //args代表的是加载模块列表数组(pop会删除数组元素),当args内不是模块字符串的时候,直接返回值
            //args合法时,返回的就是加载模块列表数组
            modules = (args[0] && typeof args[0] === 'string') ? args : args[0],
            //计数器
            i;
    
        // 确保函数被当做构造函数调用(强制使用new)
        if (!(this instanceof Sandbox)) {
            return new Sandbox(modules, callback);
        }
    
        //需要向‘this’添加普通属性(添加默认属性,所有沙盒共用)
        //this指向sandbox实例化的对象
        this.a = 1;
    
        this.b = 2;
    
        //    现在向该核心‘this’对象添加模块
        //    不指定模块名称或指定“*”都表示加载所有模块
        if (!modules || modules === '*') {
            modules = [];
            for (i in Sandbox.modules) {
                if (Sandbox.modules.hasOwnProperty(i)) {
                    modules.push(i);
                }
            }
        }
    
        //初始化需要的模块,传递this为参数
        for (i = 0; i < modules.length; i += 1) {
            Sandbox.modules[modules[i]](this);
        }
        //调用回调函数,参数为this,也就是说回调函数指定的形参就是实例化的sandbox对象
        callback(this);
    }
        //给sandbox添加原型属性
    Sandbox.prototype = {       
        name: "xiaosi",
        version: '1.0',
        getName: function () {
            return this.name;
        }
    }
    
    //设置sandbox的模块,可加载项
    Sandbox.modules = {};
    //设置dom模块,这个模块在sandbox的实例化对象的时候调用,box是实例化的sandbox对象(调用的时候传入this)
    Sandbox.modules.dom = function (box) {
        //设置各自模块的不同的方法和属性
        box.getElement = function () {};
        box.getStyle = function () {};
        box.foo = "bar";
    }
    
    Sandbox.modules.event = function (box) {
        box.attachEvent = function () {};
        box.dettachEvent = function () {};
    }
    
    Sandbox.modules.ajax = function (box) {
        box.makerequest = function () {};
        box.getRequest = function () {};
    }
    View Code

    当我们需要使用沙盒模式的时候只需要

               var xiaosi1= Sandbox('ajax',function(X){
                    window.X=X;                
                });
                console.log( xiaosi1===X);        //true

    这么执行就好了,‘ajax’代表的是我们需要的模块部分,加载之后我们就能使用ajax模块下的方法,并且是独立的

      2.模拟静态成员

        共有静态成员:即构造函数的成员,只要给构造函数添加属性就可以了

        私有静态成员:通过闭包声明的内部成员可以实现

      3.链模式

        链模式是用于类似一个句子一样连起来调用函数方法:

               var obj={
                   value:1,
                   increment:function(){
                       this.value+=1;
                       return this;
                   },
                   add:function(v){
                       this.value+=v;
                       return this;
                   },
                   shout:function(){
                       alert(this.value);
                   }               
               }
               
               obj.increment().add(3).shout();
    View Code

    jquery也大量使用这种模式方便使用

      

  • 相关阅读:
    作业七随笔。。
    Jquery 图片走马灯效果原理
    参与招聘面试工作之简历与仪容篇
    无聊系列 C#中一些常用类型与java的类型对应关系
    关于ASP.NET MVC 中JsonResult返回的日期值问题
    最近参与招聘面试的工作总结
    Unix时间戳转日期时间格式,C#、Java、Python各语言实现!
    MVC 拦截器
    Python参考书籍(转载)
    PEP 8风格指南(转载)
  • 原文地址:https://www.cnblogs.com/yansi/p/3259247.html
Copyright © 2020-2023  润新知