分类：杂谈

周五见，支持多渠道前端打包方案

【分享话题】：宜信支持多渠道前端方案介绍
【话题介绍】：

随着业务不断发展，在前端开发过程中，经常会面临同一个功能要面向不同的渠道，同时也要适应不同渠道多种的需求变化，为了提升开发效率更好的优化开发流程，我们研发了这套前端h5的打包方案，目前我们框架逐渐在支持了产品对比，产品选择，家庭计划书等功能，并在公司财富和普惠等多条业务线落地实践。这次我们主要从项目的底层框架，到项目搭建思路，到制定的模块化开发标准来由浅至深的介绍。

【分享大纲】：

  • 项目框架介绍

  • 组件管理，公共方法管理，局部方法管理，api管理介绍

  • 搭积木思路实现多渠道业务支持

  • 组件开发技巧介绍

  • 总结

二、分享嘉宾

分享嘉宾：刘晓敏

宜信高级研发工程师

三、直播收益

通过本次直播分享，您将收获： 

1、了解前端vue脚手架的基本打包方案

2、了解多渠道前端打包方案的应用规范和技巧

3、了解vue组件开发的基本规范和开发技术开源产品

四、时间及报名方式

直播时间：11月20日16:00-17:30

报名方式：本次分享以线上直播的方式进行，识别下图二维码，添加小助手微信，回复“前端”即可获得直播地址。

五、主办方及合作伙伴

主办方：宜信技术学院

用jest对Vue组件单元测试

项目设置

设置我们的测试环境很容易。在以前的Vue.js CLI版本中，我们必须手动执行此操作，但现在它已成为项目生成的标准配置。

通过执行以下操作，确保在计算机上安装了Vue.js CLI：

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli

# Ensure you have the appropriate version (3.x.x>) with
$ vue --version

继续阅读用jest对Vue组件单元测试

node-canvas 绘制文字，自定义字体，最新文档更新

发现网上很多人都在提供一个错误都思路，因为node-canvas已经更新了，所以自定义字体只需要如下写法
请注意，注册registerFont字体方法的位置，一定要在createCanvas之前


const { registerFont, createCanvas } = require('canvas')
registerFont('comicsans.ttf', { family: 'Comic Sans' })

const canvas = createCanvas(500, 500)
const ctx = canvas.getContext('2d')

ctx.font = '12px "Comic Sans"'
ctx.fillText('Everyone hates this font :(', 250, 10)

前端规范第一版

以下为前端规范第一版，大家有啥想法及时交流一起完善

HTML 基本规范 【强制】

  • 标签全部小写且闭合
  • 代码中的引号全部使用双引号（区别js）
  • 合理使用语义化html标签
  • 使用utf-8编码

css 基本规范 【强制】

  • pc端默认字号16px;
  • 使用外链css文件
  • html标签中不使用style样式
  • css文件中样式按块写，公共样式要提取，同一属性要合并，注释要清楚
  • 尽量不使用html标签选择器来声明样式
  • 样式的小图片使用sprite图片
  • h5页面使用rem适配，html的font-size:50px;

CSS选择器命名规范 【强制】

  • 类和id命名，一律小写，使用中杠连接
  • 类和id命名，尽量不缩写，除非一看就明白的单词
  • 不要轻易使用id

CSS书写顺序 【建议】

  • 位置属性(position, top, right, z-index, display, float等)
  • 大小(width, height, padding, margin)
  • 文字系列(font, line-height, letter-spacing, color- text-align等)
  • 背景(background, border等)
  • 其他(animation, transition等)

公共组件的css 【强制】

继续阅读前端规范第一版

微信小程序swiper之巨坑

今天突然发现自己的小程序出现问题，多页滑动到第二页有问题，出现空白，元素不展示，奇怪从来没动过呢，后来发现自己手机微信版本更新了 版本号为：7.08

是不是新版本导致swiper组件出现问题呢，特意找了一个代码片段，没问题，那就是自己代码的问题了！

把所有代码从头到尾删了个遍，最后发现是swiper-item 内定义了宽高所致，记录一下

最后亮出我的小程序，一起学习交流

 

微信小程序自定义组件编写指南之我见一

微信小程序自定义组件（以下组件特指自定义组件）在开发过程中有着不可替代的作用，在我看来，小程序的编写就是大部分工作量在组件的开发，在前期规划好组件功能，在小程序不断迭代会有非常好的编程体验

实际上，组件开发也体现出了前端在开发过程中封装的思想，这里就谈一下我在开发过程中的一些感悟，记录总结一下，供大家参考填坑

以下为文章导航，不一定按顺序写，有些文章也不一定会一次写完，有时间就写点补充，包括这里的目录也会修改补充，都会在这里列出来最新更新时间和链接，大家关注下吧

  • 先介绍一下组件的基本功能特性
    1. 写法规则，样式(8月23日更新)
    2. 通信规则
    3. 生命周期
    4. 组件之间关系
    5. 数据监听
    6. 单元测试
  • 什么时候我们应该使用组件
    1. 为什么要用组件 (8月23日更新)
    2. 什么时候要封装成组件
  • 新建组件规划
    1. 组件properties变量规划
    2. 组件私有数据规划
    3. 组件方法规划
    4. 组件通信事件规划
    5. 组件生命周期规划

组件模板和样式 

组件模板和样式

类似于页面，自定义组件拥有自己的 wxml 模板和 wxss 样式。

组件模板

组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。

在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。

代码示例：

在开发者工具中预览效果

<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>

注意，在模板中引用到的自定义组件及其对应的节点名需要在 json 文件中显式定义，否则会被当作一个无意义的节点。除此以外，节点名也可以被声明为抽象节点。

模板数据绑定

与普通的 WXML 模板类似，可以使用数据绑定，这样就可以向子组件的属性传递动态数据。
继续阅读组件模板和样式 

破34亿！《哪吒》跻身前五

高兴由衷的 为中国的动漫事业

猫眼公布的最新实时数据显示，截止8月11日16时07分，动画电影《哪吒之魔童降世》(以下简称《哪吒》)累计票房达到34.50亿，排在中国电影票房总榜第5名。

数据显示，截止11日12时41分，《哪吒》累计票房达到33.99亿，已经超过前日第6名《美人鱼》的33.86亿元和第5名《唐人街探案2》的33.97亿元。其中有9393.5万人次观看，猫眼口碑评分高达9.7分。

在中国电影票房总榜上，截至8月10日的数据显示，《哪吒》还以33.39亿元排在第7位，但目前排到该榜单的第5名，并直指第4名《红海行动》的36.5亿元。

据此前报道，截至8日17时32分，该影片已连续13天获得单日票房冠军，累积突破30亿，跻身中国影史票房总榜前八名，并成为中国影史首部进入“30亿俱乐部”的动画电影。

据了解，《哪吒》从上映以来连续创造多项纪录，直到今天已经进入上映后的第17天，票房占比仍超过54%，排片占比高达37%，猫眼票房专业版对其总票房预测为47.17亿。

如何优雅重加载 Web 应用 

但凡在各种环境中，尤其是生产环境中部署过应用的，比如更新应用或者配置，就会了解到，应用的重启或者升级多少都会影响用户访问，那这种影响会到什么程度呢？

影响用户的重启

从表面上看，轻则是页面不能正常加载，让用户以为是网络不好（事实上，这也经常成为服务器出问题的背锅原因，有的 APP 则直接在前端硬编码报错信息，所有的错误统一显示：网络出错了，请重试）。
重则影响用户的支付流程，导致用户放弃支付，更严重的则是用户支付过程中处理数据不当的话，就会丢失数据，导致对账失败。

而从本质上看，如果你在浏览器中调试的时候，这种错误会在调试窗口显示 net::ERR_CONNECTION_REFUSED，原因就是端口被释放了，这也就是告诉我们，重启过程中的一段时间里，由于后续程序无法快速建立监听，会导致 TCP 链接被短时间断开，端口监听也会被释放，导致数据包无法送达，正在使用中的连接也会被打断，就会导致这个现象。

所以，我们该如何解决？回过头看这个过程，我们就需要达到的目标无非就是用户无感知，那对于我们就有两种方案：一种是把这个责任交给现有的成熟负载均衡器，另一种是自己用操作系统提供的 API 自己实现自我升级。

自我升级方案

目前已经有多个社区的基础库可以帮助实现了，比如 Golang，我们至少有以下几个1：

实际上，看源码后自己实现也可以，因为原理是一致的，升级的大致过程就是以下：

  1. 启动进程，运行 Web 服务，监听相关的端口；
  2. 接收到 Reload 命令，运行新程序，运行并等待服务可用；
  3. 新子程序出错时，直接报错，退出 Reload 步骤；
  4. 没有问题则继续，旧进程退出，新进程接管流量；

这种方案就是非常常见的方案，只是在这个过程中，同一时间只允许一个升级，不然就会出现问题。其实还有个方案，如果是针对自己无法修改的程序，可以参考 Github 为 HAProxy 开发的 multibinder2。

负载均衡方案

这种方案是最简单的，因为负载均衡器可以接管流量，负责升级过程：当新进程准备完成时，把旧 Web 应用的流量切换到新 Web 应用，然后不断升级剩余的应用，这在 Kubernetes 或者 Docker Swarm 中叫做 Rolling Upgrade，这个过程会非常顺滑，可以达到让用户无感知。

另外，有的负载均衡器自己就实现了自我升级的，比如 Nginx，我们用 nginx -t reload 这个命令就能让 Nginx 重新加载配置，这个过程中，它就进行了自我升级。

而在 Node.js 中，有 pm2 提供给我们的 Graceful shutdown 方案，即通过进程内通信的方式，让我们能够在关闭时提前关闭数据库等连接，以及启动的时候等数据库连接等完成后再继续。这种方式可以让我们自己在 Cluster 模式中，进行应用的优雅升级，只是，它做得不够好（2.x 版本的时候）：

  1. 升级过程中，不会判断新程序有没有准备完毕，一旦超时还是会继续升级，这在之前导致了非常多的线上问题；
  2. 升级无法控制速度，升级速度很快，于是我们可以看到监控画面上，过山车似的一上一下，这实际上是不好的，因为这就表示我们的重启影响到了部分用户；

新版本 (3.x) ，还没用过，但是看文档，它提供了 –parallel 这个参数，能让我们自己控制并行升级数量了，也就是能控制升级速度了，配合 Graceful shutdown 的功能，应该能够缓解。

但更好的方案的话，还是得用 Kubernetes 提供的 Rolling Upgrade 功能，这在我之前的实践中，可以观察到明显的对比，即新方案上了之后，每次升级监控上的响应时长波动会很小。

Ref

  1. Graceful upgrades in Go
  2. GLB part 2: HAProxy zero-downtime, zero-delay reloads with multibinder

首发于 Github issues: https://github.com/xizhibei/blog/issues/108 ，欢迎 Star 以及 Watch

本文采用 署名-非商业性使用-相同方式共享（BY-NC-SA）进行许可
作者：习之北 (@xizhibei)
原链接：https://blog.xizhibei.me/2019/06/03/how-to-graceful-reload-web-app/