本地开启服务器https

今天在使用geolocation的时候,在chrome下面发现获取不到经纬度信息,提示基于安全问题,需要在https环境下,那我们就来在本地安装https然后代理访问。

安装nginx

首先我们来安装Homebrew,安装方法如下

1
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

接下来安装nginx

1
brew install nginx

Nginx SSL/HTTPS 配置

  • 生成RSA密钥的方法

首先我们得选择安装路径,例如我就是选择的desktop/dsky

1
cd dsky
openssl genrsa -des3 -out privkey.pem 2048

这个命令会生成一个2048位的密钥,同时有一个des3方法加密的密码,如果你不想要每次都输入密码,可以改成:

1
openssl genrsa -out privkey.pem 2048

preventDefault事件对input type为checkbox或radio时的click影响

preventDefault事件对input type为checkbox或radio时的click影响

最近做项目的时候发现了一个问题,在document上绑定clcik事件后,input typecheckboxradio的状态不会改变,但是绑定的事件会执行,Demo如下:

JS Bin on jsbin.com

可以看到,在执行完$(this).attr('checked',true);后到alert时,checkbox的状态是选中的,而且弹出的状态也是checked,也就是说,这个时候,checkbox是选中的。但是为什么我们在点击确定之后,checkbox又变回了未选中了呢?在相应事件结束之后,一定还有什么东西让它改回去了?其实,这是checkbox的默认click事件的做的。也许大家会问,我不是通过e.preventDefault()把默认事件去掉了吗?为什么还有默认事件?难道e.preventDefault()没有生效?

javascript闭包浅析

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现,接下来简单说说闭包的相关知识和如何实现闭包。

变量的作用域

要理解闭包,首先必须理解Javascript特殊的变量作用域。
变量的作用域无非就是两种:全局变量和局部变量。
Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。

1
2
3
4
5
6
7
8
9
10
11
12
13
var a = "111";
function aaa(){
console.log(a);
}
aaa(); // 111
console.log(a); // 111

function bbb(){
var b = "222";
console.log(b);
}
bbb(); // 222
console.log(b); // b is not defined

我们可以看到,函数内部是可以访问外部的变量的,但是外部是不能访问内部的变量的,闭包就是用来使得可以在函数外部读取函数内部变量的函数或者方法。

ES6学习笔记之module

Module

ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题。Module功能就是为了解决这个问题而提出的。

历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如Ruby的require、Python的import,甚至就连CSS都有@import,但是JavaScript任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大障碍。

在ES6之前,社区制定了一些模块加载方案,最主要的有CommonJSAMD两种。前者用于服务器,后者用于浏览器。ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJSAMD规范,成为浏览器和服务器通用的模块解决方案。

ES6模块的设计思想,是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。CommonJSAMD模块,都只能在运行时确定这些东西。比如,CommonJS模块就是对象,输入时必须查找对象属性。

1
2
3
4
5
6
// CommonJS模块
let { stat, exists, readFile } = require('fs');

// 等同于
let _fs = require('fs');
let stat = _fs.stat, exists = _fs.exists, readfile = _fs.readfile;

ES6学习笔记之Class

Class基本语法

概述

JavaScript语言的传统方法是通过构造函数,定义并生成新对象。下面是一个例子。

1
2
3
4
5
6
7
8
9
10
function Point(x, y) {
this.x = x;
this.y = y;
}

Point.prototype.toString = function () {
return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

上面这种写法跟传统的面向对象语言差异很大,很容易让新学习这门语言的程序员感到困惑。ES6提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用ES6的改写,就是下面这样。

1
2
3
4
5
6
7
8
9
10
11
//定义类
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}

toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}

ES6学习笔记之异步操作和Async函数

异步操作和Async函数

异步编程对JavaScript语言太重要。Javascript语言的执行环境是“单线程”的,如果没有异步编程,根本没法用,非卡死不可。

ES6诞生以前,异步编程的方法,大概有下面四种。

  • 回调函数
  • 事件监听
  • 发布/订阅
  • Promise 对象

ES6将JavaScript异步编程带入了一个全新的阶段,ES7的Async函数更是提出了异步编程的终极解决方案。

基本概念

异步

所谓”异步”,简单说就是一个任务分成两段,先执行第一段,然后转而执行其他任务,等做好了准备,再回过头执行第二段。

比如,有一个任务是读取文件进行处理,任务的第一段是向操作系统发出请求,要求读取文件。然后,程序执行其他任务,等到操作系统返回文件,再接着执行任务的第二段(处理文件)。这种不连续的执行,就叫做异步。

相应地,连续的执行就叫做同步。由于是连续执行,不能插入其他任务,所以操作系统从硬盘读取文件的这段时间,程序只能干等着。

回调函数

JavaScript语言对异步编程的实现,就是回调函数。所谓回调函数,就是把任务的第二段单独写在一个函数里面,等到重新执行这个任务的时候,就直接调用这个函数。它的英语名字callback,直译过来就是”重新调用”。

读取文件进行处理,是这样写的。

1
2
3
4
fs.readFile('/etc/passwd', function (err, data) {
if (err) throw err;
console.log(data);
});