zoukankan      html  css  js  c++  java
  • js 职责链模式

    某个业务需求需要多次更改,或需要后续维护,或代码显得不灵活时,把事情分解成各个小流程。

    例:

    //获取Id
    var getId=function (_domId) {
    return document.getElementById(_domId)
    };
    //添加内容
    var domRender=function (_domArr, _boxId, _alertBoxId) {
    if(_domArr===undefined){return false}
    var _domStr=_domArr.join('');
    if(_boxId!==undefined){domCreat(_domStr,_boxId,_alertBoxId)}
    };
    //创建dom
    var domCreat=function (_domStr,_boxId,_alertBoxId) {
    if(_boxId===undefined){return false}
    getId(_boxId).innerHTML=_domStr;
    if(_alertBoxId!==undefined){domEvent(_alertBoxId)}
    };
    //添加事件
    var domEvent=function (_alertBoxId) {
    getId(_alertBoxId).addEventListener('click',function () {
    alert('1');
    })
    };
    domRender(['<input id="alertBotton" type="button" value="点我一下" />'],'box','alertBotton');
    domRender(['<p id="txt">我想吃饭了,有点饿</p>'], 'box')


    总结:
    //传入的构造函数拥有transmit方法的时侯,就调用该方法
    function Chain(Fn) {
    this.nextRender=Fn||null
    }
    Chain.prototype={
    transmit:function () {
    if(this.nextRender){
    this.nextRender.transmit()
    }
    }
    };
    //事件绑定
    var bindEvent=new Chain({
    transmit:function () {
    console.log('-----bindEvent Start----');

    console.log('添加事件中...');

    console.log('-----bindEvent End----');
    }
    });

    //创建dom
    var createDom=new Chain(bindEvent);
    createDom.transmit=function () {
    console.log('-----creatDom start----');

    console.log('添加dom中...');

    console.log('-----creatDom end----');
    Chain.prototype.transmit.call(this);
    };
    //创建字符串
    var domRender=new Chain(createDom);
    domRender.transmit=function () {
    console.log('-----domRender start----');

    console.log('创建dom字符串中...');

    console.log('-----domRender end----');
    Chain.prototype.transmit.call(this);
    };
    domRender.transmit();
     
  • 相关阅读:
    [代码质量] Git统计本次提交新增代码行数,建议每个评审commit新增行数小于400行
    [Web 安全] WASC 和 OWASP两个web安全方面组织机构介绍
    [web 前端] Npm package.json与package-lock.json文件的作用
    Mac IDEA 插件 lombok
    IDEA 导入新的项目步骤
    IDEA for Mac 快捷键
    Flink --- hello world
    LogisticRegression回归算法 Sklearn 参数详解
    keep going
    在 macOS 上快速新建 txt 文本文件
  • 原文地址:https://www.cnblogs.com/redn/p/8117928.html
Copyright © 2011-2022 走看看