cc
cc copied to clipboard
ccforward
Code & Blog
# 深度使用 JSON.stringify() 按照 JSON 的规范，使用 JSON.stringify() 做对象序列化时，如果一个属性为函数，那这个属性就会被忽略。 ```js const data1 = { a: 'aaa', fn: function() { return true } } JSON.stringify(data) // 结果是 "{"a":"aaa"}" ``` 还有一种情况，一个属性的值为 `undefined` ```js...
# CSS 伪类选择器 > 写了那么多的伪类选择器，有必要做个笔记总结一下 ### `:root` 顾名思义 root 元素就是 html 元素 ### `E:nth-child(n)` E 元素不是其父元素的第 n 个子元素 ### `E:nth-last-child(n)` E 元素是其父元素的倒数第 n 个子元素 `p:nth-last-child(1)` 同 `p:last-child` ### `E:nth-of-type(n)` 属于父元素的特定类型的第...
# Vue.js Little Tips ## v-model 在输入框中双向绑定一个数据虽然可以这样写 ```html ``` 但更应该这样写 ```html ``` 这一点没什么可说的，但由此我们应该知道是，在使用一个属性前，一定要提前定义，例子如下 [https://ccforward.github.io/demos/vue-tips/v-model.html](https://ccforward.github.io/demos/vue-tips/v-model.html) 没有提前定义 name 属性，所以 input 标签中改变 person.name 属性不会响应到 js 对象上 ```html Name: Phone: {{person}} ``` ```js new...
原文：[all this](http://bjorn.tipling.com/all-this) 习惯了高级语言的你或许觉得JavaScript中的`this`跟Java这些面向对象语言相似，保存了实体属性的一些值。其实不然。将它视作[幻影魔神](http://harrypotter.wikia.com/wiki/Boggart)比较恰当，手提一个装满未知符文的[灵龛](http://harrypotter.wikia.com/wiki/Undetectable_Extension_Charm)。 以下内容我希望广大同行们能够了解。下面都是满满的干货，其中很多花费了我很多时间才掌握。 # 全局 `this` 浏览器宿主的全局环境中，`this`指的是`window`对象。 ``` javascript console.log(this === window); //true ``` [Demo](http://jsfiddle.net/btipling/hL9emz4m/) 浏览器中在全局环境下，使用`var`声明变量其实就是赋值给`this`或`window`。 ``` javascript var foo = "bar"; console.log(this.foo); //logs "bar" console.log(window.foo); //logs "bar" ```...
原文：[stackoverflow.com](http://stackoverflow.com/questions/2628672/what-should-every-javascript-programmer-know/2629004#2629004) 这是stackoverflow上的一个老问题，却有个干货答案，但是扩展的信息量很大，我只在此抛个砖。 --- Not jQuery. Not YUI. Not 等等… js的框架的确很有用，但是它们却常常把一些js的丑陋细节和DOM原理给你隐藏了。如果你的目标是做一个精通javascript的工程师，那花大把的时间放在框架上可能恰恰背道而驰了。 下面就有javascript这门语言的一些特性，你应该知道并且深谙此道，但是很多人可能还并不清楚。 ## 1、对象 1、对象属性，object.prop和object['prop']是一回事(所以你能停止使用eval了吗？！3KU)；对象的属性多是String类型（有些也是数组Array）；for…in是什么情况下使用，什么情况慎用？ 方括号可以通过变量来访问属性 ```js person.name; person['name']; var propertyName = 'name'; person[propertyName]; // name ``` 当属性是带空格的string时就只能用方括号了：person['first name']; for…in 循环输出的属性名顺序不可预测,使用之前先检测对象是否为null...
# Node.js的核心Feature > 1. EventLoop 事件循环 > 2. global 和 process > 3. EventEmitter 事件 > 4. Stream 和 Buffer > 5. Cluster 集群 > 6. 异步Error > 7. C++...
## 2016 一些感想 一些总结 年前写的一篇总结，本不想放出来，但想想，总还是要有个地方存着吧。 过年放假在家，干活、打扫卫生、走亲戚，比上班还忙，晚上也算有点空闲时间对2016做些总结。 主要都是些自己的感想，想到哪说那。 > 今年的成长主要做了三件事 > > * 引入以 Vue.js + Webpack + Node.js 为核心的前端工程规范 > * 把 Vue.js 作为业务前台、后台的技术栈并开源了 [Rubik UI](https://ccforward.github.io/rubik/#/) 组件库 > * 每周都写下自己的产品、业务心得，并完善了个人项目：...
26.毛玻璃
## 毛玻璃效果 - 《css揭秘》笔记 ## Demo地址 [https://ccforward.github.io/css-secrets/frosted-glass/index.html](https://ccforward.github.io/css-secrets/frosted-glass/index.html) ## 方案 1. 大背景是 `background-attachment: fixed` 处理起来容易些，非固定背景的情况比较麻烦 2. 首先不能对元素本身做模糊处理，所以就对一个伪元素进行处理，将其定位到元素的下层，那他的背景就和 的背景无缝匹配了 主要代码： ``` css main { position: relative } main::before { content: ''; position:...
# 用实例代码理解 ES6 Proxy > MDN 上关于 [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) 和 [Reflect](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect) 的文档 ## 基本用法 Proxy 是通过包装对象，用拦截的方式来修改某些操作的默认行为，比如获取属性值。我们可以为需要拦截的对象提供一个带有 [traps](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy#Terminology) 的函数对象，如果对象操作没有定义 trap 将会指向原始的对象操作上。 ```js const handler = { get(target, prop) { const val =...