天外野草-CSDN博客

原创 NodeJS学习系列课程笔记（NodeJs Console 的相关使用方法）

在使用Node的过程中，我们往往会用到控制台打印功能，对于部分开发者来说这样更直观和方便，但是也有一部分人会进行debug，不管您的习惯如何，我们还是来介绍一下在nodejs中console控制台的相关用法是什么样的。先来看一下官方给的api都有哪些，但是不是都能用到哦：new Console(stdout[, stderr])console.assert(value[, message][,

2016-07-14 11:48:59 1218

原创 NodeJS学习系列课程笔记（NodeJs Buffer 的相关使用方法）

JavaScript 语言自身只有字符串数据类型，没有二进制数据类型。但在处理像TCP流或文件流时，必须使用到二进制数据。因此在 Node.js中，定义了一个 Buffer 类，该类用来创建一个专门存放二进制数据的缓存区。在 Node.js 中，Buffer 类是随 Node 内核一起发布的核心库，所以不需要用require引入， Buffer 库为 Node.js 带来了一种存储原始数据的方

2016-07-14 11:29:13 2439

原创 NodeJS学习系列课程笔记（NodeJs Assert断言测试）

对于NodeJS， assert模块提供了一系列的断言测试，其实这个模块主要倾向于内部使用，但是也能被用于项目中，可以通过require(‘assert’)的方式引入。比如看下面这个代码：const assert = require('assert');assert(true); // OKassert(1); // OKassert(false); // throws "Ass

2016-07-13 17:51:08 3812

原创 NodeJS学习系列课程笔记（NodeJs 快速上手+用法示例）

下面是一个简单的示例，展示我们如何开始快速搭建一个web server基于nodejs。const http = require('http');const hostname = '127.0.0.1';const port = 3000;const server = http.createServer((req, res) => { res.statusCode = 200; res.s

2016-07-13 16:56:01 1309

转载 NodeJS学习系列课程笔记（NodeJs简介）

Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引擎执行Javascript的速度非常快，性能非常好。Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。Node.js是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node

2016-07-13 15:48:56 1526

原创 AngularJS1.x学习（仿微信图片手势缩放效果实现）

最近，公司做一个混合应用项目，涉及到一个图片缩放功能，类似微信那样支持touch事件。亲测，实现方案很不错，所以放出来，和大家分享一下，希望有人能用得到。核心思想就是用到了CSS3的transform属性，不多说，我们看代码：'use strict';/** * @ngInject */module.exports = function () { var _directive =

2016-07-13 15:04:24 5034

原创 Cordova 混合应用处理输入法相关事件

最近一个混合应用项目（Cordova+ios+android）。其中android有返回键，当我们页面已经弹出了输入法，有的用户习惯用返回键关闭输入法，这时候就有一个问题，当我们点击返回键时，页面会发生回退现象，这不是我们想要的结果。后来尝试了如下方法，可行。 document.addEventListener(“showkeyboard”, function(){}, false);

2016-07-13 14:32:38 712

原创 AngularJS1.x学习（directive 中‘& ’‘=’ ‘@’符号的区别使用）

对于HTML5的兴起，Angular火热绝对值得称赞，外加庞大的社区做支持，是的Angular的普及度越来越高，称为最为流行的html5框架。对于一个html5框架的好坏，我们有几个评判标准，轻量级，可拓展，易复用，速度快。对组件复用这点，angular以directive的形式展示给开发者，是一个还算不错的选择，作为一个UI组件，必定存在数据交互。那么数据交互过程中的几个符号我们一定要有所了解，

2016-07-13 14:12:43 7341

原创 JavaScript作用域提升问题分析

如果经常编写Java, C++的工程师一定知道作用域的问题，同时，作用域也是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。var authorName="山边小溪";

2016-07-13 13:47:07 594

原创 JavaScript原型链的理解和分析

JavaScript的学习是一个循序渐进的过程，学习过程中我们会不断探索其中的奥秘，其实我从最开始学习，一直对原型链的概念缺乏一个明确的认识，虽然有的时候还是在不断使用的。简单理解，在JavaScript中,一共有两种类型的值,原始值和对象值.每个对象都有一个内部属性[[prototype]],我们通常称之为原型.原型的值可以是一个对象,也可以是null.如果它的值是一个对象,则这个对象也一定有自己

2016-07-13 12:06:32 768

原创 ECMAScript 6 学习系列课程笔记

ES6普及已有一年的时间了，我们也有必要去了解和使用一些语法糖，这毕竟是未来的趋势，本人在学习过程中，为方便记忆，所以记录了学习过程中的点滴，帮助自己的同时，也希望给他人的学习带来一些指引。下面是主要的目录笔记：ECMAScript 6 学习系列课程（ES6简介）ES6 之 const 的说明ECMAScript 6 学习系列课程（ES6 对象的最新用法）ECMAScript 6 学习系

2016-07-12 15:36:52 858

原创 ECMAScript 6 学习系列课程（ES6 class的相关用法）

面向对象的变成思想，是现在最流行的一种思想，java C++ c# php, 等等都是面向对象的语言，提到面向对象，我们肯定要提到类的概念，因为有类才有对象，那么如果定义一个类，就至关重要了。ES6不得不说已经向大语言靠拢了，在ES6中我们居然看到了Class的语法，是不是很牛，而且还可以定义构造方法，实例化一个类，我们也可以像java一样 new 一个class。不仅如此，我们还可以实现继承

2016-07-12 15:17:38 852

原创 ECMAScript 6 学习系列课程（ES6 默认值和解构赋值的使用）

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。对于ES5标准，我们定义一个变量，需要这样写var a = 1;var b = 2;var c = 3;如果用ES6标准，可以写成这样：var [a, b, c] = [1, 2, 3]对于深层次的解构，一样可以解构赋值，例如下面的实例:let [foo, [[bar], baz]] =

2016-07-12 14:59:15 3347

原创 ECMAScript 6 学习系列课程（ES6 箭头函数的使用）

在ES6语法中，简化了对函数的书写，其实，最初并不适应这样的写法，感觉很奇怪，但是永久了，发现这种方式更加直观，如果有了解swift语法的一定对箭头函数不陌生。下面我们来看一下这个箭头函数在ES6中是如何应用的：odds = evens.map(v => v + 1)pairs = evens.map(v => ({ even: v, odd: v + 1 }))nums = evens.m

2016-07-12 14:46:09 7653

原创 ECMAScript 6 学习系列课程（ES6 Modules的使用）

从编程思想上来讲，基于模块化的开发已经越来越普及了，ES6对于模块化的支持，更是一个不错的语法糖，下面我们来看一下具体的使用方法:ES6支持导入，导出（export, import）从相关全局模块。如下：// lib/math.jsexport function sum (x, y) { return x + y }export var pi = 3.141593// someApp.js

2016-07-12 14:24:58 1282

原创 ECMAScript 6 学习系列课程（ES6 常用内置方法的使用）

在编写Javascript的过程，我们经常会用到数组过滤，字符串等相关操作，比如会用到filter等方法，在ES6中同样新增了很多内置方法，下面我们来了解一下。Finding [ 1, 3, 4, 2 ].find(x => x > 3) // 4ES5实现实例：[ 1, 3, 4, 2 ].filter(function (x) { return x > 3; })[0]; // 4String

2016-07-12 13:57:45 5949

原创 ECMAScript 6 学习系列课程（ES6 proxy和Reflect的相关用法）

使用Javascript ES6的Proxy实现元编程，如果你熟悉Java，这非常类似Java中的动态代理模式，在ES6中Proxy, Reflect实现了代理和反射机制，这样说大家可能比较生涩，我们还是看一下具体代码：let target = { foo: "Welcome, foo"}let proxy = new Proxy(target, { get (receiver

2016-07-12 12:09:50 2518

原创 ECMAScript 6 学习系列课程（ES6 gulp+babel 语法转化的相关用法）

目前来讲ES6语法的支持程度还不够完美，很多特性都没有支持到，但是ES6的语法糖的确很诱人，对于开发者来讲，我们有很想尝试使用，所以我们通常会讲ES6语法转换为ES5语法到产品环境使用，这个过程中会用到转换库，现在最好，最稳定的当属babel家族了。在真正项目中，我们会使用gulp进行项目架构，那么使用gulp和babel改如何实现对ES6语法的转化呢？首先确认一下我当前mac环境的相关配置：Nod

2016-07-12 11:38:43 2682

原创 ECMAScript 6 学习系列课程（ES6 Internationalization & Localization的介绍）

对于ES6新增了很多对于国际化的支持，比如时间格式，货币格式，数字格式等等，那么对于这些特性，该如何使用呢，我们实际中看一下具体代码实例。再次说明一下，个人更喜欢代码实践，不喜欢空谈，因为这样更容易记住和理解。时间格式化操作：var l10nEN = new Intl.DateTimeFormat("en-US")var l10nDE = new Intl.DateTimeFormat("de-D

2016-07-12 11:14:03 813

原创 ECMAScript 6 学习系列课程（ES6 Promise对象的使用）

Promise是异步编程的一种解决方案， ES6 这一特性很大程度上提高了开发者的效率，如果用过Angular的同学，一定会用到$q的resolve和reject函数，同理promise也提供原生的解决方案，不需要任何框架支持。我们下面看一下代码：function msgAfterTimeout (msg, who, timeout) { return new Promise((resolv

2016-07-12 11:02:43 2713

原创 ECMAScript 6 学习系列课程（ES6 Generator 函数的使用）

在学习ES6的过程中，个人认为Generator稍微会有些难以理解，其实Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。我们从表面上看，Generator函数是一个普通函数，但是有两个特征： 1. function关键字与函数名之间有一个星号； 2. 函数体内部使用yield语句，定义不同的内部状态（yield语句在英语里的意思就是“产出”）。这里推荐给大家

2016-07-04 16:17:16 3257

原创 ECMAScript 6 学习系列课程（ES6 Set和Map数据结构）

学过Java的同学，一定用过List和Map的数据结构，不过JavaScript在最新版本中，也提供了Set和Map的数据结构，的确是广大开发者的福音。ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。SetSet本身是一个构造函数，用来生成Set数据结构。var s = new Set();[2, 3, 5, 4, 5, 2, 2].map(x => s.add(

2016-07-03 21:17:50 3146

原创 ECMAScript 6 学习系列课程（ES6 Symbol语法的使用）

ES5的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想为这个对象添加新的方法（mixin模式），新方法的名字就有可能与现有方法产生冲突。如果有一种机制，保证每个属性的名字都是独一无二的就好了，这样就从根本上防止属性名的冲突。这就是ES6引入Symbol的原因。ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数

2016-07-03 19:02:56 1835

原创 ECMAScript 6 学习系列课程（ES6 对象的最新用法）

由于面向对象编程风格的普及，我们对对象已经有一定的认识了，对于ES6这样一个新的标准，又有那些新的特性，值得我们追捧呢？对象的属性和方法ES6允许直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁：const name = 'Richard';let person = {name};console.log(person); // {name: 'Richard'}同样我们也可定义个fu

2016-07-03 18:29:48 8240

原创 ECMAScript 6 学习系列课程（ES6简介）

ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMA-262标准的实现和扩展。ECMAScript 6（以下简称ES6）是JavaScri

2016-07-01 09:26:55 1075

原创 Angular2 学习系列课程（版本分析+快速上手）

对于目前主流的前端框架，当属React和Angular, 这两个框架各有优缺点，选择的同事也着实令开发者头疼。很多人都搞不懂，为什么Google会对Angular2做如此大的改变，可以称得上是一个全新的框架，其实我们可以从以下几点做一个分析：性能的不足：对于用过1.x版本开发者都知道，虽然Angular提供了很多的方便，可以自定义多个directive, 进行代码复用，这些都是优点，可以向ng-

2016-06-29 10:29:21 1792

原创版本发布中RC的含义什么？

最近一直在关注Angular 2, 发现官方给的版本总是RC 1, 2,3 搞糊涂了RC究竟是什么意思，来给大家普及一下：RC=Release Candidate,含义是”发布候选版”，它不是最终的版本，而是最终版(RTM=Release To Manufacture)之前的最后一个版本。广义上对测试有三个传统的称呼：alpha、beta、gamma，用来标识测试的阶段和范围。alpha 是指内测，

2016-06-28 17:14:58 37020

原创 ReactJS学习系列课程

总揽：（http://blog.csdn.net/jiangbo_phd/article/category/6284963）React简介特点（http://blog.csdn.net/jiangbo_phd/article/details/51753279）React 环境搭建（ http://blog.csdn.net/jiangbo_phd/article/details

2016-06-28 15:54:51 1794

原创 ReactJS学习系列课程（React 性能优化及immutable使用）

一个框架的性能，往往使我们比较关注的问题，对于React性能提升的问题，也做了相关研究，最近网络上最火爆的当属Immutable，有人说 Immutable 可以给 React 应用带来数十倍的提升，也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明。这是一个Facebook 工程师 Lee Byron 花费 3 年时间打造，与 React 同期出现，那么这个libr

2016-06-28 14:18:13 1046

原创 ReactJS学习系列课程（React Redux使用）

React 数据流动的模式的Flux模式，也就是单向数据流，这也是官方推荐的方式，其实这也是React最难理解的一部分。为了更好的了解React-redux的使用，我们先来了解一下Redux的使用。Redux 介绍对于复杂的单页面应用，状态（state）管理非常重要。state 可能包括：服务端的响应数据、本地对响应数据的缓存、本地创建的数据（比如，表单数据）以及一些 UI 的状态

2016-06-28 12:29:08 1284

原创 ReactJS学习系列课程（React react常用架构分析）

最近学习React框架，与其说react是一个新的框架，不如过React是一个新的思想，新的尝试，做惯了前端框架的工程师都知道，MVC,MVVM一直被大家公认为一个非常不错的模式，但是Facebook的工程师确不以为然，推陈出现，创作了这个新的开始，对于一个新的模式，必然有新的架构出现，今天我们来看看React常用架构是什么样的呢？当然这并不是唯一，但是大同小异，万变不离其宗。我们看下面这张架构图:

2016-06-28 11:54:05 4892

原创 ReactJS学习系列课程（React 整体流程使用案例）

对于一门语言的学习，少不了动手练习，今天我们就尝试一下，如何用React编写一个简单的程序，实现功能包括网络请求数据，绑定数据进行增删改查，并进行相应的路由操作。下面我们来年代码：package.json我们创建一个package.json, 里面包含一些开发库还有核心库：{ "name": "demo4", "version": "1.0.0", "description": "",

2016-06-27 16:06:28 6217

原创 Angular2 (One framework 概要)

Angular1.x 版本的火爆，我们不用多说，是很多前端工作者不错的选择，速度快，方便快捷，可拓展性强，我做过很多项目都是基于Anguar 1.x架构的。但是Goolge公司在2.x版本，确做了新的设计，可以说和1.x版本是完全不同的，是一个崭新的框架，我们暂且不去评论它的好与坏，我们先来看看，官方给出一个什么的解释。Develop Across All PlatformsLearn one w

2016-06-26 10:46:36 601

原创一个移动前端的工作感悟

至今工作以有三年时间了，时光荏苒，还记得大学时候并没有接触过很多计算机知识，每天都是参加各种学生会议，组织各种活动，参加各种演出，每天也忙的不亦乐乎，而且自己所学的专业还是数学专业，其实还计算机并没有太大关系。可以有些人，会疑问我为什么会走上这条道路，这要从大学实习的时候说起。在2011年，我人生的第一个程序一个静态的网页，当初看到自己写的程序，真的很激动，没想到自己也可以做出一个每天都使用的网页

2016-06-26 10:03:52 1472

原创 ES6 之 const 的说明

最近，很多人问我，const的用法问题，这里给大家澄清一个误区。常量索引，不是值在ES6中另外一个定义变量的关键字是 const , 但是它经常被误会为一个“常量”。在ES6中， const 代表一个值的常量索引（事实上绝大多数语言都提供这样的功能）。换句话说，变量名字在内存中的指针不能够改变，但是指向这个变量的值可能改变。这里有一个简单的例子。在下面的例子中我们可以创建一个拥有常量索引的数

2016-06-26 09:08:53 7095

原创 ReactJS学习系列课程（React webpack使用）

什么是webpack?webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。之前，我们肯定用过grunt, gulp 等等的工具，其实webpack的存在时间不亚于这两款工具，webpack的普及正是由于React的火爆而推广开发，因为Facebok官方就是用webpack打包编译的，比如

2016-06-25 17:54:31 1380

原创 ReactJS学习系列课程（React 调试工具集）

学习React过程中，我们一定知道，React有两个视图，一个虚拟机DOM,也就是我们创建的Component，另一个就是渲染到页面中的view，这也就导致我们调试过程中会有一定的障碍，所以我们尝试一下：这是一个全新的调试工具，名字是New React Devtools，下面我们来看一下效果吧！这个插件工具可以做哪些工作呢：Tree view，树形结构，可以看到和编辑所有的props， sta

2016-06-25 17:20:28 17838

原创 ReactJS学习系列课程（React 动画使用）

常用Angular的开发者，一定熟悉angular的Animation的使用，其实React的动画效果原理和Angular是极其相似的。首先，我么需要导入一个额外的库（Angular也一样哦）， <script src="../libs/react-with-addons.min.js"></script>下面我们引入Transition插件：// 引入react-with-addons中的C

2016-06-25 16:16:26 2655

原创 ReactJS学习系列课程（React 表单应用）

到目前为止，我们已经学习了很多react的特性，对于表单的使用其实也没有大的区别，下面我们为了更加熟悉React, 我们纯当练习：我们看看代码吧：我们创建一个简单form: //约束组件 var MyForm = React.createClass({ getInitialState: function () { return

2016-06-25 15:53:40 964

原创 ReactJS学习系列课程（React 组件的组合使用）

React是基于组件的，整个项目就是各个组件拼接而成，这也是目前最主流的架构方案，组件化，react的这一个特性十分鲜明，那么react组件的组合使用也是非常简单，说多无用，我们看代码：var Child = React.createClass({ render: function(){ return( <div> <s

2016-06-25 15:29:35 2267