的朋友T圣诞前几天找到我，问是否能帮忙制作一个圣诞贺卡邮件发送给客户。

我赶紧在脑海中遍历一遍如何制作贺卡邮件，发现没有答案，于是赶脚去谷歌了一下，竟然意外发现了个大宝藏。

传统的邮件

与国外客户打交道，避免不了邮件的往来，尤其是节假日，可能要发一点祝贺等邮件，祝贺一下圣诞快乐或者新年快乐的，普通的邮件可能就是一段文字的祝福，或者直接在邮件客户端插入一张图片。

不过你有没有想过把邮件做的更好看一点呢？像下图这样：

如果你也想做成这样的邮件，那么这篇文章你就不要错过了，接下来就跟着我一步一步如何制作一个这样的邮件吧！

如何制作漂亮的邮件

漂亮的邮件不仅在排版布局上吸引用户的点击，而且还能体现你的与众不同，增加你的品牌记忆。

我订阅了很多国外的博客邮件，其中印象最深刻的就是Shopify的邮件

这是shopify日常的博文邮件，几乎每天都在推送，相对于其他普通的邮件的话，我更愿意看这种邮件中的文章。

这种邮件呢有个专业术语，叫HTML邮件，那什么是HTML呢？

HTML是Hyper Text Markup Language的简写，翻译成中文就是超文本语言，通俗来说就是能让图片、文字和视频排版好看的语言，通常它长这个样子：

第一次看有可能密集恐惧症会发作！

难道做一个漂亮的邮件必须要接触这些天书似的HTML吗？

当然不用，这里我找到了完全避免手工制作HTML邮件的方法，那就是可视化编辑制作HTML邮件。

可视化编辑看到字面意思我们就知道，只需拖拽编辑。

我们只用拖拽对应的元素到编辑器中即可实现想要的效果，比如要插入图片，拖一张图片元素进来，要添加一个按钮，拖一个按钮元素进来。

可视化编辑是未来制作网页和邮件的大趋势，这种方法只要你会移动鼠标就能制作内容的方法，当然能极大的提高你的办公效率。

那么有什么工具能够可视化编辑HTML邮件呢？不着急，打起精神来，接下来我将带领你一步一步的实操。

如何寻找好用的在线工具

当我想找新的使用工具的时候，会使用英文去谷歌搜索，因为国外的邮件使用场景毕竟会更多一点，选择的余地也会更多一点。

不过在搜索的时候我遇到了一个难敌，可视化编辑的英文是什么？

没关系，我们使用最简单描述法，我们要找的是邮件编辑器，邮件编辑器英文我会，就是email builder，ok，那就在谷歌里面输入入best email builder的时候，不着急回车，我们查看下拉框看看有没有什么惊喜，果然找到了一个核心关键词best drag and drop email builder-最好的拖拽邮件编辑器，这个词和可视化邮件编辑器的意思基本一致了，搜之。

通过这个搜索方法我们能快速定位自己想要找的工具，先输入简单的描述单词，然后在下拉框中寻找更详细的描述，因为谷歌会在下拉框中推送全球人民最关心的问题！

通过上面的方法我们找到了一大堆的邮件编辑工具，以下是我搜集到的网址，当然你也可以试试，也许能找到更多惊喜：

•beefree.io/bee-free•stripo.email/templates•freeemaileditor.com•mosaico.io•chamaileon.io•litmus.com/email-builder

经过多轮筛选测试，我选择了beefree.io来制作HTML邮件。

最好用的在线HTML邮件编辑器

beefree.io/templates/ 的官网告诉我，它们目前有200+个邮件模板，当我看到这些模板时，口水都流了一地，而当我知道大部分都不用注册免费使用的时候，赶紧点开一个邮件查看起来：

制作邮件贺卡的主题是圣诞节，所以我选择了一个相关的主题，点开看之:

##编辑邮件 这款圣诞主题的邮件里面有个bling bling的彩灯，看起来节日气氛就不错，就选它了，初步分析素材，我需要准备5张图片，包括：

•logo一张•主产品一张•其他产品三张

上图的第3部分我暂时不需要，就删除了，那么剩下的主要就是图片与文案的准备了，先来看看图片如何设置。

首先我来替换一下主产品图，由于主产品图片要一张PNG，PNG格式的图片背景必须是透明色，所以我要扣一下图。

这时我选择在线抠图工具remove.bg，只需上传一张图片即可完成抠图，建议纯色底抠图更干净。

嗯，抠的完美！

回到beefree，在左边点击选中主图，然后右侧出现的Change image点击一下：

然后点击一个文件夹进入，接着点击Upload，即可上传刚才抠好的图片，最后点击图片insert即可。

点击植入之后可以在右侧调整图片大小，位置，都是很方便的，drag&drop 很NICE！

特别注意，图片下面的alertnate text一定要填写，这个部分当图片无法加载出来时，alertnate text会告诉用户该图片讲的是什么

这一栏属于自我介绍或者公司介绍部分，暂时不需要直接删除

然后依次把剩下的几张产品图片上传，修改标题添加按钮链接等操作

然后把其他的社交链接都加上

这里要特别注意，由于我们使用的是免费操作，我们只能下载zip压缩包到本地

如果你已经购买付费版，那么无需接下来的操作，付费版可以直接转化为html或者导入mailchimp edm系统中直接发送邮件。

beefree的价格是月15美金，价格适中，长期制作的话建议购买付费版。

免费版的额外操作

由于没有使用付费套餐，我们只能下载一个压缩包，在解压之后可以看到两个文件：

我们点击这个.html结尾的文件，即可在浏览器中看到我们的邮件主体了：

但是这个邮件只能在自己的电脑上看到，该如何将弄到邮件里面去呢？

接着操作！以下手法比较hacker，请仔细操作。

压缩文件夹中的图片

想要把文件弄到在线的邮件里面，首先我们要做的就是把图片上传到在线。想了半天，图片应该放到在线哪里呢？我总结了一下，你可以把图片上传到：

•网站后台媒体库•mailchimp媒体库•其他图床

那么我就示范一下图片上传到自己的网站后台吧，不过在上传图片之前我建议大家将图片进行无损压缩一下。

电脑本地的图片都在image文件夹中

这里的图片格式有gif/jpg/png，jpg和png我们可以使用tinypng.com进行无损压缩

gif图片比较特殊，是一种动态图片，我们也可以使用另外一个在线工具压缩：https://www.iloveimg.com/zh-cn/compress-image/compress-gif 不过gif压缩可能会导致较小的gif变成png，请额外注意一下。

压缩图片是为了邮件加载速度更快一点

然后我们整理一下压缩过后的图片，千万注意，图片名称不要更改。

将图片上传至我们的网站后台，这里以wordpress网站演示：

然后打开图片，复制一下图片的链接：

图片链接格式一般是：

https://keentalking.com/wp-content/uploads/2020/01/Excavator1.jpg

我们删除后面的图片名称，只保留前面的部分，后面要用到：

https://keentalking.com/wp-content/uploads/2020/01/

使用subline text批量替换图片链接

这里用到的最好一个工具是subline text，官网是sublimetext.com/3，这是一款代码编辑工具，我们利用它来批量替换HTML文件中的图片链接。

首先下载subline text，官网下载的有个人免费版，安装好之后打开html文件：

然后用快捷键ctrl+f或者command+f

1.打开查找2.下方搜索框内输入"images/"3.点击find All

这时候你会发现所有包含"images/"的选项全部选中了：

接着按一下键盘上的左方向键，选中的文字变成了光标，然后按几下键盘的右方向键，移动光标到"images/"后面，点击Delete键，向前全部删除"images/" 。说起来比较复杂，但做起来很简单，请看动图操作演示

最后一步，粘贴我们之前的链接

https://keentalking.com/wp-content/uploads/2020/01/

我们发现所有的图片链接都换成了自己的官网图片链接

点击快捷键ctrl+s或command+s保存。

验证图片是否替换成功

我们验证一下这些图片是否都替换成功了。

这里我推荐使用qq邮箱来检测一下。

打开qq邮箱，写信创建一个空白邮件，然后点击“格式”，出现的工具栏中点击""

全选subline text中的所有代码：

并粘贴到qq邮箱空白邮件处，粘贴完毕点击返回可视化编辑：

出现完整的HTML即表示成功！

接下来发送给自己的工作邮箱，然后转发给用户等等都是轻车熟路啦！或者你可以直接把代码放入mailchimp等EDM发信系统也是可以的。

（来源：理清外贸）

以上内容属作者个人观点，不代表雨果网立场！本文经原作者独家授权供稿，转载需经雨果网授权同意。

上雨果网搜索“跨境资料库”,领取欧美/东南亚各国市场商机、各大平台热销品报告、跨境电商营销白皮书！

绍

在JavaScript中发布/订阅模式非常常见，并且在工作方式上与观察者模式非常相似，除了在观察者模式中，观察者是直接由其主题通知的，而在发布者/订阅者中，订阅者是通过渠道通知的 位于发布者和订阅者之间的来回传递消息。

当我们实现它时，我们将需要一个发布者，一个订阅者，以及一个存储从订阅者那里注册的回调函数的对象。

发布者/订阅者

下面我们将在代码中实现发布者/订阅者。

存储器

首先我们定义一个变量用于存储回调函数：

const subscribers = {}

订阅者

接下来，我们将定义subscribe用于将回调添加到的方法subscribers：

function subscribe(eventName, callback) {
  if (!Array.isArray(subscribers[eventName])) {
    subscribers[eventName] = []
  }
  subscribers[eventName].push(callback)
}

这里发生的是，在尝试为事件名称注册回调侦听器之前，它会检查存储中的eventName属性subscribers是否已经是array。如果不是，则假定这将是第一个注册的回调，subscribers[eventName]并将其初始化为数组。然后，将回调函数添加到数组中。

发布者

当publish事件触发时，它会带两个参数：

• 事件名称eventName
• 事件data，将作为subscribers[eventName]每个回调函数的参数。可以是一个或多个参数

function publish(eventName, ...args) {
  if (!Array.isArray(subscribers[eventName])) {
    return false
  }

  subscribers[eventName].forEach(callback => {
    callback.apply(this, args)
  })
}

在发布事件时，会先检查事件是否被注册过，如果没有，则返回。然后我们通过遍历subscribers[eventName]中的回调函数，并将data(这里的data为args数组)作为回调参数来执行这它。

注册订阅者

根据上述代码描述，我们有了以下订阅者：

subscribe('data', (...args) => {
  console.log(...args)
})

并且在将来的某个时间里通过publish调用该方法：

publish('data', {
  type: 'update',
  data: {
    value: 1000
  }
})

取消订阅

这就是发布者/订阅者模式的工作方式！我们实现了subscribe和publish函数以及一个储存回调函数的全局变量`subscribers。subscribe用于注册事件以及回调函数，publish用于触发所有已注册回调的方法。

不过还有一个问题。在真实的应用程序中，如果我们订阅许多回调，我们可能会遭受永无止境的内存泄漏。因此，我们最后需要的是一种在不再需要订阅的回调时将其删除的方法。

通常有两种方案来取消订阅：

1. 实现unsubscribe方法, 在需要取消订阅时调用该方法
2. 在subscribe方法中返回取消订阅函数

这里我们采用方案2来实现取消订阅，更改订阅部分代码为：

function subscribe(eventName, callback) {
  if (!Array.isArray(subscribers[eventName])) {
    subscribers[eventName] = []
  }
  const index = subscribers[eventName].length

  subscribers[eventName].push(callback)

  return () => {
    subscribers[eventName].splice(index, 1)
  }
}

在该示例中，我们在添加subscriber之前获取subscribers的长度，然后通过splice方法来删除我们要查找的项目索引。

这样，当我们需要取消调用时，只需要执行订阅时的返回函数即可.

const unsubscribe = subscribe('data', (...args) => {
  console.log('Received data:', ...args)
})

// 取消订阅
unsubscribe()

在Vue中实现发布/订阅

在Vue中，我们可以通过event Hub更方便更简单的实现发布订阅模式。

import Vue from 'vue'

const eventHub = new Vue()

const topic = {
  publish(eventName, ...args) {
    eventHub.$emit(eventName, ...args)
  },
  subscribe(eventName, listener) {
    eventHub.$on(eventName, listener)
  },
  off(eventName) {
    eventHub.$off(eventName)
  }
}

export default topic

本文中的所有代码都已经上传到github。 地址: JavaScript中的发布/订阅模式

及时获取更新，了解更多动态，请关注 https://www.gogoing.site

如果你觉得这篇文章对你有帮助，欢迎关注微信公众号-前端学堂，更多精彩文章等着你！