Pass a Class
function callMethods(evt) {
const e = new evt
e.one()
e.two()
}
callMethods(class {
one() {
console.log('one')
}
two() {
console.log('two')
}
})
This is so tempting for something I want to do… but too strange to use probably… maybe…
function callMethods(evt) {
const e = new evt
e.one()
e.two()
}
callMethods(class {
one() {
console.log('one')
}
two() {
console.log('two')
}
})
This is so tempting for something I want to do… but too strange to use probably… maybe…
<style>*{ font-family: sans-serif; margin-bottoM: .5em;}</style>
<h3>TODO</h3>
<ul id=todos></ul>
<label>What needs to be done?<br>
<input id=todo onchange="newTodo()"/><br>
</label>
<button id=add onclick="newTodo()">Add #1</button>
<script>
let count = 1
function newTodo() {
if (todo.value.length > 0) {
todos.innerHTML += `<li>${todo.value}</li>`
todo.value = ''
add.innerText = `Add #${++count}`
}
}
</script>
I don’t really like React… Don’t get me wrong, I don’t mind it and I even kind of like using it – there’s something fun about it… But it’s surprising to me that UI work is still so bulky… I think React and most other UI libraries are overly complex… Every now and then I do evil style vanilla js versions of the React homepage examples as a sort of rebellion 😀 This is the React version of the above snippet:
class TodoApp extends React.Component {
constructor(props) {
super(props);
this.state = { items: [], text: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
render() {
return (
<div>
<h3>TODO</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">
What needs to be done?
</label>
<input
id="new-todo"
onChange={this.handleChange}
value={this.state.text}
/>
<button>
Add #{this.state.items.length + 1}
</button>
</form>
</div>
);
}
handleChange(e) {
this.setState({ text: e.target.value });
}
handleSubmit(e) {
e.preventDefault();
if (this.state.text.length === 0) {
return;
}
const newItem = {
text: this.state.text,
id: Date.now()
};
this.setState(state => ({
items: state.items.concat(newItem),
text: ''
}));
}
}
class TodoList extends React.Component {
render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
}
root.render(<TodoApp />);
// read through the comments of this snippet...
function dist1(x1, y1, x2, y2) {
const dx = x1 - x2
const dy = y1 - y2
return Math.sqrt(dx**2 + dy**2)
}
function dist2({x1, y1, x2, y2}) {
const dx = x1 - x2
const dy = y1 - y2
return Math.sqrt(dx**2 + dy**2)
}
// What's the difference here... well
dist1(50, 50, 100, 100)
// vs
dist2({ x1: 50, y1: 50, x2: 100, y2: 100 })
// so what?
// With `dist2` the order of the arguments doesn't matter
// and the arguments are named now as a result of being keys
// in an object
// How many times have you changed a core function or method as you're
// working on a project?
// Let's see another example:
// circle(100, 200, 300, 'red', 'blue', 0, 0)
// Can you guess what those arguments are? It's not really a big deal
// and editors help with this, typescript helps with this... but what about:
circle({
x: 10,
y: 110,
radius: 120,
fill: 'red',
stroke: 'blue',
velocityX: 0,
velocitY: 0
})
// how about...
circle({ radius: 50, fill: 'blue' })
// or...
circle({ stroke: 'green', x: 40, velocityX: 1 })
// etc...
circle({
radius: 50,
stroke: 'black', x: 200,
fill: 'teal',
velocityY: 1, velocityX: -1 })
// In combination with default arguments we end up with a very easy pattern for functions/methods
// with a complex argument signature. gsap (aka TweenLite/TweenMax) has used this pattern for many
// years. I've seen similar things in many languages...
// How does the circle function look?
function circle({
x = 0, y = 0,
radius = 30,
fill = 'black',
stroke = 'transparent',
velocityX = 0, velocityY = 0}) {
const diam = radius * 2;
const circle = document.body.appendChild(
Object.assign(
document.createElement('div'),
{ style: `
position: absolute;
left: ${x}px;
top: ${y}px;
width: ${diam}px;
height: ${diam}px;
background: ${fill};
border: 3px solid ${stroke};
border-radius: 100%;
`
}
)
)
if (velocityX != 0 || velocityY != 0) {
setInterval(() => {
x += velocityX
y += velocityY
circle.style.left = `${x}px`
circle.style.top = `${y}px`
}, 16)
}
return circle
}
// here is a golfed distance function - for no reason
d=(a,b,c,d,e=a-c,f=b-d)=>Math.sqrt(e*e+f*f)
console.log(
dist1(0, 0, 140, 140) ===
d(0, 0, 140, 140)
)
with (self) with (Math){ typeof self
with (window) with (sin) if (true) self }
This could be dangerous. Bad js poetry:
With self With Math Type of self With window With sin If true self
:/