2016年05月_bdss58

12月 11月 08月 07月 06月 05月 04月 01月

原创 Flexbox布局（6）

上一篇介绍了flex-direction: row-reverse，来颠倒排列。现使用下面规则：display: flexflex-direction: columnalign-items: centerjustify-content: center来实现下面效果： <link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/f

2016-05-26 12:31:58 363

原创 Backbonejs之collection

接上一篇[backbone之model]。什么事collection? 一句话，models的有序集（simply an ordered set of models）。上例子吧…note: 打开一个加载了backbone的页面，然后f12，在console里就可以玩这些代码了。// modelvar Song = Backbone.Model.extend({ defaults:

2016-05-25 10:13:03 374

原创 Flexbox布局（5）

接上一篇flexbox布局（4）展示了flexbox的完美居中能力。flexbox还可以轻松实现颠倒排列的效果。实现下面效果： flex-direction: row-reverse 是flexbox中的子元素倒序排列。<link href="http://cdn.bootcss.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesh

2016-05-25 09:45:09 388

原创 Backbonejs之model

上一篇Backbonejs之router，秀了一下backbone的router的使用。这里在玩一下backbone的model。model可是backbone的核心。啥是model前端mvc的感念中，model到底是啥东西呢？见仁见智吧。backbone的作者定义如下： model是javascript程序的核心，它包括了交互式数据以及相关的逻辑处，比如转换、验证、计算属性和访问控制。用ba

2016-05-24 19:01:29 581

原创 Backbonejs之router

上一篇Backbonejs之view，玩了一下backbone的view。这里在试一试backbone的router。浏览器端的路由实现通常都是通过监听 hash tags(#)的变化来实现的。 backbone会把url中‘#’后面的字符串看待成路由，比如http://example.com/#/user/help，其中user/help就是一个路由。直接上代码演示一下backbone的ro

2016-05-24 12:08:34 627

原创 Flexbox布局（4）

上一篇Flexbox布局（3）css居中问题，老生常谈。这里试着flex布局一番，看看flex居中实现起来效果如何。实现下面效果：使用以下要点：display: flex ：肯定要来一个flexbox嘛。flex-direction: column ：竖直方向摆放子元素。align-items: center ：“串糖葫芦”，居中效果justify-content: center ：子元

2016-05-24 10:05:41 432

原创 Backbonejs之view

view控制的是如何显示，包括：显示的元素，元素绑定的时间以及操作上的交互逻辑。下面的小例子展示了backbone的view类的使用：<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script><script src="https://

2016-05-23 23:00:24 659

原创 Flexbox布局（3）

使用flex-direction: column，可以是flexbox中的子元素按竖直方向排列。实现下面效果： <script src="http://cdn.bootcss.com/jquery/2.2.0/jquery.js"></script><style> .side-bar { /** * 这是一个flexbox */

2016-05-23 17:00:27 350

原创 JavaScript闭包造成内存泄漏的一个例子

看下面代码：function readData() { var buf = new Buffer(1024 * 1024 * 100) var index = 0 buf.fill('g') return function() { index++ if (index < buf.length) { return buf[index-1]

2016-05-22 16:57:56 4074

原创 Flexbox布局（2）

在需要左右放置内容的情况下（下图布局效果），往常都是用float，这个float恶心的很，需要float: left，float: right，然后再clear: both。不仅麻烦，并且常常左右内容不能水平对齐。这个时候，css3的flex布局的优越感油然而生。下面使用flex来实现以下图中的效果。不多解释了，直接代码中注释了。<link href="http://cdn.bootcss.

2016-05-22 12:56:22 412

原创 javascript简单实现 EventEmitter

本文参考http://www.datchley.name/es6-eventemitter/ 先说说观察者模式吧。因为EventEmitter基于观察者模式。观察者模式EventEmitter实现一个EventEmitter类，作为被观察的对象：class EventEmitter { constructor() { this.listeners = new Map(); }

2016-05-21 23:47:32 5713

原创 es6改进es5中的一些坑

1. 块级作用域es5中有一个比较坑的地方就是变量提升（variable hoisting），variable hoisting的根本原因就是es5中没有块级作用域。看一下下面的代码：var a = 10;var b = 20;function add(flag) { if (flag) { var b = 10; return a + b; }

2016-05-21 17:51:42 1901

原创 Flexbox布局（1）

使用css3中的flex，可以实现很棒的布局。一些简单的页面和需求，可以考虑使用flex布局，基本上都能满足需求。只需要将元素添加一个display: flexcss规则，我们就获得了一个flexbox。就是这么简单。默认情况下，flexbox将其子元素沿着一条水平的“main axis”轴线布局。本篇先玩一下基本的使用：水平排列子元素。先做一个Stepper input组建，效果如图没有必要使

2016-05-20 17:14:18 373

原创 javascript之debounce函数

为一个事件绑定函数后，存在这样一个问题：当事件连续出现时，绑定函数会联系触发。但我们并不想让函数连续出发执行，只想最后一个事件出现后触发一次绑定函数。据一个场景例子，keydown事件，当用户一直按着按键不放，绑定的函数就会不断地触发执行。用户体验差。这个时候debounce函数便派上用场。先看一下debounce函数的原型： debounce(function, wait, immed

2016-05-19 18:08:09 1730

原创 javascript数组转换（convert to an Array）

javascript中有一些对象看起来用起来像是数组，但是他们并不是数组。比如arguments和NodeList对象。为了方便操作，需要将这类数据类型转换为数组类型。下面以NodeList为例，介绍几种数组转换方法：slice.callvar div_list = document.querySelectorAll('div'); // returns NodeListvar div_array

2016-05-18 19:21:21 1151

原创 nodejs异步编程

nodejs异步编程，老生常谈。今天总结一下，算是巩固学习吧。以读文件为例，同步编程这么写：var fs = require("fs");var fileContent = fs.readFileSync('sync.js','utf8');console.log(fileContent);console.log("something else");异步编程咋整？回调函数伺候之：var f

2016-05-17 22:01:09 504

原创 expressjs中的错误处理中间件

普通的express中间件函数的参数包含3个参数 (req, res, next)错误处理的中间件函数需要额外一个参数error: (error, req, res, next)举例来说，使用中间的正确姿势是：var express = require('express');var app = express();var bodyParser = require('body-pars

2016-05-17 17:57:35 4372

原创 nodejs的一些核心概念

本文参考这里1. 事件循环java的同步执行模式：System.out.println("Step: 1");System.out.println("Step: 2");Thread.sleep(1000);System.out.println("Step: 3");顺序执行1.2.3，并在输出3之前停顿1s。对异步执行的node来说：console.log('Step: 1')setT

2016-05-16 22:20:19 3565

原创手机摄影（2）

在[上一篇]介绍了拍摄时候的构图要素，包括光纤、线条、颜色、空间以及反射阴影。本篇再介绍一下如何巧妙利用手机相机的局限性。1. 快门速度手机为了让更多的光线进入感光元件，会减小快门速度。这意味着，拍摄时，任何的移动可能最终被模糊。我们可以利用这个特点，捕捉一些模糊的元素，使照片看起来更加动态，更加抽象。上图中，在餐馆里的弱光情况下，手机相机自动选择了低速快门。这样就造成了走动的服务员虚化的效果。

2016-05-13 11:19:16 413

原创手机摄影（1）

什么是构图？从本质上说，当取景时，你会选择如何安排镜头中的视觉元素，如线条、形状、颜色和光线等元素。由此产生的安排是你的构图。构图不仅影响图像的动和静的视觉，也影响观察者的想法和感觉。举个例子，如果图像中有一群行人穿过街道，这样的图像可能引起不了你的注意，但图像中只有单个行人穿过马路，它就可能传达一系列的感情或想法，从孤独到冒险。

2016-05-12 11:26:30 663

原创 javascript使用promise递归读取目录下所有文件

如题，主要是为了练习一下promise的使用。之前一直不知道promise对象的then函数还可以返回promise对象，以便达到链式调用的效果。下面上代码，以记之~~~var fs = require('fs');var path = require('path');function readdirPromisify(dir) { return new Promise((resolv

2016-05-11 19:32:14 4724 1

原创 javascript小技巧

本文参考：这里1. 使用!!操作符转换boolean类型在变量前面加上!!运算符，可以将变量转换为boolean类型。可以将0, null, "", undefined, NaN这些变量转换为false，其余变量转换为true。function Account(cash) { this.cash = cash; this.hasMoney = !!cash;}var acco

2016-05-11 16:35:28 361

原创与bash script脚本自动化交互

如果bash脚本中一些命令需要手工输入进行交互的时候，那么脚本的自动化就没法进行下去。比如：ssh somehost需要输入用户名和密码，脚本运行到这个命令后，便会停止，等待用户输入。如果在简单情景下，比如只需要用户输入一次，即一次性交互时，可以直接这样：# ... some directives here# Remove the machine, confirming "y" when ask

2016-05-08 18:27:35 3230

原创 MapReduce实例

本文参考http://michaelnielsen.org/blog/page/19/ 从MapReduce的经典例子—单词统计开始。一个MapReduce job的输入是一个（input_key, input_value)这样的键值对集合。键值对集合可以使用python的dictionary数据类型来表示。在单词统计例子中，input_key是文件名，input_value是文件内容。...

2016-05-02 00:09:27 549