React全棧開發框架@symph/joy (webpack+babel+redux+MVC+依賴注入+Dva兼容+服務端渲染+插件化配置)

時間 2019-11-16

標籤 react 開發框架 symph joy webpack+babel+redux+mvc webpack babel redux mvc 依賴注入 dva 兼容服務渲染插件配置欄目 React 简体版

原文原文鏈接

@symph/joy

介紹

官網：lnlfps.github.io/symph-joyjavascript

@symph/joy讓咱們輕鬆的進行前端應用開發，零配置可用，簡單清晰的業務和數據管理模塊，已集成大量最佳實踐的優化方案，即便你纔剛接觸React，也能夠輕鬆建立高可用、可維護的前端應用。html

該項目已在生產環境大量使用，若有任何疑問、使用幫助、bug反饋、特性討論，請和咱們聯繫(郵件：lnlfps@gmail.com; QQ羣：929743297)，或者到github建立issue，歡迎加入。前端

特徵

零配置可用，優化的默認配置，快速開發，已集成react、redux、react-router4和ES六、7語法支持等
MVC架構，模塊化設計，使用Model簡化redux的使用
依賴自動注入，專一組件內部實現，依賴關係更明確，方便調用
支持服務端渲染，在業務組件內部獲取渲染數據，組件內聚更高，便於維護
支持靜態版本導出，脫離Node.js運行，也可單獨導出靜態頁面
全局支持aync語法，複雜的業務邏輯也能輕鬆找到解決方案
使用@裝飾器將普通Class申明爲Controller或Model等，不侵入業務代碼
內置網絡請求代理服務，解決跨域和服務中轉問題，先後端分離開發暢通無阻
支持插件化配置，便於功能擴展

安裝和開始

運行npm init建立一個空工程，並填寫項目的基本信息，固然也能夠在一個已有的項目中直接安裝。java

npm install --save  @symph/joy react react-dom
複製代碼

@symph/joy 只支持 React 16及以上版本react

添加NPM腳本到package.json文件：git

{
  "scripts": {
    "dev": "joy dev"
  }
}
複製代碼

而後就能夠開始正式工做了，下面從hello world示例開始，首先編寫一個Model組件來管理應用的數據和業務。github

// /src/models/HelloModel.js

import model from '@symph/joy/model'

@model() // 標明這是一個Model。
export default class HelloModel {
  namespace = 'hello'
  
  // model的初始狀態數據
  initState = {
    message: 'Welcome to @symph/joy!'
  }
  
  // async業務方法，從服務端異步獲取新的歡迎消息
  async fetchMessage () {
    let newMsg = await fetch('/hello_message');
    //更新model的狀態，界面的狀態也會自動更新
    this.setState({
      message: newMsg
    });
  }
 
}
複製代碼

接下來編寫界面，展現歡迎消息。@symph/joy默認使用/src/index.js文件做爲應用的啓動入口組件，能夠在這裏初始化基礎功能模塊和設置子頁面路由等。npm

// /src/index.js
import React, { Component } from 'react'
import {controller, autowire } from '@symph/joy/controller'
import HelloModel from './models/HelloModel'


@controller((store) => {             // 標明這是一個Controller
  return {
    message: store.hello.message,    // 綁定model中的數據
  }
})
export default class HelloController extends Component {

  @autowire()                       // 聲明依賴的Model
  helloModel: HelloModel      
  
  async componentDidMount() {
    await this.helloModel.fetchMessage() //調用model
  }
  
  render(){
    return <div>${this.props.message}</div>
  }
}
複製代碼