0%

前言

距离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,真特么难用。灵魂画风,随意看看。

event对象

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

call和apply的区别

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

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


第一个参数都一样,即把this绑定到thisObj,这时候thisObj继承了this的属性和方法,重点在第二个参数,apply所接受的是一个数组参数,call所接受的是连续参数。

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"

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

TIM

缘起

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将大有可为。目前官网展示有以下主推特性:
Feture
看着很不错,有点专业团队办公软件的意思了,但是我最想要的是什么?是优化QQ上那个破烂不堪的远程功能,给我一个理由放弃TeamViewer啊!

先睹为快

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

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

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

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

TIM官网

造轮子是快速提高的方法之一。

准备工作

以为在花瓣上随便找了一张设计图就可以开工了,结果踩了大坑:(
这是我找的图,有没有发现什么不对劲?

没错,乘法x哪去了?我可是做完了才发现的。这种设计师应该被做成爆炒鱿鱼,为了更完美,无奈只好加了几个功能上去。

核心代码

计算器重在考虑多种错误输入的处理,由于我也是初学者,这里用switch来判断运算

function operator(type)
{
switch(type)
{
case "clear":
  input.value="0";
  _string.length=0;
break;
case "plus":
if(checknum(input.value)!=0)
{
_string.push(input.value);
_type="plus"
input.value="+";
input.name="type";
}
break;
case "minus":
if(checknum(input.value)!=0)
{
_string.push(input.value);
_type="minus"
input.value="-";
input.name="type";
}
break;

最终效果


完整源码
在线demo,仅限pc端