2015年11月_布瑞泽的童话

12月 11月 10月 09月 08月 07月 06月 05月

原创 Grunt插件autoprefixer使用指南

在grunt安装、配置和应用中，我介绍了几种插件的使用。今天再介绍一个为兼容各大浏览器自动添加前缀的插件autoprefixer。要想使用它得先安装 Browserslist caniuse-db num2fraction 等插件，具体安装方法见上一篇文章。该插件的github地址为：autoprefixer 环境配置好了后，gruntfile.js文件配置如下：module.exports

2015-11-29 18:24:39 4540

ES6是新一代的javascript语言标准，我们作为web开发者，无论是前端工程师还是后端开发者都需要适当的了解。上一次正式推出ES5，还是在2009年的时候。而这次ES6却更新和添加了很多新的内容呢。相信ES6给程序世界带来的影响不会小于CSS3和HTML5。ES6包含许多新的语言功能，会使javascript更加强大而富有表现力。ES6相对于互联网来说已经不算是什么新鲜知识了，国内有阮一峰老师

2015-11-28 20:11:08 887

原创初步探究ES6之module模块化

多人开发javascript时伴随着命名冲突等问题，先后有了模拟块级作用域、命名空间、模块化开发等方法。之前，模块化开发一直是由第三方库来模拟的，比较知名的有AMD规范和CMD规范。两个规范分别对应requirejs和seajs。而现在，ES6提出了自己的模块化统一标准。一个ES6的模块是一个包含了js代码的文件。ES6里没有所谓的module关键字，一个模块就是一个普通的脚本文件，除了以下两个区别

2015-11-25 16:42:30 3591

原创初步探究ES6之class类

类语法是ES6中新增的一个亮点特色。我们熟悉的javascript终于迎来了真正意义上的类。在之前，想要通过javascript来实现类，通常会采用如下构造函数的模式：function Person(name,age,job){ this.name = name; this.age = age; this.job = job; this.friends = ['Shelby','Co

2015-11-24 09:05:39 1265

原创初步探究ES6之Proxy代理

ES6中提出了一个新的特性，就是proxy，用来拦截在一个对象上的指定操作。这个功能非常的有用。举一个例子来说：var engineer = { name: 'Joe Sixpack', salary: 50 };var interceptor = { set: function (receiver, property, value) { console.log(property, 'i

2015-11-23 09:24:05 4522

原创初步探究ES6之Symbol类型

Symbol是在ES6中新加入的类型。正如我们所知，javascript中有以下几种类型：Undefined ,Null ,Boolean ,Number ,String, Object。但是上述类型在处理某些情况的时候是远远不够的。下面我们来举一个例子：假设我们要移动div，也需要在某些情况下判断该div是否处于移动状态，所以我们会想到给div这类的对象设置一个属性。if (element.isM

2015-11-22 20:59:20 1093

原创初步探究ES6之箭头函数

今天要介绍的是ES6中的箭头函数。语法我们先来看看箭头函数的语法：([param] [, param]) => { statements}param => expressionparam 是参数，根据参数个数不同，分这几种情况： () => { … } // 零个参数用 () 表示； x => { … } // 一个参数可以省略 ()； (x, y) => { … } // 多参数不

2015-11-20 09:16:58 24441 5

原创初步探究ES6之解构

语法解构可以使得我们用类似于数组或者对象文本的语法来指定数组的属性或者对象的属性。该语法比传统语法更加简便。光说可能不好理解，下面看看用传统的方法来表示数组的前三项：var first = someArray[0];var second = someArray[1];var third = someArray[2];有了解构语法后，我们可以使用下面的语法来完成同样的工作：var [first,

2015-11-19 09:04:34 1066

原创初步探究ES6之字符串模板和剩余参数，默认参数

本文介绍一下字符串模板以及剩余参数，默认参数的概念以及使用。先来说说字符串模板。字符串模板ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${varible}。如果你使用过像C#等后端强类型语言的话，对此功能应该不会陌生。//产生一个随机数var num=Math.random();//将这个数字输出到consoleconsole.lo

2015-11-18 09:16:16 3025

原创 Photoshop切图

切图，顾名思义，将图片切成若干块，以供web开发使用。原始图片如下：直接使用切片工具简单的切图工作我们可以直接使用切图工具。比如我们需要切出左上角第二张图片。首先我们选中切片工具：shift加鼠标拖动是构建一个正方形，然后进行微调。蓝色部分就是切出来的图片，切完后存储为web所用样式即可。根据参考线切片如果是较为复杂的切图需求，建议先建立参考线。比如我们要刚才那片图片的中间四个子图片。我们首

2015-11-17 22:00:05 1197 1

原创初步探究ES6之生成器

语法何为生成器？让我们先看看以下代码：function* quips(name) { yield "hello " + name + "!"; yield "i hope you are enjoying the blog posts"; if (name.startsWith("X")) { yield "it's cool how your name starts with

2015-11-17 09:46:21 979

原创 HTML5之离线应用缓存

今天说说HTML5的新特性之一：离线应用缓存。离线应用，就是在没有网络的情况下访问Web应用程序时，实际上是访问已下载的离线文件资源，并使得Web应用程序正常运行。特性开发者需要注意三个特性：1. 离线资源缓存在开发离线应用时，必须使用一种方案来说明哪些文件资源需要在离线状态下工作。当设备处于在线状态下，被指定缓存的资源文件便会缓存到本地。此后，如果用户在离线状态下再次访问该Web应用程序，浏览

2015-11-16 16:21:26 2921

原创初步探究ES6之for循环和Map,Set

现在大家先想一想，如果要你遍历一个数组的元素，你会选择如何去做呢？一般都会想起for循环：for (var index = 0; index length; index++) { console.log(myArray[index]);}可惜我得告诉你，这个方法是二十年的人才应该使用的方法，在ES5中已经提出了更为简便的forEach方法，代码如下：myArray.for

2015-11-16 09:42:07 16212 1

原创深入理解javascript之函数

函数的作用域和this的指向我已经在前面的文章中讲过，今天主要讲讲函数的绑定。函数绑定要创建一个函数，可以在特定的this环境中以指定参数调用另外一个函数。该技巧常常和回调函数与事件处理程序一起使用，以便在将函数作为变量传递的同时保留函数的代码执行环境。函数绑定看下面的例子：var handler = { message:"消息来了！", handlerClick :function(eve

2015-11-13 19:56:50 1224

原创初步探究ES6之let,const和块级作用域

我们知道javascript定义变量的方式是var，但是var有几个问题。var第一个就是作用域的问题，var不是针对一个块级作用域，而是针对一个函数作用域。举个例子：function runTowerExperiment(tower, startTime) { var t = startTime; tower.on("tick", function () { ... code tha

2015-11-13 09:28:41 7121 1

原创 centOS下PHP使用mongodb详细安装过程

本文讲的是在centOS下使用mongodb的完整安装配置过程。更换yum源我们希望通过yum来安装，这样比较方法快捷，但是centOS默认的yum环境中并没有我们需要的内容，所以我们需要主动更换yum源为163的源。首先获取163源：# wget http://mirrors.163.com/.help/CentOS6-Base-163.repo然后我们将自己本机的yum备份：#mv CentOS

2015-11-12 09:24:55 1987

原创 centOS下PHP使用memcached详细安装过程

网上的文章都没有完整的介绍如何配置centos下php的memcached使用环境，所以这里将自己成功配置的经验写下来。安装memcached首先是安装memcached数据库本身。我们在centos下可以通过yum下载memcached数据库本身：#yum search memcached#yum -y install memcached安装成功后，通过下面命令可以查看帮助信息：#memcach

2015-11-08 12:53:35 3902 5

原创 inline-block间隙问题

我们在使用inline-block是时候，可能会出现一个问题，就是元素之间出现间隙。我们看看代码：<style>li { display:inline-block; width:20px; height:20px; background-color:red;}ul { width:90px; background-color:blue;}</style><ul>

2015-11-02 20:02:39 898