- 博客(208)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 小程序调试技术详解(基于小猴小程序)
本篇文章主要围绕小猴小程序调试技术第三版进行展开。在上一篇导读文章中提到，小猴小程序的调试部分从无到有一共经历了3个版本。本篇文章会详细描述面向开发者的调试功能是如何实现的。文章将会描述以下部分：调试实现的基本通信关系结构。如何实现完整的DOM审查能力。如何实现Console。如何实现Source以及断点调试。如何实现对网络记录的审查。如何实现基于页面的数据审查。基本通信关系结构概述上图完整的表达了实现小程序调试技术各关键部分之间的关系。主要分为以下几个关键角色：调试面板:.
2021-08-22 21:59:01
7697
2
原创 小程序调试技术导读
最近公司内在自研小程序，而我负责其中的调试部分，主要面向于开发者工具。本篇文章是导读文章。调试能力从0到1一共经历了4个版本，接下来的文章将会以这4个版本为主线分别进行介绍。初始版上图为调试还不存在时的一个通信关系图。在彼时已经实现了逻辑代码与渲染代码的运行隔离，其中逻辑代码是运行在一个vm中的。渲染层通过Electron提供的IPC能力与electron进行通信。electron持有vm的引用，在收到渲染层的请求后，Electron会直接交给vm执行。vm中运行的代码会通过vm的C
2021-08-04 18:49:05
2320
4
原创 拖拽式Vue组件代码生成平台(LCG)新版详细介绍
拖拽式Vue组件代码生成平台是一款小猴自研的Vue代码生成工具，英文全称：Low Code Generator，简称LCG。它也是一种LowCode解决方案。通过它可以快速完成Vue组件的代码骨架搭建，通过减少不必要的重复工作从而带来开发效率的提升。体验地址：https://lc.100tal.com/出现的背景做前端久了就难免会发现有一些工作其实是繁复的，它们有一些共同的特点：频率高非常基础花费时间而有一部分工作是可以通过技术手段解决的，例如在写Vue时会发现：class的名称需
2021-01-07 20:02:31
5765
6
翻译 Android官方开发文档Training系列课程中文版：目录
本博客翻译文章源文件都已开源。在翻译了一篇安卓的官方文档之后，我觉得应该做一件事情，就是把安卓的整篇训练课程全部翻译成英文，供国内的开发者使用，尤其是入门开发者，虽然现在网络上有很多入门课程，但是还是依靠官方文档学习来的靠谱，安卓官方文档是一系列的课程，使每个人可以系统的掌握安卓的知识。
2016-03-15 13:30:27
8965
15
原创 【历史文档】小程序启动速度优化实践
这篇文章是2018年3月写的，本身只是做了简单的内部分享。近期被人问题这段经历，发现忘得一干二净，于是再拿出来回顾回顾。前言：前端应用的启动速度一向是移动终端的优化重点，因为这是面向用户进入的大门。良好的启动速度无异于会带来良好的用户体验。本篇文章主要介绍每日优鲜主商城小程序的启动速度优化方法。启动时间消耗概览小程序的启动时间主要分为以下几个阶段：微信客户端比对版本差异，下载并加载代码。小程序本身的初始设置，业务逻辑请求处理。页面的渲染。所以，小程序从点击启动到渲染完成主要会经历以上.
2021-09-03 14:22:39
484
原创 如何开发小程序开发者工具?
最近集团内部在自研小程序，我负责小程序开发者工具的调试部分。经过一段时间的探索，摸索出不少经过实际检验的可行手段。接下来将会用几篇文章总结一下思路。文章的内容主要会分为以下几部分：如何建立逻辑层运行时容器（两种方案利弊）？如何嵌入调试审查面板？如何启动断点调试能力？如何审查小程序DOM？如何实现逻辑层与渲染层的通信？如何实现渲染层与Chrome扩展的通信？先放几张图出来：小程序审查图：渲染层用的是Vue的能力，所以审查也是基于Vue-devtools做的。Vue-devtools
2021-06-24 19:25:49
345
6
原创 script标签的async、defer属性傻傻分不清楚？来一次说清楚
Normal ExecutionBefore looking into the effect of the two attributes, we must first look at what occurs in their absence. By default, as mentioned above, JavaScript files will interrupt the parsing of the HTML document in order for them to be fetched (if
2020-12-28 15:38:58
361
原创 前端如何做极致的首屏渲染速度优化
这里说的极致是技术上可以达到最优的性能。首先为了降低白屏时间，可以加一个loading效果。但拿vue项目来说，尤其是以vue-cli创建的项目来说，能做到极致并不容易。默认vue-cli会在生成的文件头部增加很多的link，而这些link会阻碍后面脚本的处理，等这些脚本处理完才会有dom的生成以及动画的执行。所以，我们的极致目标就是让loading动画尽可能的早。为了看出优化前优化后的效果差异，一切在浏览器的3G慢速情况下验证。未完待续。。。...
2020-12-24 21:31:16
2434
3
原创 浏览器对Html的解析过程
Parsing means analyzing and converting a program into an internal format that a runtime environment can actually run, for example the JavaScript engine inside browsers.The browser parses HTML into a DOM tree. HTML parsing involves tokenization and tree co
2020-12-14 14:54:10
257
原创 前端开发者的福音！通过拖拽就可生成Vue代码的平台来了！
Vue组件代码生成平台Vue组件代码生成平台是一款面向Vue开发者的拖拽式组件代码生成工具。通过它可以快速搭建Vue组件的代码骨架结构。开发者可在此基础上进行二次开发。目前该平台非常适合快速搭建一个常见的数据查询组件，仅需要拖三个组件进来即可完成，例如:界面及操作介绍主界面主要分为三块区域:组件库区域，组件库区域主要用于选择组件元素。组件操作预览区域，该区域主要编辑组件元素的位置与属性。实时代码生成区域，当组件元素被拖入到预览区域时，该区域会实时生成对应的代码。一个简单组件在熟悉了
2020-11-12 10:13:21
7522
原创 我在小程序工程化方面的一些实践
我在小程序工程化方面的一些实践早期做小程序时，还是原始时代，项目结构混乱，各种冗余代码，每次迭代时由于高昂的维护成本，极为头疼。遂在一次次的更迭中完成了基础组件的初版，极为酸爽。从此之后在当时的情况下只需要关注于业务，对于通用的该封装分装，该分层分层，该解耦解耦，也出了一款独立于业务之外的基础组件。洋洋自得。后来入职新公司，遇到的问题也是同样的，在工作之余计划将此前抽象的基础组件集成进来，发现...
2020-03-04 20:20:36
590
原创 随机/线性颜色生成器（RandomColorGenerator）
最近在实现https://javascript30.com/的课程，其中有一门课程要求利用Canvas实现一个效果，我发现这个效果其中的颜色是线性生成的。结合我之前已经写过一个随机颜色生成器，就想将这个随机颜色生成器写出来，作为一个工具使用，虽然实际应用场景不大，就当练练手了。本示例中使用了大量的Generator，在写的过程发现ES6所提供的Generator在这个场景中非常适用。可以参考学习...
2020-02-25 21:39:14
8299
原创 整理一波国外前端学习网站
国内的普通开发者对于掌握一门新的技术不知道从哪里下手，看哪些书。为了获得相关知识会关注各种公众号、购买各种视频课程来学习，但由于这些内容本身有碎片化的特点，效果往往不太理想。以至于付出了大量的时间到最后不能够形成系统化的知识。我同样也遇到过类似的问题，不是说公众号与视频课程不好，这些也有自身的优势，但是往往都是别人经过实践沉淀下来的，我们读过之后往往仅限于了解而已。如果要掌握还需要大量的实践、探...
2020-02-14 16:58:50
8212
3
原创 前端应用开发架构图谱
个人整理的前端架构图谱，之后会根据这个图谱不断的完善内容。希望这个图谱可以对开发同学的知识脉络有个梳理的作用。项目创建脚手架IDE脚手架IDE或社区提供的脚手架业务型脚手架根据业务特点通过Node写的工具，用于降低高频手写操作通用组件Element UIEchartIView项目分层组件错误数据采集业务代码与运行时框架隔离安全性兼容...
2020-02-11 17:52:50
7876
4
翻译 Webpack构建性能优化指南
本指南翻译自webpack官方性能指南文档：https://webpack.js.org/guides/build-performance/构建性能本指南涵盖了对增进构建或编译性能的一些有效的提示。General以下提示对开发环境或者生产环境都有效。Stay Up to Date保持最新的webpack版本。我们总是在改进webpack的性能。目前最新的webpack版本为：v4.4...
2019-12-24 15:39:22
1038
原创 记一次Vue框架升级
框架升级背景公司目前业务迭代很快，且大部分的流量都在公众号上。然而我们公众号所使用的框架却是3年前的Vue 1.0.16。面对Vue这3年来带来的无数新特性，我们只能望洋兴叹：看得见，摸不着，因为升级这事看起来太难了。经常可以听到老同事、新同事对老框架频频吐槽，也听到很多同学说升级太难了，完全不可能。于是，我就寻思着整点事。升级概况我们的公众号承载的是一个电商购物平台，历经3年多的版本迭...
2019-12-12 17:43:07
1752
原创 axios网络请求框架源码解析
早期axios0.1.0版本做了对IE浏览器与包含XmlHttpRequest的浏览器的支持。并且做了对请求参数拼接、Json对象序列化等基本功能。到0.19.0版本时，内部请求已经变为了在Node环境下与主流浏览器的支持，其中Node环境下支持http请求与https请求。并且支持取消、拦截。Axios执行开始之初，首先执行createInstance方法，createInstance方法用...
2019-06-13 17:11:18
2355
3
原创 Promise源码解析
Promise源码解析纸上得来终觉浅，绝知此事要躬行。之前只是很浅显的知道Promise的用法，也大概猜测到它的内部是如何实现的。但是总是有一种不深究一下就不踏实的感觉。于是从npm上获得早期的Promise源代码，拿过来读一读，做一做笔记。Promise的源码写的非常的巧妙，凭空阅读会陷入入其中无法自拔。简单的Promise用法一个简单的Promise用法如下：const promis...
2019-05-31 20:34:59
2401
1
原创 深入解析Node.js setTimeout方法的执行过程
深入了解setTimeout源码之前，本有两个选择。一是通过chromium源码分析，二是通过Node.js源码分析。后来发现第一种方案的源码获取成本太大，于是从Node官网获取了几十兆的代码用来了解。setTimeout方法定义于timers.js文件中，源码整体如下：function setTimeout(callback, after, arg1, arg2, arg3) { // ...
2019-05-30 18:59:13
2942
1
原创 Vue源码探究笔记
一切从这张图开始：数据的入口： /** * ViewModel exposed to the user that holds data, * computed properties, event handlers * and a few reserved methods */ fun...
2019-02-27 20:06:57
4926
原创 VS Code HtmlFindClass 插件介绍
这款插件诞生于工作中，在写大量的前端代码之后，发现有的工作比较重复，浪费时间，于是想能不能通过工具来解决。期初是拿Java写的，但是它不利于推广，因为很多前端同学不掌握Java。以至于是一直我自己在使用。后来很长时间之后，我自己再用还得查一查以前的使用文档。这还得了，瞬间就有一个想法，搞一个插件出来。于是一下午时间加足马力写出了这个插件并发布了出来。Features在插件支持的文件中，单击...
2019-01-30 15:49:00
808
原创 每日优鲜小程序基础组件介绍
每日优鲜小程序基础组件介绍1.基础组件介绍2.基础组件的结构与作用3.基础组件的接入方法初次引入初始化更新与维护基础组件接入1.基础组件介绍小程序基础组件基于每日优鲜主商城小程序业务实践演变而来。基础组件的名称为：mini_app_base_module。基础组件的项目地址为：https://github.com/sahadev/mini_app_base_module。2.基础组件的结...
2018-09-29 19:28:03
2919
原创 EventBus1.0.1源码解析
很久没有更新过源码解析类文章，以下内容作为源码分析类的笔记。分析方法适用于其它源码分析。分析工具说明许久以来，阅读源代码最得力的工具就非Source Insight莫属了。然，后来微软出了一款轻量级但功能强大的IDE就没Source Insight什么事了。微软的这款IDE就是大名鼎鼎的VSCODE，全名叫：Visual Studio Code。它的强大之处这里就不过多描述了。我们转回...
2018-04-11 16:42:51
573
原创 Githug第42关rebase_onto通关秘籍
Githug是一个用来了解、熟悉Git的一个非常好的游戏。目前网站上收录的都是之前只有55关的解题方法，没有新增的rebase_onto这一关的内容。现在Githug一共有56关。现将新增的42关的解答内容更新如下：第42关的题目如下:Name: rebase_ontoLevel: 41Difficulty: **You have created your branch f
2018-01-23 15:10:32
1834
原创 Android自动化测试探索
Android自动化测试探索前言通常来说，我们开发完成产品之后，都是由测试组或者是我们自己点一点，基本上没有问题了就开始上线。但是，随着时间的堆叠，一款产品的功能也越来越多。这时，我们为了保证产品的质量，就需要在每次测试时将所有的流程都走一遍。然而，对于一款庞大的产品来说这是困难又复杂的。因为我们自己手动测试需要花费大量的时间来完成主业务测试这种重复性工作。为了保证效率以及解决成本，我们就需要考虑将
2017-08-04 19:23:56
3855
8
原创 使用Kotlin开发Android应用初体验
使用Kotlin开发Android应用初体验昨晚，最近一届的谷歌IO大会正式将Kotlin确定为了官方开发语言，作为一名Android开发鸟，怎么能不及时尝尝鲜呢?Kotlin的简要介绍在开发之前，很多同学一定有很多疑问，Kotlin到底有啥好处，怎么和现有的项目共存呢？Java那么些特性Kotlin都有吗？嗯，让我们一一来看。
2017-05-18 17:20:17
25933
6
原创 简明扼要的反射入门教程
反射反射作为RTTI语言（比如Java）的基础之一被很多人所熟知，但是有些同学对反射本身还是懵懵懂懂的，不是很清楚它到底有什么用。今天这节课我们就对反射本身来一个通体的认知。定义反射所在的包为：java.lang.reflect它的英文版定义是：Reflection allows programmatic access to information about the fields, methods
2017-04-28 14:28:49
4595
1
原创 探索Glide对Gif图片资源的获取、解析过程
大家新年好，很久没写博客了。今天我们来探索一下Glide是如何支持Gif图片加载的。本篇博客的目的了解代码分析的基本思路与方法了解Glide是如何对Gif图片进行支持的探索背景为什么会有这么一个想法呢，一来一直对Glide是知其名而不知其所以然，二来还主要是工作中需要对它研究研究，以便更好的支持工作内容。我想很多同学都希望自己可以对某种著名的开源框架了解贯通，但是很多
2017-02-10 15:18:16
5105
4
原创 如何修改TextView链接点击实现(包含链接生成与点击原理分析)
*这篇文章的主要目的是想要大家学习如何了解实现，修改实现，以达到举一反三，自行解决问题的目的。某天遇到这么一个需求：在TextView中的文本链接要支持跳转，嗯，这个好办，TextView本身是支持的，我们只用添加一项属性就可以搞定： android:autoLink="web"在添加后发现确实是有效果了。但是如果我们不想使用系统默认的浏览器，而是想要这个地址跳入某个页面或者自己应用内的浏览器该怎
2016-12-14 14:57:36
5901
1
原创 令人振奋的好消息！2016年12月8日Google Developers中文网站发布！
令人振奋的好消息！2016年12月8日Google Developers中文网站发布！以往我们需要访问Android的开发网站、Google的开发网站都需要翻墙，苦不堪言。现在Google发布了中文网站，怎能不让人开心？！Android中文开发网站： https://developer.android.google.cn/index.htmlGoogle中文开发网站： https://devel
2016-12-08 10:45:15
4198
1
原创 一步步手动实现热修复(三)-Class文件的替换
在上一节了解了基本的类加载原理之后，我们这一节开始对工程内部的类实行替换。 Tips: 本章主要依赖文章http://blog.csdn.net/vurtne_ye/article/details/39666381中的未实现代码实现，实现思路也源自该文章，在阅读本文之前可以先行了解。这一节我们主要实现的流程有：在工程内创建相同的ClassStudent类，但在调用getName()方法返回字
2016-11-27 09:48:07
7791
13
原创 一步步手动实现热修复(二)-类的加载机制简要介绍
一个类在被加载到内存之前要经过加载、验证、准备等过程。经过这些过程之后，虚拟机才会从方法区将代表类的运行时数据结构转换为内存中的Class。我们这节内容的重点在于一个类是如何被加载的，所以我们从类的加载入口开始。类的加载是由虚拟机触发的，类的加载入口位于ClassLoader的loadClassInternal()方法： // This method is invoked b
2016-11-25 15:23:33
4925
2
原创 一步步手动实现热修复(一)-dex文件的生成与加载
热修复技术自从QQ空间团队搞出来之后便渐渐趋于成熟。我们这个系列主要介绍如何一步步手动实现基本的热修复功能，无需使用第三方框架。在开始学习之前，需要对基本的热修复技术有些了解，以下文章可以帮助到你：安卓App热补丁动态修复技术介绍【腾讯Bugly干货分享】Android Patch 方案与持续交付Android dex分包方案dodola/HotFixdex文件的生成与加
2016-11-24 13:08:57
11574
35
翻译 Android官方开发文档Training系列课程中文版：Activity测试之创建功能性测试
原文地址：http://android.xsoftlab.net/training/activity-testing/activity-functional-testing.html功能性测试包括模拟用户操作之类的组件验证。例如开发者可以通过功能性测试来验证在用户执行了UI操作之后Activity是否启动了Activity。如要为Activity创建功能性测试，测试类应当继承ActivityInst
2016-11-14 11:42:48
2079
翻译 Android官方开发文档Training系列课程中文版：Activity测试之创建单元测试
原文地址：http://android.xsoftlab.net/training/activity-testing/activity-unit-testing.htmlActivity单元测试除了可以快速的验证Activity的状态之外，还可以验证Activity与底层组件之间的交互。单元测试通常用于测试较小的代码单元(它们通常不依赖系统或者网络资源)，它们可能是一个方法，一个类或者其它组件。例如
2016-11-11 13:37:07
2127
翻译 Android官方开发文档Training系列课程中文版：Activity测试之UI组件测试
原文地址：http://android.xsoftlab.net/training/activity-testing/activity-ui-testing.html一般来说，正因为Activity含有UI组件，所以使得用户可以与程序交互。这节课将会介绍如何测试Activity中的Button组件。在课程学习之后便可以使用相同的方法对其它UI组件进行测试。 Note:这节课中所涉及的UI测试被称
2016-11-05 11:21:46
2048
翻译 Android官方开发文档Training系列课程中文版：Activity测试之创建运行测试
原文地址：http://android.xsoftlab.net/training/activity-testing/activity-basic-testing.html为了验证在布局与功能上没有差池，很重要的一点就是需要为每个Activity创建对应的测试类。对每个测试类还需要创建单独的测试用例，这其中包含测试环境，测试条件以及对Activity测试的测试方法。实现这些便可以进行测试并获知结果。
2016-11-03 10:43:21
1919
1
翻译 Android官方开发文档Training系列课程中文版：Activity测试之测试环境配置
原文地址：http://android.xsoftlab.net/training/activity-testing/index.html引言开发者应当将测试作为应用开发周期的一部分。良好的测试用例可以帮助开发者及早的发现Bug，同时也可以增强开发者对代码的信心。测试用例定义了一系列对象与方法，使各个测试可以独自进行。测试用例既可以组合运行，也可以重复进行。这节课的课程将会介绍如何使用Android
2016-11-01 10:23:02
2421
翻译 Android官方开发文档Training系列课程中文版：Android的安全建议
原文地址：http://android.xsoftlab.net/training/articles/security-tips.htmlAndroid系统内置的安全策略可以有效的降低应用程序的安全问题。所以默认创建的应用程序已经包含了一定程度的安全保护措施。Android所包含的安全策略有：应用程序沙箱，它可以使APP的数据、代码与其它APP相互隔离。应用程序框架对于常见防护措施的强大实现，比
2016-10-27 22:35:01
5830
4
翻译 Android官方开发文档Training系列课程中文版：Android的JNI相关
原文地址：http://android.xsoftlab.net/training/articles/perf-jni.htmlJNI的全称为Java Native Interface，中文意思是Java本地接口。它定义了Java代码与C/C++代码之间的交互方式。它是两者的桥梁，支持从动态共享库中加载代码。虽然有些复杂，但是它的执行效率还是蛮高的。如果你对JNI还不太熟悉，那么可以通过Java N
2016-10-17 18:07:21
10293
5
MVP模式在Android中的应用之图片展示选择功能的框架设计
2015-11-17
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人