github: maka.js 留下您宝贵的STAR!谢谢
makamaka源于中文码咖，意为写代码的大咖
一眼即可看懂的前端框架，简约而不简单
1、安装bash sudo npm i -g @makajs/cli
依赖项： - npm - yarn bash sudo npm i -g yarn
2、快速上手bash maka app helloworld cd helloworld yarn start 创建一个名叫helloworld的应用,并且运行起来
3、入门概念 3.1、Statejs const state = { data: { content: 'hello ', input: '' } }
state很简单，可以理解为是应用的数据部分
引擎内部状态的存储结构是immutable类型
每次状态变化会通知view,重新render
3.2、Action` js @actionMixin('base') class action { constructor(option) { Object.assign(this, option.mixins) }
onChange = (e) => { this.base.setState({ 'data.input': e.target.value }) console.log(this.base.getState('data.input')) }} `
action很简单，可以理解为是一些提供给ui调用的函数
actionMixin，混入外部action,默认混入了maka引擎base
详细参见后面高级概念
3.3、Viewjs const view = { component: 'div', className: 'hello', children: [{ component: 'div', children: '{{data.content + data.input}}' }, { component: 'input', placeholder: 'world', value: '{{data.input}}', onChange: '{{$onChange}}' }] }
view很简单，可以理解为react的json化表示
component是react组件名
详细参见后面高级概念
4、高级概念 4.1、表达式view的所有属性值支持表达式语法
表达式可以支持js语法，见下面示例
绑定state中path为data.content的数据 js { ... value: `{{data.content}}` //value = state.data.content ... }
绑定action中方法名为onChange的函数 js { ... onChange:{{$onChange}}` // onChange = action.$onChange ... }
`
函数体 js { onChange: {{{ debugger; return $onChange }}}`
/ onChange = new Function( debugger; return action.onChange )() / } `
4.2、view节有哪些系统属性?javascript { component: 'div', children: 'hello', _visible: 'true' }
这里说的系统属性就是上面例子中的component、children、_visible等; 除系统属性外还可以设置控件支持的任何属性; 主要支持下面描述的几种系统属性;
component 组件名，缺省可使用所有html元素 javascript { component: 'div' } //<div></div>
children 子组件 `javascript { component: 'div' children: { component: 'div', children: 'children' } }
/ <div> <div>chidlren</div> </div> / `
_visible 是否显示，值支持表达式, 默认true
`javascript { component: 'div', _visible: false }
` _visible设置为false,将不创建该组件
_for 循环,支持for嵌套
`javascript const state = { data: { list: [{a:1}, {a:2}, {a:3}] } }
const view = { component: 'div', children: { _for: 'item in data.list', // or (item,index) in data.list component: 'div', children: '{{item.a}}' } } `
_function 函数,当组件的某个属性要求是一个函数并返回react 元素时使用它
`javascript
import {registerComponent} from 'maka'
class CustomComponent extends React.PureComponent { render(){ var {getSub} = this.props return ( <div> {getSub('aaa','bbb')} </div> ) } }
registerComponent('CustomComponent', CustomComponent)
const view = { component: 'div', children: { component: 'CustomComponet' getSub: { _function: '(a,b)', component: 'div', children: '{{a+b}}' } } }
`
4.3、如何使用自定义组件?view可以使用自定义组件或者外部的react组件，见下面示例
`javascript import React from 'react' import { registerComponent } from 'maka' import { Button } from 'antd'
class CustomComponent extends React.PureComponent { render() { return (<div>custom component</div>) } }
registerComponent('CustomComponent', CustomComponent) registerComponent('antd.Button', Button)
const view = { component: 'div', children: [{ component: 'CustomComponent' },{ component: 'antd.Button', children: 'Button' }] } `
4.4、如何自定义模板组件？模板组件是为了减少view json的代码量提出的概念，把相似度很高、并且经常使用的一些json定义为模板组件，在使用中能有效减少代码量，见下面示例
`javascript import { registerTemplate } from 'maka'
const CustomTemplate = function(props) { return { component: 'div', children: [{ component: 'div', children: props.content },{ component: 'div', children: props.content } ] } }
registerTemplate( 'CustomTemplate', customTemplate)
const view = { component: 'CustomTemplate'， content: 'hello' }
`
4.5、ActionMixinActionMixin提供了低耦合方式混入外部行为的可能，缺省并至少需要混入了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 | =getState | this.base.gs('data.input') | $base.gs('data.input') ss | =setState | this.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')
如何混入自定义的行为类？
`javascript import { actionMixin, registerAction } from 'maka'
class CustomAction { alert = () => { alert() } }
registerAction('CustomAction', CustomAction)
@actionMixin('base', 'CustomAction') class action { constructor(option) { Object.assign(this, option.mixins) } }
const view = { component: 'div', onClick: '{{$CustomAction.alert}}' } `
5、app & hub 5.1 app把一个大型网站拆分成许多开发模式相同的app，这些app又可以独立运行、调试、分享，通过弱耦合的方式又能组合在一起成为一个网站
app来源
maka add 命令增加依赖， 会从hub.makajs.org下载依赖，类似yarn add
package.json中subAppDir属性指向的目录，目录中如果存在应用代码会被扫描到
手动拷贝app.js 和 app.css到发布目录
组合使用
javascript const view = { component: 'div', className: 'hello', children: [{ component: 'AppLoader', appName: 'app-test', //app name content: 'hello' //app支持的属性 }] }
手工创建 javascript import {createAppElement} from 'maka' ... var ele = createAppElement('appName', {content: 'hello'}) //第一个参数：app name,第二参数：app props ...
预加载 修改index.html javascript maka.load(['appName1', 'appName2']).then(()=>{ ... }
navigate切换
`javascript import {navigate} from 'maka'
navigate.redirect('/appName/') `
5.2 hubmaka提供hub.makajs.org网站用于分享开发者开发的应用
您可以通过maka publish分享您的应用，publish前请使用 maka build 、maka build --dev 、maka pkg 构建应用资源
6、maka Apijavascript import {registerComponent, registerAction} from 'maka' 如上registerComponent,reigsterAction是两个api,所有支持的api如下