Choo入门基础_一个有趣、超强的前端框架

Choo入门基础

官方网址:https://choo.io/

Choo入门基础_一个有趣、超强的前端框架

GitHub:https://github.com/choojs/choo

简介描述:一个有趣、超强的前端框架

Choo是一个只有4kb的框架,用于创建健壮的前端应用。choo 的语法比 vue 和 react 灵活,更易学。

直接使用 es6 Template literals 渲染 html,直接使用 node.js module system 架构组件和模块,不需要另外发明一套 Vue component 和 JSX。总之非常可爱。

dom:

var html = require('choo/html')
var devtools = require('choo-devtools')
var choo = require('choo')

var app = choo()
app.use(devtools())
app.use(countStore)
app.route('/', mainView)
app.mount('body')

function mainView (state, emit) {
  return html`
    <body>
      <h1>count is ${state.count}</h1>
      <button onclick=${onclick}>Increment</button>
    </body>
  `

  function onclick () {
    emit('increment', 1)
  }
}

function countStore (state, emitter) {
  state.count = 0
  emitter.on('increment', function (count) {
    state.count += count
    emitter.emit('render')
  })
}

海计划公众号
(0)
上一篇 2020/03/06 08:32
下一篇 2020/03/06 08:32

您可能感兴趣的内容

  • 拒绝服务(DoS)攻击:成也矿工,败也矿工入门基础教程_攻击小白帮助

    摘要:我们发现了一种针对类似比特币区块链的拒绝服务攻击,这种攻击模式比之前的攻击模式成本要低得多(只需全网20%算力)。区块链依赖于激励机制来保证系统安全。我们展示了攻击者如何破坏这些激励机制,从而导致理性的挖矿者停止挖矿。自互联网诞生以来,拒绝服务(DoS)攻击问题(也称为洪水攻击)就一直在困扰着互联网。DoS攻击者以各种服务为目标,旨在获取乐趣和利润。最

    2020/03/20
  • hyperHTML基础教程_一个快速和轻量级的虚拟DOM替代方案

    hyperHTML基础教程 GitHub:https://github.com/WebReflection/hyperHTML 简介描述:一个快速和轻量级的虚拟DOM替代方案 一个…

    2020/03/07
  • 压缩图攻略教程_在线图片压缩工具集合

    压缩图攻略教程 官方网址:https://www.yasuotu.com 简介描述:在线图片压缩工具集合 「压缩图」是一个提供在线图片压缩工具集合的站点,支持GIF压缩、PNG压缩…

    2020/03/11
  • EnjoyCSS入门攻略在线CSS代码可视化工具

    EnjoyCSS基础入门 官方网址:http://enjoycss.com/ 简介描述:在线CSS代码可视化工具 EnjoyCSS:在线CSS代码可视化工具是一个在线版的CSS3代…

    2020/03/06
  • JavaScript 秘密花园入门基础教程_JavaScript 语言最古怪用法的文档集合

    JavaScript 秘密花园入门基础教程 官方网址:http://bonsaiden.github.io/JavaScript-Garden/zh/ 简介描述:JavaScrip…

    2020/03/06
  • 原生js获取浏览器获X轴,Y轴的滚动距离使用攻略_滚动入门百科

    在前端开发中,需要获取浏览器滚动距离的需求,这篇文章主要讲解如何使用原生Js兼容实现获取浏览器获X轴,Y轴的滚动距离。并延伸扩展下我们一些不知道的js知识,希望对你有所帮助。代码实现://获取浏览器X轴,Y轴的滚动距离
    function getScrollDistance() {var obj=nullif (window.pageXOffset !==

    2020/04/03
  • Web前端的路该怎么走?基础入门_前端攻略教程

    Web前端的路该怎么走?这是作者张鑫旭的文章中的一个小部分,觉得非常有必要分开列出来。关于前端的路该如何走,一般都是工作1年作用或者正在想入职前端的小伙伴经常遇到的十大常见问题之一。问题描述如下:刚刚毕业,在公司一直做的是前端开发,之前都是自己去学习一些基础的前端知识(html+css+js)。到现在越来越迷茫,不知道自己该去学哪方面的。 在学校学的都是一些

    2020/03/29
  • 如何迁移Flutter项目到Flutter Web?小白知识_web菜鸟教程

    这篇简单介绍下怎么将一个现有的 Flutter 项目转成 Flutter Web 项目。开始之前先浇一盆冷水,我们理想中的一套代码、多端运行的愿望是要破灭了,至少目前版本的 Flutter Web SDK 是没法做到的。不过没关系,谷歌爸爸已经在 官网 中降低了我们的预期:项目目前只是处于 technical preview 状态项目是从 Flutter 主

    2020/03/26
  • NodePlayer.js菜鸟教程下载_一款基于ASM.js实现的纯JavaScript直播播放器

    NodePlayer.js菜鸟教程下载 官方网址:http://www.nodemedia.cn/products/node-media-player/ 简介描述:一款基于ASM….

    2020/03/12
  • 变设龙基础入门_在线智能创意设计平台

    变设龙基础入门 官方网址:http://www.bslong.cn/ 简介描述:在线智能创意设计平台 《变设龙》是新一代设计平台,颠覆传统设计领域,与人工智能共同进化,让每个人都能…

    2020/03/11
  • FEX菜鸟指南百度Web前端研发部出品

    FEX基础入门 官方网址:http://fex.baidu.com/ 简介描述:百度Web前端研发部出品

    2020/03/05
  • JS变量存储与深拷贝和浅拷贝入门基础教程_拷贝零基础入门

    变量类型与存储空间栈内存和堆内存基本数据类型string、number、null、undefined、boolean、symbol(ES6新增) 变量值存放在栈内存中,可直接访问和修改变量的值基本数据类型不存在拷贝,好比如说你无法修改数值1的值引用类型Object Function RegExp Math Date 值为对象,存放在堆内存中在栈内存中变量保存

    2020/03/20
  • Vue.js的复用组件开发流程小白攻略_流程指南教程

    接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程。下面先看看我们的需求列表组件quiList.vue本节我们主要要完成这样一个列表功能,每一行的列表是一个组件,列表内可能出现按钮组件或者箭头组件,点击按钮组件可以自定义事件,同时可以根据不同的参数来决定当前列表是带按钮的列表or带箭头的列表。首先看看quiList.vue
    //quiList

    2020/04/03
  • JS数组Reduce方法详解菜鸟教程网_数组基础入门

    概述一直以来都在函数式编程的大门之外徘徊,要入门的话首先得熟悉各种高阶函数,数组的reduce方法就是其中之一。reduce方法将会对数组元素从左到右依次执行reducer函数,然后返回一个累计的值。举个形象的例子:你要组装一台电脑,买了主板、CPU、显卡、内存、硬盘、电源…这些零件是组装电脑的必要条件。装的过程可以简单概括为拆掉每个零件的包装,再装到一

    2020/03/23
  • 理解 JavaScript 执行栈入门基础教程_js知识小白基础

    引例首先来看一个引例:function foo() {console.log(‘1’);bar();console.log(‘3’);
    }function bar() {console.log(‘2’);
    }foo();这段代码将从上往下依次执行,并输出 ‘1’, ‘2’, ‘3’。我们可以看到,bar 函数的执行顺序似乎和它定义的顺序没有关系。为什么呢?这

    2020/04/03
  • Node.js之react.js组件-Props应用基础知识教程_组件基础入门

    render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码(个人理解:将组件进行函数化,通过调用组件名实现,组件的利用,以元素的形式调用,并渲染画面)具有 render prop 的组件接受一个函数,该函数返回一个 React 元素并调用它而不是实现自己的渲染逻辑。具体实例(代码来自官网):URL:https://zh-h

    2020/03/24