counterxing
counterxing
…ntData.handle only one. * **Please check if the PR fulfills these requirements** - [x] The commit message follows our guidelines - [x] Tests for the changes have been added (for...
看到`src/Action/Label.ts`里面调用的： ```javascript apply(store: Store) { if (store.content.slice(this.startIndex, this.endIndex).includes("\n")) { // todo: support this? throw Error("Insert label across hard line is not supported now! Please remove the \\n in content first!");...
## 概述 对于后台开发来说，记录日志是一种非常常见的开发习惯，通常我们会使用`try...catch`代码块来主动捕获错误、对于每次接口调用，也会记录下每次接口调用的时间消耗，以便我们监控服务器接口性能，进行问题排查。 刚进公司时，在进行`Node.js`的接口开发时，我不太习惯每次排查问题都要通过跳板机登上服务器看日志，后来慢慢习惯了这种方式。 举个例子： ```javascript /** * 获取列表数据 * @parma req, res */ exports.getList = async function (req, res) { //获取请求参数 const openId = req.session.userinfo.openId; logger.info(`handler getList, user openId...
* 理解TypeScript和JavaScript的关系 * 理解所使用的TypeScript选项：即`tsconfig.json` * 理解TypeScript代码生成类型无关的JavaScript代码（TypeScript做了两件事，一是将高级的JavaScript语法和TypeScript转化为低级的浏览器可运行的JavaScript代码，二是编译时校验类型） * 类型错误的代码会报错 * TypeScript是编译时检查，并不会在运行时检查 * 类型断言并不会影响真正的返回值（即使使用as语法，也不会发生强制类型转换） * 运行时的类型不一定会和声明的类型一致（因为可能并不知道调用者会传什么类型） * 不能像C++那样使用函数重载，TypeScript一个函数只能有一个实现 * TypeScript并不会影响运行时的性能，编译后还是JavaScript * TypeScript使用结构化类型，而JavaScript使用鸭子类型 * 避免使用`any`类型 * 使用编辑器来查询和推断类型 * 将类型视为值的集合，这些集合可能是有限的（如boolean，或常值类型），也可能是无限的（如number或string） * 区别值空间和类型空间 * 每个值有一个类型，但类型没有值。...
利用业余时间写了个用vue全家桶仿写豆瓣电影wap版。 原计划仿写完所有页面，碍于豆瓣的接口API有限，实现页面也有限。 由于公开的[豆瓣接口](https://developers.douban.com/wiki/?title=movie_v2#subject)具有访问次数限制，克隆到本地体验效果更加！ web端访问已设置宽度适配。 进入GitHub查看[本项目源码](https://github.com/xingbofeng/douban-movie) 欢迎`issue`，`pr`，`star` or `follow`！我将继续开源更多有趣的项目！ ## 在线版 [点击进入](http://www.angryzhangzhe.cn:3000/) 本地体验线上版本： ``` git clone https://github.com/xingbofeng/douban-movie.git cd douban-movie npm install node server/index.js ``` 打开浏览器访问http://localhost:3000/ 体验！ ## 使用 ``` git clone...
 ### 技术选型 由于这个项目其中涉及到大量的单选题、文本题做题逻辑，即是`v-model`实现的`v -> vm`的绑定，选择`Vue`这一轻量框架作为项目技术栈是毫无疑问的。 单选题效果当然是下面这样：  ### 项目搭建 由于此项目是针对之前用`React`做的[有道精品课 - 模考系统](https://exam.youdao.com)的`wap`版本改版工作，后端接口已经可以完全照搬之前的接口。项目初期是由我负责项目搭建。也算是第一次自己架构公司的商业项目吧。使用的依旧是之前自己写的[豆瓣 - 电影](https://github.com/douban-movie)和[一个](https://github.com/vue-one)的搭建模式。 其中遇到的一些问题： - 没有提前规划好组件就开始写(这真的跟搬砖没什么区别)。 - 没有注重组件的复用性：如单选题组件在选择时和答案解析时我分了两个组件，其实它们完全可以划分为一个组件的两种状态。 - 本地存储方法应该用封装好的`storage`，我却私自引入了`store.js`。 - 过多的代码放在同一个文件内，比如单选题，多选题都放在一起，直接在容器组件写的`v-for`，其实容器组件里应该只放展示组件。 ### 团队的分工协调 前期团队的分工协调方面没处理好。因为开发只有我和一个刚入职的北邮毕业的大姐姐，而我们两个在项目管理方面的经验确实都是不足的。前期没有很好地把每个人应该负责的模块分离出来，耽搁了一些时间也造成了一些冲突。 最后是独立出来单个页面的分工方式，我负责测试结果页和答题卡/解析页，她负责入口页和倒计时页。在UI出图之前也算是基本完成了功能开发的工作。 ### review与收获...
## 学到的东西 - `vue`技术栈，这一块是从入门到基本熟悉。期间夹杂着抽空写了一个个人的`vue`项目。 - 踩移动端的一些坑 - `fixed`和`transform`的恩恩怨怨 - `-webkit-tap-highlight-color`设成透明 - `scrollTop`的`bug`(很灵异，至今都不懂) ```javascript let myScroll = window.document.documentElement.scrollTop; if (myScroll === 0) { myScroll = document.body.scrollTop; } ``` 在我和产品经理的两台电脑上的`scrollTop`不一样？而且都是`chrome`…… - 隐藏的`iframe`阻止表单提交跳页面？这个也许在网易云上边是个坑……至今没测……希望以后要尽量摒弃表单提交这种东西，全部`ajax`吧……...
举一些简单的例子说说我写的不太周全的代码吧。 ## 为何你要去多次dispatch？ 参考以下这段我已经修改后代码 ```javascript async action({ store, params }) { // 判断store里的id和当前id是否一致，若一致，则不请求后台 console.log('chapter') const chapterInfos = store.getState().home.chapterInfos; if (Object.keys(chapterInfos).length === 0 || chapterInfos.subject.id !== parseInt(params.chapter, 10)) { await store.dispatch(chapter(params.chapter));...
## 测试系统 * 数学公式的bug，没改出来。最后的解决方案是在`componentDidMount`里在调用`MathJax`的方法，而不能在一开始就调用，因为当时组件并没有渲染出来。。。使用`MathJax.Callback.Queue()`添个回调。 * 测试系统只看错题功能，虽然走`redux`，但写的有点复杂，分发了两次`action`。通过`code review`学了很多东西。 * 测试系统的一些bug修复：学到的一些东西，如`transform-origin`。默认使用`transform`的`scale`是会在中间进行缩放的。 ## 女生节活动页面 * 大量用了`transform`属性但是并没有加前缀，导致了移动端内置浏览器的不兼容，后面去修改有花费了很多时间:[autoprefixer](https://github.com/postcss/autoprefixer) * 使用`vendor`的问题：其实就是获取`window.location.href`里面的参数。采用的是志鹏封装的组件。 ```javascript var vendor; function init() { bindVendors(); } var getParameter = function(name) { var r...
原文：[Tasks, microtasks, queues and schedules](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules/)。 当我跟我的同事Matt Gaunt交流的时候，我就在酝酿写一篇关于在浏览器环境下事件轮训的微任务(`microtasks`)队列执行顺序的文章。他说，我相信你会写的，但是，我肯定不会去阅读你的文章。那好，现在我无论如何都要把它写出来，以便于我们都能够静下来心平气和地讨论这个问题。 事实上，如果你看过足够多的技术相关的视频，你一定看过这样一段[great talk at JSConf on the event loop](https://www.youtube.com/watch?v=8aGhZQkoFbQ)视频，虽然这段视频没有包含微任务(`microtasks`)的相关讲解，但它确实把异步相关的问题解释得较为清楚明白。 看以下代码： ```javascript console.log('script start'); setTimeout(function() { console.log('setTimeout'); }, 0); Promise.resolve().then(function() { console.log('promise1'); }).then(function() { console.log('promise2');...