Articles
Articles copied to clipboard
pfan123
经验文章
# git commit message 中使用 emoji 🎨 `:art:` Improving structure / format of the code. 改进目录或代码结构 / 格式化代码 ⚡️ `:zap:` Improving performance. 提升性能 🔥 `:fire:` Removing code or files. 移除代码或文件...
当提到前端性能优化时，我们首先会联想到文件的合并、压缩，文件缓存和开启服务器端的 gzip 压缩等，这使得页面加载更快，用户可以尽快使用我们的 Web 应用来达到他们的目标。 资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。 引用 [Patrick Hamann](https://twitter.com/patrickhamann) 的[解释](http://patrickhamann.com/workshops/performance/tasks/2_Critical_Path/2_3.html)： > 预加载是浏览器对将来可能被使用资源的一种暗示，一些资源可以在当前页面使用到，一些可能在将来的某些页面中被使用。作为开发人员，我们比浏览器更加了解我们的应用，所以我们可以对我们的核心资源使用该技术。 这种做法曾经被称为 prebrowsing，但这并不是一项单一的技术，可以细分为几个不同的技术：`DNS-prefetch`、`subresource` 和标准的 `prefetch`、`preconnect`、`prerender`。 ## DNS 预解析 DNS-Prefetch 通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源，当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。例如，我们将来可能从 `example.com` 获取图片或音频资源，那么可以在文档顶部的 ``...
## event.currentTarget与event.target区别 event.currentTarget，当事件遍历 DOM 时，识别事件的当前目标对象（Identifies the current target for the event, as the event traverses the DOM.）。 该属性总是指向被绑定事件句柄（event handler）的元素。而与之对比的event.target ，则是指向触发该事件的元素。 ## Element.matches API 的基本使用方法: Element.matches(selectorString)，selectorString 既是 CSS 那样的选择器规则，比如本例中可以使用 target.matches('li.class-1')，他会返回一个布尔值，如果 target...
> 依次找到：Tools -> Developer -> New Snippet，默认代码段配置文件如下： ``` ``` 配置文件是 XML 格式，含义如下： >- snippet: 父节点，必须 >- content: 内容节点，将要定义的代码段写到该节点下 >- tabTrigger: 触发节点，设置触发源 >- scope: 代码段生效作用域 >- ${number:}: Tab 按键切换的光标 下面是一个 Demo：...
## Koa vs Express [Koa](http://koajs.com/)是继[Express](http://expressjs.com/)之后，Node的又一主流Web开发框架。相比于Express，Koa只保留了核心的中间件处理逻辑，去掉了路由，模板，以及其他一些功能。详细的比较可以参考[Koa vs Express](https://github.com/koajs/koa/blob/master/docs/koa-vs-express.md)。 另一方面，在中间件的处理过程中，Koa和Express也有着一定区别，看下面例子： ``` // http style http.createServer((req, res) => { // ... }) // express style app.use((req, res, next) => { // ... })...
EventEmitter 事件发射器是一种发布，订阅模式，是event 模块提供的一个对象，用来注册事件可触发事件。Node 中的异步操作都是基于EventEmitter 来实现的。 ## EventEmitter主要API - emitter.on(event, listener) 注册一个事件 - emitter.once(event, listener) 注册一个一次性的事件，触发后就被抹掉 - emitter.removeListener(event, listener) 在时间队列中剔除某一个事件 - emitter.removeAllListeners([event]) 删除整个事件队列，或多个事件 - emitter.listeners(event) 返回某些事件 emitter.emit(event, [arg1], [arg2], […]) 触发事件，可传入具体参数...
## Chrome调试工具介绍 **Elements** 板块可以看到整个页面的Dom结构。 **Console** 调试日志控制台。 **Sources** 所有资源看到页面加载的资源，图片，css,js等，它们会按照资源的来源分类。 **Network** 查看页面所加载的所有资源响应情况，响应时间，浏览器等待时间，状态码，MINE Type,资源大小等。 **Perfomance** 查看浏览器的渲染流程：解析代码,布局，绘制，合并渲染层。 **Memory** 含Profiles选项主要是用来检测CPU占用程度，堆栈申请的内存。 **Application** 显示资源，跟Sources不同的是，它会对文档类型分类。并且可以查看，增加，删除，修改页面LocalStorage，SessionStorage,Cookies等。 **Security** 安全检测提醒。 ## Chrome快捷使用调试技巧 **快速切换文件** 按Ctrl+P（cmd+p on mac）,就能快速搜寻和打开你项目的文件。  **源代码中搜索** 在要在Elements查看源码，只要定位到Elements面板，然后按 ctrl+f （cmd+f...
# 代码复用之继承 >js继承通常分两类：原型链的继承，实例对象继承（浅拷贝，深拷贝） ## 原型链的继承 - 1.借用构造函数： ``` function Parent(name){ this.name= name || "adam", this.age="24"; } Parent.prototype.say = function () { return this.name } function Child(name){ Parent.apply(this, arguments) } var...
## 什么是Cookie Cookie 是一种发送到客户浏览器的文本串句柄，并保存在客户机硬盘上，可以用来在某个WEB站点会话间持久的保持数据，用来跟踪浏览器用户身份的会话方式。 ## 怎么使用Cookie？ 通常我们有两种方式给浏览器设置或获取Cookie，分别是HTTP Response Headers中的Set-Cookie Header和HTTP Request Headers中的Cookie Header，以及通过JavaScript对document.cookie进行赋值或取值。 [rfc6265第5.2节](https://tools.ietf.org/html/rfc6265#section-5.2)定义的Set-Cookie Header，除了必须包含Cookie正文，还可以选择性包含6个属性path、domain、max-age、expires、secure、httponly，它们之间用英文分号和空格（"; "）连接。 Cookie的正文部分，是由&连接的key=value键值对字符串，类似于url中的查询字符串。下面是一个标准的Set-Cookie Header： >Set-Cookie: key=value; path=path; domain=domain; max-age=max-age-in-seconds; expires=date-in-GMTString-format; secure; httponly 在浏览器端，通过document.cookie也可以设置Cookie，以[MDC](https://developer.mozilla.org/en-US/docs/Web/API/document/cookie)文档为例，Cookie的内容除了必须包含正文之外，还可选5个属性：path、domain、max-age、expires、secure。下面是简单的示例： >document.cookie = "key=value;...
for...in 语句以任意顺序遍历一个对象的可枚举（enumerable）属性。对于每个不同的属性，语句都会被执行。 for...in 遍历对象： ``` let tMinus = { two: "Two", one: "One", zero: "zero" }; let countdown = ""; for (let step in tMinus) { countdown += tMinus[step] +...