Две маленьких функции, способных упростить жизнь

в 8:06, , рубрики: javascript, метки:

Я знаю про Backbone.js и про Knockout.js

Просто иногда хочется чего-то простого.

Всё очень просто и непритязательно:

warp — подписывается на свойства с callback'ом на set.

observe — подменяет свойство функцией с callback'ом на set.

Пример достаточно вставить в пустой HTML файл.

<textarea id = "context" cols = "70" rows = "15"></textarea>
<script type="application/javascript">
try{
  var info = function(str){
    var x = document.getElementById('context');
    if(str !== undefined){ x.value += str + 'n'; }
    else{ x.value = ' '; }
    try{ x.scrollTop = x.scrollHeight;; }catch(e){ }
  }

  var warp = function( obj, prop, setcallback, interval ){
    try{
      var val = obj[prop];
      if( !obj ){ obj = window; }
      if(Object.defineProperty){
        Object.defineProperty( obj, prop, {
           get : function () { try{ return obj[prop]; }catch(e){ return; } }
          , set : function ( value ) {
            try{
              val = value;
              if(setcallback){
                if(interval) { window.setTimeout( function(){
                  setcallback( value, prop, obj );
                }, interval); }else{ setcallback( value, prop, obj ); }
              }
              return val;
            }catch(e){ return; }
          }
        });
      }else{
        if(!interval){ interval = 1000; }
        var intvl = window.setInterval( function(){
          if(obj[prop] !== undefined){
            if( val != obj[prop] ){
              val = obj[ prop ];
              if( setcallback ){ setcallback( val, prop, obj ); }
            }
          }else{ window.clearInterval( intvl ); }
        }, interval);
      }
    }catch(e){ return; }

  }
  var observe = function( value , setcallback ){
    return function( val ){
      try{
        if( val !== undefined ){
          if( val != value ){
            value = val;
            if( setcallback ){ setcallback( value ); }
          }
        }else{ return value; }
      }catch(er){ alert(er); }
    };
  }

  var obj = { prop : 111, observe : observe ( 222,
      function( val ){ info( 'observe : ' + val ); } ) };

  warp( obj, 'prop', function( val ){ info( 'callback for prop : ' + val ) }, 100 );

  var count1 = 0;
  window.setInterval( function(){ count1++; obj.prop = count1; }, 5000 );
  var count2 = 0;
  window.setInterval( function(){ count2++; obj.observe( count2 ); }, 1000 );
  window.setInterval( function(){ info( 'observer lookup : ' + obj.observe() ); } , 2000 );

}catch(e){ alert(e); }
</script>

* This source code was highlighted with Source Code Highlighter.

Автор: wentout

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js