白领陋习

| 闲谈 | | 暂无评论 | 9969 views

一般来说，在北京大公司工作的年轻白领，我们想当然的认为，无论是职业素养还是品行习惯，相对来说都是达到某种高度，以至于对得起共建文明城市的slogen。当然了，林子大了，什么鸟都有，今儿就拿几个事儿单独拎出来跟大家聊聊。 第一个场景：电梯，一般站在门边靠近电梯按键的人，在电梯打开有人下电梯后，都不会顺手按一下关门键，就这样一直等它自动关。这……

H5调用摄像头

| 前端 | | 暂无评论 | 9568 views

最近要做的一个项目需要调用移动摄像头，想必大家也都清楚，这个兼容性很不好，除了在pc上测试通过，移动端很少有可行的。最终这个功能弱化，而在端内进行。但是我还是把代码贴出来，方便学习。 HTML代码

1
2
3
4
5
6
7
8
<!--video用于显示媒体设备的视频流，自动播放-->
<video id="video" autoplay style="width: 480px;height: 320px;background: #999">当前浏览器不支持video</video>
<!--拍照按钮-->
<div>
    <button id="capture">拍照</button>
</div>
<!--描绘video截图-->
<canvas id="canvas" width="480" height="320"></canvas>

js代码

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
40
41
42
43
44
45
//访问用户媒体设备的兼容方法
function getUserMedia(constraints, success, error) {
    if (navigator.mediaDevices.getUserMedia) {
        //最新的标准API
        navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
    } else if (navigator.webkitGetUserMedia) {
        //webkit核心浏览器
        navigator.webkitGetUserMedia(constraints,success, error)
    } else if (navigator.mozGetUserMedia) {
        //firfox浏览器
        navigator.mozGetUserMedia(constraints, success, error);
    } else if (navigator.getUserMedia) {
        //旧版API
        navigator.getUserMedia(constraints, success, error);
    }
}
 
var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
function success(stream) {
    //兼容webkit核心浏览器
    var CompatibleURL = window.URL || window.webkitURL;
    //将视频流设置为video元素的源
    console.log(stream);
    //video.src = CompatibleURL.createObjectURL(stream);
    video.srcObject = stream;
    video.play();
}
 
function error(error) {
    console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
}
 
if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
    //调用用户媒体设备, 访问摄像头
    getUserMedia({video : {width: 480, height: 320}}, success, error);
} else {
    alert('不支持访问用户媒体');
}
 
document.getElementById('capture').addEventListener('click', function () {
    context.drawImage(video, 0, 0, 480, 320);
})

……

mpvue的注意事项

| 前端 | | 暂无评论 | 6147 views

最近手贱，写了个mpvue的项目，有一些问题和想法，跟大家分享一下。 比较打击人的一点是美团对这个孩子的关注下降了，从官方的log记录来看，19年以来，都没在更新了，有一些其他的框架可能更好，所以mpvue的使用可能比较受限，但是如果你是vue用户倒是可以尝试。另外是如果你在js中写了wx的方法，它是不会给你转化成my的，所以用起来可能要……

Vue的methods、computed、watch

| 前端 | | 暂无评论 | 14619 views

methods：是方法，就是一个普通的函数，在逻辑中手动去调取

1
2
3
4
5
6
methods: {
    //一个函数方法，this为vue对象，自由使用即可
    listRolling(){
        this.classAnimate='animate'
    }
},

ps：在生命周期中直接‘this.listRolling()’调用即可 computed：是一个计算属性,类似于过滤器,对绑定到view的数据进行处理，它不能对data或者props里的对象进行重复定义。 [c……

java和js到此一游

| 前端 | | 暂无评论 | 20509 views

先说一下应用场景：一条新闻有多个属性，一个hashId，一个tvId，先不管到底有啥区别，其实我也不知道为啥要弄这么多ID，反正就是不一样，有一个数据列表，里面的新闻只有tvId，后端java有个方法是做了转化，那么问题来了，前端也搞一个转化。 下面就开始写代码……不，是看java代码，对于一个写javascrip……

Mac屏幕底部dock在双屏中的位置

| 鲜货 | | 暂无评论 | 12039 views

  相信大家都有过这样的场景：使用双屏的时候，苹果dock莫名其妙跑到另一个屏里去了。 好多人的解决办法是拔掉副屏链接线，简单粗暴，而且很有效。 好啦，先说怎么操作吧，其实很简单，鼠标放在屏幕底部，然后在触摸板中继续移动箭头向下，奇迹出现了，dock跑到你滑动屏幕箭头的屏幕里了。 以前我是屏幕左右排的，最近因为位置变动，不得不上……

js的深拷贝和浅拷贝

| 前端 | | 暂无评论 | 15230 views

深拷贝和浅拷贝最根本的区别在于是否是真正获取了一个对象的复制实体，而不是引用， 1）深拷贝在计算机中开辟了一块内存地址用于存放复制的对象， 2）而浅拷贝仅仅是指向被复制的内存地址，如果原地址中对象被改变了，那么浅复制出来的对象也会相应改变。

1
2
3
4
5
6
7
8
9
10
11
//深拷贝
var a=123;
var b=a;
a=456;
console.log(b) //123
 
//浅拷贝
var obj1={name:123};
var obj2=obj1;
obj1.name=456;
console.log(obj2.name) //456

这是个极其简单的例子，深浅拷贝一……

requestIdleCallback

| 前端 | | 暂无评论 | 1034 views

之所以单独拿出来说这，其实是给自己一个提醒。前两天去了“汽车某某”的公司面试，一开始问我是否知道RAF这个简称，是做性能优化的时候用到的，我说是requestAnimationFrame吗，巴拉巴拉说了一些，然后问我RIF，我猜测跟RAF同类型吧，但是我没用过。回来后我查了一下，其实是这个，so it is“RIC” window.req……