2016年07月_天外野草

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月

原创名词普及——什么是BOM?

相信很多人都知道DOM是什么，但是很少会有人知道什么BOM, 可以大家一定知道什么是JavaScript, 下面给大家普及一下？BOM是browser object model的缩写，简称浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window，BOM最初是Netscape浏览器标准的一部分。相对于标准而言：DOM的标准

2016-07-29 21:00:11 1437

原创 android中 ionic tabs 位置更改

在 iOS中, tabs 一直处于底部. 在android中 ionic tabs 一直在顶部,如果要改我们可以通过配置$ionicConfigProvider $ionicConfigProvider.platform.ios.tabs.style('standard'); $ionicConfigProvider.platform.ios.tabs.position('bot

2016-07-27 16:36:30 1756

原创 Error: Failed to load plugin angular: Cannot find module 'eslint-plugin-angular'

最近架构一个项目需要用到gulp + eslint，当配置和安装好所有的依赖库的时候发现编译工具报错，就是上面这个错误，我用的webstorm. 后来查看文档发现问题所在：是全局和局部引起的。结局方案：如果你在webstorm中配置的eslint是全局的，所需要的plugin也一定要全局的。如果你配置的eslint是局部的，所需要plugin也一定要局部的。所以我们需要更改websto

2016-07-19 11:43:26 9260

原创 NodeJS学习系列课程笔记（NodeJS util工具类相关使用方法）

Javascript本身功能仍旧比较单一，所以在nodejs中提供了额外的工具库，叫做util库，其中包含很多常用的功能，下面我们一次来看一下具体的使用方法：使用util过程中，我们需要引入：const util = require('util');util.format(format[, …])这个方法主要用来格式化字符串，第一个参数为想要格式化的语法形式，其余几个为参数。

2016-07-18 22:38:52 829

原创 NodeJS学习系列课程笔记（NodeJS 全局对象相关使用方法）

在学习JavaScript 中，我们知道 window 是全局对象，而 Node.js 中的全局对象是 global，所有全局变量（除了 global 本身以外）都是 global 对象的属性。那么我们在开发中，常用的全局对象有哪些呢？__filename的使用__filename 表示当前正在执行的脚本的文件名。它将输出文件所在位置的绝对路径，且和命令行参数所指定的文件名不一定相同。如果在模块

2016-07-14 16:52:43 831

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

Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境，类似 Window 系统的终端或 Unix/Linux shell，我们可以在终端中输入命令，并接收系统的响应。如下是几个小示例：REPL常用命令：ctrl + c - 退出当前终端。ctrl + c 按下两次 - 退出 Node REPL。ctrl + d - 退出 Node REPL.

2016-07-14 15:20:41 871

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

Node.js 所有的异步 I/O 操作在完成时都会发送一个事件到事件队列。在nodejs的世界里，一切都是基于事件完成的，而EventEmitter 的核心就是事件触发与事件监听器功能的封装。我们可以通过require(“events”);来访问该模块，例如：// 引入 events 模块var events = require('events');// 创建 eventEmitter 对

2016-07-14 15:10:07 818

原创 LNMP以及LAMP的解释说明（系统名词普及）

我一直从事与软件工作，但最近有个运维的同学，总跟我提及两个名词，lnmp, lamp，搞得我不知道是什么，很尴尬，于是普及了一下：LNMPLNMP是一个基于CentOS/Debian编写的Nginx、PHP、MySQL、phpMyAdmin、eAccelerator一键安装包。可以在VPS、独立主机上轻松的安装LNMP生产环境。LNMP代表的就是：Linux系统下Nginx+MySQL+PHP这种

2016-07-14 14:43:37 824

原创 NodeJS学习系列课程笔记（NodeJs zlib库文件解压缩的相关使用方法）

文件的压缩和解压，是一个很常见的功能，最近做项目用到这个功能点，于是拿出来分享一下。简单起见，我们看一下代码操作：文件压缩/** * Created by Richard on 7/14/16. */const fs = require('fs');const zlib = require('zlib');fs.createReadStream('my.txt').pipe(zlib.cre

2016-07-14 14:37:27 8612

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

流的操作，在很多语言中存在，比如Java中的Inputsteam , outputStream 等等，在nodejs中， Stream也是一个抽象接口，Node 中有很多对象实现了这个接口。例如，对http 服务器发起请求的request 对象就是一个 Stream，还有stdout（标准输出）。对于Stream流有一下四中类型：Readable - 可读操作。Writable - 可写操作。

2016-07-14 14:03:28 2058

原创 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 1310

转载 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 859

原创 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 814

原创 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