)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

Add Getter Setter to Object

  1. const target = {}
  2.  
  3. let value = null;
  4. Object.defineProperties(target, {
  5.   magic: {
  6.     get() {
  7.       console.log('- getter called::', value);
  8.       return value;
  9.     },
  10.     set(val) {
  11.       document.body.innerHTML += val + '<br>';
  12.       value = val;
  13.     }
  14.   }
  15. });
  16.  
  17. target.magic = 'xyz';
  18. target.magic = 'snippet';
  19. target.magic = 'zone';
  20. target.magic = '- last value';
  21.  
  22. console.log('getting', target.magic);

This snippet shows a way to add getters and setters to a specific key of an existing object. This is powerful for decorating configuration objects with special behaviors. This kind of thing can easily be created with a little more abstraction:

  1. const image = view({
  2.   tag: 'img', 
  3.   src: 'myImage.jpg',
  4.   x: '20%', 
  5.   y: '20%',
  6.   size: '50%'
  7. });
  8. const prev = view({
  9.   tag: 'button',
  10.   x: () => image.x,
  11.   y: () => image.bottom
  12. });
  13. const next = view({
  14.   tag: 'button',
  15.   x: () => image.right - this.width,
  16.   y: () => image.bottom
  17. });
// hacks // javascript // objects // tricks

Proxies and Dynamic Methods

  1. const spec = {
  2.   get(o, key) {
  3.     console.log(key, ':: key');
  4.     return o[key] != null ? 
  5.       o[key] : o[key] = () => {
  6.         document.body.innerHTML += `<div>${key}!</div>`;
  7.         return anyMethod();
  8.       }
  9.   },
  10.   set(o, key, v) {
  11.     o[key] = v;
  12.   }
  13. };
  14.  
  15. const anyMethod = () => new Proxy({}, spec);
  16.  
  17. anyMethod().now()
  18.   .this().is()
  19.   .pretty()
  20.   .cool()
  21.   .confusing()
  22.   .evil()?.or()
  23.   .maybe().powerful()
  24.   ['... what <b>do</b> <i>you</i><br>']()
  25.   .think();

Proxies can be used for all manner of strange “magic”. I can actually see some uses for this, might post in the next few days…

// hacks // javascript // tricks

console.log Hijack

  1. const log = console.log;
  2. const consoleUI = document.body.appendChild(
  3.   document.createElement('div')
  4. );
  5. document.body.style.margin = 0;
  6. Object.assign(consoleUI.style, {
  7.   position: 'fixed',
  8.   bottom: 0,
  9.   width: '100%',
  10.   height: '30%',
  11.   maxHeight: '450px',
  12.   minHeight: '200px',
  13.   background: 'rgb(68, 68, 81)',
  14.   overflow: 'scroll'
  15. });
  16. function consoleRow(str) {
  17.   const row = document.createElement('div');
  18.   consoleUI.prepend(row);
  19.   row.innerText = str;
  20.   Object.assign(row.style, {
  21.     padding: '.5em',
  22.     fontFamily: 'sans-serif',
  23.     color: 'white',
  24.     borderBottom: '1px solid rgba(255, 255, 255, .1)',
  25.     whiteSpace: 'pre-wrap'
  26.   });
  27. }
  28.  
  29. console.log = (...args) => {
  30.   const formatted = args.map(val => {
  31.     return typeof val === 'object' ? 
  32.       JSON.stringify(val, null, 2) : val;
  33.   });
  34.   consoleRow(formatted.join(' '));
  35.   log.apply(console, args);
  36. };
  37.  
  38. // test it out
  39.  
  40. console.log(1, 2, 3, 4);
  41. console.log(new Date());
  42.  
  43. const someObject = {
  44.   test: 123,
  45.   testing: { x: 1, y: 2, z: 3 }
  46. };
  47. console.log(someObject);
  48.  
  49. console.log(3, 2, 1, 0);

I’m thinking about adding a little fake console to the Snippet Zone Quick Editor – just whipped this up as a proof of concept – something like this should work…

// css // hacks // javascript // meta // strings // tricks // ui

Set Multiple Attributes (hack)

  1. // hacky way to set many attributes - just for fun
  2. const el = document.body.appendChild(
  3.   document.createElement('button'));
  4. let i, a;
  5. el.innerHTML = 'hello';
  6. for (i in a = {
  7.   id: 'xyz',
  8.   title: 'hi there...',
  9.   style: `
  10.     background: red; 
  11.     color:white;
  12.     font-size: 1.4em;
  13.   `
  14. }) el.setAttribute(i, a[i]);

Chances are you don’t want to use this unless you are just speed coding, prototyping or playing around

If you do want to set multiple attributes, you’ll likely be doing so in an abstract way with one of the many popular js libs or frameworks.

In my personal projects I usually don’t use DOM related libs or frameworks, so I do this or something like it:

  1. function attrs(el, attrs) {
  2.   for (let i in attrs) {
  3.     el.setAttribute(i, attrs[i])
  4.   }
  5. }

I’ll always miss jQuery, used it for many years and found it extremely intuitive and a huge time saver… The above attrs function is just a crappier version of the jQuery attr method. Read more about that here in the docs.

// dom // hacks // javascript
Newer Posts

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}