Pillar Liang

40 posts
Flutter的一个更精简的状态管理工具:consumer
Flutter

Flutter的一个更精简的状态管理工具:consumer

consumer 是一个参考 react-consumer 方式的状态管理, 使用 dart 的 Stream 做发布订阅. 类 react 项目,当项目到一定程度,有一个不可规避的问题,就是状态管理。 我们会发现若项目足够大,我们需要切分多个子状态管理,或者一些局部的状态管理,这样可以有效减少事件派发的影响范围,从而提高性能;consumer 另一个特点是强制使用者描述每个订阅所使用的对象,这样 consumer 可以帮助优化性能,拦截不必要的更新。

优雅地提高 React 的表单页面的开发效率
React

优雅地提高 React 的表单页面的开发效率

Den Form为什么叫 Den Form ? 可能是因为 丹凤眼 非常迷人吧... 一个非常轻巧的 Form 实现, gzip 体积只有 3kb, 可以很方便跨越组件层级获取表单对象, 或者管理联动更新 大部分情况下,我们不需要表单组件,具体请阅读笔者的另一篇《我们或许不需要 React 的 Form 组件》安装ymzuiku/react-den-formReact中轻巧的Form实现. Contribute to ymzuiku/react-den-form development

我们或许不需要 React 的 Form 组件
React

我们或许不需要 React 的 Form 组件

在上一篇小甜点 《我们或许不需要 classnames 这个库》 中, 我们 简单的使用了一些语法代替了 classnames 这个库 现在我们调整一下难度, 移除 React 中相对比较复杂的组件: Form 组件 在移除 Form 组件之前, 我们现需要进行一些思考, 为什么会有 Form 组件及 Form 组件和 React 状态管理的关系 注意, 接下来的内容非常容易让 React 开发人员感到不适,

我们或许不需要 Redux 这个库
React

我们或许不需要 Redux 这个库

之前和大家分享了我们不需要系列: 《我们或许不需要 classnames 这个库》《我们或许不需要 React 的 Form 组件》接下来我们继续调整难度, 替换应用范围更广的库: redux, react-redux 《我们或许不需要...》系列如果是做轮子就没有意义了, 此系列目的是通过简单的代码, 对原有库的设计思路进行概括提取, 最终从理解其理念到更高效的开发项目的过程. 此行目的Redux 在 React 中的重要性在此不再暂开, 其设计理念(单向数据流, 提供者模式)深得人心, 但是在实际开发中, 每个引用 Redux 的项目都会需要解决以下三个问题:

从零创建一个 Dart 服务端项目
Flutter

从零创建一个 Dart 服务端项目

前几天(此文写于2019年6月)看了咸鱼的一篇文章 Flutter & Dart三端一体化开发 , 相信有一部分人想使用 Dart 尝试编写一些服务端的代码. DartVM 的性能已经和 JVM 非常接近, 再加上和 Nodejs 一样的异步io的处理方式, 可以达到和 Nodejs 同级别的并发性能, 并且还有更好地运算性能, 完全可以替代大部分 Nodejs 的使用场景. 这篇文章将会带大家从零创建一个 Dart 服务端项目, 本文会逐步覆盖一下知识点: 从一个空文件夹开始, 安装依赖库, 编写可执行的项目编写

Service Worker 简明分享
Front End

Service Worker 简明分享

本文是一个公司内部分享会的产物,旨在用尽量少的字介绍 Service Worker Service Worker 和 PWA 的关系Service Worker 是浏览器的一个功能,PWA 是一个理念或标准,用来规范离线 Web 的行为。 Web Worker在说明 Service Worker 的使用方式之前,我们先简单说一下 Web Worker Web Worker 具体的细节可以参考阮一峰的:Web Worker 使用教程;

React 中使用 worker 和 decode 优化 image 的加载
React

React 中使用 worker 和 decode 优化 image 的加载

图片加载占据了一个 web 应用的较多资源。 这篇文章中,我们实现一个 ImgWorker 组件,满足以下功能: image 可选择的 worker 加载,并且做好优雅降级decode 解码,并且做好优雅降级miniSrc 和 src 竞速加载注意,在性能较低的机器,开启 worker 进程下载的开销大于直接使用主进程下载的开销; 使用 worker 需要主动传递 worker 属性为 true 开启 组件代码先上代码,

Flutter 相关的 VSCode 设置

Flutter 相关的 VSCode 设置

Flutter 插件:只需要安装一个官方的flutter插件即可: 取消 Closing Labels 干净清爽:设置代码块提示:没有了coding label,我们可以使用更简洁的插件: 然后设置样式,#666是我在light主题所用的颜色,若是dark主题,可以自行设定其他颜色: { "bracket-pair-colorizer-2.colors": [ "#666", ], "bracket-pair-colorizer-2.activeScopeCSS": [ "borderStyle : solid", "borderWidth : 1px", "borderColor : {color}", "opacity: 1" ] }我们可以看到,在编辑过程中,

ghost 中文输入法修复
Skills

ghost 中文输入法修复

适用于 ghost 3.0.2修复内容: 中文输入法在新行时,输入会阻断第一个字符中文输入法在选词过程中,执行删除、换行、tab等行为会影响输入(个人偏好)mac系统下,cmd+delete 删除光标下至行首字符社区中8个月前已有人提交了修复内容,但是Ghost团队一直未更新 @tryghost/mobiledoc-kit。 对于这个事情博主个人是挺恼怒的,因为这类 issues 在 TryGhost/Ghost 仓库中有不少,当前的 ghost使用非英语语种的输入法体验非常糟糕,

Flutter入门-官方教程笔记
Flutter

Flutter入门-官方教程笔记

本文是官方文档学习过程的笔记 官方文档: https://flutter.dev/docs/get-started/codelab 本文目的官方的文档把每个步骤都拆成了小片段, 需要上下文联系的阅读, 如果你和我一样, 入门的时候有阅读理解困难的症状, 本文或许能帮到你, 因为本文的每个代码片段都是基于上一段代码的完整扩展, 可以独立运行, 并且在代码中保留了关键的注释. 初始化项目# bash flutter create myapp cd myapp flutter run -d <deviceID> Hello

使用70行代码配合hooks重新实现react-redux
React

使用70行代码配合hooks重新实现react-redux

原由react-hooks 是 react 官方新的编写推荐,我们很容易在官方的 useReducer 钩子上进行一层很简单的封装以达到和以往 react-redux \ redux-thunk \ redux-logger 类似的功能,并且大幅度简化了声明。 react-hooks 的更多信息请阅读 reactjs.org/hooks; 先看看源码这 70 行代码是一个完整的逻辑, 客官可以先阅读,或许后续的说明文档也就不需要阅读了。 简易的实现了 react-redux, redux-thunk 和 redux-logger默认使用 reducer-in-action 的风格, 也可声明传统的

CSS in JS 很棒, 但是如何方便的处理CSS伪类
React

CSS in JS 很棒, 但是如何方便的处理CSS伪类

CSS in JS 很棒, 但是如何方便的处理伪类(Pseudo-classes)? react-dom-pseudo 提供一个类似 react-motion 方式的组件,方便的为 react-dom 对象提供类似 CSS 的伪类. 我们首先用 npm 安装: $ npm install --save react-dom-pseudo APIsreact-dom-pseudo 支持以下伪类: Props模拟伪类说明默认值必须merge是否使用 style 和 其他状态的 style 进行合并true否disable是否取消事件监听false否style默认样式undefined否linkStyle:

前端另一种多语言的实现思路
Front End

前端另一种多语言的实现思路

多语言i18n往常的做法是一个语言一个配置文件, 但是这样需要添加一个新的字符串时, 需要逐个打开许多个语言文件, 常常会漏, 并且每次修改一个字符都要编辑好几个文件. 我们换一种思路, 把 i18n 的多语言直接写在当前代码中,而不是写在配置文件中. 思路用一个方法,根据开发环境\当前浏览器语言去处理应该使用哪个字符串, 并且暴露设置当前语言的函数,以兼容 nodejs 端或者开发人员扩展其他语言. 该库仅仅不到 70 行代码, 实现一个精巧的i18fn. 使用安装 i18fn 库: $ npm i --save i18fn const i18fn

一篇(长)文章入门Golang
Skills

一篇(长)文章入门Golang

参考资料: http://go-tour-zh.appspot.comhttp://www.jb51.net/article/127812.html缘由Go语言极其精简, 不像其他语言有那么多花花肠子, 秉承着一个目的尽量只有一种解决方法的哲学. 导致于我们有可能在一篇文章中就阐述清楚它的基本语法. 文中的内容是阅读Golang官方文档时的笔记和理解, 所以基本囊括了官方入门教程的知识点. 对照代码注释和打印的日志说明可以加深理解. Q: 为什么是长文, 而不是分成一章章? A: 一篇长文慢慢滚动着看, 更容易不知不觉看完...逃... 目录环境安装及配置你的第一个程序初始化顺序\命名规范几句话说明白指针slice的基础使用map的基础使用函数及闭包结构体的函数扩展Interface接口error的使用goroutine:Go程channel信道select协程切换编写测试文件\文件夹创建,读取,移动,

基于Brower-sync和Parcel的真正零配置打包工具
Front End

基于Brower-sync和Parcel的真正零配置打包工具

此文写于2018年,现阶段不推荐使用 Parcel,请安心使用 Webpack缘由Parcel 在 React 项目中还是需要配置 babel,transform-runtime, postcss, scss 等其他配置的,并且某些情况的热更新会失效,并且不方便忽略一些不需要打包的库, 不能和webpack一样地引用相对路径的资源文件, 所以有了这个基于 Parcel 和 browser-sync 的打包库。 如果您看了前篇 更优雅的使用 Parcel 进行前端项目的打包, 觉得繁琐, 以下步骤更简便的满足该篇文章的内容. 安装$ npm i

You've successfully subscribed to 摄人心魄!