#AE.JS-极致优雅的前端框架
- 简介
想必你也不喜欢
ref(),.value...
如果我猜对了,你一定会喜欢AE.JS的
它兼具alins的优雅格式,vue的响应式,aguilar的组件化编程,react的JSX模板 语法和springboot的声明结构
原生支持路由
自带ajax库 - 快速上手
目前AE.JS只上传到了npm仓库
使用cli工具:
npm install -g aec-cli
ae cli create
由于技术问题,可能创建失败 - 语法
AE.JS使用JSX描述界面
一个计数器的实例const name='组件名' var count=0 function counts(){ count++ } <button onclick="count()">{{count}}</button>
之后只需要通过如下方法注册到AE.JS中
import {AE} from 'aets' import 组件名 from '你的组件.jsx' var app=new AE() app.addComponent(组件名,路径) app.start(端口)
- jsx编译产物
计数器实例的编译产物
import Ae from 'aets' var count=Ae.core.ref(0) function counts(){ count.value++ } var $='<button onclick="count()">{{count}}</button>' export default { name: '组件名', data:{ count: 0, counts: ()=>{ count++ } }, $: $ }
挂载到页面上的代码
<!DOCTYPE html> <html lang="en"> <head><title></title></head> <body> <div id="app"> </div> </body> </html> <script> var app=document.getElementById("app") document.title='组件名' app.insertAdjacentHTML('<button onclick="count">{{count}}</button>') var count={ value:0, get _value(){ return this.value } set __value(news){ reload() this.value=news } } function reload(){ app=document.getElementById("app") document.title='组件名' app.insertAdjacentHTML('<button onclick="count">{{count}}</button>') } </script>
###实现原理
- 如何解析jsx
通过webpack loader实现, 在用户import jsx文件时，loader会处理这些文件, loader首先会获取文件的代码,
获取jsx中的html标签
获取jsx中定义的函数
获取jsx中定义的变量
获取name值
生成编译产物
挂载至express - 如何搭建本地服务器
AE.JS使用express实现组件的挂载
在执行app.addComponent函数的时候,AE.JS将其添加至数组中,在挂载到express上 - 如何实现响应式
AE.JS在挂载时会将变量转化为一个具有getter和setter的对象,在调用setter时,将会执行 reload函数,重新渲染页面 ###教程