标签目录：jQuery/Js

以下是与标签 “jQuery/Js” 相关联的文章

JavaScript模板引擎Nunjucks

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

接触低代码后才认识了这个家伙： 提供丰富的语言特性和块继承、自动转移、宏和异步控制等等。 模板引擎就是基于模板配合数据构造出链输出的一个组件。 尽可能情况下，我们都需要读取数据后渲染模板，然后呈现给用户。故我们需要约会对应的模板引擎。 简单来说，Nunjucks就实现了在后台服务器显示内容的模板。 下面来看看一些使用方法 一、node上的……

js实现同步等待

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

场景：用户下单后需要支付，但是支付前需要确定用户的订单是否生成，这就需要在用户操作后，不断查询订单状态。 方法：无非就是设置一个定时器，每隔n秒去查一下，如果状态ok就走下一步，不行就等待，直到获取成功。当然了，可以设置一个最多界限。 第一种方法：promise

1
2
3
4
5
6
7
8
9
10
11
12
const check = async (times=0) => {
    if(times > 3){
        return;
    }
    const res = await new Promise((resolve) => {
        setTimeout(async () => {
            const prom = await check(times + 1);
            resolve(prom);
        }, 1000);
    });
    return res;
}

第二种方法……

userAgent判断合集

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

通过navigator.userAgent判断一些设备和环境类型，总结了一些：

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
//系统
var webkit = ua.match(/Web[kK]it[/]{0,1}([\d.]+)/);
var android = ua.match(/(Android);?[\s/]+([\d.]+)?/);
var osx = !!ua.match(/\(Macintosh; Intel /);
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
var ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/);
var iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/);
var webos = ua.match(/(webOS|hpwOS)[\s/]([\d.]+)/);
var wp = ua.match(/Windows Phone ([\d.]+)/);var touchpad = webos && ua.match(/TouchPad/);
 
//app
var chrome = ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/);
var firefox = ua.match(/Firefox\/([\d.]+)/);
var firefoxos = ua.match(/\((?:Mobile|Tablet); rv:([\d.]+)\).*Firefox\/[\d.]+/);
var webview = !chrome && ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/);
var safari = webview || ua.match(/Version\/([\d.]+)([^S](Safari)|[^M]*(Mobile)[^S]*(Safari))/);
var qq = ua.match(/(QQBrowser)\/([\d.]+)/);
var baidubox = ua.match(/baiduboxapp\/([\d.]+)/i);
var baidubrowser = ua.match(/baidubrowser\/([\d.]+)/i);
var weixin = ua.match(/MicroMessenger\/([\d.]+)/i);
var iqiyi = ua.match(/iqiyi\s*IqiyiVersion\/([\d.]+)/i);
var uc = ua.match(/(?:ucbrowser|ucweb)\/([\d.]+)/i) || typeof ucweb !== 'undefined';
var qqApp = ua.match(/(QQ)\/([\d.]+)/);
var readApp = ua.match(/iqiyireader IqiyiReaderVersion\/([\d.]+)/i); // 爱奇艺阅读
var readPlugin = ua.match(/IqiyiVersion_Reader\/([\d.]+)/i); // 爱奇艺阅读插件
var youku = ua.match(/Youku\/([\d.]+)/i);
var xigua = ua.match(/VideoArticle\/([\d.]+)/i);
var toutiao = ua.match(/NewsArticle\/([\d.]+)/i);
 
//设备
var oppo = ua.match(/OPPO (\w+) |OppoBrowser\/(\w+)/i);
var vivo = ua.match(/vivo (\w+) /i);
var sumsung = ua.match(/SM-(\w+) /i);
var le = ua.match(/(?:Letv|Le) (\w+) Build/i);
var mi = ua.match(/(?:MI) ([\w ]+) Build/i);
var huawei = ua.match(/(?:HUAWEI ([\w-]+) Build)|(?:; (?:HW-)?([\w-]+) Build\/(?:HUAWEI|HONOR))/i);
var redmi = ua.match(/(?:Redmi|HM) ([\w ]+) Build/i);
var meizu = ua.match(/(((?:meizu\/|m|mx|PRO) ?(?:[0-9]+)) ?(?:\w*)) Build/i);

判断dom进入可视区域

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

IntersectionObserver 大家平时在做性能优化的时候，经常用到懒加载，那么就会用到window的scroll和setTimeOut等等，无非是要判断dom是否进入可是区域了，那么这api就是一个令人惊喜的东西了，它就是用来判断dom进入可视区域的

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
46
//初始化一个实例
var observer = new IntersectionObserver(changes => {
    for (const change of changes) {
        console.log(change.time);
        // Timestamp when the change occurred
        // 当可视状态变化时，状态发送改变的时间戳
        // 对比时间为，实例化的时间，
        // 比如，值为1000时，表示在IntersectionObserver实例化的1秒钟之后，触发该元素的可视性变化
 
        console.log(change.rootBounds);
        // Unclipped area of root
        // 根元素的矩形区域信息，即为getBoundingClientRect方法返回的值
 
        console.log(change.boundingClientRect);
        // target.boundingClientRect()
        // 目标元素的矩形区域的信息
 
        console.log(change.intersectionRect);
        // boundingClientRect, clipped by its containing block ancestors,
        // and intersected with rootBounds
        // 目标元素与视口（或根元素）的交叉区域的信息
 
        console.log(change.intersectionRatio);
        // Ratio of intersectionRect area to boundingClientRect area
        // 目标元素的可见比例，即intersectionRect占boundingClientRect的比例，
        // 完全可见时为1，完全不可见时小于等于0
 
        console.log(change.target);
        // the Element target
        // 被观察的目标元素，是一个 DOM 节点对象
        // 当前可视区域正在变化的元素
 
    }
}, {});
 
// Watch for intersection events on a specific target Element.
// 对元素target添加监听，当target元素变化时，就会触发上述的回调
observer.observe(target);
 
// Stop watching for intersection events on a specific target Element.
// 移除一个监听，移除之后，target元素的可视区域变化，将不再触发前面的回调函数
observer.unobserve(target);
 
// Stop observing threshold events on all target elements.
// 停止所有的监听
observer.disconnect();

除此之外，……

“前端”背后刀–Lottie

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

最近一个项目中UI同学给了我一个json文件，说可以用lottie操作，完成一个动画——哇？！设计同学都这么牛了吗！ 话不多说，按照惯例，先上代码图： 代码不难，就是引用一个库文件，然后初始化，文章末尾附上了比较官方都手册，其中的animationData可以换成path，定义一个在线路径，这样可以在打包的时候减少包的大小，而且还可以随时……

H5调用摄像头

| 前端 | | 暂无评论 | 8346 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的注意事项

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

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

Vue的methods、computed、watch

| 前端 | | 暂无评论 | 12507 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到此一游

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

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

js的深拷贝和浅拷贝

| 前端 | | 暂无评论 | 13085 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

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