途虎购膜记

工作生活  |  2个月前

今年 6 月份的时候提了新车,在南方这种炎热的地区,上牌后要做的第一件事就是贴车窗太阳膜。适逢 618 大促,在各电商平台对比后,最终看上了途虎在售的两款太阳膜——「胜利×山由 嫦娥系列-揽月」和「3M 英才」。

下单沟通

「胜利×山由 嫦娥系列-揽月」的前挡膜是金属膜,从参数上看透光率和隔热能力都不错。前挡是主要的热量来源,以反射热量原理隔热的金属膜,效果更有保障。

胜利×山由 嫦娥系列-揽月

「3M 英才」的侧后挡膜,在众多品牌和款式中,透光率相对较高,正符合我不希望侧后挡颜色太深的需求。

3M 英才

找销售客服沟通了一下,其中一款膜还有额外的优惠。然而,这些全车太阳膜套装,并不能只买前挡膜或侧后挡膜。无奈之下只好把两套都买下来,待完成施工之后,再把剩下的膜在闲鱼卖掉。

73次阅读,2条评论

当 sendBeacon 遇上 Blob

前端开发  |  1年前

2014 年,W3C 发布了信标(Beacon)的标准草案最终征求意见稿(目前已经是候选推荐草案)。该规范定义了一个异步非阻塞的数据上报接口,可以最大限度地减少对其他关键操作的资源占用,同时保证请求能正常发出。同年,该接口就被引入了 Firefox 和 Chrome,即 navigator.sendBeacon(下文简称为 sendBeacon)。

在实际开发工作中,该接口最常见的使用场景就是数据埋点。与其他埋点技术方案相比,sendBeacon 的优势在于:

  • 不会跟业务代码抢占资源,而是在浏览器空闲的时候再去发送;
  • 在页面卸载(关闭、刷新、跳转)时也能保证请求发送,同时不阻塞页面卸载。

第一个主角——sendBeacon

sendBeacon 的方法原型非常简单:

navigator.sendBeacon(url, data);
686次阅读,0条评论

在 Web 应用的运行时实现多分支并存和切换

前端开发  |  2年前

背景

一般来说,SaaS 服务商提供的是标准化的产品服务,体现的是所有客户的共性需求。然而,部分客户(尤其是大客户),会提出功能、UI 等方面的定制需求。针对这些定制需求,大体上有两个解决方案。

第一个方案是提供应用程序 SDK,由客户的开发团队完成整个定制应用的开发和部署,SaaS 服务商提供必要的技术支持即可。此方案要求客户的开发团队具备较强的 IT 专业能力。

第二个方案则是由 SaaS 服务商的开发团队在 SaaS 应用的基础上进行二次开发,并部署。此方案主要面向 IT 专业能力较弱,或者仅需在 SaaS 应用的基础上进行少量定制的客户。然而,要支持这种定制方式,相当于要求 SaaS 服务商在同一个应用中,针对不同的客户运行不同分支的代码。要达到这个目的,应用程序的架构也要进行相应的改造。本文主要讲述改造的方案及其代码实现。

方案概览

对于前后端分离的项目来说,经过构建,最终会生成 html、js、css 三种代码文件。以基于 Vue.js 框架的项目为例,其构建出来的 index.html,内容与下面的代码相似:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href="https://cdn.my-app.net/sample/assets/css/chunk-0c7134a2.11fa7980.css" rel="prefetch">
  <link href="https://cdn.my-app.net/sample/assets/js/chunk-0c7134a2.02a43289.js" rel="prefetch">
  <link href="https://cdn.my-app.net/sample/assets/css/app.2dd9bc59.css" rel="preload" as="style">
  <link href="https://cdn.my-app.net/sample/assets/js/vendors~app.f1dba939.js" rel="preload" as="script">
  <link href="https://cdn.my-app.net/sample/assets/js/app.f7eb55ca.js" rel="preload" as="script">
  <link href="https://cdn.my-app.net/sample/assets/css/app.2dd9bc59.css" rel="stylesheet">
 </head>
 <body>
   <div id="app"></div>
   <script src="https://cdn.my-app.net/sample/assets/js/vendors~app.f1dba939.js"></script>
   <script src="https://cdn.my-app.net/sample/assets/js/app.f7eb55ca.js"></script>
 </body>
 </html>

实际上,index.html 只是访问入口,主要作用就是加载 css 和 js 资源。换句话说:任何的 html 页面,只要加载了上述 css 和 js 资源,都可以运行这个应用

565次阅读,1条评论

User agent 那些事儿

前端开发  |  2年前

User agent(下文简称 ua),也就是用户代理,指的是代表用户行为的程序(软件代理程序)。例如,网页浏览器就是一个“帮助用户获取、渲染网页内容并与之交互”的用户代理。

浏览器

当用户代理通过网络协议进行操作时,它通常会向网络上的协作端(比如服务器端)提交一个特定的字符串来标识自己。这段字符串就是用户代理字符串(下文简称 ua 串)。当我们用浏览器访问 Web 应用的时候,浏览器会把自己的 ua 串加到 HTTP 请求的 User-Agent 头字段进行传输。

UA 串的发展史

1990 年,Tim Berners-Lee 编写了第一个浏览器 WorldWideWeb,后来改名为 Nexus。但是,Nexus 只支持文字展示

1993 年,美国 NCSA 组织开发了 Mosaic 浏览器,能支持图片的展示使其成为第一款流行的浏览器。

这时候问题就来了,Nexus 不支持图片展示,而 Mosaic 是支持的。作为开发人员,该怎么编写页面代码呢?这时候 ua 串就可以发挥作用了,开发人员仅需针对 Mosaic ua 串的请求输出图片展示相关的代码即可。Mosaic 的 ua 串样本如下:

NCSA_Mosaic/1.0 (Windows 3.1)

其中 NCSA_Mosaic/1.0 为浏览器代号及其版本号,Windows 3.1 为操作系统及其版本号。

随后,1994 年,Mosaic 团队的领导者 Marc Andreessen 辞职并成立了自己的公司——Netscape,并开发了 Netscape Navigator 浏览器。它的内部代号为「Mozilla」,ua 串样本如下:

Mozilla/4.5 (compatible; HTTrack 3.0x; Windows 98)

Netscape Navigator 的市场占有率一度达到 90%,并且最先支持了框架(frame)特性。开发人员为了区别这两个浏览器,还是用的 ua 串识别这个方式。如果 ua 串中浏览器代号为 Mozilla,那就发送包含框架的页面,否则,就发送不含框架的页面。

再后来,1995 年,微软推出了 Internet Explorer(下文简称 IE)。IE 也支持框架,但因为过去的框架代码都是针对 Mozilla 这个代号发送的,这样一来,IE 即使支持框架,也收不到包含框架的代码。让所有的开发人员把自己的代码都改一遍明显不现实,最后 IE 只好“自称” Mozilla,同时在 ua 串的其他位置增加自己的代号 MSIE。它的 ua 串样本如下:

Mozilla/4.0 (compatible; MSIE 1.0; Windows 3.11)

IE 在浏览器市场中逐渐成为了霸主,败北的 Netscape Navigator 另起炉灶,开发了 Firefox。无论是 IE、Netscape Navigator 还是 Firefox,ua 串都以 Mozilla 代号开头。这也几乎成为了浏览器 ua 串事实上的格式标准:

Mozilla/[version] ([system and browser information]) [platform] ([platform details]) [extensions]

时至今日,ua 串承载的内容越来越多,开发人员识别起来的难度也越来越高了。

3680次阅读,1条评论

弹幕实现原理

前端开发  |  4年前

直播是眼下最为火爆的行业,而弹幕无疑是直播平台中最流行、最重要的功能之一。本文将讲述如何实现兼容 PC 浏览器和移动浏览器的弹幕。

基本功能

并发与队列

一般来说,弹幕数据会通过异步请求或 socket 消息传到前端,这里会存在一个隐患——数据量可能非常大。如果一收到弹幕数据就马上渲染出来,在量大的时候:

  • 显示区域不足以放置这么多的弹幕,弹幕会堆叠在一起;
  • 渲染过程会占用大量 CPU 资源,导致页面卡顿。

所以在接收和渲染数据之间,要引入队列做缓冲。把收到的弹幕数据都存入数组(即下文代码中的 this._queue),再通过轮询该数组,把弹幕逐条渲染出来:

class Danmaku {
  // 省略 N 行代码...

  add(data) {
    this._queue.push(this._parseData(data));
    if (!this._renderTimer) { this._render(); }
  }

  _render() {
    try {
      this._renderToDOM();
    } finally {
      this._renderEnd();
    }
  }

  _renderEnd() {
    if (this._queue.length > 0) {
      this._renderTimer = setTimeout(() => {
        this._render();
      }, this._renderInterval);
    } else {
      this._renderTimer = null;
    }
  }

  // 省略 N 行代码...
}
2911次阅读,2条评论

保护 Node.js 项目的源代码

Node.js开发  |  5年前

SaaS(Software as a Service,软件即服务),是一种通过互联网提供软件服务的模式。服务提供商会全权负责软件服务的搭建、维护和管理,使得他们的客户从这些繁琐的工作中解放出来。对于许多中小型企业而言,SaaS 是采用先进技术的最好途径。

然而,对于大型企业而言,情况有所不同。出于产品定制、功能稳定以及掌握自身数据资产等方面的考虑,即使成本增加,他们也更乐意把相关服务部署在企业自己的硬件设备上,也就是常说的私有化部署

在私有化部署的过程中,服务提供商首先要确保自己的源代码不被泄露,否则产品就可以随意复制和更改,得不偿失。传统的后端运行环境,如 Java、.NET,其源代码是经过编译才部署到服务器上运行的,不存在泄露的风险。而对于应用越来越广泛的 Node.js 而言,运行的则是源代码。即使经过压缩混淆,也可以很大程度地还原。

本文介绍一种可用于 Node.js 端的代码保护方案,使得 Node.js 项目也可以放心地进行私有化部署。

1886次阅读,0条评论

工作经历(七)-贝聊篇

工作生活  |  5年前

离开上家公司后,我接受邀请加入了当时主打家园(家长、幼儿园)沟通的贝聊。虽然是创业公司,但贝聊已经有一定的用户规模和知名度。更重要的是,公司愿景与幼教行业的健康发展相符,因此也具备一定的社会价值。

贝聊 2017 年会

1163次阅读,6条评论

X5同层播放器应用实践

前端开发  |  6年前

移动端浏览器中的video元素是比较特别的,早期无论是在iOS还是Android的浏览器中,它都位于页面的最顶层,无法被遮挡。后来,这个问题在iOS下得到了解决。但是对Android的大部分浏览器来说,问题仍然存在。X5是腾讯基于Webkit开发的浏览器内核,应用于Android端的微信、QQ、QQ浏览器等应用。它提供了一种名叫「同层播放器」的特殊video元素以解决遮挡问题。

简单使用

只要给普通的video元素加上X5的自定义属性 x5-video-player-type ,就可以调用同层播放器。示例代码如下:

body {
	margin: 0;
	background: #000;
}
.video {
	width: 100%;
}
<div class="player">
    <video id="video" class="video" controls="controls" playsinline x5-video-player-type="h5">
        <source src="video.mp4" />
    </video>
</div>
7962次阅读,12条评论

打造一份网页版简历

前端开发  |  6年前

多年前,因为换工作的需要,我得更新简历。但可能是写惯了CSS的缘故,在Word中排版实在是各种不顺手,于是就发挥了作为前端工程师的优势,把简历做成了网页。久而久之,这份简历就成为了我的个人产品,无论是否需要再找工作,每隔一段时间我都会进行更新迭代。

网页版简历有以下这些好处:

  • 无须下载,直接打开;
  • 内容展示形式更丰富,排版更灵活;
  • 可以展示自己的技术能力;
  • 可以通过超链接访问外部资源(如个人作品);
  • 可以让自己登上搜索引擎的榜单(SEO)。

在此基础上,我还给这份简历定下了一个重要目标——「Write once, run anywhere」。兼容PC、手机和平板设备,还可以通过浏览器直接打印

本文将从技术角度描述这样一份简历的开发过程。

设计

说到设计,很多程序员会喊:“我是写代码的,不懂设计。”但俗话说得好:没吃过猪肉,总见过猪跑吧。平时看过这么多网页,还跟大量产品设计稿打交道。看到布局合适的,抄一下;看到配色合适的,抄一下;看到素材合适的,也抄一下。值得注意的是,近年来有一类页面特别适合改造成个人简历,那就是手机厂商每发布一款新手机都会做的手机宣传页。我自己的简历设计就是借鉴了iPhone的宣传页。

7998次阅读,26条评论

在微信小程序中渲染HTML内容

前端开发  |  6年前

大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题。但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢?

解决方案

wxParse

小程序刚上线那会儿,是无法直接渲染HTML内容的,于是就诞生了一个叫做「wxParse」的库。它的原理就是把HTML代码解析成树结构的数据,再通过小程序的模板把该数据渲染出来。

rich-text

后来,小程序增加了「rich-text」组件用于展示富文本内容。然而,这个组件存在一个极大的限制:组件内屏蔽了所有节点的事件。也就是说,在该组件内,连「预览图片」这样一个简单的功能都无法实现。

web-view

再后来,小程序允许通过「web-view」组件嵌套网页,通过网页展示HTML内容是兼容性最好的解决方案了。然而,因为要多加载一个页面,性能是较差的。

3470次阅读,0条评论