写在开始

进入现在的公司快满一年了，记得入职第一天是让我看文档，第二天就正式投入开发了，期间一直想要写点学习心得，但是因为工作量较大，连域名未认证被封了几个月都不知道，趁这次修复blog，大致写一写这一年来积累的东西。

学习方式

学习一门语言最好的方法就是实战，我进入公司的时候恰好碰上技术栈转型，逐渐把老项目过渡到Angular4，所以大家都是边做边摸索，Angular在国内远没有Vue那么火，不少问题的解决都要靠老外，国内的开发者也有几个知名的实践，把我们常用的插件集成在一个demo中，这里贴上几个比较经典的学习资源，有需要可以参考：

官方中文文档

大漠老师的美人鱼

CodeBe插件集成demo

Angular2随便问

理论上实际开发都是专注于业务，所以一般都会使用框架以提高开发速度，这里推荐阿里的NG-ZORRO和PrimeNG，经过多个版本迭代已经比较成熟，可以放心使用：）

强烈推荐的框架：NG-ZORRO

PrimeNG

实用技巧


这里就不再讲什么数据绑定、http请求等基础用法了，说几个在实际项目中比较实用的技巧，官方文档或许有提及但不够详细。

全局变量

或许你在某些教程中已经学习了Angular的组件通讯，知道常用的组件关系是父子关系，用的是@Input和@Output去传参，但是在实际项目中，经常会遇到兄弟关系的组件，这时候我们可以定义一个全局共用的Service进行传值，需要避免的坑是使用EventEmitter发送的值在订阅之前要先new EventEmiiter()一下，不然会造成重复触发。具体的使用方法可以参考 https://segmentfault.com/q/1010000011080965

动态组件

当模版内容较多时，例如一个页面包含了多个弹窗，弹窗的内容、逻辑也非常多的时候，按照默认模式Angular会一次全部渲染，影响性能。这时候我们可以使用动态组件，只有初始化事件触发时，才去生成这个弹窗组件，并且这样做有个好处：抽出来的组件可以进行复用。
具体的使用方法可以参考 https://www.jianshu.com/p/10feab2c3102

作用

最近一直在埋头苦学Node.js,正好手头有个项目需要上线，之前所有项目都是用Apache部署的，接触Node.js后调试都是带端口号的，例如http://localhost:8080 ,但是在生产环境，总不能让用户也访问带端口的地址吧？这个时候就需要用nginx来做端口转发。

安装

官网下载

下载后解压到方便操作的地方，如C:/即可，以下操作以C:/nginx为目录进行演示。

CMD键入：

cd C:/nginx

有两种启动命令，第一种无论是否成功启动都是一闪而过，优点是不会挂起进程，第二种会挂起，但是会抛出错误，在配置阶段方便调试。

start nginx  //第一种启动命令

nginx.exe//第二种启动命令

接着测试服务是否成功启动：

http://127.0.0.1

如果出现nginx的默认网页就算安装成功。测试完了先关闭服务：

nginx.exe -s quit

配置

重点来了，网上搜的博文不利于初学者，这也是著此文的目的所在。我们需要修改nginx的配置文件，位于:

C:\nginx\conf\nginx.conf

编辑该文件，我们的目标是把当前的80端口转发到8080端口。
修改第35行开始的配置为：

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host  $http_host;
    proxy_set_header X-Nginx-Proxy true;
    proxy_set_header Connection "";
    proxy_pass      http://127.0.0.1:8080;
    }

保存文件，再次开启nginx服务。至此，输入localhost便能访问之前8080端口的项目，希望对大家有所帮助。

前言

距离MongoDB课程完结已经过去一年半，随着前端知识的系统学习，难免会再次接触到这个数据库，坦白地说之前上课的时候都是应付实验，并没有好好体会它的优点，毕竟你学一门技术如果不能和实战项目结合学习那都是瞎扯淡。接下来的日子得好好学一下了，安装时遇到一些神坑，总结一下与大家分享。

实验环境

Windows10 x64 1607、MongoDB v3.4 x64

获取MongoDB

MongoDB官网

配置MongoDB相关文件、注册服务

默认安装目录为

C:\Program Files\MongoDB\Server\3.4

新建以下目录和文件，你可以按需修改：

E:\data\db //数据库目录
E:\data\dblog\MongoDB.log //数据库目录

新建完成后我们需要把MongoDB注册为系统服务，这样日后启动会方便非常多。
首先以管理员运行cmd

cd C:\Program Files\MongoDB\Server\3.4\bin
mongod –dbpath “E:\data\db” –logpath “E:\data\dblog\MongoDB.log” –install –serviceName “MongoDB”

接着net start mongodb启动刚注册的服务，再输入mongo启动mongo shell。

issue:Win 10无法注册MongoDB服务

今天要说的重点来了！！！如果到上面为止你还没有出错，那证明你已经安装成功不必往下看，而我的是提示「服务名无效」，这就尴尬了，刚才注册服务也没出错啊，进系统服务一查，好家伙，服务根本没注册成功。ok，接下来要揭晓Win10史上最大的bug了，原来在小娜里右键管理员运行的cmd依旧没获得权限，导致服务注册失败，正确的做法是win+X，里面的「命令提示符（管理员）」才是正品，再注册一次服务，done~

把MongoDB路径注册到系统path

这样做的好处是每次启动都节省掉cd命令，非常方便。只需要在系统变量「path」添加你的MongoDB安装路径，如：C:\Program Files\MongoDB\Server\3.4\bin即可。

虎嗅网的登录框给我一种眼前一亮的感觉，我也还没做过模态框，遂决定做一个练练手。尺寸并没有严格模仿，因其使用的是Bootstrap，而我想用原生写。

效果如下：

源码已在Github开源。

最近发现学点什么零碎知识点都给记在博客上记得挺牢的，所以比较高产：）

直接赋值

今天讲讲JavaScript的浅拷贝和深拷贝，不少面试题爱考这个。首先当我们要复制一个数组时，可能会采取直接赋值的方式，像这样：

1
2
3
4
5

var arr1=[1,2,3];
var arr2=arr1;
arr2[1]=7;
console.log(arr1);//[1, 7, 3]
console.log(arr2);//[1, 7, 3]

我们可以通过slice、concat方法来实现深拷贝

slice()

先从网上摘一段方法介绍

对于array对象的slice函数，返回一个数组的一段。（仍为数组）
arrayObj.slice(start, [end])
参数：
arrayObj 必选项。一个 Array 对象。
start 必选项。arrayObj 中所指定的部分的开始元素是从零开始计算的下标。
end可选项。arrayObj 中所指定的部分的结束元素是从零开始计算的下标。
说明：
slice 方法返回一个 Array 对象，其中包含了 arrayObj 的指定部分。
slice 方法一直复制到 end 所指定的元素，但是不包括该元素。
如果 start 为负，将它作为 length + start处理，此处 length 为数组的长度。
如果 end 为负，就将它作为 length + end 处理，此处 length 为数组的长度。
如果省略 end ，那么 slice 方法将一直复制到 arrayObj 的结尾。
如果 end 出现在 start 之前，不复制任何元素到新数组中。

好，我们来试试slice方法：

1
2
3
4
5

var arr1=[1,2,3];
var arr2=arr1.slice();
arr2[1]=9;
console.log(arr1);//[1, 2, 3]
console.log(arr2);//[1, 9, 3]

concat()

是不是就没问题了？再来看看concat方法：

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
语法：arrayObject.concat(arrayX,arrayX,……,arrayX)
说明：返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

1
2
3
4
5

var arr1 = ["1","2","3"];
var arr2 = arr1.concat();
arr2[1] = "9";
console.log(arr1);//[1, 2, 3]
console.log(arr2);//[1, 9, 3]

局限性

目前看来，这两个方法做深拷贝没什么问题，但它们也存在着局限性。只适用于不包含引用对象的一维数组的深拷贝

对象的深拷贝

既然如此，那该怎么对对象进行深拷贝呢？其实也很简单，把对象的属性都给遍历一次，再赋给一个新的对象就行。举个例子：

1
2
3
4
5
6
7

var a ={name:'Jack',age:40};
var b =new Object();
b.name=a.name;
b.age=a.age;
a.name='robin';
console.log(a);//{name: "robin", age: 40}
console.log(b);//{name: "Jack", age: 40}

————2018.10.17更新————-

拓展运算符

这是ES6带来的新特性，虽然ES6出来很久了，但因为公司的一些历史遗留问题，未能随心所欲地使用。到了18年，开始开发小程序，旧项目上了babel，已经没有了障碍，所以写一下这个能省下不少代码的特性。

数组深拷贝

1
2
3
4
5

let a = [1,2,3,4];
let b = [...a];
b[1] = 5;
console.log(a)  => [1, 2, 3, 4]
console.log(b)  => [1, 5, 3, 4]

对象深拷贝

1
2
3
4
5

let a = {"name":"jack","age":12};
let b = {...a};
b.name = "leo";
console.log(a)  => {name: "jack", age: 12}
console.log(b)  => {name: "leo", age: 12}

结语

技术的积累是一点一滴的，正所谓温故而知新，像本篇这种总结基础知识点的文章，偶尔翻来看一看感觉也不错～：）

最近被各种clientX,offsetX…搞混了，画个图记录一下，特意去装了个AI，真特么难用。灵魂画风，随意看看。

注：红圈为鼠标点击位置，灰色部位为一个div，白色区域为浏览器可视区域。

call和apply的区别

首先两者的作用是一样的，都是为了动态改变This，从语法我们可以看出它们所接受的参数不同：

1
2
3

obj.apply(thisObj, [arg1, arg2, ...]);
obj.call(thisObj, arg1, arg2, ...);

apply示例

我们来看个例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 定义一个人类
function Person(name,age)
{
    this.name=name;
    this.age=age;
}
//定义某个人类
function someOne(name,age,job){
    
    Person.apply(this,arguments);
    this.job=job;
    
}
var person1 = new someOne("Jack","21","doctor");
alert("My name is "+person1.name+". I am "+person1.age+" years old.And now I am a "+person1.job);
//弹出结果是My name is Jack. I am 21 years old.And now I am a doctor

可以看到我们在someOne类中并没有给name和age属性赋值，而是通过apply方法去继承Person类的方法，这个时候
apply(this,arguments)里的this指向创建的对象person1,arguments指向[“Jack”,”21”,”doctor”]。

call示例

第二个参数开始传入要劫持的属性

1

Person.call(this,name,age);

什么时候用apply，什么时候用call？

在给定参数列表，并且参数是数组类型，同时父子函数的参数列表顺序是一致的，即可用apply。如不一致，就得用call来实现了，参数列表顺序以父函数为准。举个例子，父函数Person(name,age)，子函数someOne(age,name,job),这时候就得这样使用:Person.call(this,name,age)

实用的apply

利用apply可以把数组参数转为一个一个的参数传递给方法这个特性，我们可以为Math方法做一个良好的拓展。原生的Math.max()是不接受数组参数的，确实是个遗憾，不过现在我们可以这样写：Math.max.apply(null,array)去求最大值，同样也可以用Math.min.apply(null,array)求出数组里的最小值。

网上的教程比较陈旧零散，每次重装系统都要折腾一会儿才能恢复博客，索性记录下来。

为什么要线刷？

iOS设备的线刷通常有以下几种：

1. 直接通过电脑端iTunes升级
2. iOS设备的恢复模式(屏幕显示连接iTunes标志)
3. DFU模式

• 线刷能避免OTA升级产生的各种奇怪问题
• 有时候OTA升级不了，例如会卡在“正在验证”页面
• 已越狱设备不能OTA升级，只能线刷升级系统

为什么要更改iTunes备份路径？

根源在于iTunes本身是不支持修改备份目录的，每次都是保存在你的C盘下，而每次刷机都没法避免有个自动备份的过程。举个例子，我的设备是iPhone6 64GB，刷机前大概用了50G，自动备份文件大小是18+GB，这时候你的C盘未必有这么大的剩余空间，我们应该明白，最新一代的iPhone主流购买容量都是128GB版本，备份下来的文件大小真的难以想象，这个时候我们就需要想办法迁移备份目录。

开工~

原理

使用Junction命令行工具，生成iTunes备份文件夹的快捷方式指向我们所要移动的目录。

下载Junction

官网下载地址

把压缩包里的junction.exe,junction64.exe放到C:\windows\system32下，这样就配置好系统环境。

命令行操作

便于你们理解，这里的路径基于假设，请根据实际环境修改路径：
我们要移动的文件夹路径是：
C:\Users\UserName\AppData\Roaming\Apple Computer\MobileSync（这个大家都是一样的，替换UserName为你的用户名即可。）
我们要移动到以下路径：
D:\MobileSync（这个可以自定义，选择空间充足的盘符。）

1. 接下来剪切(必须是剪切，不然会出错！)C盘下的MobileSync文件夹到D盘下
2. 按下win+R运行cmd，输入以下命令并回车

mklink /J "C:\Users\UserName\AppData\Roaming\Apple Computer\MobileSync" "D:\MobileSync"

如果出现以下提示，那么恭喜你成功了，可以放心去升级系统了~

缘起

QQ作为腾讯的基石，发展到如今已经第18个年头，作为一个即时聊天平台，承载着腾讯太多的业务，从小学开始使用QQ时,见证着QQ日渐变得臃肿不堪，其中有不少失败的尝试，例如仿照微信推出的公众号和服务号，这让QQ变得非常不纯粹，微信作为一个新兴的通讯平台，加入这些新元素能增加用户活跃度，而QQ给用户的传统印象早已经根深蒂固，它就是一个纯粹的聊天工具，面对日渐减少的用户，QQ团队终于明白得开始做减法。

再回首

不知道有多少朋友知道一个软件叫TM，以下介绍摘自百度百科

腾讯TM是Tencent Messenger的简称，是腾讯公司推出的一款面向个人的即时通讯软件，能够与QQ互联互通，具有无广告、抗骚扰、安静高效的特点，风格简约清新，侧重在办公环境中使用。

没错，TM就是轻量化的QQ，除了即使通讯，其他能删就删。TM的活跃年份是04-12年，当年第一次用的时候我的第一感觉是：“腾讯又想抄袭MSN了？”很显然，TM不适合当年读初中的我，QQZone都找不到入口：(。
如果没听过这个产品(TM)，那就对了,TM的用户量少得可怜，并且也不能带动腾讯的收入，所以这个项目停滞了几年，而TIM，就是TM的一次华丽回归。

现状

腾讯的步伐总是慢别人一步，后知后觉地在钉钉这类瞄准商务办公市场的软件大热时才想着祭出新版TM，换个角度来看，以前商务市场并不明朗，而现在随着互联网的发展，网络带宽的提高，商务在线协作也成为了大厂能大展拳脚的一块沃土，私以为这次TIM团队只要别走偏，专注于协作效率的提高，功能要明确与QQ做出差异化，TIM将大有可为。目前官网展示有以下主推特性：

看着很不错，有点专业团队办公软件的意思了，但是我最想要的是什么？是优化QQ上那个破烂不堪的远程功能，给我一个理由放弃TeamViewer啊！

先睹为快

清爽、简介、轻、快是TIM不变的主题。

看看iOS版本，做得非常专业和到位，让人有使用的欲望。

再看PC版，把联系人列表和聊天窗口合二为一，本身就是一种有效提高效率的设计。

腾讯于数日前刚上线TIM三端的客户端，大家可以去下载体验一把，不用担心，依旧可以抢你们最爱的一分钱红包~

TIM官网