• Works
    • 笔记
    • 资源
  • 关于我

拉风的博客

如何学习Vue2源码

Posted by raphealguo on 7 九月, 2017 9 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/

背景

近期我们把微信公众平台管理端的前端框架切成 MVVM 架构,框架层面最终我们选择了 Vue,为了更了解 Vue,阅读Vue源码是必要的。

我参考的 Vue 版本是 2.2.0,整个项目的代码1万2千行,如果不搞清楚原理,直接每一行看下来肯定会漏掉不少细节,或者对作者为什么这样写代码感到莫名其妙。

如此庞大的项目要啃下来并非易事,里边涉及到非常多的概念:Virtual Dom; 条件/列表渲染; 自定义组件; 双向绑定; 指令等等。

按照经验,编写这么庞大的系统,我们总是从第1行代码开始写起,慢慢写到第1万行,逐步构造出整个系统/框架。

所以我也会按照这个思路,从零开始构造出一个完整的Vue框架。

[Read more...]

Posted in: javascript | Tagged: MVVM, Vue, Vue2.x, 源码

有“脑”的数字电路

Posted by raphealguo on 22 十月, 2015 1 Comment
作者:raphealguo    文章来自http://rapheal.sinaapp.com/

前言

近期看了一些关于数字电路和计算机组成原理的书籍,挺有趣的话题,整理成文章分享一下。
先推荐几本书籍:《编码:隐匿在计算机软硬件背后的语言》《深入理解计算机系统》,文章基本是从这几本书提炼的东西加上自己理解整理而成。

传递信息的电路

高中我们经常学过一个很简单的电路构成:一个电源、几条电线、一个开关、一个灯泡。

闭合开关之后灯泡就亮了。如图,可以理解成:我们把一个电压信号从电源这边通过电线传递到了灯泡这一端。当然这个电路也可以理解成:开关的”开“/”关“这一个状态通过这个闭合打开的动作传递给了灯泡。

电路

<图1:电路>

[Read more...]

Posted in: 计算机组成 | Tagged: 硬件, 计算机

一次安全可靠的通信

Posted by raphealguo on 16 九月, 2015 7 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/

公众号文章一直被运营商各种挟持插广告,今年逐步都切换成HTTPS,前两周再重新梳理了一些HTTPS细节,趁有空整理成文章做个分享。

Alice与Bob的通信

我们以Alice与Bob一次通信来贯穿全文,一开始他们都是用明文的形式在网络传输通信内容。

Alice与Bob通信

嗅探以及篡改

如果在他们的通信链路出现了一个Hacker,由于通信内容都是明文可见,所以Hacker可以嗅探看到这些内容,也可以篡改这些内容。

嗅探与篡改

[Read more...]

Posted in: Web安全, 安全 | Tagged: CA, HTTPS, ssl, 加密, 数字签名, 认证

Web开发新人培训系列(四)——实践.快速迭代.并行开发

Posted by raphealguo on 23 四月, 2015 6 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/

背景

我们先看看我们之前的开发场景:

SVN开发

程序员a开发功能A,程序员b开发功能B,当开发完毕后提测上线。

但是公众平台的功能越来越多,涉及的开发人员也越来越多。
于是乎就出现了程序员c、d、e、f分别开发功能C、D、E、F。
大家一起开发完功能提测上线。貌似看起来没任何问题。

[Read more...]

Posted in: Web开发 | Tagged: Web开发, 工具, 提测, 效率

Web开发新人培训系列(三)——上线

Posted by raphealguo on 22 一月, 2015 5 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/

前言

上一篇我们介绍清楚了一个普通Web应用的网络结构,浏览器发起一个请求的目的无非就是想要Web服务器给他一个资源。资源对于这一篇的主题又有什么联系?看来没有解释清楚我这里想说的“资源”,上线这个话题没法继续了。

发个招聘广告:微信开放平台基础部招后台开发,有意者把简历发到我邮箱:raphealguo@qq.com

资源

我们看看浏览器其实最后收到服务器返回的都是什么“资源”:描述页面结构的HTML文件;网页的样式CSS文件;网页的脚本JS文件;网页的音频/视频/Flash……

因此我们得到一个简单的结论:

资源 == 文件

对于那些动态数据(通过PHP/Java等执行后得到的结果),例如:HTML内容;JSON数据…… 其实我们也可以把这个请求的资源等同于对应的CGI执行文件(PHP脚本文件/CGI二进制等程序)

浏览器需要知道服务器回的是什么内容,所以每次的响应包还有一个类型说明这个资源是什么东西,也就是我们经常说的MIME type(Multipurpose Internet Mail Extensions)代表互联网媒体类型(Internet media type)

MIME type == 文件类型

上线?

好,既然浏览器每次需要服务器返回一个资源,那我们的Web服务器其实就是放着对应服务所需要的资源。所以我们把这个操作定义为上线:

上线 == 把资源放上Web服务器

而资源等同于文件,因此:

上线 == 把文件放上Web服务器

像云龙(@前端农民工)说过的,Web架构最重要的能力就是:如何管理资源跟如何部署资源,这里的部署资源我们可以简单认为就是上线。 留意一下,下文为了通顺,有些地方用了发布 跟 部署这个字眼来描述上线的一个动作。 [Read more...]

Posted in: Web开发 | Tagged: Web开发, 上线, 灰度

前端代码异常监控

Posted by raphealguo on 6 十一月, 2014 25 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/

前言

PS: 听到不少声音质疑以下例子,本文的例子跟监控图不是真实的案例,仅仅为了简单说明问题,等过几天有空修改一下例子。

我是开发微信图文页一名普通的码农。
近期加班加点上线非常重要的的广告功能:

示例

底部的广告区域有关注公众号的按钮,用户点击之后就会给广告主带来粉丝,给文章所有者带来广告收入。
某天,码农心血来潮,想了解一下每篇文章的图片都来自什么域名,于是加了一段统计脚本….

加入统计

如此简单的for循环能难得了我,测试啥,直接上线!

[Read more...]

Posted in: 前端工程 | Tagged: 前端工程, 监控

Web开发新人培训系列(二)——经典的Web应用网络模型

Posted by raphealguo on 24 十月, 2014 11 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/

前言

这篇文章要介绍的是一个常见Web应用基本的过程跟网络模型,当然,对于多数的Client/Server应用也是适用的。延续这个系列文章的风格,只管通俗不管严谨。

概览

总体模型概览图:

概览

[Read more...]

Posted in: Web开发 | Tagged: Web开发, 网络模型

微信webview模拟器

Posted by raphealguo on 25 九月, 2014 8 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/

背景

我们经常在微信的webview开发时会遇到比较头痛的问题:

  1. 微信的JSAPI没法调试(只能打log来定位问题)
  2. 微信的登录态(getA8key服务)比较难在PC上模拟(要抓日志看ui、key或者利用web微信的跳转)
  3. 手机没法连上开发机(不在一个网段)。

之前尝试过在PC上使用安卓模拟器来调用微信APP,从而在PC可以调试网页,同时也可以访问开发机,但是模拟器的使用非常耗资源,也很难在PC成功跑起来。

为了解决这个调试困难的问题,尝试用浏览器的Javascript插件来实现一个类似微信的webview的功能:微信webview模拟器 [Read more...]

Posted in: 工具 | Tagged: webview模拟器, 工具

Web开发新人培训系列(一)——协议

Posted by raphealguo on 11 七月, 2014 11 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/

前言

近期给实习生介绍一些基本概念,顺便梳理一下文章,方便之后可重复利用。
从事Web开发必须要了解从浏览器输入URL后到页面加载完之后的整个大概的流程,当然可以就某些点细化的研究下去,这一过程涉及到:HTTP/HTTPS协议、代理/反向代理、Web server、CGI、浏览器端的知识(HTML+Javascript+CSS)
只有把整个流程都梳理清楚,才有能力去讨论其他问题,例如如何去优化Web性能、如何利用工程化提高效率、在某些业务场景的技术方案取舍等。
本篇文章会以一个例子介绍计算机网络基本工作的过程,最终再详细介绍HTTPS是如何解决网络包加密问题。绘说明图找不到相关好的工具,所以文章引用了几张来自《图解TCP/IP》的图

快递

我们来看一个常常出现的场景:
Alice在淘宝买了一件衣服,我们输入收货地址收货人付款后,卖家Bob帮我们把衣服打包放进纸箱里,贴上一个快递单:

寄件人:Bob
地址:北京市朝阳区朝阳路1号
收件人:Alice
地址:广东省广州市新港中路197号C公司

快递公司D派人去Bob家收到包裹,接着整理了公司的包裹,分批往个个城市送货。由于D公司没有直达广州的货运车,因此这些包裹先随着去上海的车到达上海的中转站之后,再把要发往广州的包裹搬到另一辆车发往广州中转站。
快递员Rapheal把快递送到C公司,快递中心的前台mm帮Alice签收后转交给了Alice。 [Read more...]

Posted in: Web开发 | Tagged: HTTP, HTTPS, Web开发, 协议

解读uglifyJS(四)——Javascript代码压缩

Posted by raphealguo on 22 五月, 2014 7 Comments
作者:raphealguo    文章来自http://rapheal.sinaapp.com/

前言

对于Javascript来说,提高网络下载的性能最直接的方法就是把JS文件体积减小,前边混淆压缩变量名字是方法之一,但是还有诸多可以把代码体积压小的规则,我在本篇文章会对UglifyJS所有压缩代码体积的细节整理成一条条的规则,为了方便理解,还会给出一些压缩前代码以及压缩后代码的对比。由于UglifyJS里边对IF的压缩规则最多,也是最为丰富精彩的部分,放在最后边解释。
还是那样,有兴趣了解UglifyJS实现细节,看文章最后的我对它源码做的注释。
留意:

  1. 下边代码样例中左侧为压缩前源码,右侧为压缩后代码,为了对比方便,下边多数的代码压缩后的变量名字没有混淆处理,同时一个压缩规则的例子尽量不混其他压缩策略进去。
  2. 我下文多处写到的表达式语句是指UglifyJS语法分析得到的simple_statement,你可以认为只要能放到逗号表达式里边的都算是simple_statement。

[Read more...]

Posted in: javascript, uglify源码, 源码 | Tagged: uglifyjs, 源码
1 2 … 4 下一页 »

标签

BFS CA CSS dfs ExtCSS HTTP HTTPS jQuery MVVM PHP源码 Sizzle ssl uglifyjs Vue Vue2.x webview模拟器 Web开发 Zend源码 上线 云南游 入门 前端工程 加密 协议 工具 提测 效率 数字签名 数学 旅游 游戏 源码 灰度 监控 硬件 算法 网络模型 计算机 认证

近期评论

  • 捕获页面中全局Javascript异常 - 算法网 发表在《前端代码异常监控》
  • Augustmyv 发表在《如何学习Vue2源码》
  • Holographicuqj 发表在《如何学习Vue2源码》
  • Foamcub 发表在《如何学习Vue2源码》
  • liusir 发表在《关于我》

链接表

  • bang
  • DIV.IO
  • 小木舟

Copyright © 2023 拉风的博客.

Theme by ThemeHall.