JavaScript 设计模式汇总
单例模式单例模式算是最简单的一种设计模式,也是 JavaScript 中特别常见一种设计模式。比如创建一个对象var o = {},当对象 o 作为一个全局变量共享时,可以算作一种单例模式。单例模式的核心是确保只有一个实例,并提供全局访问。实际应用中,对话框等全局唯一的UI组件,会使用到单例模式。以 Dialog 组件为例,我通常会为一个 Dialog 类写一个 getInstance() 的静态方法。代码如下: var getInstance = function() &# ...
gulp 4.0 升级指南
gulp.task 移除了三参数语法,现在不能使用数组来指定一个任务的依赖。gulp 4.0 加入了 gulp.series 和 gulp.parallel 来实现任务的串行化和并行化。任务函数中,如果任务是同步的,需要使用 done 回调。这样做是为了让 gulp 知道你的任务何时完成。类似这样:gulp.task(‘a’, function(done){ // sync task… done()}) 如果任务是异步的,有多个方法可以标记任务完成 ...
WebP 技术原理及应用
背景浏览器环境下,使用最多的图片格式有 JPEG、PNG、GIF。其中,JPEG 适合色彩复杂的图片,PNG 适合色彩单一或者需要透明的图片,GIF 通常用于动图。现有的图片格式体积较大。 从瀑布图可见,图片的加载在整个页面加载时间中占据了很大的比重,个别 JPEG 图片甚至达 200 多 KB,这在移动端环境下非常影响用户体验。 介绍WebP 是一个现代的图片格式,用于在 web 上提供更好的有损和无损压缩图片。它能够在肉眼观看几乎一样的情况下,对图片体积进行大幅压缩。在将 ...
请不要再写错这些技术名词了
“错别字” 十分令人生厌 ,然而生活中的错别字比比皆是,这种情况在致力于消除 bug 的程序员身上也屡见不鲜。错别字的体现了一种不严谨的态度,希望这篇文章能帮助大家纠正错别字的使用。 正确 错误 Android android, andriod,(写作安卓,应该指的是中国特色的 Android) Android Studio android studio Angular angular App APP, app CentOS centos ...
我的 HTTPS 升级之旅
本文将介绍我是如何将一个 HTTP 网站升级到 HTTPS。系统环境:CentOS 7.0 + Nginx 1.12.0 前言先贴一个福利,也作为没有启用 HTTPS 的反面教材: 这是我参与开发过的一个外包网站,没有启用 HTTPS,网站页面被中间人劫持,并插入了一些奇怪的东西。下面是正文。 预备条件本文假定你已经拥有一个正确解析到服务器IP的域名,服务器上已安装 Nginx。Nginx 可以通过源码编译安装,也可以使用系统提供的包管理器安装,比如 RH 系的 yum ...
赞美的技巧
每个人都渴望被赞赏,不喜欢被批评。 赞美要具体化。比如“你的演讲很棒,很专业,特别是那句……”。 赞美要及时和专注。 从否定到肯定的评价。比如“我很少佩服别人,你是例外”,“我非常佩服的人有两个,你是其中一个”。 与自己做对比,适当的自黑是自信的表现,谦虚意味着尊重对方。 主动与别人打招呼。打招呼背后的含义是我眼中有你。 适度指出别人的变化。人人都期望被关注,关注到对方细微的变化并指出来,传递出去的信息是:“你在我眼中很重要,我有在关注你的变化”。 投其所好,说对方感兴趣的 ...
【译】异步:现在与将来(并发篇)
原文: https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch1.md#concurrency译者:熊贤仁 让我们想象有个网站,展示状态更新的列表(类似社交网络信息流),当用户下滑列表时,渐进式地加载数据。为了让这一特性正确工作,(至少)两个独立的 “进程” 需要同时执行(也就是说,在同一段窗口时间下,而不必是同一时刻)。 注意: 我们使用了给 “进程” 加了引 ...
ES6 语法总结
Arrow Function箭头函数可以让 this 绑定函数定义时所在的作用域,而不是指向运行时所在的作用域,利用这个特性可以解决一些在匿名回调函数中 this 指向的问题(以前通常用 var that = this 来缓存 this) Class原型链继承的一种语法糖,ES6 的类可以看作是构造函数的另一种写法。 class Point {//...}typeof Point //'function'Point === P ...
【译】异步:现在与将来(并行篇)
并行线程人们常常把 “异步” 和 “并行” 这两个术语混淆,但它们其实完全不同。记住,异步是关于 “现在” 和 “将来” 之间的间隙,而并行说的是能够同时发生的事情。 进程和线程是并行计算最常用的工具。进程和线程独立运行,也可能同时运行:在多个独立的处理器上,或者多个独立的计算机上,而多线程可以在同一个进程上共享内存。 相比之下,事件循环将工作分成多个任务,并串行执行它们,不允许对共享内存做并行访问和改变。通过独立线程中的相互协作的事件循环,并行化和 “串行化” 可以共存。 ...
【译】异步:现在与将来(基础篇)
原文:https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch1.md译者:熊贤仁 使用像 JavaScript 这样的语言编程时,很重要的并且还常被人误解的部分是,如何表达和控制程序在一段时间内分散的行为。 这不仅是 for 循环的开始到结束,这一过程当然也要花费一些时间(几微妙到几毫秒),而是当你的程序的一部分现在开始运行,而另一部分将来才运行—— “现在” ...
随笔#2
时常在想一个问题,即便是同一批通过高考拼搏的人,为何就能在短短几年产生如此大的分化,几年前大家可都在教室里背琵琶行、解三角函数的啊。 有人坚持不懈打电子游戏,有人锲而不舍地刷绩点,也有人辗转于各类竞赛中。其实,这些现象诞生的本质原因都来自于同样的人性:追求快乐。 打游戏可以在短时间内就带来快乐,因此许多人花了四年时间延续这种快乐;刷绩点的过程有些乏味,但奖学金、保研、出国这些可被触摸到的理想光是让人想想就激动;竞赛拿名次可以享受到成就感。 雷军的一顿午餐只有三分钟,马斯克一周 ...
写给自己的鸡汤
时常在想一个问题,即便是同一批通过高考拼搏的人,为何就能在短短几年产生如此大的分化,几年前大家可都在教室里背琵琶行、解三角函数的啊。 有人坚持不懈打电子游戏,有人锲而不舍地刷绩点,也有人辗转于各类竞赛中。其实,这些现象诞生的本质原因都来自于同样的人性:追求快乐。 打游戏可以在短时间内就带来快乐,因此许多人花了四年时间延续这种快乐;刷绩点的过程有些乏味,但奖学金、保研、出国这些可被触摸到的理想光是让人想想就激动;竞赛拿名次可以享受到成就感。 雷军的一顿午餐只有三分钟, ...
【译】HLS 架构简介
原文:HTTP Streaming Architecture 译者:熊贤仁 前言作为 Apple 提出的一种基于 HTTP 的协议,HLS(HTTP Live Streaming)用于解决实时音视频流的传输。尤其是在移动端,由于 iOS 不支持 flash,使得 HLS 成了移动端实时视频流传输的首选。HLS 经常用在直播领域,一些国内的直播云通常用 HLS 拉流(将视频流从服务器拉到客户端)。 HLS 值得诟病之处就是其延迟严重,延迟通常在 10-30s 之间。 ...
【译】2017 年要去学的 3 个 CSS 新属性
原文地址:3 New CSS Features to Learn in 2017 原文作者:ireaderinokun 译文出自:掘金翻译计划 译者: 熊贤仁 校对者: Professor-Z aleen42 2017 年要去学的 3 个 CSS 新属性1. 特性查询(Feature Queries)不久前,我写过一篇关于特性查询的文章 —— 《一个我十分期待的CSS特性 - the one CSS feature I really want》。如今果然出现了。除 ...
【JavaScript】splice 方法实现原理分析
近日在LeetCode上刷题,一个题目提交代码后提示Time Limit Exceeded,分析了下发现是splice()方法拖慢了执行速度。之前经常使用这个方法去操作数组,但从未思考过它的底层实现,于是借此机会揭开splice()的庐山真面目。 函数原型:Array.prototype.splice (start, deleteCount, item1, item2, … )  splice至少有2个参数,第一个参数start是开始插入或删除处的元素索引,delete ...
【译】真实的 Virtual DOM
为什么我们需要UI框架? 响应式编程提出两个最重要的观点是:系统应该是事件驱动并且响应状态的变化。 DOM的UI组件有自己的内部状态,更新浏览器页面并不是在发生变化后简单的重新生成DOM。如果Gmail这样做的话,出现一条新消息或者删掉你写的邮件,就会导致整个浏览器窗口刷新。 正是因为DOM的无状态性,我们才需要类似key/value observation(Ember中使用了它),或者脏值检查(Angular)。UI框架监听数据模型的变化,并在DOM中更新对应的部 ...
Vue2.0 源码学习#0
近来没什么事,准备把Vue的源码通读一遍,2.0中加入了Serve-Side-Render、Virtual-Dom等新特性,看一看实现原理,顺便记录一下学习的过程,毕竟好记性不如烂笔头。 作为源码解读系列第一篇文章,先从整个框架的入口开始看吧。Vue使用了部分ES6语法,比如module机制。 import config from './config'//加载初始全局APIimport { initGlobalAPI } from ...
【译】为什么 Vue.js 不支持 templateURL?
  对于Vue新手,尤其是之前用过Angular的人来说,有一个非常普遍的问题:“我可以使用templateURL吗?”我(尤大)已经回答过很多次这个问题,发现最好写点东西来解释一下。在Angular中,templateURL或者ng-include允许开发者在运行时动态地加载远程的模板文件。作为一个内建的特点,这点看起来很方便。但是让我们重新思考一下它解决了什么问题。  首先,templateURL允许我们在一个分离的HTML文件中写模板。可以让编辑器提供合适的语法高亮,这 ...
Cookie 和 Session 的区别总结
二者作用:解决HTTP协议无状态的缺陷,在客户端/服务器端保存会话状态。 创建Session过程: 检查客户端请求中是否包含一个session标识(session id) 若包含,则说明之前已经为此客户端创建过session。服务器按照此session id检索出session 若不包含,则为此客户端创建一个session,并生成一个session id。此session id将作为响应返回给客户端保存。(使用Cookie保存) 若Cookie被禁止,必须有其 ...
CentOS 7.0 配置防火墙
前一阵子被一个蜜汁 bug 困扰:Node.js 代码能在服务器上跑起来,但从浏览器却无法访问服务器 80 端口。于是在本地玩了一周。今天突然想到可能是防火墙的配置问题。 之前用的 iptables 来管理的防火墙,后来发现 CentOS 7.0 中已经用 firewalld 取代 iptables 了,于是与时俱进,停用了 iptables。 systemctl stop iptables.service 然后来启动 firewalld 吧 systemctl sta ...