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 = … 继续阅读
ES2017 标准引入了 async 函数，它就是 Generator 函数的语法糖。 async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。 Generator 函数是 ES6 提供的一种异步编程解决方案，调用 Generator 函数，会返回一个内部指针（即遍历器）g。这是 Generator 函数不同于普通函数的另一个地方，即执行它不会返回结果，返回的是指针对象。调用指针g的next方法，会移动内部指针（即执行异步任务的第一段），指向第一个遇到的yield语句。 async function fn(args) { // … } // 等同于 function fn(args) { return spawn(function* … 继续阅读
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 … 继续阅读
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 … 继续阅读
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 … 继续阅读
最近业务中的中后台系统基本上都是采用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: [] … 继续阅读
适用于IntelliJ IDEA/PHPStorm/WebStorm Action 搜索Actions选择Fix ESLint Problems(Cmd-Shift-A on OS X or Ctrl+Shift+A on Windows and Linux): File Watchers 保存文件时自动eslint –fix: 保存文件时自动prettier –write： 参考链接： https://www.jetbrains.com/help/webstorm/using-file-watchers.html https://blog.jetbrains.com/webstorm/2016/08/using-external-tools/
Ios-deploy install doesn’t work Install ios-deploy sudo npm install -g –unsafe-perm –allow-root ios-deploy Disable “SIP” Click the symbol in the Menu bar. Click Restart… Hold down Command-R to reboot into Recovery Mode. Click Utilities. Select Terminal. Enter csrutil disable. Enter reboot. Attempt install with  … 继续阅读
提高HTTP的连接性能 有几种现存和新兴的方法可以提高HTTP的连接性能。 并行连接 通过多条TCP连接发起并发的HTTP请求。 持久连接 重用TCP连接，以消除连接及关闭时延。 HTTP/1.0+keep-alive连接 实现HTTP/1.0 keep-alive连接的客户端可以通过包含Connection: Keep-Alive首部请求将一条连接保持在打开状态。 Connection: Keep-Alive Keep-Alive: max=5, timeout=120 HTTP/1.1假定所有连接都是持久的。要在事务处理结束之后将连接关闭，HTTP/1.1应用程序必须向报文中显式地添加一个Connection: close首部。这是与以前的HTTP协议版本很重要的区别 … 继续阅读
浏览器内核 Trident Gecko WebKit 浏览器渲染页面的过程 从耗时的角度，浏览器请求、加载、渲染一个页面，时间花在下面五件事情上： DNS 查询 TCP 连接 HTTP 请求即响应 服务器响应 客户端渲染 结论 css css加载不会阻塞DOM树的解析 css加载会阻塞DOM树的渲染 css加载会阻塞后面js语句的执行 Javascript 载入后马上执行； 执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）。原因：因为浏览器需要一个稳定的DOM树结构，而JS中很有可能有 代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修 改 … 继续阅读