Александр Коротаев
- VK.com Санкт-Петербург
- 10 лет в веб-разработке
- помогаю в SPB-Frontend
- ПК в JSNation
const {screen, box} = require('blessed')
const myScreen = screen({...})
const myBox = box({...})
myScreen.append(box)
myBox.render()
const showBox = () => {
myScreen.append(box)
myBox.render()
}
const hideBox = () => {
myScreen.unmount(box)
myScreen.render()
}
const addChild = (parent, item) => {
parent.append(item)
parent.render()
}
addChild(myScreen, box({...}))
addChild(myScreen, box({...}))
const filter = (parent, filterFn) => {
return parent.children.filter(filterFn)
}
const filtered = filter(myScreen, i => i.checked)
тут все заново пересоздаем
myScreen.render()
ReactFiberReconciler({
appendChild: () => ...
commitMount: () => ...
commitUpdate: () => ...
createInstance: () => ...
removeChild: () => ...
...
})
const createInstance = (type, props) => {
switch (type) {
case 'Container': return new PIXI.Container(props)
case 'Sprite': return new PIXI.Sprite(props)
default: return throw Error()
}
}
const commitUpdate = (
instance, payload, type, lastProps, nextProps
) => {
const diffProps = getDiff(lastProps, nextProps)
Object.assign(instance, diffProps)
}
class MyRendererFactory implements RendererFactory2 {
createRenderer(hostElement: any
type: RendererType2 | null
): Renderer2 {
return new MyRenderer(hostElement)
}
}
class <T>MyRenderer implements Renderer2 {
createElement(name: string): T
addClass(el: T, name: string)
setAttribute(el: T, name: string, value: string)
setProperty(el: T, name: string, value: any)
removeChild(parent: T, oldChild: T)
}
const data: { [p: string]: any } = {}
createElement = (name: string): T => {
return data[generateId()] = new Element()
}
setAttribute = (el: T, name: string, value: string) => {
applyProps(el, name, value)
}
const render$ = new Subject()
applyProps = (el: T, name: string, value: string) => {
el[name] = value
render$.next(el)
}
render$.pipe(debounceTime(100)).subscribe(realRender)
const componentFiles = {...files...}
const VueRenderer = {
install (Vue, options) {
componentFiles.keys().forEach(key => {
Vue.component(key, componentFiles[key])
}
}
}
if (window !== undefined && window.Vue) {
window.Vue.use(VueRenderer)
}
<canvas>
<box left="10" top="10" right="10" bottom="10" >
<text size="20">Привет, HolyJS!<text>
<box>
<button>Далее</button>
</canvas>
const config = {
attributes: true, childList: true,
characterData: true, subtree: true,
}
const observer = new MutationObserver(callback)
observer.observe(element, config)
function(mutations) {
mutations.forEach(mutation => {
if (mutation.type === 'childList')
...
if (mutation.type === 'attributes')
...
Интерфейсов уже нужно было настолько много, что появились отдельные разработчики для них
Ссылка на статью с полным рекламным роликом Action!
(make-instance 'button'
:text "Hello"
:command (lambda ()
(format t "clicked")))
Rectangle {
width: 200
color: "blue"
Image {
source: "pics/logo.png"
}
MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(title: Text('Welcome to Flutter'))
body: Center(child: Text('Hello World'))
)
some View {
List(model.items) { item in
Image(item.image)
VStack(alignment: .leading) {
Text(item.title)
}
