自学编程难不难系列之前端框架 ..

作者: 一了 <1liao3@funlang.org>
日期: 2021-05-01

本篇是 自学编程难不难系列 的第十五篇。

五年前的今天, 由于很多人好奇怎么自学编程, 于是我从自身经历出发, 写了第一篇 自学编程难不难系列 之 汇编. 其实一开始并没有想到要写成自学编程难不难系列, 我想既然开始了, 就接着往下写, 写成了一系列自学编程的文章.

现在前端很火, 前端框架更火, 刚出校门的小年轻, 开口闭口都是什么"三大", 什么"主流", 离开框架多数人都不知道怎么写应用了.

其实我本人没有多少前端经验, 耳濡目染之下多少了解一些, 如此而已. 只是公司的超极菜单设计平台在做易用性/扩展性改版的时候, 碰到一些钉子, 让我不得不思考前端框架的问题.

想起来好笑, 因为不了解前端框架, 我还闹了不少笑话, 比如我就需要页面上加点外部内容或者"路由"和原来的 H5 应用共存, 人家告诉我 Vue 不支持这个, 于是我不得不去了解前端框架到底是什么.

看了一眼 React, Vue, 我大致了解了前端框架的核心功能是什么, 接着去看了一些偏门的框架, 包括 Yox (国内), Svelte, 然后看到 Alpine, 我就觉得 Alpine 就是我要找的框架了, 特性几乎符合我想要的样子.

Alpine 代码量很少(不到 2000 行吧), 于是我 Fork 了一下, 加了一点语法糖和性能优化, 提交到 Alpine 团队. 没想到的是, 人家反应非常慢, 等了很久, 给拒绝了.

我想, 我还是自己开发一个吧.

Vue 是 v- 开头, Alpine 仿着用了 x-data, 我就用 z-data, 暂且起名 z-data 框架. z 是最后一个字母, 找起来也好找啊, z 还是 zero 的首字母, 符合我 零依赖 (zero dependency) 和 零配置 (zero configuration) 的期许. 我想更正式的名字, 还是等发布 1.0 版本的时候再去想吧.

4月11日下班后, 我就开始搞了, 花了差不多四个小时, 模板引擎是有了, 支持 for 模板, 语法是:

  <template for="k: v, i in items" key=...>

相应的, if 模板的语法类似这样:

  <template if="条件">
  <template else if="条件">
  <template else>


语法上除了 z-data, z-none, z-comp 是全称, 其他基本上直接从缩写 shorthand 出发, 比如 :value=... 用来做属性绑定的正式用法, :: 用来做双向绑定, @ 表示事件, 支持更多 class/style 的语法糖, 因为 class/style 是更为常见的属性操作, 如:

  :class.active=...
  :style.height=...
  :css.background-color=...


class/style 属性绑定再增加缩写, .active=... 表示 class 名, #flex-grow=1 表示 style 属性, 这样配合 tailwind, 完全可以做到以 DOM 为中心, 方便快捷. 看一眼:

<section class=img-list z-data=data init='init()'>
  <template for="img in imgs" key=img.url>
    <div class=img-box .t0=0 .t1.t2=true
     :style.width='(img.width*x)/img.height + "px"'
     :css.flex-grow=(img.width*x)/img.height>
      <i class=img
       #padding-bottom="img.height/img.width*100 + '%'"
       ..background-image=`url(${base}/${img.url})`>
        <j class=img-tips :text=img.tip></j>
        <k class=img-tip2 :text=img.tip></k>
      </i>
    </div>
  </template>
</section>


差不多十天这样子, 我就发布了正式版, 之后就是有空的时候一边加点特性, 一边优化性能.

发布的时候分成两个版本, 一个是全功能框架 z-data, 一个是纯模板引擎 z-template, 用来做静态渲染, 做做小网站还是方便的, 毕竟 minify 之后才 3K. z-data 框架要大一些, 7K 这样子.
源代码也有差异, 虽然一开始是同一份, 慢慢目标不同, 代码量差异就很大了, z-data 已经500多行了, z-template 才200行出头. 这样的代码规模, 即使是初学者, 完全掌握搞透也不是完全做不到.

本人自学编程, 一路走来, 最喜欢做的事情就是化复杂为简单, 最看不得故弄玄虚, 把框架弄得巨复杂, 让人望而却步, 自己好坐收渔利.

我本来无意要再造一个"轮子", 无奈缺少称手的工具, 不得已而强为之, 同时也可以向广大前端程序员宣布, 前端框架没什么了不起, 大家自己也能搞出来.

关于生态, 因为 z-data 不排他, 可以和任意框架共存, 所以整个 js 前端资源都是可以拿来为我所用, 比任何单一框架的生态都要来得广来得大.

代码和文档在这里:
 https://github.com/Funlang/z-data
拿来用或者学习, 都是很好的起点.

例子:
异步加载图片并排版渲染
 - https://codepen.io/funlang/pen/NWdOQye
第三方 (Moveable) 共同操作
 - https://codepen.io/funlang/pen/OJWrJep
TodoMVC
 - https://codepen.io/funlang/pen/ExZOGJy
Z-data 组件怎么用
 - https://codepen.io/funlang/pen/RwKzaOo

自己动手丰衣足食, 劳动最光荣, 劳动者最美丽!
自学编程难不难系列 之 前端框架 ..

自学编程难不难系列之前端框架 ..
