js 地址的封装以及地址栏的参数获取

有时候我们封装一个ajax的get的方法需要把对象拼接到地址上面,这里我介绍一个Object.keys,这是一个非常好用对象属性。
例如说

1
2
3
4
5
6
7
const url = 'http://127.0.0.1:4000';
const params = {
name: 'testname',
email: 'testemail@qq.com'
}
// 这里我们需要得到的一个是
http://127.0.0.1:4000?name=testname&email=testemail@qq.com

还有就是 从url的的某个参数获取对应的值,例如

1
2
http://127.0.0.1:4000?name=testname&email=testemail@qq.com
GetQueryString('name') // testname

Linux命收集

收集Linux命令行操作,以便日后查看

文件搜索

1
2
3
4
5
6
7
8
9
10
find / -name file1 从 '/' 开始进入根文件系统搜索文件和目录
find / -user user1 搜索属于用户 'user1' 的文件和目录
find /home/user1 -name \*.bin 在目录 '/ home/user1' 中搜索带有'.bin' 结尾的文件
find /usr/bin -type f -atime +100 搜索在过去100天内未被使用过的执行文件
find /usr/bin -type f -mtime -10 搜索在10天内被创建或者修改过的文件
find / -name \*.rpm -exec chmod 755 '{}' \; 搜索以 '.rpm' 结尾的文件并定义其权限
find / -xdev -name \*.rpm 搜索以 '.rpm' 结尾的文件,忽略光驱、捷盘等可移动设备
locate \*.ps 寻找以 '.ps' 结尾的文件 - 先运行 'updatedb' 命令
whereis halt 显示一个二进制文件、源码或man的位置
which halt 显示一个二进制文件或可执行文件的完整路径

vue自定义事件

背景

是这样子滴,有时候我们用vue框架的时候,要用到很多手势,像tap、doubletap、longtap……,当然现在网上有很多手势裤什么的,拿来改一下也是可以实现自己想要的效果滴,我是希望用vue 的时候类似于

<p @tap="aaa" @longtap="bbb">{{msg}}---长按(longtap)点击(tap)事件</p>

这么用那好了,左思右想写了一个小栗子,用来抛砖引玉。

原理

首先要理解js的自定义事件。Events 可以使用 Event构造函数 创建如下:
// 事件对象
var event = new Event(‘build’);

// 监听事件
elem.addEventListener('build', function (e) { ... }, false);

// 分发事件
elem.dispatchEvent(event);

当然可以,添加自定义数据

var event = new CustomEvent('build', { 'detail': elem.dataset.time });

好了,看了上面的原理之后直接上源码,简单封装一个tap和longtap事件,

深入理解js执行的细节

javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈、全局对象、执行环境、变量对象、活动对象、作用域和作用域链等,这些概念正是JS引擎工作的核心组件。这篇文章的目的不是孤立的为你讲解每一个概念,而是通过一个简单的demo来展开分析,全局讲解JS引擎从定义到执行的每一个细节,以及这些概念在其中所扮演的角色。

1
2
3
4
5
6
7
8
9
10
var x = 1; //定义一个全局变量 x
function A(y){
var x = 2; //定义一个局部变量 x
function B(z){ //定义一个内部函数 B
console.log(x+y+z);
}
return B; //返回函数B的引用
}
var C = A(1); //执行A,返回B
C(1); //执行函数B

这个demo是一个闭包,执行结果是4,下面我们将分全局初始化、执行函数A、执行函数B 三个阶段来分析JS引擎的工作机制:

html5触摸事件tap演化

触摸事件是移动浏览器特有的HTML5事件,虽然click事件在pc和移动端更通用,但是在移动端会出现300ms延迟,较为影响用户体验,300ms延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发click事件。所以触摸事件反应更快,体验更好。

触摸事件的类型:

为了区别触摸相关的状态改变,存在多种类型的触摸事件。可以通过检查触摸事件的 TouchEvent.type 属性来确定当前事件属于哪种类型。
注意: 在很多情况下,触摸事件和鼠标事件会同时被触发(目的是让没有对触摸设备优化的代码仍然可以在触摸设备上正常工作)。如果你使用了触摸事件,可以调用 event.preventDefault() 来阻止鼠标事件被触发。

显示隐藏mac文件操作

对于新手而已民,苹果的MAC操作系统刚用时用得很不习惯,比如想要显示被隐藏的文件时,不像windows有个“文件夹选项”对话框可以来设置,今天咱们就介绍一个简单操作的方法。

打开终端

然后

显示:defaults write com.apple.finder AppleShowAllFiles -bool true

隐藏:defaults write com.apple.finder AppleShowAllFiles -bool false

Node处理http跨域请求

我用Node写的后台需要处理http跨域请求,解决方式如下:

1
2
3
4
5
6
7
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
if(req.method=="OPTIONS") res.send(200);/*让options请求快速返回*/
else next();
});

其实原理就是在返回头里加入允许跨域访问的返回头参数,

1是Access-Control-Allow-Origin 允许的域
2是Access-Control-Allow-Headers 允许的header类型
3是Access-Control-Allow-Methods 允许的请求方法

这三项都可以设置为”*”表示接受任意类型的请求

关于JS堆栈与拷贝

1、栈(stack)和堆(heap)

stack为自动分配的内存空间,它由系统自动释放;而heap则是动态分配的内存,大小不定也不会自动释放。

2、基本类型和引用类型

基本类型:存放在栈内存中的简单数据段,数据大小确定,内存空间大小可以分配。
5种基本数据类型有Undefined、Null、Boolean、Number 和 String,它们是直接按值存放的,所以可以直接访问。
引用类型:存放在堆内存中的对象,变量实际保存的是一个指针,这个指针指向另一个位置。每个空间大小不一样,要根据情况开进行特定的分配。
当我们需要访问引用类型(如对象,数组,函数等)的值时,首先从栈中获得该对象的地址指针,然后再从堆内存中取得所需的数据。

|