架构始于业务，腾讯文档 Drive 前端中台建设（万字长文） 架构

前言 在 2022 年初，腾讯文档结合行业趋势和业务发展，提出了「Drive」概念。 此前，由于「在线文档类」产品独特的行业环境和战略考虑，编辑功能成为早期发展重心。因此，我们对模块的划分以较粗的枝条划分为「编辑」和「非编辑」两大类。...

ServiceWorker 缓存与 HTTP 缓存 PWA

虽然 ServiceWorker 和 PWA 正在成为现代 Web 应用程序的标准，但浏览器资源缓存变得比以往任何时候都复杂。 本文涵盖了浏览器缓存的重点内容，具体包括： ServiceWorker 缓存与 HTTP 缓存的优先级？...

如何构建可控,可靠,可扩展的 PWA 应用 PWA

如何构建可控,可靠,可扩展的 PWA 应用 #概述 PWA （Progressive Web App）指的是使用指定技术和标准模式来开发的 Web 应用，让 Web 应用具有原生应用的特性和体验。比如我们觉得本地应用使用便捷，响应速度...

微信小程序路由实战 微信小程序

0. 目录 1. 前言 2. 智能路由跳转 — Navigator 模块 3. 虚拟路由策略 — Router 模块 4. 落地中转策略 — LandTransfer 模块 4.1. 对于要解决的第一个问题：统一的落地页 4.2....

Module Seed: 一套优雅的 Github 工作流

#Motivation 平时喜欢写一些 NPM 模块，写得多了，整理出一套工作流，解放一些重复的搭建工作。 如果你喜欢，请直接拿去用，也可以参照该项目的一些 Feature ，给你一些提示与帮助。 #Feature 支持 Types...

函数保险丝：避免函数过热调用

#前言 在日常开发中，我们会遇到很多这样的场景： 在抢购活动中，用户往往会频繁刷新接口，要给接口加上防护，频繁调用停止响应。 在弱网环境中，往往会实现失败重试功能，如果失败次数多了，频繁的重试需要制止。 在股票市场中，当价格波...

微信小程序登录的前端设计与实现 登录 微信小程序

一. 前言 对于登录/注册的设计如此精雕细琢的目的，当然是想让这个作为应用的基础能力，有足够的健壮性，避免出现全站性的阻塞。 同时要充分考虑如何解耦和封装，在开展新的小程序的时候，能更快的去复用能力，避免重复采坑。 登录注册这模块，就...

一个失眠夜的胡思乱想

现在是凌晨 2:06，今晚喝了两瓶科罗娜。 以为喝了酒能好好睡，结果，还是失眠了。 是兴奋也罢，是焦虑也罢。既然明天不用上班，那么就让这个失眠夜来的更放纵些。 刚才躺在床上，竟然在构想起自己的退休生活。 希望自己的退休生活，会更有趣些...

关于 OKR 的一些方法论

前言 OKR 是由前 Intel CEO，安迪·葛洛夫 构建的基本框架。 全称是：「Objective - Key Result」，既强调「目标」与衡量目标的「关键结果」 它是一套管理目标，让目标能落地的工具。 它在硅谷科技公司中广为...

BeautyWe.js 一套专注于微信小程序的开发范式 小程序

官网：beautywejs.com Repo: beautywe 一个简单的介绍 BeautyWe.js 是什么？ 它是一套专注于微信小程序的企业级开发范式，它的愿景是： 让企业级的微信小程序项目中的代码，更加简单、漂亮。 ...

记一次「关于沟通」的培训

周末参与了公司给TL们安排的一个主题为《高效沟通》的课程，为期两天。 以往自己对「沟通」自我感觉良好，完全凭借感觉来，只要跟对方能表达清楚自己的想法，足矣。 两天下来，重新开始认识，「沟通」，其实是一门很深的学问。 这篇像是笔记，也像...

《管理的常识》读后感 「一」

《管理的常识》读后感 「一」 陈春花的《管理的常识》是一本相见恨晚的书。在读的过程中会有一种「如果能早点遇到你多好啊」的感慨。但换种思路，一年前读与现在读，肯定是完全不同的收获。现在读，能更多结合过去的实际感受，提炼更多的感悟和反思。...

原汁原味的配方:「微信小程序支持 NPM」 微信小程序

微信小程序本身不支持 npm 包的使用，目前市面上很多框架也有了相对应的解决方案。 本文旨在为那些不愿意引入第三方框架， 想在小程序环境中写原汁原味代码的人（例如我），提供一种解决问题的思路。 在现代的 Web 开发中，我们对 Web...

「译」JavaScript框架的探索与变迁 javascript

#译者言 近几年可谓是 JavaScript 的大爆炸纪元，各种框架类库层出不穷，它们给前端带来一个又一个的新思想。从以前我们用的 jQuery 直接操作 DOM，到 BackboneJS、Dojo 提供监听器的形式，在到 Ember...

有赞微信小程序分享 — 概念篇 小程序

在 2016 年 9 月 23 日 微信小程序内测开始以来，有赞的产品与技术一直紧跟着小程序的步伐。并且在 2017年1月9日 微信小程序发布的同时上线了有赞微商城小程序和有赞精选小程序。并且紧跟着开源了小程序的 UI 库：zanui...

加深对 JavaScript This 的理解 javascript

我相信你已经看过很多关于 JavaScript 的 this 的谈论了，既然你点进来了，不妨继续看下去，看是否能帮你加深对 this 的理解。 最近在看 《You Dont Know JS》 这本书，不得感叹，就算用了 JS 很多年...

谈谈像素以及微信小程序的 rpx 前端

前言 最近在负责有赞的某个业务的微信小程序开发，这是我第一次着手微信小程序的开发，这个过程中发现微信小程序所定义的一套 WXSS (WeiXin Style Sheets) 中有一个有趣的长度单位 rpx，即 responsive p...

2017 第一季度复盘

The Past Memeye 终于开源了，到目前为止已经有 153 个 star 了，但是后续没有再维护了，打算等我学完 Vue 以及对前端更加熟练之后，对前端部分进行重构，使得界面更加流畅。 输出文章九篇，其中八篇技术文。 输出...

一款 NodeJS 轻量级内存监控工具 Javascript Nodejs SOAP

Memeye Github 链接：https://github.com/JerryC8080/Memeye Memeye 是一个轻量级的 NodeJS 进程监控工具，它提供 进程内存、V8 堆空间内存、操作系统内存 三大维度的数据可视...

理解UDP udp

更好阅读体验：《理解 TCP 和 UDP》— By Gitbook UDP 和 TCP 的不同 TCP 在传送数据之前必须先建立连接，数据传送结束后要释放连接。 TCP 不提供广播或多播服务，由于 TCP 要提供可靠的、面向连接的...

理解TCP（六）：网络编程接口 tcp

更好阅读体验：《理解 TCP 和 UDP》— By Gitbook 一切皆 Socket 我们已经知道网络中的进程是通过 socket 来通信的，那什么是 socket 呢？ socket 起源于 UNIX，而 UNIX/Linu...

理解TCP（五）：可靠性交付的实现 tcp

更好阅读体验：《理解 TCP 和 UDP》— By Gitbook TCP 是一种提供可靠性交付的协议。 也就是说，通过 TCP 连接传输的数据，无差错、不丢失、不重复、并且按序到达。 但是在网络中相连两端之间的介质，是复杂的，并...

理解TCP（四）：状态流转 tcp

更好阅读体验：《理解 TCP 和 UDP》— By Gitbook 无论客户端还是服务器，在双方 TCP 通讯的过程中，都会有着一个「状态」的概念，状态会随着 TCP 通讯的不同阶段而变化。 #TCP 状态流转图 #各种状态表示...

理解TCP（三）：连接的建立和释放 tcp

更好阅读体验：《理解 TCP 和 UDP》— By Gitbook TCP 的整个交流过程可以总结为：先建立连接，然后传输数据，最后释放链接。 #三次握手，建立连接 TCP 连接建立要解决的首要问题就是：要使每一方能够确知对方的...

理解TCP（二）：报文结构 tcp

更好阅读体验：《理解 TCP 和 UDP》— By Gitbook TCP 是面向字节流的，但传送的数据单元却是报文段。 什么是报文？ 例如一个 100kb 的 HTML 文档需要传送到另外一台计算机，并不会整个文档直接传送过去，...

理解TCP（一）：端口 tcp

更好阅读体验：《理解 TCP 和 UDP》— By Gitbook #端口与进程 TCP 的包是不包含 IP 地址信息的，那是 IP 层上的事，但是有源端口和目的端口。 就是说，端口这一东西，是属于 TCP 知识范畴的。 我们知道...

Gulp 基础与原理 前端构建

Gulp 概述 Gulp 是基于 NodeJS 的项目，一个用作自动化构建的工具，业界一般用来建造前端的工作流。 它的核心原理其实很简单，最主要是通过各种 Transform Stream 来实现文件的处理，然后再进行输出。Trans...

魅族的冬与夏

冬天 我在离职协议书上面，签下了名字。 犹如当年签订实习协议一样的字迹，不同的只是那份心情。 我坐在魅族大楼前面围绕着一颗树而摆成的弧形长椅子，喝了口小卖部买来的咖啡。 两年半之间，偶尔在午后偷得一丝慵懒，来到这里喝杯咖啡，感受着珠海...

程序员如何保证「专注」与「效率」 效率 专注

多年前，家母常骂我容易沉迷，沉迷游戏，沉迷小说，沉迷电视剧，沉迷XXX。 意思就是说，例如当我在玩游戏的时候，很难打断我，完全沉入进去了，叫吃饭都听不见。 在我看来，「沉迷」与「专注」实质描述同一样事物的两个相反词义的词汇。 用在主观...

你知道「编译」与「解释」的区别吗？ 编译 解释

最近在看一些编译过程的知识点，看的比较多的是英文文献。 在这之间经常遇到的两个单词让我着实迷惑：Compiler, Interpreter 中文翻译分别是：编译器，解释器。 如果有人问我们「你知道什么是编译器么？」， 我们很有可能首先...

JavaScript 开发者所需要知道的 V8（一）：V8 In NodeJS Javascript v8 NodeJS

Motivation JavaScript 是一款拥有「自动垃圾回收」功能的编程语言。 市面上具有这样功能的语言，一般都是拥有相对应的虚拟机的，像 Java的JVM ，C#的CLR ，PHP的Zend。 虚拟机一般实现了代码解析，内存...

了解 Nginx 的基本概念 Nginx

前言 本篇是我学习Nginx的一些笔记，主要内容讲述了一些了解Nginx需要的基本概念。 然后探讨一下Nginx的模块化的组织架构，以及各个模块的分类、工作方式、职责和提供的相关指令。 主要达到以下目的： 了解Nginx的大概运行原...

何为技术人的核心竞争力

在寂静的夜晚上，独自一人在书房中，望着窗外，一片灯火阑珊，一条车水马龙。 不禁让我抬头四十五度，望着那轮朦胧泛黄的新月，又开始思考起自己的人生。 最初接触编程的是高中碰到的谭浩强的那本《C程序设计》，是不是一本好书，我不想做评价。 可...

打造高效个性Terminal（一）之 iTerm Tool Kit

前言 作为一个集效率控、颜值控、强迫症患者标签于一身的患者，对待自己工作用到的Terminal，自然是诸多要求。本文首先会讲一下怎么弄一个高颜值、个性化的Terminal，然后再说说怎么利用一些工具来提高Terminal的效率。 PS...

打造高效个性Terminal（二）之 zsh Tool Kit

oh-my-zsh 如果说iTerm塑造了一个婀娜多姿颜值高的貌美姑娘，那么zsh就是给她塑造了一个柔情侠骨百事通的女汉子之心。 #简介 Introduction 对于zsh的作用，摘自池建强老师的一段： 目前常用的 Linux 系...

读《重来》 读书笔记

之前我们团队一直在用Coding来作为代码仓库，以及团队协作的工具。大半年下来，攒了不少「码币」，正好碰上Coding的码市搞活动，用码币换取一些Coding的周边，我翻到码市页面的最底下，正好有《重来》这本书可以兑换。对于码农来说，...

Javascript 原型中的哲学思想 Javascript

记得当年初试前端的时候，学习JavaScript过程中，原型问题一直让我疑惑许久，那时候捧着那本著名的红皮书，看到有关原型的讲解时，总是心存疑虑。 当在JavaScript世界中走过不少旅程之后，再次萌发起研究这部分知识的欲望，翻阅了...

「ES6笔记」Babel babel ES6

.babelrc Babel的配置文件是.babelrc，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。 规则如下： 1234{ "presets": [], "plugi...

下雨天的夜晚，特别容易失眠

陷入迷茫期已经有差不多2个月了， 这一次比以往的迷茫都更长一些。 我应该庆幸，一些事情一杆棒打醒了我，明白了自己的懒惰以及安逸。我过去，并不是没有认真的工作，但那单单只是工作，虽然最后是能不错的完成。但那只是仅仅不错，离优秀甚远。自己...

「理解HTTP」之常见的状态码 http

状态码的职责是当客户端向服务器端发送请求时，描述返回请求结果。借助状态码，用户可以知道服务器端是正常处理了请求，还是出现了什么错误。 RFC2616定义的状态码，由3位数字和原因短信组成。 数字中的第一位指定了响应类别，后两位无分类。...

理解 CORS (Cross-Origin Resource Sharing) http cors

#存在即是合理 首先理解一下「跨站HTTP请求」 跨站HTTP(Cross-Site HTTP Reuqest)请求，是指发起请求的资源所在域不同于该请求所指向资源所在域的HTTP请求。 比如说，域名A(http://domain...

NodeJS中被忽略的内存 前端 Nodejs 内存

如朴灵说过，Node对内存泄露十分敏感，一旦线上应用有成千上万的流量，那怕是一个字节的内存泄漏也会造成堆积，垃圾回收过程中将会耗费更多时间进行对象扫描，应用响应缓慢，直到进程内存溢出，应用奔溃。 虽然从很久以前就知道内存问题是不容...

何为语法树 语法树

#什么是语法树？ 你是否曾想过，这个世界存在这么多语言的意义。 假如现在你面前有一个物体，它是一个不规则的圆体，整个身体通红，头部还有一根细长稍微弯曲偏右呈棕色的圆柱体。 在中文我们称之为「苹果」， 在英文我们称之为「Apple」...

二零一六年一月二十八日，于珠海

从什么时候开始，我开始迷茫了。 在这里做了一年多的Node.js后端，但是现在业界都是把这门语言归并到前端技术中。 我知道自己的前端技术水平很烂，基本功一开始没有练好，在后续也没有继续去锻炼。 今天看了由「阿当」发起的前端届撕逼大...

如果你用GitHub，可以这样提高效率 Nodejs Tool Kit

一年时间我们从几个人的开发团队发展到十几人的团队，最初的我们只有两个后端加两个前端，而且其中三个还是实习生。 但今时不同往日，现在我们有前端、后端、测试、运维、设计、产品、交互，成功集齐了七个兵种，可以召唤神龙，赐我们一个敏捷的开发团...

那一夜独处

异地恋的开始，让我渐渐的开始再次… 学会一个人的生活， 学会享受独处的时间， 学会享受一个人的红茶， 学会享受周末午后那属于一个人的阳光， 学会享受一个人安静的在暖黄色的灯光下细细品味书架上久久未动过的书。 独处的时间让我重新有了思...

登录那些事儿 Nodejs session cookie 单点登录

也不知道是什么原因，刚开始不久的职业生涯，在技术这条路走着走着，和「登录」总是有着一个不解之缘。还记得当初学习Web编程的时候么？不管是Java、.Net、PHP，继经典「Hello World」之后，要写的很有可能就是「登录」功能。...

消息系统设计与实现「下篇」 架构 消息系统

#模型设计 #Notify 12345678id : {type: 'integer', primaryKey: true}, // 主键content : {type:...

消息系统设计与实现「上篇」 架构 消息系统

由于文章篇幅较长，而作者精力有限，不希望这么早就精尽人亡，故分成上下篇来写消息系统的设计与实现。上篇主要讲的是一些概念，搞清楚我们要做的这个消息系统的主要内容。而下篇主要讲具体的实现，会包括架构设计，数据库设计，业务流程详细的实现等...

单点登录的三种实现方式 session cookie 单点登录 架构

单点登录SSO（Single Sign On）说得简单点就是在一个多系统共存的环境下，用户在一处登录后，就不用在其他系统中登录，也就是用户的一次登录能得到其他所有系统的信任。单点登录在大型网站里使用得非常频繁，例如像阿里巴巴这样的网站...

在Nodejs中贯彻单元测试 Nodejs mocha unit test

在团队合作中，你写好了一个函数，供队友使用，跑去跟你的队友说，你传个A值进去，他就会返回B结果了。过了一会，你队友跑过来说，我传个A值却返回C结果，怎么回事？你丫的有没有测试过啊？ 大家一起写个项目，难免会有我要写的函数里面依赖别人的...

Session原理 session cookie

#无状态的 HTTP 协议 还记得每当入门一门 Web 端语言的进行服务器端开发的时候，仅次于「Hello World」的 demo 就是「登录功能」了。实现登录功能很简单，验证客户端发送过来的账户和密码，如果通过验证就把用户塞进 s...

为什么使用Sails Nodejs SailsJS

#前言 入手Node.js半年，从用Express开发自己的博客到用Sails开发公司项目，深深被Sails震撼了。Sails是Balderdash团队的产品，快速的项目构建、优秀的框架结构还有众多的扩展，让我有种相见恨晚的感觉。在K...

基于RESTful-API-怎么设计用户权限控制 架构 RESTful 权限系统

#前言 有人说，每个人都是平等的； 也有人说，人生来就是不平等的； 在人类社会中，并没有绝对的公平， 一件事，并不是所有人都能去做； 一样物，并不是所有人都能够拥有。 每个人都有自己的角色，每种角色都有对某种资源的一定权利，或许是拥有...

盘点国内的那些ROM ROM

#前言 最近新闻比较多，阿里入股魅族的消息除了轰动之余，不免会让人回想起去年的Flyme Powered by YunOS。腾讯推出的TOS，也会使人想起那年昙花一现的tita。一加公布其自主ROM正式改名OxygenOS的消息，也让...

My Nodejs Tool Kit Javascript Nodejs Tool Kit

#Cheerio Fast, flexible, and lean implementation of core jQuery designed specifically for the server. Cheerio，说它是服务...

SOAP，WebService的枢纽 Javascript Nodejs SOAP

#前言 前两天，室友给我发了一套代码… 一段对话下来，我心中多个疑问：SOAP是什么？node调用java接口？ 一向懒散的我，不知为何却对些问题有点兴趣，平常我们处理不同应用程序之间的通讯，都是以RESTful API的方式的，...

HTML-CSS-JS打造Windows桌面版《2048》 HTML CSS Javascript node webkit

前言 受益于Node的问世，Javascript终于能够挣脱浏览器这个条条框框的盒子。于是，Javascript能够开发服务器应用了。既然Javascript能够运行在操作系统中，那是否也能使用Javascript像C/C++开发那...

基于jQuery的2048游戏

#前言 受网上看到的一个2048视频游戏制作的启发，做了一个网页版的，很多细节参照了一下别人的。暂时还没有分数统计功能，找时间再做好。先上一个demo版。 #截图 #程序架构 演示地址：http://jerryc8080.gith...

原生JavaScript实现拖拽效果 Javascript

#前言 闲着无事干，突然想做一个类Q+ Web桌面的东西，当然那是一个大工程（对本菜鸟来说）。那么，这个Demo就是第一步，起码可以实现图标的拖拽效果。 截图： 123456789101112131415161718192021222...

Javascript那些书籍 Javascript 书籍

转眼间已是准大四生了，在身边的小伙伴们纷纷参加各小中大企业的暑期实习的时候，我却因为某原因回家乡宅一两个月咯。 人间有那么一句言论：程序员不持续学习是没出息滴。 人生也何尝不是这样，立志在前端发过发热的我，列了一些关于Javascri...

iframe-在IE下透明背景 前端

iframe 在其他主流浏览器下，默认背景是透明的。但是在IE下要通过设置iframe属性来实现背景透明化。 代码如下： 123456frameborder //边框属性allowtransparency //透明背景属性scr...

jQuery动画反方向延伸 前端

Jquery的动画效果都是从左到右，从上到下延伸的。如果要实现反方向延伸呢？ 以下代码实现动画从右到左延伸，读者可以举一反三实现从下往上延伸的动画。 CSS： 123456#bar { margin-left: 100...

Kissy WaterFall 实现手动加载数据 前端

#前言 由于Kissy WaterFall默认是监听滚动事件来实现数据动态加载的，但是有一些情况要用到手动加载数据。以下是使用Kissy WaterFall实现手动加载数据的方法。 最终实现效果：点击”逛更多的商店“会动态加载数据 #...

Kissy WaterFall 静态调用 前端

需要用到的JS 1234<script src="kissy.js"></script><script src="base.js"></script&g...