• 职责链模式+Aop+中间件模式


    最最最垃圾新手模式

     var order = function( orderType, pay, stock ){
            if ( orderType === 1 ){ // 500 元定金购买模式
                if ( pay === true ){ // 已支付定金
                    console.log( '500 元定金预购, 得到 100 优惠券' );
                }else{ // 未支付定金,降级到普通购买模式
                    if ( stock > 0 ){ // 用于普通购买的手机还有库存
                        console.log( '普通购买, 无优惠券' );
                    }else{
                        console.log( '手机库存不足' );
                    }
                }
            }
            else if ( orderType === 2 ){ // 200 元定金购买模式
                if ( pay === true ){
                    console.log( '200 元定金预购, 得到 50 优惠券' );
                }else{
                    if ( stock > 0 ){
                        console.log( '普通购买, 无优惠券' );
                    }else{
                        console.log( '手机库存不足' );
                    }
                }
            }
            else if ( orderType === 3 ){
                if ( stock > 0 ){
                    console.log( '普通购买, 无优惠券' );
                }else{
                    console.log( '手机库存不足' );
                }
            }
        };
        order( 1 , true, 500); // 输出: 500 元定金预购, 得到 100 优惠券
    View Code

    普通职责链模式

     let order500 = function (orderType, pay, stoke) {
            if(orderType === 1 && pay === true){
                console.log( '500 元定金预购,得到 100 优惠券' );
            }else {
                return 'nextSuccessor'
            }
        }
        let order200 = function (orderType, pay, stoke) {
            if(orderType === 2 && pay === true){
                console.log( '200 元定金预购,得到 50 优惠券' );
            }else {
                return 'nextSuccessor'
            }
        }
        let orderNormal = function( orderType, pay, stock ){
            if ( stock > 0 ){
                console.log( '普通购买,无优惠券' );
            }else{
                console.log( '手机库存不足' );
            }
        };
    
        let Chain = function (fn) {
            this.fn = fn;
            this.successor = null;
        }
        Chain.prototype.setNextSuccessor = function( successor ){
            return this.successor = successor;
        };
       /* Chain.prototype.next= function(){ // 含有异步任务时 需要手动调用next
            return this.successor && this.successor.passRequest.apply( this.successor, arguments );
        };*/
        Chain.prototype.passRequest = function(){
            var ret = this.fn.apply( this, arguments );
            if ( ret === 'nextSuccessor' ){
                return this.successor && this.successor.passRequest.apply( this.successor, arguments );
            }
            return ret;
        };
    
        var chainOrder500 = new Chain( order500 );
        var chainOrder200 = new Chain( order200 );
        var chainOrderNormal = new Chain( orderNormal );
    
        chainOrder500.setNextSuccessor( chainOrder200 );
        chainOrder200.setNextSuccessor( chainOrderNormal );
    
        chainOrder500.passRequest( 1, true, 500 ); // 输出: 500 元定金预购,得到 100 优惠券
        chainOrder500.passRequest( 2, true, 500 ); // 输出: 200 元定金预购,得到 50 优惠券
        chainOrder500.passRequest( 3, true, 500 ); // 输出:普通购买,无优惠券
        chainOrder500.passRequest( 1, false, 0 ); // 输出:手机库存不足
    View Code

    含有异步任务的职责链

    var fn1 = new Chain(function(){
    console.log( 1 );
    return 'nextSuccessor';
    });
    var fn2 = new Chain(function(){
    console.log( 2 );
    var self = this;
    setTimeout(function(){
    self.next();
    }, 1000 );
    });
    var fn3 = new Chain(function(){
    console.log( 3 );
    });
    fn1.setNextSuccessor( fn2 ).setNextSuccessor( fn3 );
    fn1.passRequest();
    View Code

    AOP 实现的职责链

        Function.prototype.after = function( fn ){
            var self = this;
            return function(){
                var ret = self.apply( this, arguments );
                if ( ret === 'nextSuccessor' ){
                    return fn.apply( this, arguments );
                }
                return ret;
            }
        };
        var order = order500.after(order200).after(orderNormal);
        order( 1, true, 500 ); // 输出: 500 元定金预购,得到 100 优惠券
        order( 2, true, 500 ); // 输出: 200 元定金预购,得到 50 优惠券
        order( 1, false, 500 ); // 输出:普通购买,无优惠券
    View Code

    中间件模式  

    function Middleware(){
      this.cache = [];
      this.options = null;//缓存options
    }
    
    Middleware.prototype.use = function(fn){
      if(typeof fn !== 'function'){
        throw 'middleware must be a function';
      }
      this.cache.push(fn);
      return this;
    }
    
    Middleware.prototype.next = function(fn){
    
      if(this.middlewares && this.middlewares.length > 0 ){
        var ware = this.middlewares.shift();
        ware.call(this, this.options, this.next.bind(this));//传入options与next
      }
    }
    /**
    * @param options 数据的入口
    * @param next 
    */
    Middleware.prototype.handleRequest = function(options){
      this.middlewares = this.cache.map(function(fn){//复制
        return fn;
      });
      this.options = options;//缓存数据
      this.next();
    }
    View Code
    function validate(options, next){
      console.log('validate', options.data);
      next();//通过验证
    }
    function send(options, next){
       setTimeout(function(){//模拟异步
         console.log('send', options.data);
         options.url = 'www.baidu.com';//设置跳转的url
         next();
        }, 100);
    }
    function goTo(options){
       console.log('goTo', options.url);
    }
    
    var submitForm = new Middleware();
    submitForm.use(validate).use(send).use(goBack);
    submitForm.handleRequest({data:{name:'xiaoxiong', age: 20}});
    //结果:
    // validate Object {name: "xiaoxiong", age: 20}
    //
    // send Object {name: "xiaoxiong", age: 20}
    // goTo www.baidu.com
    
    
    submitForm.handleRequest({data:{name:'xiaohong', age: 21}});//触发第二次,改变数据内容
    
    //结果:
    // validate Object {name: "xiaohong", age: 21}
    //
    // send Object {name: "xiaohong", age: 21}
    // goTo www.baidu.com
    View Code
  • 相关阅读:
    将单向链表按某值划分为左边小、中间相等、右边大的形式
    数组中的数字按某值划分为左边小、中间相等、右边大的形式
    Kendo UI for jQuery管理数据有妙招!轻松将数据存储为JSON
    DevExpress Xamarin.Forms v21.1
    界面控件Telerik UI for WinForm初级教程
    WPF应用程序的主题颜色如何修改?DevExpress调色板工具很好用
    DevExpress WinForm模板库可快速创建Windows样式的应用程序界面
    Kendo UI for jQuery数据管理使用教程:Spreadsheet
    开发框架DevExtreme入门级教程
    跨平台.NET应用程序界面开发新亮点
  • 原文地址:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/6813245.html
Copyright © 2020-2023  润新知