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

您可能感兴趣的内容

  • 5分钟读懂JavaScript预编译流程基础指南_流程小白入门

    1-JavaScript运行三部曲语法分析预编译解释执行语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误; 解释执行顾名思义便是执行代码了; 预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数 ;2-JS预编译什么时候发生预编译到底什么时候发生? 误以为预编译仅仅发生在script内代码块执行前 这倒并没有错 预编译确确实实在script

    2020/03/31
  • swc攻略教程_用rust编写的网络编译器,babel的替代品

    swc攻略教程 官方网址:https://swc-project.github.io GitHub:https://github.com/swc-project/swc 简介描述:…

    2020/03/07
  • 如何成为一名开源程序员入门指南_程序员使用教程

    科技世界的探索总是让我们兴奋不已。很多科技日新月异,你探索得越深远,你看到的世界就越广阔无穷,这就像是一只驼一只的海龟一样。因此,科技世界也像宇宙一样无穷无尽。如果你也渴望加入到推动技术世界发展的社区中,你应该如何开始呢?你要做的第一步是什么?以后应该怎么做?首先,你得明白开源指的是开放软件源代码的意思。这个很好理解,但是“开源”这个词最近一段时间经常出现在

    2020/04/03
  • B3log黑客派菜鸟教程_程序员和设计师的聚集地

    B3log黑客派菜鸟教程 官方网址:https://hacpai.com/ 简介描述:程序员和设计师的聚集地 B3log 开源社区线上论坛。 黑客派是程序员和设计师的聚集地,汇聚了…

    2020/03/06
  • 推荐6款好用、免费的远程控制软件【远程管理工具】菜鸟教程_工具菜鸟攻略

    推荐6款好用、免费的远程控制软件【远程管理工具】菜鸟教程 远程办公就需要远程连接的工具,当然,你说你用VPN那也是没有毛病的。远程桌面工具也极大的方便了我们进行远程技术支持、远程办…

    2020/03/20
  • html元素contenteditable属性如何定位光标和设置光标基础知识入门_光标入门指南

    最近在山寨一款网页微信的产品,对于div用contenteditable属性做的编辑框有不少心得,希望可以帮到入坑的同学。废话不多说了,我们先来理解一下HTML的光标对象是如何工作的,后面我会贴完整的DEMO代码,不用急,先去理解,才能做出更加好的输入体验。在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的。当我们去点击一个输入框

    2020/03/22
  • 使用原生JS实现图片放大镜效果基础入门_效果指南教程

    前提先了解数学算法:求遮罩层mask宽度,大图、大图显示区、小图、遮罩层1、小图是大图等比缩放的2、遮罩层是大图显示区缩放的小图/大图 = 遮罩层/大图显示区遮罩层 = 大图显示区*(小图/大图); ————————————————大图活动区 = 大图-大图显示区小图活动区 = 小图-遮罩

    2020/03/24
  • Flutter的布局和页面组件入门攻略_Flutter基础知识

    Flutter安装介绍在这里,你必须得安装好你的开发者环境,并且运行你的第一个flutter程序了。如果你还不知道怎么开始,请参考Flutter中文网安装教程或者Flutter官网安装教程进行安装环境。目前我开发是通过Android Stdio和VSCode进行开发,如果你是前端开发工程师,你会和我一样比较喜欢VSCode,但是涉及到Debug的时候,用An

    2020/03/23
  • Js中Proxy使用说明_proxy菜鸟知识

    Proxy 用于修改某些操作的默认行为(基本操作有属性查找,赋值,枚举,函数调用等)。/*
    * target 目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)
    * handler 一个对象,其属性是操作对应的自定义代理函数
    */
    let p = new Proxy(target, handler);基本操作1、get(target, pr

    2020/03/29
  • webpack-simple-starter攻略教程_一个没有框架的简单webpack启动器

    webpack-simple-starter攻略教程 GitHub:https://github.com/SinanMtl/webpack-simple-starter 简介描述:…

    2020/03/11
  • RxJS中Operators菜鸟教程_rxjs入门基础教程

    RxJS 的操作符(operators)是最有用的,尽管 Observable 是最基本的。操作符最基本的部分(pieces)就是以申明的方式允许复杂的异步代码组合简化。什么是操作符?操作符是函数。这里有两种操作符:管道操作符(Pipeable Operators)是可以通过使用 observableInstance.pipe(operator()) 管道传

    2020/03/26
  • 前端UI攻城狮 你们该抛弃jQuery了小白基础_jquery入门知识

    你不再需要jQuery!Web工程师太依赖jQuery了,某种意义上说jQuery已经成了JavaScript的同义词。但是我们真的需要他么?或许我们应该反思一下什么时候才真的需要jQuery。对我个人而言开始使用jQuery的理由是他把我的工作变得简单多了,开发Web应用已经几乎离不开它。曾经在不同浏览器里Web API的实现有很大区别,而jQuery帮我

    2020/03/26
  • 豆丁365使用说明_豆丁网文档在线免费下载

    豆丁365使用说明 官方网址:https://www.docin365.com/ 简介描述:豆丁网文档在线免费下载 本工具为豆丁网文档复制抓取工具,导出的文档为word形式,非源文…

    2020/03/10
  • gmaps.js菜鸟教程_使用Google地图的Js库

    gmaps.js菜鸟教程 官方网址:https://hpneo.dev/gmaps/ GitHub:https://github.com/hpneo/gmaps 简介描述:使用Go…

    2020/03/06
  • Vue 组件:给Bootstrap Modal增加缩放功能入门知识_Bootstrap小白攻略

    需求Bootstrap 应该还是目前最流行的前端基础框架之一。因为架构方面的优势,它的侵入性很低,可以以各种方式集成到其它项目当中。在我厂的各种产品里,都有它的用武之地。前两天,老板抱怨,说 Modal(弹窗)在他的屏幕上太小,浪费他的 5K 显示器。我看了一下,按照 Bootstrap 的设计,超过 1200px 就算是 XL,此时.modal-lg 的宽

    2020/03/22
  • 彻底弄懂HTTP缓存机制及原理指南攻略_原理小白基础

    前言Http 缓存机制作为 web 性能优化的重要手段,对于从事 Web 开发的同学们来说,应该是知识体系库中的一个基础环节,同时对于有志成为前端架构师的同学来说是必备的知识技能。但是对于很多前端同学来说,仅仅只是知道浏览器会对请求的静态文件进行缓存,但是为什么被缓存,缓存是怎样生效的,却并不是很清楚。在此,我会尝试用简单明了的文字,像大家系统的介绍HTTP

    2020/03/24