作者归档:admin

首页 » Articles posted by admin

w3cmm

TypeScript 中 interface 与 type 区别

Objects / Functions Interface interface Point { x: number; y: number; } interface SetPoint { (x: number, y: number): void; } Type alias type Point = { x: number; y: number; }; type SetPoint = (x: number, y: number) => void; Other Types // primitive type Name = string; // object type PartialPointX = { x: number; }; type PartialPointY = … 继续阅读

目录 记事本 |
w3cmm

async await 原理

ES2017 标准引入了 async 函数,它就是 Generator 函数的语法糖。 async 函数的实现原理,就是将 Generator 函数和自动执行器,包装在一个函数里。 Generator 函数是 ES6 提供的一种异步编程解决方案,调用 Generator 函数,会返回一个内部指针(即遍历器)g。这是 Generator 函数不同于普通函数的另一个地方,即执行它不会返回结果,返回的是指针对象。调用指针g的next方法,会移动内部指针(即执行异步任务的第一段),指向第一个遇到的yield语句。 async function fn(args) { // … } // 等同于 function fn(args) { return spawn(function* … 继续阅读

目录 记事本 |
w3cmm

浅析Weex原理

Weex可以用Vue、React(Rax)语法开发前端页面,但是渲染出来的页面却可以是原生界面。以前一直只有点模糊的概念,最近终于可以静下心相对深入的了解一下。 从IOS入手 按照官网教程weex platform add ios后,项目目录多了很多东西,如果你是IOS开发者,就会很熟悉,Weex生成IOS相关的项目文件。 WeexDemo目录概览 WeexDemo代码概览 在WeexDemo中,初始化了WeexSDK,并且基于bundlejs/index.js(前端项目打包后的代码)创建了原生的view。下面将对上图中标注的5点依次相对深入的讲解。 JSContext _jsContext = [[JSContext alloc] init]; 上面的代码初始化了一个J … 继续阅读

目录 记事本 |
w3cmm

Higher-Order Components与 Render Props

Higher-Order Components 这里是一个响应鼠标事件的Higher-Order Components例子: import React from ‘react’ import ReactDOM from ‘react-dom’ const withMouse = (Component) => { return class extends React.Component { state = { x: 0, y: 0 } handleMouseMove = (event) => { this.setState({ x: event.clientX, y: event.clientY }) } render() { return ( <div … 继续阅读

目录 记事本 |
w3cmm

Redux 在车货匹配项目中的实践

Redux已经发布3年左右,一直没有在生产环境中实践过,前段时间正好有新需求可以体验一下。本文摘取项目的部分代码进行简单的分析。 入口文件: #goodsNew/index.tsx import * as React from ‘react’; import {createStore, applyMiddleware, Middleware} from ‘redux’ import {Provider} from ‘react-redux’ import {createLogger} from ‘redux-logger’ import ‘./index.css’ import GoodsNew from ‘./goodsNew’ import reducer from … 继续阅读

目录 记事本 | |
w3cmm

规则引擎

规则引擎系统(React+Mobx) 多对多树形结构可视化规则流程图, 使用Mobx共享规则编辑模块状态

目录 Contributed |
w3cmm

用Dva Model优化路由配置功能

最近业务中的中后台系统基本上都是采用Ant Design Pro开发,业务中路由配置模块功能过于复杂,如果组件通信只通过React props实在是痛苦不堪。Ant Design Pro中内置了dva,dva 通过 model 的概念把一个领域的模型管理起来,包含同步更新 state 的 reducers,处理异步逻辑的 effects,订阅数据源的 subscriptions 。 拆分组件 设计Model export default { namespace: ‘routeConfig’, state: { transfer: [], canvasData: [], isVisibleServiceList: false, serviceSearchParams: [] … 继续阅读

目录 记事本 | |