博客园 - CaiBoBo
uuid:24b78886-0ed1-41c2-8670-e3f31dcf42c4;id=168196
2021-03-22T02:13:27Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
feed.cnblogs.com
https://www.cnblogs.com/caizhenbo/p/9728738.html
H5利用canvas实现海报功能 - CaiBoBo
最近接到一个需求,微信中用户上传图片生成海报。这个需求比较常规,实现思路也比较简单,通过利用用户的input输入,对所上传的图片进行处理,最后通过第三方库html2canvas合成对应的图片即可。思路虽然简单,但是在实现的过程中会遇到各种各样的小问题,现在就将遇到的问题进行一次总结。 1、iphon
2018-09-30T03:28:00Z
2018-09-30T03:28:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】最近接到一个需求,微信中用户上传图片生成海报。这个需求比较常规,实现思路也比较简单,通过利用用户的input输入,对所上传的图片进行处理,最后通过第三方库html2canvas合成对应的图片即可。思路虽然简单,但是在实现的过程中会遇到各种各样的小问题,现在就将遇到的问题进行一次总结。 1、iphon <a href="https://www.cnblogs.com/caizhenbo/p/9728738.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/7993533.html
如何计算首屏加载时间? - CaiBoBo
做移动web页面,受移动网络网速和终端性能影响,我们经常要关注首屏内容展示时间(以下简称首屏时间)这个指标,它衡量着我们的页面是否能在用户耐心消磨完之前展示出来,很大程度影响着用户的使用满意度。 首屏时间的定义 工信部在《宽带速率的测试方法用户上网体验》规范标准中对首屏时间的定义为: 浏览器显示第一
2017-12-20T08:42:00Z
2017-12-20T08:42:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】做移动web页面,受移动网络网速和终端性能影响,我们经常要关注首屏内容展示时间(以下简称首屏时间)这个指标,它衡量着我们的页面是否能在用户耐心消磨完之前展示出来,很大程度影响着用户的使用满意度。 首屏时间的定义 工信部在《宽带速率的测试方法用户上网体验》规范标准中对首屏时间的定义为: 浏览器显示第一 <a href="https://www.cnblogs.com/caizhenbo/p/7993533.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/7993461.html
IntersectionObserver API - CaiBoBo
背景 在网页开发的过程中,我们常常需要判断某个元素是否进入了"视口"(viewport),即用户能不能看到它。 一般采用这样的方法实现,兼容scroll事件,然后调用方法获取目标元素的坐标,判断是否在视口之内。代码不仅繁琐,而且由于scroll事件密集发生,计算量很大一不小心没有函数去抖就又可能导致
2017-12-06T08:34:00Z
2017-12-06T08:34:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】背景 在网页开发的过程中,我们常常需要判断某个元素是否进入了"视口"(viewport),即用户能不能看到它。 一般采用这样的方法实现,兼容scroll事件,然后调用方法获取目标元素的坐标,判断是否在视口之内。代码不仅繁琐,而且由于scroll事件密集发生,计算量很大一不小心没有函数去抖就又可能导致 <a href="https://www.cnblogs.com/caizhenbo/p/7993461.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/7380200.html
vuex2.0源码分析 - CaiBoBo
当我们用vue在开发的过程中,经常会遇到以下问题 多个vue组件共享状态 Vue组件间的通讯 在项目不复杂的时候,我们会利用全局事件bus的方式解决,但随着复杂度的提升,用这种方式将会使得代码难以维护,因此vue官网推荐了一种更好用的解决方案Vuex。 Vuex是什么 Vuex 是一个专为 Vue.
2017-11-02T08:44:00Z
2017-11-02T08:44:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】当我们用vue在开发的过程中,经常会遇到以下问题 多个vue组件共享状态 Vue组件间的通讯 在项目不复杂的时候,我们会利用全局事件bus的方式解决,但随着复杂度的提升,用这种方式将会使得代码难以维护,因此vue官网推荐了一种更好用的解决方案Vuex。 Vuex是什么 Vuex 是一个专为 Vue. <a href="https://www.cnblogs.com/caizhenbo/p/7380200.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/7380193.html
canvas实现时钟 - CaiBoBo
最近在看新浪体育网球频道(http://sports.sina.com.cn/tennis/)的时候,看到了下面的劳力士广告的时钟是用canvas做的,于是也实现了一个简单的canvas时钟。直接上代码: 这里的实现还是比较简单的。利用Date对象,获取当前的时间,然后画出当前时间点的钟表状态,最后
2017-09-25T07:55:00Z
2017-09-25T07:55:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】最近在看新浪体育网球频道(http://sports.sina.com.cn/tennis/)的时候,看到了下面的劳力士广告的时钟是用canvas做的,于是也实现了一个简单的canvas时钟。直接上代码: 这里的实现还是比较简单的。利用Date对象,获取当前的时间,然后画出当前时间点的钟表状态,最后 <a href="https://www.cnblogs.com/caizhenbo/p/7380193.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/7569353.html
JS控制CSS3,添加浏览器兼容前缀 - CaiBoBo
不同浏览器对于有些css3属性名字定义的时候,会带上特有的前缀,所以在css编写的时候,经常会一个属性写多个不同的前缀进行兼容。比如: 有时候,我们需要通过js动态控制css3属性,这时候就需要根据不同的浏览器添加不同的前缀。当然,我们也可以将所有的前缀全部设置,就像以下这种方式: 这种方式能够设置
2017-09-21T08:39:00Z
2017-09-21T08:39:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】不同浏览器对于有些css3属性名字定义的时候,会带上特有的前缀,所以在css编写的时候,经常会一个属性写多个不同的前缀进行兼容。比如: 有时候,我们需要通过js动态控制css3属性,这时候就需要根据不同的浏览器添加不同的前缀。当然,我们也可以将所有的前缀全部设置,就像以下这种方式: 这种方式能够设置 <a href="https://www.cnblogs.com/caizhenbo/p/7569353.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/7521984.html
H5静态资源本地化实践 - CaiBoBo
现在很多app都是通过webview内嵌H5的页面,这种方式的好处就是无需发版就能更新线上的内容,而且可以做到多平台的统一开发,节约开发成本。但是这种模式也带来了一定的问题,web开发很大程度依赖于网络,而移动端的网络千差万别,H5页面对于网络属于强依赖,因为各种请求都需要走网络,所以在弱网的情况下
2017-09-14T10:00:00Z
2017-09-14T10:00:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】现在很多app都是通过webview内嵌H5的页面,这种方式的好处就是无需发版就能更新线上的内容,而且可以做到多平台的统一开发,节约开发成本。但是这种模式也带来了一定的问题,web开发很大程度依赖于网络,而移动端的网络千差万别,H5页面对于网络属于强依赖,因为各种请求都需要走网络,所以在弱网的情况下 <a href="https://www.cnblogs.com/caizhenbo/p/7521984.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/7297730.html
vue-router源码分析 - CaiBoBo
上一篇我们写了前端路由,这几天比较闲,抽空研究了vue.js官方路由的vue-router的实现。 本文主要是以vue-router2.7.0(https://github.com/vuejs/vue-router)版本的源代码进行分析。 首先我们来看一下目录结构 这里,先大概说明一下各个文件的作用
2017-08-10T08:25:00Z
2017-08-10T08:25:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】上一篇我们写了前端路由,这几天比较闲,抽空研究了vue.js官方路由的vue-router的实现。 本文主要是以vue-router2.7.0(https://github.com/vuejs/vue-router)版本的源代码进行分析。 首先我们来看一下目录结构 这里,先大概说明一下各个文件的作用 <a href="https://www.cnblogs.com/caizhenbo/p/7297730.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/7250239.html
前端路由 - CaiBoBo
什么是路由 对于没有后端项目经验或者SPA项目来说,路由可能会比较陌生。这里的路由不是指硬件路由,也不是我们通常所说的网络协议中的路由,但是它们表达的思想都是一样的,就是路径和资源的识别。 我们先来看访问一个网站,假如我们访问这三个页面: http://sports.sina.com.cn/nba/
2017-07-28T06:53:00Z
2017-07-28T06:53:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】什么是路由 对于没有后端项目经验或者SPA项目来说,路由可能会比较陌生。这里的路由不是指硬件路由,也不是我们通常所说的网络协议中的路由,但是它们表达的思想都是一样的,就是路径和资源的识别。 我们先来看访问一个网站,假如我们访问这三个页面: http://sports.sina.com.cn/nba/ <a href="https://www.cnblogs.com/caizhenbo/p/7250239.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/7234521.html
nodejs实现新闻爬虫 - CaiBoBo
作为费德勒的铁杆粉丝,每天早上都会在新浪体育里面的网球频道浏览费德勒新闻。由于只关注费德勒的新闻,所以每次都要在网页中大量的新闻中筛选相关信息,感觉效率好低,所以用node写了一个简单的爬虫程序通过每天定时发送邮件的方式来通知。 这个需求仔细看有3个功能点,信息爬虫,定时发送,邮件通知 信息爬虫 信
2017-07-25T07:44:00Z
2017-07-25T07:44:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】作为费德勒的铁杆粉丝,每天早上都会在新浪体育里面的网球频道浏览费德勒新闻。由于只关注费德勒的新闻,所以每次都要在网页中大量的新闻中筛选相关信息,感觉效率好低,所以用node写了一个简单的爬虫程序通过每天定时发送邮件的方式来通知。 这个需求仔细看有3个功能点,信息爬虫,定时发送,邮件通知 信息爬虫 信 <a href="https://www.cnblogs.com/caizhenbo/p/7234521.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/7081880.html
谷歌AMP和百度MIP是什么鬼? - CaiBoBo
首先我们来看定义: 谷歌AMP(Accelerated Mobile Pages,加速移动页面)是Google推出的一种为静态内容构建 web 页面,提供可靠和快速的渲染,加快页面加载的时间,特别是在移动 Web 端查看内容的时间。 百度MIP (Mobile Instant Pages - 移动网
2017-06-26T10:25:00Z
2017-06-26T10:25:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】首先我们来看定义: 谷歌AMP(Accelerated Mobile Pages,加速移动页面)是Google推出的一种为静态内容构建 web 页面,提供可靠和快速的渲染,加快页面加载的时间,特别是在移动 Web 端查看内容的时间。 百度MIP (Mobile Instant Pages - 移动网 <a href="https://www.cnblogs.com/caizhenbo/p/7081880.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/7065584.html
微信小程序开发体验 - CaiBoBo
最近公司准备将产品部分功能迁移到微信小程序,为此从微信小程序官网教程学习了小程序开发,用了一个下午的时间开发了一个简单的体质指数计算器的小程序,这里聊聊小程序的开发体验。本博文不会注重讲解开发的技术过程。 1、开发工具 微信为了帮助开发者简单和高效地开发微信小程序,开发了微信web开发工具,下载地址
2017-06-22T08:11:00Z
2017-06-22T08:11:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】最近公司准备将产品部分功能迁移到微信小程序,为此从微信小程序官网教程学习了小程序开发,用了一个下午的时间开发了一个简单的体质指数计算器的小程序,这里聊聊小程序的开发体验。本博文不会注重讲解开发的技术过程。 1、开发工具 微信为了帮助开发者简单和高效地开发微信小程序,开发了微信web开发工具,下载地址 <a href="https://www.cnblogs.com/caizhenbo/p/7065584.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/6890393.html
设计模式之策略模式 - CaiBoBo
在web项目中,表单的验证和提交是我们经常开发的功能之一。下面我们来看一下一般情况下我们如何验证一个用户的注册。 需求: 注册需要用户名,密码,手机号码,邮箱 所有选项不能为空 密码要长度不能少于8位,并且不能全部为数字 手机号码要验证符合当前手机格式 邮箱也要验证格式 来看我们最直观的实现功能的代
2017-05-22T09:15:00Z
2017-05-22T09:15:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】在web项目中,表单的验证和提交是我们经常开发的功能之一。下面我们来看一下一般情况下我们如何验证一个用户的注册。 需求: 注册需要用户名,密码,手机号码,邮箱 所有选项不能为空 密码要长度不能少于8位,并且不能全部为数字 手机号码要验证符合当前手机格式 邮箱也要验证格式 来看我们最直观的实现功能的代 <a href="https://www.cnblogs.com/caizhenbo/p/6890393.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/6836390.html
【前端安全】JavaScript防XSS攻击 - CaiBoBo
什么是XSS XSS(Cross Site Scripting),跨站脚本攻击,是一种允许攻击者在另外一个用户的浏览器中执行恶意代码脚本的脚本注入式攻击。本来缩小应该是CSS,但为了和层叠样式(Cascading Style Sheet,CSS)有所区分,故称XSS。 对于攻击者来说,能够让受害者浏
2017-05-17T08:57:00Z
2017-05-17T08:57:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】什么是XSS XSS(Cross Site Scripting),跨站脚本攻击,是一种允许攻击者在另外一个用户的浏览器中执行恶意代码脚本的脚本注入式攻击。本来缩小应该是CSS,但为了和层叠样式(Cascading Style Sheet,CSS)有所区分,故称XSS。 对于攻击者来说,能够让受害者浏 <a href="https://www.cnblogs.com/caizhenbo/p/6836390.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/6836376.html
【前端安全】JavaScript防流量劫持 - CaiBoBo
劫持产生的原因和方式 在网页开发的访问过程中,http是我们主要的访问协议。我们知道http是一种无状态的连接。即没有验证通讯双方的身份,也没有验证信息的完整性,所以很容易受到篡改。运营商就是利用了这一点篡改了用户正常访问的网页,插入广告或者其他一些杂七杂八的东西,达到盈利的目的。 运营商的一般做法
2017-05-12T09:12:00Z
2017-05-12T09:12:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】劫持产生的原因和方式 在网页开发的访问过程中,http是我们主要的访问协议。我们知道http是一种无状态的连接。即没有验证通讯双方的身份,也没有验证信息的完整性,所以很容易受到篡改。运营商就是利用了这一点篡改了用户正常访问的网页,插入广告或者其他一些杂七杂八的东西,达到盈利的目的。 运营商的一般做法 <a href="https://www.cnblogs.com/caizhenbo/p/6836376.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/6825223.html
设计模式之“中间件模式” - CaiBoBo
实际场景 在日常的开发过程中,我们在编写业务代码时候,无法避免有些业务逻辑复杂而导致业务代码写得又长又乱。有些逻辑像一个过程,在不同的节点需要做不同的操作。 比如,我们在开发的过程中经常会遇到数据提交这样一个场景。我们的目的是数据提交,但是在提交之前,我们需要对数据进行验证,验证正确之后,对数据发送
2017-05-08T10:12:00Z
2017-05-08T10:12:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】实际场景 在日常的开发过程中,我们在编写业务代码时候,无法避免有些业务逻辑复杂而导致业务代码写得又长又乱。有些逻辑像一个过程,在不同的节点需要做不同的操作。 比如,我们在开发的过程中经常会遇到数据提交这样一个场景。我们的目的是数据提交,但是在提交之前,我们需要对数据进行验证,验证正确之后,对数据发送 <a href="https://www.cnblogs.com/caizhenbo/p/6825223.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/6782522.html
设计模式之Mixin模式 - CaiBoBo
介绍 mixin模式就是一些提供能够被一个或者一组子类简单继承功能的类,意在重用其功能。在面向对象的语言中,我们会通过接口继承的方式来实现功能的复用。但是在javascript中,我们没办法通过接口继承的方式,但是我们可以通过javascript特有的原型链属性,将功能引用复制到原型链上,达到功能的
2017-05-03T08:04:00Z
2017-05-03T08:04:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】介绍 mixin模式就是一些提供能够被一个或者一组子类简单继承功能的类,意在重用其功能。在面向对象的语言中,我们会通过接口继承的方式来实现功能的复用。但是在javascript中,我们没办法通过接口继承的方式,但是我们可以通过javascript特有的原型链属性,将功能引用复制到原型链上,达到功能的 <a href="https://www.cnblogs.com/caizhenbo/p/6782522.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/6782492.html
设计模式之观察者模式 - CaiBoBo
介绍 观察者模式是软件设计模式的一种。在此种模式中,一个目标对象维持一系列依赖于它(观察者)的对象,将有关状态的任何更新自动通知给他们。 观察者设计模式定义了对象间的一种一对多的依赖关系,以便一个对象的状态发生变化时,所有依赖于它的对象都得到通知并自动刷新。 使用观察者模式的好处: 1、支持简单的广
2017-05-02T10:38:00Z
2017-05-02T10:38:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】介绍 观察者模式是软件设计模式的一种。在此种模式中,一个目标对象维持一系列依赖于它(观察者)的对象,将有关状态的任何更新自动通知给他们。 观察者设计模式定义了对象间的一种一对多的依赖关系,以便一个对象的状态发生变化时,所有依赖于它的对象都得到通知并自动刷新。 使用观察者模式的好处: 1、支持简单的广 <a href="https://www.cnblogs.com/caizhenbo/p/6782492.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/6780499.html
设计模式之单例模式 - CaiBoBo
介绍 单例就是保证一个类仅有一个实例,并提供一个访问它的全局访问点。单例模式的要点有三个;一是某个类只能有一个实例;二是它必须自行创建这个实例;三是它必须自行向整个系统提供这个实例。实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。 实
2017-04-28T09:09:00Z
2017-04-28T09:09:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】介绍 单例就是保证一个类仅有一个实例,并提供一个访问它的全局访问点。单例模式的要点有三个;一是某个类只能有一个实例;二是它必须自行创建这个实例;三是它必须自行向整个系统提供这个实例。实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。 实 <a href="https://www.cnblogs.com/caizhenbo/p/6780499.html" target="_blank">阅读全文</a>
https://www.cnblogs.com/caizhenbo/p/6710174.html
实现vue2.0响应式的基本思路 - CaiBoBo
最近看了vue2.0源码关于响应式的实现,以下博文将通过简单的代码还原vue2.0关于响应式的实现思路。 注意,这里只是实现思路的还原,对于里面各种细节的实现,比如说数组里面数据的操作的监听,以及对象嵌套这些细节本实例都不会涉及到,如果想了解更加细节的实现,可以通过阅读源码 observer文件夹以
2017-04-14T10:08:00Z
2017-04-14T10:08:00Z
CaiBoBo
https://www.cnblogs.com/caizhenbo/
【摘要】最近看了vue2.0源码关于响应式的实现,以下博文将通过简单的代码还原vue2.0关于响应式的实现思路。 注意,这里只是实现思路的还原,对于里面各种细节的实现,比如说数组里面数据的操作的监听,以及对象嵌套这些细节本实例都不会涉及到,如果想了解更加细节的实现,可以通过阅读源码 observer文件夹以 <a href="https://www.cnblogs.com/caizhenbo/p/6710174.html" target="_blank">阅读全文</a>