StEve YoUng
StEve YoUng
## 怎么使用组件库？ 作为一个开发者，通常会用如下方式使用组件库。 ### 1. 使用 `` 标签 即直接在 html 页面中，使用既传统又新潮（module）的 `` 标签，来引入组件库代码。 ### 2. 借助构建工具 大部分情况下，前端项目还是基于 `npm` 安装组件库的包，之后再借助 webpack、vite 或其他构建工具使用组件库。 （当然你也可以不用 npm，直接复制粘贴一把梭~） > 所以一个组件库应该构建出什么产物呢？ ## 有什么构建产物？ 构建产物当然就是 js +...
开门见山地说，小程序在日常开发中使用原生框架来开发还是挺不方便的，比如： * 不支持 `npm` 包 * 不支持各种 `CSS` 预编译器 * 不支持配置 `Babel` 来转换一些 `JavaScript` 新特性 这样一来和日常开发前端页面的体验相比来说，简直就像在**刀耕火种**。 > 那么为了解决这些问题，我们能不能将前端开发中常用的 `webpack` 移植到小程序开发中呢？ **当然可以！** ## 0.源码地址 * 在 [webpack-simple](https://github.com/tuateam/tua-mp/tree/master/packages/tua-mp/examples/webpack-simple) 中文件结构和小程序相似。 * 而在 [webpack-vue](https://github.com/tuateam/tua-mp/tree/master/packages/tua-mp/examples/webpack-vue)...
## 为什么用 TypeScript？ > TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source. ———— [TypeScript 官网][1] ### 1.第一时间发现类型错误 据...
## 开发模式 ### 预览 demo 在开发一个 ui 组件库时，肯定需要一边预览 demo，一边修改代码。 常见的解决方案是像开发一般项目一样使用 `webpack-dev-server` 预览组件，比如通过 `vue-cli` 初始化项目，或者自己配置脚本。 文艺一点儿地可能会用到 `parcel` 来简化 demo 的开发配置（比如 [muse-ui][2]）。 ### 展示文档 作为一个 ui 组件库，也肯定要有自己的组件展示文档。 一般业界常见方案是自己开发展示文档... 但这样会带来一个组件库和文档如何同步的问题。 ### 为何不用 vuepress？...
## 遗留问题 书接上回，说道利用 `sideEffects` 字段，只需读取源文件即可实现按需加载，还有个坑忘了说... > 文档中的样式打包后会丢失... 因为我们只注意到了作为组件库的源代码，而忘了我们的文档是通过 vuepress 编译，即底层也是基于 webpack 进行打包。所以 `sideEffects` 中也要加上文档中的文件。 ## 组件文档该写些什么？ 在编写组件库文档时，有两个必不可少的部分。 * 组件预览，最好有相应的代码 * 组件 api，即 props、events、slots 等接口和参数的说明 ## 如何同时展示 demo 和 code？ *...
**[slide 地址](https://slides.com/yangzhenyu/functional-programming-in-javascript)** ## 四、Talk is cheap！Show me the ... MONEY! > 以下内容主要参考自 [Professor Frisby Introduces Composable Functional JavaScript](https://egghead.io/courses/professor-frisby-introduces-composable-functional-javascript)  ### 4.1.容器（Box） 假设有个函数，可以接收一个来自用户输入的数字字符串。我们需要对其预处理一下，去除多余空格，将其转换为数字并加一，最后返回该值对应的字母。代码大概长这样... ```js const nextCharForNumStr = (str) => String.fromCharCode(parseInt(str.trim()) +...
## 零、前言 在上一篇中介绍了 Redux 的各项基础 api。接着一步一步地介绍如何与 React 进行结合，并从引入过程中遇到的各个痛点引出 react-redux 的作用和原理。 不过目前为止还都是纸上谈兵，在日常的开发中最常见异步操作（如通过 ajax、jsonp 等方法 获取数据），在学习完上一篇后你可能依然没有头绪。因此本文将深入浅出地对于 redux 的进阶用法进行介绍。 ## 一、中间件（MiddleWare） > It provides a third-party extension point between dispatching an action, and...
**[slide 地址](https://slides.com/yangzhenyu/functional-programming-in-javascript)** ## 三、可以，这很函数式~  ### 3.1.函数是一等公民！ #### 3.1.1.滥用匿名函数 其实经常写 JavaScript 的人可能潜移默化地已经接受了这个观念，例如你可以像对待任何其他数据类型一样对待函数——把它们存在数组里，当作参数传递，赋值给变量.等等。 然而，常常可以看到滥用匿名函数的现象... ```js // 太傻了 const getServerStuff = function (callback) { return ajaxCall(function (json) { return callback(json) }) }...
## 零、前言 说到函数式编程，想必各位或多或少都有所耳闻，然而对于函数式的内涵和本质可能又有些说不清楚。 所以本文希望针对工程师，从应用（而非学术）的角度将函数式编程相关思想和实践（以 JavaScript 为例）分享给大家。 文章内容其实主要来自于在下阅读各类参考文献后的再整理，所以有什么错误也希望大家帮忙斧正~ **[slide 地址](http://slides.com/yangzhenyu/functional-programming-in-javascript#/)** ## 一、什么是函数式编程？ > Functional programming is a programming paradigm > > 1.treats computation as the evaluation of mathematical functions > >...
## 零、问题的由来 开门见山地说，这篇文章【又】是一篇安利软文~，安利的对象就是 [tua-storage](https://github.com/tuateam/tua-storage)。 顾名思义，这就是一款存储数据的工具。 > 用 tua-storage 好处大大的有么？ 那必须滴~，下面开始我的表演~ * 多端统一 api * 支持数据同步 * 数据过期逻辑 * 自动清理过期数据 * 支持永久保存 * 支持批量操作 ## 一、多端统一 api 日常开发中，在不同的平台下由于有不同的存储层接口，所以往往导致相同逻辑的同一份代码要写几份儿。 例如，小程序中保存数据要使用【异步】的 `wx.setStorage`、`wx.getStorage` 或对应的同步方法；...