Dart基础知识

发表于 | 分类于 编程语言/Dart

写了挺长一段时间的flutter,却没有系统地学习dart,因此这里整理一下dart语言的基础知识。

理解数据状态管理

发表于 | 分类于 技术原理

在传统的web应用中,用户和数据的状态更多地放在服务端,每一个页面的状态都在路由切换后重新从服务端拉取即可,前端并不需要过多地考虑数据状态的管理。

随着单页应用的逐渐发展,前端需要管理越来越多的数据:数据的更新会导致UI的变化,UI的交互会触发数据的更新,多个页面之间可能会共享相同的数据,随着应用的的规模增大,维护起来会十分麻烦。

这篇文章主要整理下几种管理前端数据状态的方案,以及进一步思考其背后的实现和意义。

如何在代码中打日志

发表于 | 分类于 编程技术

之前对于代码中的console.log一直是比较嫌弃的,以致于提交代码前一般会通过eslint检测是否包含了log输出。

最近一直在处理一个chrome插件的需求,需要打开某个url标签页,然后根据预先设定的操作行为,在页面上进行一些列操作(点击选项卡、选择日期、输入参数等),然后等待页面生成报表,实现自动下载的流程。整个过程较为繁琐,很不方便调试,在开发中使用了大量的console追踪页面的状态和操作行为的结果,逐渐认识到:日志应该是开发和调试中很重要的一环。因此在这里整理一下“如何在代码中打日志”的问题。

关于移动端跨平台框架的了解与思考

发表于 | 分类于 客户端

之前移动端是Web、Android和iOS三分天下,后来微信小程序加入战场,再后来又出了快应用支付宝小程序头条小程序等平台。前端跨端貌似成为了越来越主流的开发方案。

在之前的项目和学习中,也或多或少使用过一些跨端框架,这里整理一下我对于目前几种跨端开发方案的了解及思考。

理解Generator函数与async函数

发表于 | 分类于 编程语言/JavaScript

最近看见了一个async函数在event loop中的执行顺序问题,突然发现我对于Generator函数与async的掌握十分有限,惊出一身冷汗,赶忙恶补一番。

web跨页面通信的几种方式

发表于 | 分类于 技术原理

最近在处理一个weex三端的项目,在weex文档中提到,不同的 Weex 页面使用的是不同的执行环境,即使全局变量也是互相隔离的,官方推荐使用BroadcastChannel 来实现实现跨页面通信。

由于移动端safri中BroadcastChannel存在兼容问题,因此决定研究下web跨页面通信的其他方法。

优化博客开发环境和页面响应

发表于 | 分类于 博客

之前博客使用的是gulp + gulp-webpack构建前端开发环境,存在无法支持热更新、无法自动同步文件hash等问题,因此在v0.5.0版本对整个静态资源开发环境进行了重构,比较完整地实现了node服务端渲染项目中的前端开发环境,下面是整个开发环境的实现整理。

升级博客到HTTPS

发表于 | 分类于 博客

最近一直在搞flutter,遇见了使用flutter_webview_plugin支持webview的需求,打算把博客链接放上去,后来发现配置的网页URL必须是https的才行,由于之前站点一直没有升级https,因此需要首先解决这个问题。

下面是为站点申请免费的https证书的流程整理,实际操作之后,对于https的原理有了更清楚的认识。

理解EventLoop

发表于 | 分类于 编程语言/JavaScript

EventLoop即事件循环,是JavaScript单线程运行时实现异步非阻塞的原理,掌握EventLoop是学习JavaScript必不可少的一个环节,本文将整理浏览器和NodeJS中的事件循环机制,并了解他们的差异。

JavaScript中的数据类型转换

发表于 | 分类于 编程语言/JavaScript

JavaScript中的数据类型转换是一个很容易造成困惑的地方。本文是《你不知道的JavaScript(中)》类型转换相关的知识整理,强烈建议去看这本书。

如何部署前端代码

发表于 | 分类于 前端/前端工程

很早之前在知乎上看见一个提问:大公司里怎样开发和部署前端代码?,其中张云龙(fis3作者)的回答十分精彩。但当时由于水平有限,接触到的业务和开发环境也比较简陋。现在公司推行微服务,前端静态资源也基于fis3进行开发环境搭建和部署,算是这个回答比较完整的实现。

现在,是时候思考一下静态资源部署的重要性了。

初识puppeteer

发表于 | 分类于 前端/前端业务

大概是去年还在豆腐重构web站点的时候,一项比较重要的工作就是防爬虫。当时做了一些比较简陋的防爬虫手段,也了解到了一些神奇的爬虫方式,puppeteer就是在那时候了解的。恰好最近有一个工作需求,需要为运营搭建自动化的工作流程,因此想到了puppeteer,决定尝试一下。

innerHTML的性能问题

发表于 | 分类于 前端/前端工程

最近进行了一次前端渲染性能优化,遇见iOS中webview的innerHTML性能问题,总结一下。

初识npm

发表于 | 分类于 前端/模块化

npm全称为Node Package Manager,是一个基于Node.js的包管理器,用于查找、安装、管理和发布 Node.js 应用程序所需的各种包和模块,避免 JS 开发者重复造轮子,让大家的劳动成果可以共享。

npm是前端工程化的必须要掌握的基础知识,本文将整理通过npm安装依赖的一些细节。

Chrome扩展程序之自动更新

发表于 | 分类于 客户端/Chrome扩展程序

最开始接到产品的Chrome插件需求时,由于用户较少,优先的关注点是功能的实现,并未过多考虑如何部署插件。

每次更新都是提供一个压缩包,然后让用户使用开发者模式下加载本地压缩包的方式进行更新;后来用户逐渐增多,功能迭代也比较快,每次分发压缩包并重新安装,因此就有了插件自动更新的需求~

下面总结了两个插件实现的自动更新的一些整理和心得。

初识函数式编程

发表于 | 分类于 编程技术

早就听闻函数式编程的大名,却一直没有去了解,最近刚好看见《JS函数式编程指南》这本书,决定翻阅一下。

使用spritejs操作canvas

发表于 | 分类于 前端/前端业务

大概是一个多月前,从掘金推荐上了解到spritejs这个canvas库,碰巧中秋活动需要做一个比较复杂的canvas游戏,因此决定在项目中尝试使用spritejs。

这篇文章并不是介绍spritejs相关api或者使用方法,而是用于记录使用经验,包括相关项目以及踩过的坑,除此之外还有一些在canvas项目中常见的问题。

koa中间件导致接口404的问题

发表于 | 分类于 后端

最近在使用koa时遇见了一个很奇怪的问题:控制器中包含异步操作的接口,返回均为404;只包含同步操作的接口,接口返回正常。

经过排查,发现是前面使用了一个同步形式的中间件,并未等待后续异步中间件结束导致的问题。这里记录一下相关问题,以及分析koa中间件的实现和注意事项。

在微信小程序中使用webview

发表于 | 分类于 前端/小程序

在小程序并不支持webview的时候,小程序业务与web业务共用一套代码是比较繁琐了。在之前的项目中使用了诸如wepympvue等开发框架,在某种程度上实现了业务代码的复用,不过在某些地方还是需要区分平台,进行小程序的适配。

小程序在1.6.4开始支持web-view组件,这样就可以在小程序中直接接入web业务了。下面整理了在小程序项目中引入webview的开发心得。

编写gulp、webpack与fis3插件

发表于 | 分类于 前端/前端工程

在工作中接触了不少打包和环境构建工具,如gulpwebpack以及现在公司使用的fis3等,每个工具都有自己的社区和生态,并提供相关的功能插件,如编译sass、babel转移、压缩代码等。

在某些特定的需求和开发环境下,社区的插件并不能很好地满足开发生产需求(比如需要自定义打包过程的控制台输出、在编译scss文件前注入公共的scss变量代码等),因此需要了解对应工具的插件编写,这里整理一下。