cc
cc copied to clipboard
ccforward
Code & Blog
## 引子 判断一个元素是否在数组中，代码很简单，也就一个 if 判断了事 ``` javascript var t = {val:2}; if([1,2,3,4,5].indexOf(t.val) >= 0){ alert('Yes'); } ``` PS：indexOf 来自 ES5 ，IE9一下不支持 使用 ~ 符号却能简化判断语句，如下： ``` javascript if( ~[1,2,3,4,5].indexOf(t.val) ){ //...
# 图解 Flexbox 本文图片、部分翻译来自原文 [How Flexbox works — explained with big, colorful, animated gifs](https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35#.h4n9x6uv7) ## 属性#1 `display: flex` 示例如下  上面4个 `div` 默认为 `display: block` 我们给其父级容器添加 ```css #container { display:...
# 不用循环的 JavaScript -- 函数式编程 通过代码一步步的深入 `map` `reduce` `filter` `find` ... > 参考自 [http://jrsinclair.com/articles/2017/javascript-without-loops/](http://jrsinclair.com/articles/2017/javascript-without-loops/) > 本文重写了代码、添加了个人的理解，更加精简 ## 循环 Loop 先看看js中的基础循环代码 `while` ```js // 所有字母大写 function capitalize(str){ return str.replace(/[a-z]/g, s =>...
# 一行代码调试 CSS [github代码地址](https://gist.github.com/addyosmani/fd3999ea7fce242756b1) ## 一、代码 ### 108字节 `[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1
# socket.io 和 Vue.js 的五子棋 群里有个同学要做个五子棋的面试题，于是拿出了以前写的代码，但是有bug，所以重做了一遍。 代码只是做了简单实现，但是去面试足够了，顺便写篇文章对思路和代码详细解释下。  ## Demo & 源码 [单机Demo](http://ccforward.github.io/game/chess/chess.html) [单机Demo源码](https://github.com/ccforward/cc/blob/master/chess/chess.html) [可联机Demo源码](https://github.com/ccforward/cc/tree/master/chess) ## 单机版详解 ### 1、棋盘布局 棋盘(正方形)是由一个个的方块构成，棋子可落在横竖线的交点处，棋盘基本都是这种样子  那就用一个空的 `` 标签作为一个方块，伪元素 `before` `after` 作为横竖中心线形成一个十字  然后一行的 ``...
# 洗牌算法(shuffle)的js实现 ## Fisher-Yates 先看最经典的 [Fisher-Yates](http://en.wikipedia.org/wiki/Fisher-Yates_shuffle) 的洗牌算法 这里有一个该算法的[可视化实现](https://bost.ocks.org/mike/shuffle/) 其算法思想就是 **从原始数组中随机抽取一个新的元素到新数组中** 1. 从还没处理的数组（假如还剩n个）中，产生一个[0, n]之间的随机数 random 2. 从剩下的n个元素中把第 random 个元素取出到新数组中 3. 删除原数组第random个元素 4. 重复第 2 3 步直到所有元素取完 5. 最终返回一个新的打乱的数组 按步骤一步一步来就很简单的实现 ``` js...
# async/await 小技巧 ## sleep 函数 以前只接使用 `setTimeout` 和回调函数实现一个 `sleep` 会有很多的副作用，用起来很不方便。 所以让 `setTimeout` 搭配使用 `async/await` ```js const sleep = delay => { return new Promise(resolve => { setTimeout(resolve, delay) })...
# [半夜改bug] mongoose 的 createConnection 和 connect > 代码出 bug 大半夜的被 mongoose 的连接函数搞惨 因为代码里 mongo 数据库的连接方式的代码被改成了 `const db = mongoose.createConnection(mongo.url(), mongoOptions)`，所以在调用数据插入函数时 `Promise` 的 resolve 和 reject 都没有返回，也没有打印任何异常信息。 查了业务逻辑、本地 mongo 的读写都没问题，最后发现是...
### 主要测试了Mac下使用情况： - ~/.bash_profile:每个用户都可使用该文件输入专用于自己使用的shell信息,当用户登录时,该文件只load一次。 - ~/.bashrc:该文件包含了专属于登录用户的bash shell的bash信息。每次新开一个bash或者登录都会reload一次。 ### 建议做法 - 把 PATH 放入 .profile 文件 - 把 alias 和 功能函数 放入 .bashrc 文件 - 然后 .bash_profile ``` shell #!/bin/bash #...
# 理解 Vue.js 的计算属性 通过模拟一个简单的例子来理解 [Vue.js 的计算属性](https://vuejs.org/v2/guide/computed.html) ## Object.defineProperty 通过 Object.defineProperty 的 `getter` `setter` 来实现对象的数据劫持，例如： ```js const person = {} Object.defineProperty(person, 'name', { get: function(){ console.log('getting name') return 'Tink' }...