MakaJs：基于 React, Redux 的轻量级前端框架 (2)

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 `javascript import {fetch} from 'maka'

... fetch.post('/v1/login',{user: 'admin', password: '123'}) ... `

index.html, 配置fetch对象 javascript window.main = function (maka) { maka.utils.fetch.config({ mock: false, //默认是true token: '', after: function (response, url) { return response } }) }

package.json，配置本地调试的webpack dev server proxy javascript ... "server": { "proxy": { "/v1/*": { "target": "http://www.***.com:8080/" } }, "port": 8000 } ...

7.2、使用纯前端mock

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

action.js `javascript import {fetch} from 'maka'

... fetch.post('/v1/login',{user: 'admin', password: '123'}) ... `

mock.js `javascript import { fetch } from 'maka'

const mockData = fetch.mockData

function initMockData() { if (!mockData.users) { mockData.users = [{ id: 1, account: 13334445556, password: 'c4ca4238a0b923820dcc509a6f75849b', name: 'zlj' }] } }

fetch.mock('/v1/login', (option, headers) => { initMockData() const user = mockData.users.find(o => o.account == option.account && o.password == option.password) if (user) { return { result: true, token: ${user.id},${user.account},${user.password},${user.name ? user.name : ''}, value: option } } else { return { result: false, error: { message: '请输入正确的用户名密码（系统内置用户user:13334445556,pwd:1）' } } } }) `

index.js javascript import 'mock.js'

index.html javascript window.main = function (maka) { maka.utils.fetch.config({ mock: true }) }

8、类似router的能力 8.1、redirect

javascript import {navigate} from 'maka' navigate.redirect('/portal') //https://www.***.com/#/portal

8.2、goBack

javascript import {navigate} from 'maka' ... navigate.redirect('/sign-in') //https://www.***.com/#/sign-in ... navigate.redirect('/portal') //https://www.***.com/#/portal ... navigate.goBack() //https://www.***.com/#/sign-in

8.3、listen

javascript navigate.listen((location.action)=>{ debugger //自定义处理 })

9、maka cli 命令

maka cli 支持的所有命令如下

maka app

bash maka app test 创建一个名为test应用

maka start bash maka start maka start --dev //dev模式启动 启动app，可以通过浏览器访问应用的运行结果,:8000

maka build bash maka build maka build --dev //dev模式编译 编译应用，会在当前目录build目录下生成编译结果

maka pkg bash maka pkg maka pkg --dev //dev模式打包 打包应用, 会在当前目录build目录下生成打包结果，打包结果可用于网站直接部署使用

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

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