老生常谈系列之this、call、apply

2017/11/04JavaScript 标签:0

在JavaScript中我们经常要使用到this关键字,但是有时候this的指向总是让我们搞不明白,理不清楚。总之刚开始接触的时候直接是一头雾水,当然this指向都没法搞清楚,那么就很难判断出很多代码输出的结果。比如以下代码中,大家可以猜一猜this指向的是谁?

function getUrl(){
  console.log(this)
}
getUrl()

以上代码中很简单的一个例子,其实我们打印出来后this指向的是window对象
然而这并没有什么卵用,最多就是我们知道了this的指向。由此JavaScript中就出现了call、apply方法,这两个方法主要是用于动态改变this指向的,他们的使用方法一样,只不过是传递的参数不一样罢了。
使用方法:
如果call或apply的第一参数是null的话, this指向window 阅读更多

老生常谈系列之CSS3画三角及画圆

2017/11/02HTML5+CSS3 标签:0

这是一道前端开发中常常被问到的基础问题,该如何画一个三角形?该如何画一个圆?被问到的时候,可能在你脑海里飘过的就是“我好像在哪里看过,但是记不得了”,我们往往觉得很简单的问题,往往却被面试官问到脸红、紧张。下面就来说说利用css画出各种基本图形的代码。
1、画圆
画圆,我们可以利用CSS3中的border-radius方法具体使用是将一个四方形设置上等宽等高后,再去设置边框的弧度为宽高的一半

.circle{
    width: 50px;
    height: 50px;
    border-radius: 25px;
    background: blue;
}

2、画三角形:
思路是将某两个边框设置为透明,然后设置三角形底边的边框颜色以及高度即可

//向上
.triangle-up{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 20px solid red;
}
//向左
.triangle-left{
    width: 0;
    height:0;
    border-bottom: 20px solid transparent;
    border-top: 20px solid transparent;
    border-right: 20px solid blueviolet;
}
//等边三角形,底边等于左右边的和
.triangle{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}
//直角三角形,四边形的相邻两边的边框设为一样的宽度,一边透明,一边有颜色
.triangle-90{
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-bottom: 50px solid maroon;
}

阅读更多

Mac使用SSH登录出现Permission denied (publickey)的解决办法

2017/10/27生活/旅行 标签:0

今天使用SSH进行远程登录,突然发现无法进行登录了,而且提示Permission denied (publickey),捣鼓了半天,都没有找到原因。最终还好找到了相关解决办法,那就是直接使用ssh-add的命令进行处理,也就是说由于我没有将本地的SSH证书添加到默认选项中,由此我们需要进行添加操作。直接使用下面的命令即可:
ssh-add ~/.ssh/xxx
命令执行完成后,我们再来运行
ssh name@ip
看看是不是已经成功了,根本不会再报错了吧?

javascript中数组去重的多种方法

数组去重,简单来说就是一个数组中如果同时存在两个相同的值,但是我们只需要其中一个即可,不需要将两个相同的值都一起展示出来,这个时候就必须得使用到javascript的数组去重方法了,在javascript中并没有专门的方法直接去重的,因此我们得自己来写一个这样的方法。下面我仅介绍其中的容易理解的4种方法,当然还有其他更多的方法,希望大家能够自己去寻找和学习了,因为目前我就仅能理解这3种方法。
大概的思路应该是这样的:
1)、定义一个变量数组 res 保存结果,遍历需要去重的数组,如果该元素已经存在在 res 中了,则说明是重复的元素,如果没有,则放入 res 中。
2)、将原数组中重复元素的最后一个元素放入结果数组中
下面我们直接来看代码,代码可以让你一目了然。

1、万能的for循环

阅读更多

[转]Async/Await是这样简化JavaScript代码的

译者按: 在Async/Await替代Promise的6个理由中,我们比较了两种不同的异步编程方法:Async/Await和Promise,这篇博客将通过示例代码介绍Async/Await是如何简化JavaScript代码的。

原文: ASYNC/AWAIT WILL MAKE YOUR CODE SIMPLER
译者: Fundebug
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

Async/Await是JavaScript的ES7新特性,来源于.NET和C#。它可以不用回调函数,像同步代码那些编写异步代码。这篇博客将通过一些代码示例,来说明Async/Await如何简化JavaScript代码。

1. 去除回调函数

运行本文的示例代码,并不需要额外的函数库。对于最新版的主流浏览器中,例如Chrome,Firefox, Safari以及Edge,它们都支持Async/Await语法。另外,Node.js 7.6+也支持了Async/Await语法。

我们编写了一些简单的API接口,用于模拟异步操作。这些接口都返回Promise,并在200ms后resolve一些数据。

class Api {
  constructor () {
    this.user = { id: 1, name: 'test' }
    this.friends = [ this.user, this.user, this.user ]
    this.photo = 'not a real photo'
  }
  getUser () {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(this.user), 200)
    })
  }
  getFriends (userId) {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(this.friends.slice()), 200)
    })
  }
  getPhoto (userId) {
    return new Promise((resolve, reject) => {
      setTimeout(() => resolve(this.photo), 200)
    })
  }
  throwError () {
    return new Promise((resolve, reject) => {
      setTimeout(() => reject(new Error('Intentional Error')), 200)
    })
  }
}

嵌套Promise

阅读更多

JavaScript中的对象拷贝

对象拷贝,可能很多人并不是很清楚,而且也使用的不多,简单的说拷贝对象就是直接复制一个数组或者一个对象,听到复制可能大家都蒙了,该如何才能达到复制一个对象或者数组?我们可以将这里的复制理解为是赋值,我们可以将一个数组或者一个对象直接赋值给一个变量,这个过程就可以称为复制(或者对象拷贝),大家一定不要被“复制、拷贝”这样的名词给搞晕了。下面我们来看几个简单的示例

1、JavaScript拷贝数组(浅拷贝)

var arry = [1,2,3]
var arry1 = arry
console.log(arry) //输出[1,2,3],说明拷贝数组成功
arry1[1] = 6
console.log(arry1) //改变arry1拷贝过来数组中的值,输出[1,6,3]

这就是一个简单的数组拷贝的过程,其意义在于,当我们需要使用和arry相同数据的时候,并且只需要更改其中的一个值,从而达到另一个效果,那么我们就可以使用这一的方式进行数组拷贝。
当然,以上方法主要是属于数组的浅拷贝。 阅读更多

简简单单理解JavaScript闭包

2017/10/18JavaScript 标签:0

也许你在很多前端面试中都被问及闭包是什么?闭包有什么作用?闭包有什么弊端?但是你真的理解闭包吗?闭包确实对于初学者来说要理解他有些困难,它主要是属于作用域链的问题,下面就由我带领你学习一下或者理解一下JavaScript的闭包。

1、作用域

我们可以将闭包简单的理解为函数内的函数,首先我们来看一个作用域的示例

function Fn(){
  var a = 3;
}
console.log(a); // 此处是报错了,因为我们在函数外部是无法获取函数内部的变量的

那么我们可以将上面的函数修改为如下的函数即可得到a的值

var a = 5;
function Fn(){
  var a = 3;
  return a;
}
consolog.log(a); //返回5
Fn(); //返回 3

阅读更多

利用nodeJS发送邮件

2017/10/14nodejs 标签:0

做过后端的童鞋都知道发送邮件这样的功能并不复杂,使用目前已有的后端技术比如java、.net、php等编写一个发送邮件的功能是很简单的,但是要编写很多代码,比如java中利用jmail发送邮件并不是一件简单的事情。随着nodeJS的发展,如今利用前端技术实现发送邮件,简直是小菜一碟,不仅仅是代码量减少了,也提高了开发效率。
今天主要说的是使用nodeJS的Nodemailer发送邮件
1、首先我们得准备一个QQ邮箱或者GMAIL邮箱(只要支持smtp服务的就可以),主要用于发送邮件。比如QQ邮箱我们可以做如下设置即可开启POP3/SMTP服务,并且可以发送邮件。
进入QQ邮箱后点击左上角的设置,再选择账户,如图

QQ邮箱POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务

QQ邮箱POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务


将其全部设置为开启即可,这样就可以利用QQ邮箱发送邮件了。 阅读更多

使用webpack配置ES6开发环境

2017/09/24nodejs 标签:0

1、ES6简介

由于ES6无法直接运行在浏览器中,只能通过babel来进行解析转换(编译)成ES5才可以运行在浏览器中,因此我们就需要给ES6搭建相关的环境,才可以开心的写ES6。
目前很多框架都使用了ES6,比如react、vuejs、angular等这些主流前端框架。ES6简洁了很多ES5的代码,让我们可以少写很多代码,当然如果你还了解typescript以及coffeescrpt,那么就更加方便你进行各种开发了。但是问题来了,这些基于ES6的所有框架以及语法糖都需要搭建相关的环境才能够正常运行ES6

2、webpack

webpack是一个前端打包工具,简单说webpack是将所有JavaScript组件以及依赖的库整合为一个js文件,将所有CSS整合为一个css文件。使用webpack可以很方便的打包各种JavaScript组件。

3、准备工作

1)、安装nodeJS(安装方法请到官方查看)
2)、使用npm初始化项目

npm init ES6

ES6是我们开发的项目文件夹
运行上面的命令后会让你填写一些有关项目描述等信息,并且在ES6文件夹下会生成一个package.json的文件
3)、全局安装webpack
npm install -g webpack

4、安装依赖

配置ES6环境,我们需要安装以下几个必须的依赖包 阅读更多

ionic2中使用Firebase与Angularfire

2017/09/02ionic 标签:0

为了把一个老项目中的Firebase以及Angularfire进行升级,并且升级ionic项目,由此入了很多很多的坑,首先使用老项目不论怎么调试怎么重新运行npm install,ionic serve启动项目总是失败而告终,最终无法仍受了,重新直接使用新版的ionic2版本与新版的Firebase与Angularfire2重新重构一次项目。由此遇到了很多升级过程中的坑。
1、升级了Firebase后,出现了找不到AngularFire和FirebaseListObservable的解决办法
由于更新到了最新版的Firebase,而firebase库已经进行了一些调整,导致了找不到AngularFire和FirebaseListObservable,在新版的firebase库中,已经将这两个方法重新封装到了database里面了,并且摒弃了AngularFire,重新使用AngularFireDatabase,因此我们需要这样来调用:

import {AngularFireDatabase, FirebaseListObservable} from 'angularfire2/database';
constructor(private af: AngularFireDatabase){this.af.list()}

2、打包之后遇到了这样的问题:Client doesn't have permission to access the desired data. 阅读更多

share

AD