• 喂,快给我打一个小程序预览码

    Posted by : lon.y@qq.com on 2018年7月22日

    需求 开发小程序的朋友们随时都会听到一句话:“喂,快给我打一个xxx环境的预览码”,无论你正在干什么,都得赶紧地回一句:“稍等,这就给你打码……” 然后苦逼的你build了一个xxx环境的包,打开了微信开发者工具,点了一下预览,等了一下,预览码出来了,你复制丢给你的爸爸们。 终于有一天,你正在专心致志做一些不可描述的事情时,“喂,快给我打一个xxx环境的预览码”,这时你内心怒吼了一句:“老子不给你打码!你自己打去!” 于是就有了这个需求,要搞个东西让爸爸们

    阅读全文...

  • Web Worker 使用教程

    Posted by : lon.y@qq.com on 2018年7月22日

    一、概述 JavaScript 语言采用的是单线程模型,也就是说,所有任务只能在一个线程上完成,一次只能做一件事。前面的任务没做完,后面的任务只能等着。随着电脑计算能力的增强,尤其是多核 CPU 的出现,单线程带来很大的不便,无法充分发挥计算机的计算能力。 Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行。在主线程运行的同时,Worker 线程在后台运行,两者互不干扰。

    阅读全文...

  • 揭开JS无埋点技术的神秘面纱

    Posted by : lon.y@qq.com on 2018年7月22日

    一、背景 相信很多人都接触过“埋点”这个概念,无论是前端还是后端开发,我们都可以使用这门技术来生产出一些运营性质的原始数据(接口耗时、程序安装/启动、用户交互行为等等),然后分析它们得到一些抽象指标(例如留存率、转化率),进而决定产品运营或者代码优化的方向。现在业界有许多比较知名数据平台,比如Google Analytics、Facebook Pixel、Mixpanel、GrowingIO、诸葛IO、TalkingData、神策数据等数不胜数一大票,这些

    阅读全文...

  • 使用React.js开发Chrome插件

    Posted by : lon.y@qq.com on 2018年7月22日

    一、背景 相信看到这篇文章的人应该都用过Chrome插件吧,最近刚好有个这方面的需求,我就把Chrome插件的相关知识学习了一下,发现其实Chrome插件的开发和大前端Web开发的底子是一样的,无非就是runtime只限于Chrome浏览器,并且可以调用Chrome提供的一些chrome.* API来实现一些基于Chrome浏览器的小功能。这里非要类比的话,我理解chrome.* API就像我们开发Hybird应用一样,需要有一个bridge层来提供底层原

    阅读全文...

  • 基于 MobX 构建视图框架无关的数据层-与 Vue 的结合

    Posted by : lon.y@qq.com on 2018年7月22日

    mobx-vue 目前已进入 mobxjs 官方组织,欢迎试用求 star! 几周前我写了一篇文章描述了 mobx 与 angularjs 结合使用的方式及目的 (老树发新芽—使用 mobx 加速你的 AngularJS 应用),这次介绍一下如何将 MobX 跟 Vue 结合起来。 安装 npm i mobx-vue -S 使用 mobx-vue 的使用非常简单,只需要使用 connect 将你用 mobx 定义的 store 跟 vue componen

    阅读全文...

  • 说说React组件的State

    Posted by : lon.y@qq.com on 2018年7月22日

    React的核心思想是组件化的思想,应用由组件搭建而成, 而组件中最重要的概念是State(状态)。 正确定义State React把组件看成一个状态机。通过与用户的交互,实现不同状态,然后渲染UI,让用户界面和数据保持一致。组件的任何UI改变,都可以从State的变化中反映出来;State中的所有状态都用于反映UI的变化,不应有多余状态。 那么什么样的变量应该做为组件的State呢: 可以通过props从父组件中获取的变量不应该做为组件State。 这个

    阅读全文...

  • 不同Node版本导致的Date构造函数问题及解决方法

    Posted by : lon.y@qq.com on 2018年7月22日

    近期在封装时间选择组件的单元测试时,为了构造出Date对象,直接使用了默认Date构造函数。自己本地开发,测试均无问题,push远程后,某个小伙伴在本地跑测试用例时,却无法通过,具体报错如下: 通过截图信息,可以初步判断由于Date构造函数返回了不同日期导致,抱着好奇的态度查阅个各种资料后,竟然发现一个小小的日期构造函数里面大有文章,平时自己写起来都是浅尝辄止,没有深入了解过。下面将详细介绍这个破案过程,以免各位看客后续重蹈覆辙。 问题排查 按照一贯做法,

    阅读全文...

  • 你不知道的前端SDK开发技巧

    Posted by : lon.y@qq.com on 2018年7月22日

    最近在做公司内部的一个的一个SDK的重构,这里总结一些经验分享给大家。 类型检查和智能提示 作为一个SDK,我们的目标是让使用者能够减少查看文档的时间,所以我们需要提供一些类型的检查和智能提示,一般我们的做法是提供JsDoc,大部分编辑器可以提供快捷生成JsDoc的方式,我们比较常用的vscode可以使用Document This。 另一种做法是使用Flow或者TypeScript,选择TypeScript的主要原因是自动生成的JsDoc比较原始,我们仍然

    阅读全文...

  • React Native基础&入门教程:初步使用Flexbox布局

    Posted by : lon.y@qq.com on 2018年7月5日

    在上篇中,笔者分享了部分安装并调试React Native应用过程里的一点经验,如果还没有看过的同学请点击《React Native基础&入门教程:调试React Native应用的一小步》。 在本篇里,让我们一起来了解一下,什么是Flexbox布局,以及如何使用。 一、长度的单位 在开始任何布局之前,让我们来首先需要知道,在写React Native组件样式时,长度的不带单位的,它表示“与设备像素密度无关的逻辑像素点”。 这个怎么理解呢? 我们知

    阅读全文...

  • React Native基础&入门教程:调试React Native应…

    Posted by : lon.y@qq.com on 2018年7月5日

    React Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中,使用浏览器的调试工具去Debug移动端的代码,无疑是最吸引开发人员的特性之一。 试想一下,当你在手机屏幕按下一个按钮,处理事件的代码就可以立即在浏览器的调试工具里进行断点调试,而且每当你对代码进行修改,界面便可以完成快速地重载,省去昂长的编译时间,这会是多么提高工作效率。 传统的Web前端开发人员自然很熟悉浏览器的调试工具,但是对于如何将其在RN中使用以便和移动端结合起来,也

    阅读全文...