礼锐的博客 | Lirui Blog

VUE + Typescript

尝试下新玩意

概述 VUE 是前端三剑客之一, 之前一直处在写过 demo 的地步, 没有很深入的体会, 这次公司因为招不到 react 的人, 所以希望尝试将技术栈换为 vue, 以便更方便招人. 于是就有了 VUE 的踏坑之旅, 而且一开始就是配合 ts 来食用, 因为在 react 中 ts 的配合相当的好, jsx 里的代码类型提示应有尽有, 可以很大的提升开发效率以及减少 bug. 以为在 ...

Posted by Lorry on August 21, 2019

深入理解 babel

关于 babel 的深入理解

babel是前端几乎使用量最大的编译工具之一, 他并不像其他语言里的编译器, 把源码编译成机器码, 他更多的是一个转译的功能, 将我们写的代码转换成浏览器可以识别的代码.因为浏览器就是前端的爸爸, 具体怎么转成机器码就是浏览器做的事情了, 比如 v8 引擎. 我在工作中使用 babel 是无感知的, 写代码, 调试代码都没有去看过源代码被编译后的内容, 通过一系列的 presets, pl...

Posted by Lorry on August 12, 2019

V8 的一些原理和优化

关于引擎的那一堆事

概述在没有 js 引擎之前, 都是没有编译的, 浏览器作为解释器对运行到的每条语句进行解释, 这样会导致 js 运行十分的慢, 一旦遇到比较复杂的逻辑, 解释再运行会消耗大量的时间, 加上 js 的单线程运行时, 就会阻塞后续的代码执行, 更无法响应用户的交互. 所以在没有引擎之前的前端, js 代码很少, 那会前端被称为切图工程师, 只需要制作出静态的页面,具体的复杂逻辑都是交给后端处...

Posted by Lorry on July 20, 2019

RPC 和 REST

API 的设计

概述 RPC(Remote Procedure Call) 和 REST(Representational State Transfer) 都可以作为 Web API 设计方法. 基于 HTTP 的实现两者都可以基于 HTTP 来实现. RPC 更适合一个数据量较小的场景, 可以节省带宽并且简化服务.可以具体到任何你想要的东西上, 也就是说可以让一个服务只做一件事情. 面向的是...

Posted by Lorry on July 1, 2019

MVC, MVVM, MVP的理解和比较

设计模式的 Battle

React, VUE 这些框架都借用了 MVC 的设计模式来进行数据, 视图, 逻辑的管理, 但是在跟同事沟通过程中, 原来不仅仅是前端, 任何语言都有类似的概念, 这是个软件界通用的设计模式. 设计模式, 模式二字听起来就很高深, 在写代码的时候肯定不如自己一套撸下来的爽, 设计模式好处后期维护方便, 因为可以解耦别人能快速看懂跟人沟通的时候会在这个”共识”下进行讨...

Posted by Lorry on June 21, 2019

面向对象编程 OOP

对对象更深的理解

ES6引入了一个很甜的语法糖就是 class, class 可以帮助开发者回归到 Java 时代的面向对象编程而不是 ES5 中被诟病的面向原型编程. 我也在工作的业务代码中大量的使用 class, 很少去触及 prototype 了. 两面性: class 语法糖的本质还是prototype, 所以应该回归到写 prototype 上. 既然有 cl...

Posted by Lorry on June 6, 2019

记一次前端跨域的问题

自力更生, 丰衣足食

跨域资源共享 CORS(Cross Origin Resource Sharing) 浏览器实现对不同源的网址的资源获取的行为.详见维基百科.这篇文章的起因来源于需要向别的部门进行资源请求, 不在同一个域, 资源请求不到, 等了两天还没解决后便通过node的express来代理请求, 解决了这个问题. 定义(WHAT) 什么叫不同源(满足下列条件任意一个) 不同的域名(...

Posted by Lorry on May 13, 2019

NW.js

另一款全端打包应用

之前写过一个使用 electron 进行打包的文章, 但是现在公司又有需求是需要在 xp 上适配, 而 electron 是不支持 xp 的, 于是就想到了另一款打包工具, nwjs. nwjs全称 Node-Webkit, 可以同时使用 DOM 和 node.js 的所以模块.所以就赋予了桌面端的功能. 这里使用 nwjs-builder-phoenix, 可以支持命令行打包.环境选择...

Posted by Lorry on February 10, 2019

一个FLEX的game

有趣的小游戏

周末玩儿了一个小游戏, 关于flex弹性布局的, 加上之前面试的时候被问到过相关的问题, 所以决定单独写一篇文章来总结一下, 需要的朋友直接点链接可以免费玩(我玩儿的时候免费, 据说之后会收费). 整体的剧情就是你作为一个冒险者, 拿着一把弓箭, 去射僵尸, 僵尸的排布不一, 且还会动态变化(弹性布局), 有一个mentor指导你, 会把flex的技巧都覆盖到, 而且很直观, 所敲即所得....

Posted by Lorry on January 15, 2019

浏览器API和协议

无线通信

浏览器网络概述现代浏览器不仅仅是一个简单的套接字管理器. 从表明看是一套资源获取机制, 但实质也有自己的平台, 由自己的优化标准, API和服务, 如上图所示连接管理和优化 Web应用不会维护单个网络套接字的生命周期,而是委托给浏览器自动化关键性能优化套接字重用请求优先级 late binding晚绑定协...

Posted by Lorry on December 30, 2018

Lirui Blog