MakaJs:基于 React, Redux 的轻量级前端框架

原创 jeffy 随笔 react 94阅读 2018-12-19 13:21:11 举报

github: maka.js
留下您宝贵的STAR!谢谢
意见反馈

maka-appstore-demo

maka

  • maka源于中文码咖,意为写代码的大咖
  • 一眼即可看懂的前端框架,简约而不简单

1、安装

依赖项:

  • npm
  • yarn

2、快速上手

创建一个名叫helloworld的应用,并且运行起来

3、入门概念

3.1、State

  • state很简单,可以理解为是应用的数据部分
  • 引擎内部状态的存储结构是immutable类型
  • 每次状态变化会通知view,重新render

3.2、Action

  • action很简单,可以理解为是一些提供给ui调用的函数
  • actionMixin,混入外部action,默认混入了maka引擎base
  • 详细参见后面高级概念

3.3、View

  • view很简单,可以理解为react的json化表示
  • component是react组件名
  • 详细参见后面高级概念

4、高级概念

4.1、表达式

view的所有属性值支持表达式语法

表达式可以支持js语法,见下面示例

  • 绑定state中path为data.content的数据
  • 绑定action中方法名为onChange的函数
  • 函数体

4.2、view节有哪些系统属性?

这里说的系统属性就是上面例子中的component、children、_visible等;
除系统属性外还可以设置控件支持的任何属性;
主要支持下面描述的几种系统属性;

  • component
    组件名,缺省可使用所有html元素
  • children
    子组件
  • _visible
    是否显示,值支持表达式, 默认true

_visible设置为false,将不创建该组件

  • _for
    循环,支持for嵌套
  • _function
    函数,当组件的某个属性要求是一个函数并返回react 元素时使用它

4.3、如何使用自定义组件?

view可以使用自定义组件或者外部的react组件,见下面示例

4.4、如何自定义模板组件?

模板组件是为了减少view json的代码量提出的概念,把相似度很高、并且经常使用的一些json定义为模板组件,在使用中能有效减少代码量,见下面示例

4.5、ActionMixin

ActionMixin提供了低耦合方式混入外部行为的可能,缺省并至少需要混入了Maka框架的base行为

  • maka引擎混入的base提供了哪些可用行为?
方法名描述action中使用示例view中使用示例
getState获取状态this.base.getState('data.input')$base.getState('data.input')
setState设置状态this.base.setState({'data.input', 'hello'})$base.setState({'data.input', 'hello'})
gs=getStatethis.base.gs('data.input')$base.gs('data.input')
ss=setStatethis.base.ss({'data.input', 'hello'})$base.ss({'data.input', 'hello'})
context上下文,支持get、set方法this.base.context.get('currentUser') or this.base.context.set('currentUser', {name: 'zhang'})$base.context.get('currentUser')
  • 如何混入自定义的行为类?

5、app & hub

5.1 app

把一个大型网站拆分成许多开发模式相同的app,这些app又可以独立运行、调试、分享,通过弱耦合的方式又能组合在一起成为一个网站

  • app来源
    • maka add 命令增加依赖, 会从hub.makajs.org下载依赖,类似yarn add
    • package.json中subAppDir属性指向的目录,目录中如果存在应用代码会被扫描到
    • 手动拷贝app.js 和 app.css到发布目录
  • 组合使用
  • 手工创建
  • 预加载
    修改index.html
  • navigate切换

5.2 hub

  • maka提供hub.makajs.org网站用于分享开发者开发的应用
  • 您可以通过maka publish分享您的应用,publish前请使用 maka build 、maka build --dev 、maka pkg 构建应用资源

6、maka Api

如上registerComponent,reigsterAction是两个api,所有支持的api如下

api参数描述
registerComponent(key, component)注册组件
registerAction(key, action)注册行为
registerTemplate(key, template)注册模板
getComponent(key)通过组件名获取组件
load[应用名...]加载应用
createAppElement(appName, appProps)创建app React Element
setHoc(hoc)设置最外层高阶React Element
fetch对象类型,不需要参数提供fetch对象,可以调用后台接口,或者mock
navigate对象类型,不需要参数提供navigate对象
render(appName, targetHtmlElementName)render

7、ajax & mock

7.1、ajax

可以使用maka引擎提供fetch对象实现ajax,示例如下

action.js

index.html, 配置fetch对象

package.json,配置本地调试的webpack dev server proxy

7.2、使用纯前端mock

可以使用maka引擎提供fetch对象实现mock,示例如下

action.js

mock.js

index.js

index.html

8、类似router的能力

8.1、redirect

8.2、goBack

8.3、listen

9、maka cli 命令

maka cli 支持的所有命令如下

  • maka app

创建一个名为test应用

  • maka start

启动app,可以通过浏览器访问应用的运行结果,http://127.0.0.1:8000

  • maka build

编译应用,会在当前目录build目录下生成编译结果

  • maka pkg

打包应用, 会在当前目录build目录下生成打包结果,打包结果可用于网站直接部署使用

  • maka add

增加依赖,增加依赖会修改package.json文件,start或者pkg命令时会把依赖app的编译结果copy当前应用运行目录下

  • maka adduser

类似npm adduser功能,成功会在hub.makajs.org创建用户,并登录

  • maka publish

使用publish命令分享您的app到hub.makajs.org,其他开发人员就可以通过maka add来引用您发布的应用,注意publish前请使用 maka build 、maka build --dev 、maka pkg 构建应用资源

10、结束

  • 感谢您对maka的关注!
评论 ( 1 )
最新评论
jeffy 2018-12-19 13:31:19 1F

大家有好的建议也可以反馈给我们点击这里