elem-vdom:简单的工具来构建UI,具有最小的API表面积并使用虚拟域

  • m6_292509
    了解作者
  • 3.4MB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-06-14 04:29
    上传日期
元素 简单而愚蠢的lib用来构建UI组件。 它是一个组件库,它具有JavaScript的完整表达能力并支持所有现有JavaScript库,从而促进了功能组合。 elem-vdom只是一个快速而肮脏的实验,可以在修改DOM时避免使用字符串模板,字符串连接和手动更改。 elem-vdom使用ES2015语法编写。 安装 使用npm do: npm install elem-vdom --save 建造 如果要自己构建项目,则需要安装Node 4并执行以下操作: git clone https://github.com/mathieuancelin/elem-vdom.git elem-vdom cd elem-vdom npm install npm run build 例子 如果要运行示例,只需克隆项目即可: git clone https://github.com/mathieuan
elem-vdom-master.zip
内容介绍
elem-vdom ================ Simple and idiotic lib to build UI components. It's a component library promoting functional composition with the full expressiveness of JavaScript and support for all existing JavaScript libraries. elem-vdom is just a quick and dirty experiment to avoid string templates, string concat and manual mutations when modifying the DOM. `elem-vdom` is written in using ES2015 syntax. [![build status][1]][2] [![NPM version][3]][4] [![Dependency status][7]][8] [![Dev Dependency status][11]][12] [![Downloads][9]][10] Install ------- with npm do : ``` npm install elem-vdom --save ``` Build --------- If you want to build the project yourself, you need to install `Node 4` and do the following : ``` git clone https://github.com/mathieuancelin/elem-vdom.git elem-vdom cd elem-vdom npm install npm run build ``` Examples -------- If you want to run examples, just clone the project then : ``` git clone https://github.com/mathieuancelin/elem-vdom.git elem-vdom cd elem-vdom npm install npm start open http://localhost:8080/examples ``` API ---------- * `Elem.el(name, attributes, children)` : Create a representation of an HTML element. Children can be a string/number/boolean, an `Elem.el`, an array of `Elem.el` or a `__asHtml` object. * `Elem.svg(name, attributes, children)` : Create a representation of a simple SVG element * `Elem.render(elem, container)` : render an element to a container in the DOM * `Elem.renderToString(elem)` : render an element as an HTML string * `Elem.renderToJson(elem)` : render an element as JSON object * `Elem.findDOMNode(ref)` : return an actual DOM node based on an element `ref` * `Elem.stylesheet(obj)` : create an extendable set of CSS inline styles * `Elem.nbsp(times)` : creates a `<span>` containing one or more `&nbsp;` * `Elem.text(value)` : creates a `<span>value</span>` * `Elem.predicate(predicate, elem)` : return element if predicate is true or undefined if false. Predicate can be a function A few other APIs are also available but none are mandatory to use : * `Elem.Perf` : performance measurement tools (used in the examples to craft the Perf monitor) * `Elem.Store` : tools to create flux like store (heavily inspired by Redux) * `Elem.Devtools` : tools for DX Dependencies ------------- elem-vdom depends on `virtual-dom`, `babel-runtime` and `error-stack-parser` but these dependencies are bundled in the distribution package. How can I use elem-vdom ? ---------------------------- First imports `Elem.min.js` in your page. Then you will be able to build your first node ```javascript const MyAwesomeNode = Elem.el('h1', 'Hello World!'); Elem.render(MyAwesomeNode, '#container'); ``` Of course, you can build much more complicated nodes ```javascript const node = Elem.el('div', { className: 'col-md-6' }, [ Elem.el('h3', 'Hello World!'), Elem.el('p', { style: { backgroundColor: 'red' } }, "Lorem ipsum ....") ]); Elem.render(node, '#container'); ``` As you construct the node tree with functions and arrays, it is pretty easy to map and filter model objects to render your components easily. Attributes use camel case shaped keys, so something like `backgroundColor` will be rendered as `background-color`. Also, you can notice that the `class` attribute is named `className`. Also, you can provide an object for `className` value with boolean as values. Every key with a false value will not be rendered. ```javascript const shouldDisplayDarkBackground = true; const shouldDisplayBrightBackground = !shouldDisplayDarkBackground; Elem.el('div', { className: { withBackground: true, darkBackground: shouldDisplayDarkBackground, brighBackground: shouldDisplayBrightBackground } }, 'Hello'); ``` will produce ```html <div class="with-background dark-background">Hello</div> ``` As children are just nodes in an array, it is really easy to add or remove elements from your UI. You can also pass undefined elements or functions that can return undefined to not render nodes. If you want to provide a child as HTML value, just pass an object like `{__asHtml: '&nbsp;;-)'}`. You can also attach callback to event on elements like ```javascript function saySomething() { alert("Something !"); } const node = Elem.el('div', { className: 'col-md-6' }, [ Elem.el('h3', 'Hello World!'), Elem.el('button', { className: ['btn', 'btn-primary'], onclick: saySomething }, 'Say something' ), Elem.el('p', { style: { backgroundColor: 'red' } }, "Lorem ipsum ....") ]); Elem.render(node, '#container'); ``` And no, the output _WILL NOT BE_ ```html <div class="col-md-6"> <h3>Hello World</h3> <button class="btn btn-primary" onclick="saySomething">Say Something</button> <p style="background-color: red;">Lorem ipsum ....</p> </div> ``` but the following with an event listener on the root element of the component listening to `click` events on the button. ```html <div class="col-md-6"> <h3>Hello World</h3> <button class="btn btn-primary">Say Something</button> <p style="background-color: red;">Lorem ipsum ....</p> </div> ``` Supported events are ``` wheel scroll touchcancel touchend touchmove touchstart click doubleclick drag dragend dragenter dragexit dragleave dragover dragstart drop change input submit focus blur keydown keypress keyup copy cut paste ``` SVG ------- You can also simply use SVG with elem-vdom, using the dedicated API : ```javascript function svg() { return Elem.svg('svg', { xmlns: Elem.svgNS, version: "1.1", width: "300", height: "200" }, [ Elem.svg('title', 'Simple SVG pict'), Elem.svg('desc', "A rectangle, a line and a circle"), Elem.svg('rect', { width: 100, height: 80, x: 0, y: 70, fill: "green" }), Elem.svg('line', { x1: "5", y1: "5", x2: "250", y2: "95", stroke: "red" }), Elem.svg('circle', { cx: "90", cy: "80", r: "50", fill: "blue" }), Elem.svg('text', { x: "180", y: "60" }, 'A text') ]); } Elem.render(svg, document.getElementById("svg")); ``` I just want functions everywhere man ... ------------------------------ Pretty easy actually, Elem is made for that :-) ```javascript function DateField() { return Elem.el('div', [ Elem.el('h1', moment().format(this.props.format)) ]); } function TimeField() { return Elem.el('div', [ Elem.el('h2', moment().format(this.props.format)) ]); } function GraphicalClock() { const hoursRotation = 'rotate(' + (30 * moment().hours()) + (moment().minutes() / 2) + ')'; const minutesRotation = 'rotate(' + (6 * moment().minutes()) + (moment().seconds() / 10) + ')'; const secondsRotation = 'rotate(' + (6 * moment().seconds()) + ')'; return Elem.el('div', { className: "clock", style: { width: `${this.props.width}px`, height: `${this.props.height}px` } }, [ Elem.svg('svg', { xmlns: Elem.svgNS, version: "1.1", viewBox: "0 0 100 100"}, [ Elem.svg('g', { transform: "translate(50,50)" }, [ Elem.svg('circle', { className: "clock-face", r: "48", fill: 'white', stroke: '#333' }), Elem.svg('line', { className: "hour", y1: "2", y2: "-20", transform: hoursRotation }), Elem.svg('line', { className: "minute", y1: "4", y2: "-30", transform: minutesRotation }), Elem.svg('g', { transform: secondsRotation }, [ Elem.svg('line', { className: "second", y1: "10", y2: "-38" }), Elem.svg('line', { className: "second-counterweight", y1: "10", y2: "2" }) ]) ]) ]) ]); } function Clock() { if (this.context.interval === null) { this.context.interval = setInterval(this.redraw, 1000); } return Elem.el('div', { style: { display: 'flex' } }, [ Elem.el('div', { style: { display: 'flex', flexDirection: 'column' } }, [ Elem.el(DateField, { format: 'DD/MM/YYYY' }), Elem.el(TimeField, { format: 'HH:mm:ss' }) ]), Elem.el(GraphicalClock, { width: 120, height: 120 }) ]); } Elem.render(Clock, container); ``` The `Elem.render` context ------------------ Stateless functions
评论
    相关推荐
    • introduction-to-git:https
      谨慎使用 Git 丸山新平 介绍 本文档旨在以通俗易懂的方式解释 Git 的基本概念和用法。通过阅读本书 易于使用的 Git 你可以使用一个分支 多人可以一起工作 如果你有任何问题,你可以用谷歌找出“我应该查什么词” ...
    • git 教材 progit
      git资源,不错的git入门教程.适合初学者使用
    • git-kurs:na podstawie https
      git-kurs:na podstawie https
    • TVDbLib:httpsGit 克隆
      电视数据库 Git 克隆
    • git-mdp:mdp (https
      git-mdp 用于介绍 git 的甲板
    • Git环境搭建
      NULL 博文链接:https://fangguanhong.iteye.com/blog/2193321
    • Git学习笔记
      NULL 博文链接:https://shadowred.iteye.com/blog/2275226
    • git GUI使用
      NULL 博文链接:https://weiliuhong1.iteye.com/blog/2033484
    • git学习
      NULL 博文链接:https://yinmaolin1.iteye.com/blog/2198059
    • Git 中文教程
      NULL 博文链接:https://lfcaolibin.iteye.com/blog/1111704