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();
     
  • 相关阅读:
    windows的80端口被占用时的处理方法
    Ansible自动化运维工具安装与使用实例
    Tomcat的测试网页换成自己项目首页
    LeetCode 219. Contains Duplicate II
    LeetCode Contest 177
    LeetCode 217. Contains Duplicate
    LeetCode 216. Combination Sum III(DFS)
    LeetCode 215. Kth Largest Element in an Array(排序)
    Contest 176 LeetCode 1354. Construct Target Array With Multiple Sums(优先队列,递推)
    Contest 176
  • 原文地址:https://www.cnblogs.com/redn/p/8117928.html
Copyright © 2011-2022 走看看