• Hyperapp 168 0 1 发布
    简介

    Hyperapp是一个用于开发Web应用程序前端(主要是View部分)的现代JavaScript库,它的大小仅有1.3kB,并且非常容易上手。

    Hyperapp的架构借鉴了React、Redux以及Elm,支持JSX同时也提供了一些JSX的替代方案,比如h函数(Hyperapp的首字母)、hyperapp/html、hyperx、t7。

    Hyperapp的初衷就是以尽量少的代码做尽量多的事。但Hyperapp虽小,仍然包含了状态管理、虚拟DOM引擎,所有这些都是独立实现,不依赖于任何第三方库的。

    导入使用CDN不指定版本 <script src="https://unpkg.com/hyperapp"></script> 指定版本 <script src="https://unpkg.com/hyperapp@1.0.1"></script> HelloWord

    Hyperapp可以使用JSX表示法,以及基于ES6字符串模板的Hyperx表示法。下面两种写法的代码都准备好了,您可以根据自己的喜好自由选用。

    使用JSX<body> <script src="https://unpkg.com/hyperapp@1.0.1"></script> <script src="https://unpkg.com/babel-standalone"></script> <script type="text/babel"> const { h, app } = hyperapp /** @jsx h */ const state = { greeting: "Hello,world" } const actions = {} const view = state => <h1 id="title">{state.greeting}</h1> app(state, actions, view, document.body) </script> </body> 使用Hyperx<body> <script src="https://unpkg.com/hyperapp@1.0.1"></script> <script src="https://wzrd.in/standalone/hyperx"></script> <script> const { h, app } = hyperapp const html = hyperx(h) const state = { greeting: "Hello,world" } const actions = {} const view = state => html`<h1 id="title">${state.greeting}</h1>` app(state, actions, view, document.body) </script> </body>

    浏览器中会发生什么呢?

    浏览器通过CDN下载了Hyperx和JSX,编译并渲染<script>部分,最终在页面上显示了“hello,world”。

  • Hyperapp 79 0 1 发布

    Web应用程序的开发环境包括三个要素:

    Package Manager(例如:npm,yarn)Complier(例如:babel,Buble)Bundler(例如:Webpack, Browserify, Rollup)

    之所以需要这些,是因为要编译用JSX/ Hyperx编写的源代码,当编译时,它成为生成虚拟DOM的函数,称为Hyperapp的h函数。

    编译前(JSX/Hyperx)

    <h1 id="test">Hi.</h1>

    编译后

    h("h1", { id: "test" }, "Hi.")

    JSX开发环境

    JSX采用与XML同样的记法,通过JSX您可以将HTML(模板)和JavaScript(处理)混合在一个文件中。
    要使用JSX,您需要如上所述进行编译。 您必须将JSX转换为h函数,将其打包为一个js文件,然后进行发布。

    如果是使用Browserify

    安装必要的模块

    npm i -S hyperapp npm i -D babel-plugin-transform-react-jsx babel-preset-es2015 babelify browserify bundle-collapser uglifyify uglifyjs

    准备.babelrc文件

    { "presets": ["es2015"], "plugins": [ [ "transform-react-jsx", { "pragma": "h" } ] ] }

    编译打包

    browserify \ -t babelify \ -g uglifyify \ -p bundle-collapser/plugin index.js | uglifyjs > bundle.js

    如果是使用Webpack

    安装必要的模块

    npm i -S hyperapp npm i -D babel-plugin-transform-react-jsx babel-preset-es2015 babelify browserify bundle-collapser uglifyify uglifyjs

    准备.babelrc文件

    { "presets": ["es2015"], "plugins": [ [ "transform-react-jsx", { "pragma": "h" } ] ] }

    准备webpack.config.js文件

    module.exports = { entry: "./index.js", output: { filename: "bundle.js" }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] } }

    编译打包

    webpack -p

    如果是使用Rollup

    安装必要的模块

    npm i -S hyperapp npm i -D rollup rollup-plugin-babel rollup-plugin-node-resolve rollup-plugin-uglify babel-preset-es2015-rollup babel-plugin-transform-react-jsx

    准备rollup.config.js文件

    import babel from "rollup-plugin-babel" import resolve from "rollup-plugin-node-resolve" import uglify from "rollup-plugin-uglify" export default { plugins: [ babel({ babelrc: false, presets: ["es2015-rollup"], plugins: [["transform-react-jsx", { pragma: "h" }]] }), resolve({ jsnext: true }), uglify() ] }

    编译打包

    rollup -cf iife -i index.js -o bundle.js

    Hyperx开发環境

    编辑中(基本与JSX开发环境相似,仅一些地方安装的模块有些不同)

  • Hyperapp 80 0 1 发布

    在这里,我们将结合示例介绍如何使用Hyperapp的模块和函数。

    Hyperapp主要提供了两大功能:

    h函数
    生成虚拟DOM的函数app函数
    使用Hyperapp执行应用程序的功能h()

    返回虚拟DOM的函数。 这里的虚拟DOM指的是以JavaScript对象表现的嵌套DOM树。

    name {String}
    「div」等HTML里的标签名props {Object}
    插入元素的属性值children {String | Array}
    子元素 h("a", { href: "#" }, "next page") // return object // { // name: 'a', // props: { // href: '#' // }, // children: 'next page' // } app()

    启动Hyperapp应用程序

    app(state, actions, view, container

    state

    管理应用程序状态的对象。 必需是一个纯JS对象。

    view

    返回虚拟DOM的函数。 以state和actions为参数

    const state = { on: true } const actions = { toggle: () => state => ({ on: !state.on }) } const view = (state, actions) => ( <button onclick={actions.toggle}>{state.on.toString()}</button> ) app(state, actions, view, document.body)

    actions

    定义应用程序行为的函数集合。 actions通常用于更新state。 其返回值通常是一个新的state

    const actions = { setValue: value => ({ value }), addValue: value => state => ({ value: state.value + value }), addValueLater: value => (state, actions) => { setTimeout(() => { actions.addValue(value) }, 1000) } } data
    actions处理(模型更新)所需的数据state
    当前stateactions
    应用程序的原始actions const state = { count: 0 } const actions = { sub: () => state => state - 1, add: () => state => state + 1 } const view = (state, actions) => ( <div> <h1>{state.count}</h1> <button onclick={actions.sub} disabled={state.count <= 0}> - </button> <button onclick={actions.add}>+</button> </div> ) app(state, actions, view, document.body)

    全局事件

    app函数返回的对象包含关联state的原始actions。 与传递给view的ctions相同,调用ctions时state会被更新。

    const state = { x: 0, y: 0 } const actions = { move: () => ({ x, y }) => ({ x, y }) } const view = state => <h1>{state.x + ", " + state.y}</h1> const MyApp = app(state, actions, view, document.body) addEventListener("mousemove", e => MyApp.move({ x: e.clientX, y: e.clientY }) )

    生命周期方法

    虚拟DOM提供了一些生命周期相关的事件

    oncreate
    Elment被加进DOMonupdate
    Element被更新onremove
    在Element从DOM中移除ondestroy
    Element被释放 const node = document.createElement("div") const editor = CodeMirror(node) const Editor = options => { const setOptions = options => Object.keys(options).forEach(key => editor.setOption(key, options[key])) const oncreate = elm => { setOptions(options) elm.appendChild(node) } const onupdate = _ => setOptions(options) return <div oncreate={oncreate} onupdate={onupdate} /> }

热门总结

  • Hyperapp 168 0 1 发布
    简介

    Hyperapp是一个用于开发Web应用程序前端(主要是View部分)的现代JavaScript库,它的大小仅有1.3kB,并且非常容易上手。

    Hyperapp的架构借鉴了React、Redux以及Elm,支持JSX同时也提供了一些JSX的替代方案,比如h函数(Hyperapp的首字母)、hyperapp/html、hyperx、t7。

    Hyperapp的初衷就是以尽量少的代码做尽量多的事。但Hyperapp虽小,仍然包含了状态管理、虚拟DOM引擎,所有这些都是独立实现,不依赖于任何第三方库的。

    导入使用CDN不指定版本 <script src="https://unpkg.com/hyperapp"></script> 指定版本 <script src="https://unpkg.com/hyperapp@1.0.1"></script> HelloWord

    Hyperapp可以使用JSX表示法,以及基于ES6字符串模板的Hyperx表示法。下面两种写法的代码都准备好了,您可以根据自己的喜好自由选用。

    使用JSX<body> <script src="https://unpkg.com/hyperapp@1.0.1"></script> <script src="https://unpkg.com/babel-standalone"></script> <script type="text/babel"> const { h, app } = hyperapp /** @jsx h */ const state = { greeting: "Hello,world" } const actions = {} const view = state => <h1 id="title">{state.greeting}</h1> app(state, actions, view, document.body) </script> </body> 使用Hyperx<body> <script src="https://unpkg.com/hyperapp@1.0.1"></script> <script src="https://wzrd.in/standalone/hyperx"></script> <script> const { h, app } = hyperapp const html = hyperx(h) const state = { greeting: "Hello,world" } const actions = {} const view = state => html`<h1 id="title">${state.greeting}</h1>` app(state, actions, view, document.body) </script> </body>

    浏览器中会发生什么呢?

    浏览器通过CDN下载了Hyperx和JSX,编译并渲染<script>部分,最终在页面上显示了“hello,world”。

  • Hyperapp 80 0 1 发布

    在这里,我们将结合示例介绍如何使用Hyperapp的模块和函数。

    Hyperapp主要提供了两大功能:

    h函数
    生成虚拟DOM的函数app函数
    使用Hyperapp执行应用程序的功能h()

    返回虚拟DOM的函数。 这里的虚拟DOM指的是以JavaScript对象表现的嵌套DOM树。

    name {String}
    「div」等HTML里的标签名props {Object}
    插入元素的属性值children {String | Array}
    子元素 h("a", { href: "#" }, "next page") // return object // { // name: 'a', // props: { // href: '#' // }, // children: 'next page' // } app()

    启动Hyperapp应用程序

    app(state, actions, view, container

    state

    管理应用程序状态的对象。 必需是一个纯JS对象。

    view

    返回虚拟DOM的函数。 以state和actions为参数

    const state = { on: true } const actions = { toggle: () => state => ({ on: !state.on }) } const view = (state, actions) => ( <button onclick={actions.toggle}>{state.on.toString()}</button> ) app(state, actions, view, document.body)

    actions

    定义应用程序行为的函数集合。 actions通常用于更新state。 其返回值通常是一个新的state

    const actions = { setValue: value => ({ value }), addValue: value => state => ({ value: state.value + value }), addValueLater: value => (state, actions) => { setTimeout(() => { actions.addValue(value) }, 1000) } } data
    actions处理(模型更新)所需的数据state
    当前stateactions
    应用程序的原始actions const state = { count: 0 } const actions = { sub: () => state => state - 1, add: () => state => state + 1 } const view = (state, actions) => ( <div> <h1>{state.count}</h1> <button onclick={actions.sub} disabled={state.count <= 0}> - </button> <button onclick={actions.add}>+</button> </div> ) app(state, actions, view, document.body)

    全局事件

    app函数返回的对象包含关联state的原始actions。 与传递给view的ctions相同,调用ctions时state会被更新。

    const state = { x: 0, y: 0 } const actions = { move: () => ({ x, y }) => ({ x, y }) } const view = state => <h1>{state.x + ", " + state.y}</h1> const MyApp = app(state, actions, view, document.body) addEventListener("mousemove", e => MyApp.move({ x: e.clientX, y: e.clientY }) )

    生命周期方法

    虚拟DOM提供了一些生命周期相关的事件

    oncreate
    Elment被加进DOMonupdate
    Element被更新onremove
    在Element从DOM中移除ondestroy
    Element被释放 const node = document.createElement("div") const editor = CodeMirror(node) const Editor = options => { const setOptions = options => Object.keys(options).forEach(key => editor.setOption(key, options[key])) const oncreate = elm => { setOptions(options) elm.appendChild(node) } const onupdate = _ => setOptions(options) return <div oncreate={oncreate} onupdate={onupdate} /> }
  • Hyperapp 79 0 1 发布

    Web应用程序的开发环境包括三个要素:

    Package Manager(例如:npm,yarn)Complier(例如:babel,Buble)Bundler(例如:Webpack, Browserify, Rollup)

    之所以需要这些,是因为要编译用JSX/ Hyperx编写的源代码,当编译时,它成为生成虚拟DOM的函数,称为Hyperapp的h函数。

    编译前(JSX/Hyperx)

    <h1 id="test">Hi.</h1>

    编译后

    h("h1", { id: "test" }, "Hi.")

    JSX开发环境

    JSX采用与XML同样的记法,通过JSX您可以将HTML(模板)和JavaScript(处理)混合在一个文件中。
    要使用JSX,您需要如上所述进行编译。 您必须将JSX转换为h函数,将其打包为一个js文件,然后进行发布。

    如果是使用Browserify

    安装必要的模块

    npm i -S hyperapp npm i -D babel-plugin-transform-react-jsx babel-preset-es2015 babelify browserify bundle-collapser uglifyify uglifyjs

    准备.babelrc文件

    { "presets": ["es2015"], "plugins": [ [ "transform-react-jsx", { "pragma": "h" } ] ] }

    编译打包

    browserify \ -t babelify \ -g uglifyify \ -p bundle-collapser/plugin index.js | uglifyjs > bundle.js

    如果是使用Webpack

    安装必要的模块

    npm i -S hyperapp npm i -D babel-plugin-transform-react-jsx babel-preset-es2015 babelify browserify bundle-collapser uglifyify uglifyjs

    准备.babelrc文件

    { "presets": ["es2015"], "plugins": [ [ "transform-react-jsx", { "pragma": "h" } ] ] }

    准备webpack.config.js文件

    module.exports = { entry: "./index.js", output: { filename: "bundle.js" }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" } ] } }

    编译打包

    webpack -p

    如果是使用Rollup

    安装必要的模块

    npm i -S hyperapp npm i -D rollup rollup-plugin-babel rollup-plugin-node-resolve rollup-plugin-uglify babel-preset-es2015-rollup babel-plugin-transform-react-jsx

    准备rollup.config.js文件

    import babel from "rollup-plugin-babel" import resolve from "rollup-plugin-node-resolve" import uglify from "rollup-plugin-uglify" export default { plugins: [ babel({ babelrc: false, presets: ["es2015-rollup"], plugins: [["transform-react-jsx", { pragma: "h" }]] }), resolve({ jsnext: true }), uglify() ] }

    编译打包

    rollup -cf iife -i index.js -o bundle.js

    Hyperx开发環境

    编辑中(基本与JSX开发环境相似,仅一些地方安装的模块有些不同)