关于Virtual Dom的那些事（五）

前言

上一篇《关于Virtual Dom的那些事（四）》主要是介绍了Thunk概念，加上之前所有有的内容都只是snabbbom的前菜，本篇直接分析其200 SLOC（Source Lines of Code），大概200行的核心代码。并附上其它剩余所有代码的源码分析。 继续阅读“关于Virtual Dom的那些事（五）”

Hybrid APP 开发中 APP 与 H5 如何通讯？

前言

搞 APP 开发，如何设计好一套 APP 与 Webview H5 通讯的机制非常重要，如果稍微使用及了解一下就会知道，APP 与 webview 之前通讯主要是通过 javascript 来进行，如果再深入了解一下就会理解其中的原理。 继续阅读“Hybrid APP 开发中 APP 与 H5 如何通讯？”

调试App的Webview里面的h5网页的几种最有效方式

前言

在做APP开发时，为了增加功能的灵活性、便即时更新内容和减少客户端开发人员的工作量不免要嵌入许许多多的H5网页，这就是我们通常所说的Hybrid APP开发。在这过程中，我们经常要对h5里面的js及html代码进行调试，如果我们用最傻瓜式的方式来调试可以使用js的alert把想要调试的内容打印出来。但这种方式非常不灵活也不便于即时更新代码进行调试。 继续阅读“调试App的Webview里面的h5网页的几种最有效方式”

关于Virtual Dom的那些事（四）

前言

上一篇《关于Virtual Dom的那些事（三）》主要是介绍了生成VNode的几种方式。翻一翻snabbdom的源码，我看还可以看到一个概念-Thunk，Thunk是什么？在react全家桶中经常会看到Thunk这概念，在计算机语言中是传名调用的意思，但如果按我个人的理解就是中间件的概念，更通俗一点就是在某函数的每次输入与输出之间，预加一个自定义的拦截处理函数（thunk函数）， 继续阅读“关于Virtual Dom的那些事（四）”

关于Virtual Dom的那些事（三）

前言

上一篇《关于Virtual Dom的那些事（二）》主要是介绍了VNode。其实生成VNode的方式在snabbdom中除了VNode自身的最基本的构造函数vnode()外，还有两种方式来生成。一种是toVNode（即把原生的Dom转化成为VNode），还有一种是非常有名的h函数（hyperscript最原始的定义是“Create HyperText with JavaScript.”）。本节主要是分析一下这两种函数在snabbdom中的源码。 继续阅读“关于Virtual Dom的那些事（三）”

关于Virtual Dom的那些事（二）

前言

上一篇《关于Virtual Dom的那些事（一）》在最后之处讲到Virtual Dom 主要涉及的概念。本篇将紧跟着并结合snabbdom的源码来讲讲其中的第一点“VNode”。既然是Virtual Dom，那当然其结构里面的Node节点相应也有VNode的概念。其组织形式按理来说应该与真实的Node节点类似才对。

真实Dom由些什么组成呢？

继续阅读“关于Virtual Dom的那些事（二）”

关于 Virtual Dom 的那些事（一）

前言

一直想写点关于 Virtual Dom 的东西。以前刚开始接触 react 的时候就已经接触到了 Virtual Dom 和 diff 算法的概念，但一直觉得这些都是很复杂，很高深的东西。后面使用 react，使用 Vue 多了，逐渐觉得这些概念没那么陌生了。但还是觉得各种开源的 Virtual Dom，React 等对 Virtual Dom 的实现的源码不太容易读懂，源码的注释不全是一大障碍，直到遇到了 snabbdom，才开始觉得有深究其源码的冲动。

为什么是 snabbdom?

继续阅读“关于 Virtual Dom 的那些事（一）”

小程序的工作原理简单分析

前言

搞前端开发的如果只停留在使用者的层面，那就太 low 了。大前端的世界丰富多彩。涉及 native 开发的有 facebook 的 react native（react 系的），阿里的 weex（vue.js 系的）后脚跟进，当然还有以基于 phonegap 的 ionic 为首的 hybrid 开发大行其道。涉及 PC 桌面端跨平台的有 electron 和 nwjs。而这里说到的小程序主要是指 微信小程序（以微信小程序为例，其他百度小程序、支付宝小程序、今日头条小程序等都与微信小程序神似……）

当我们打开小程序发生了什么？

Duang, Duang, Duang 那三个点在转啊转，大家应该都猜到，一定是拼命在加载此什么东西了。原来此时微信 正在加载小程序的完整包。其命名的格式一般是数字命名的 继续阅读“小程序的工作原理简单分析”

使用 Rollup 打包基于 Es 6 编写的 javascript 库的一般配置

前言

近期项目需要给APP编写类似于 jweixin-1.0.0.js 这样的桥接 APP 与 Webview 中 H5 页面的 js-sdk 类库，使用 gulp、gruntjs 或者 webpack 来搞有点重，因为 rollup 天生就对 Es 6 语法的支持非常友好，加上其首创的 tree shaking 技术使得打包出来的 js-sdk类库文件体型更小，还有官方也是非常推荐使用 rollup 进行 js 类库的开发，于是直接选用 Rollup 来自动化沟建非常适合。 继续阅读“使用 Rollup 打包基于 Es 6 编写的 javascript 库的一般配置”