'在NodeJs中使用Socks代理'

这篇主要是讲怎么在nodejs上使用用户身份设置以及socket代理

前些天突然搞了一个使用NodeJs调用Jenkins接口的服务，之前的代码都是用Java去写的，使用 Apache 的httpClient，不看不知道，一看吓一跳，可以设各种代理，以及用户验证的auth, 而这些在node上根本没见过，也不知道怎么搞，只能去查每个设置需要做什么，然后在node上实现；

其实主要是两部分：

  1. nodejs中使用用户身份校验信息； 这个就是http basic auth，在 request 中主要是使用auth配置：
1
2
3
4
5
6
request.get('http://some.server.com/', {
  'auth': {
    'user': 'username',
    'pass': 'password',
  }
});
  1. 使用socket代理；先安装 socks5-http-client,
    然后配置agentClass为引入的Agent类型，配置agentOptions中的host和port：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var Agent = require('socks5-http-client/lib/Agent');
 
request({
    url: 'http://en.wikipedia.org/wiki/SOCKS',
    auth: {
      'user': 'username',
      'pass': 'password'
    }
    agentClass: Agent,
    agentOptions: {
        socksHost: 'your-sock-proxy-host', // sock host
        socksPort: 9050 // sock port. 
    }
}

这部分也可以封装起来，直接封装成一个SocksRequest，里面默认加上agentClass，就不用每次都引用Agent了

今天除夕，哈哈哈哈
妥妥的~


看看new 做了啥
function Person( name, age ) {
//var obj = object.create(Person.prototype);
//this = obj;

this.name = name;
this.age = age;

//return thisl

}

微信小程序选项卡Tab组件

小程序tab选项卡组件

看了小程序里面的组件，发现没有选项卡，于是在github上搞个组件吧github项目地址，同时这个工程中也会陆续添加其他的组件。其实主要就是tab中选中的样式通过 变量判断class, 领外data-index可以通过点击事件的currentTarget.dataSet拿到，其他的就是样式拉，发现div元素也可以用，hhhh~~~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="nav-tabs">
  <div class="tab {{currentIndex==0 ? 'active': ''}}" bindtap="changetab" data-index="0">
    <view>
      tab1
    </view>
  </div>
  <div class="tab {{currentIndex==1 ? 'active': ''}}" bindtap="changetab" data-index="1">
    <view>
      tab2
    </view>
  </div>
  <div class="tab {{currentIndex==2 ? 'active': ''}}" bindtap="changetab" data-index="2">
    <view>
      tab3
    </view>
  </div>
  <div class="tab {{currentIndex==3 ? 'active': ''}}" bindtap="changetab" data-index="3">
    <view>
      tab4
    </view>
  </div>
</div>

css， 各种伪元素也都支持了, 样式加了transform效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.nav-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.tab {
  position: relative;
  padding: 15px;
}
view::after {
  content: "";
  height: 2px;
  position: absolute;
  background:#2196f3;
  width: 100%;
  left: 0;
  bottom: 0;
  transition: all;
  transition-duration: .5s;
  transform: scale(0);
}
.active view::after {
  transform: scale(1);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
Page({
  /**
   * 页面的初始数据
   */
  data: {
    inputShowed: false,
    inputVal: "",
    currentIndex: 0,
  },
  showInput: function () {
    this.setData({
      inputShowed: true
    });
  },
  hideInput: function () {
    this.setData({
      inputVal: "",
      inputShowed: false
    });
  },
  clearInput: function () {
    this.setData({
      inputVal: ""
    });
  },
  inputTyping: function (e) {
    this.setData({
      inputVal: e.detail.value
    });
  },
  changetab: function(e){
    console.log(e);
	//每次点击重置index
    this.setData({
      currentIndex : e.currentTarget.dataset.index
    })
  },
})

HTML5中的 requestAnimationFrame

HTML5中的 requestAnimationFrame

在mdn中，是这么讲的：
window.requestAnimationFrame() 方法告诉浏览器您希望执行动画，并请求浏览器调用指定的函数在下一次重绘之前更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。如果你想做逐帧动画的时候，你应该用这个方法。这就要求你的动画函数执行会先于浏览器重绘动作。通常来说，被调用的频率是每秒60次，但是一般会遵循W3C标准规定的频率。如果是后台标签页面，重绘频率则会大大降低。

说了这么多，其实调用方法很简单，就是
window.requestAnimationFrame(callback);

传入一个回调函数就可以了
比如我们在下面

1
<div id="block" class="block"></div>

1
2
3
4
5
6
7
8
9
10
11
var ele = document.getElementById('block');
 var width = 100;
 function animate(time) {
	width ++;
	ele.style.width = width + 'px';
	ele.innerHTML = width;
	if(width < 1000){
	  requestAnimationFrame(animate)
	}
}
 requestAnimationFrame(animate);

对脚本中定义一个回调函数animate, 然后依次的增加with变量，然后在回调中继续调用，这样就能实现每个frame的刷新，现在回过头看，requestAnimationFrame， 字面意义，就是实现逐帧的动画嘛，但是和定时器不同的是，它会和浏览器重绘的频率保持一致，因此比定时器更加流畅~~~