Vue不能检测数据变动的原因和解决办法

2024/03/22 | 前端 | Villen | 暂无评论 | 63 views

熟悉vue的同学都有过这样的经历，操作数据的时候，如果“使用不当”可能让你的页面“无动于衷”。这也是大家经常会聊的问题，vue中的数据操作，没有更新视图，今天来细说一下这个点。一、直接给data里塞入一个数据需要在UI上显示的数据没有在data里进行声明，于是不显示。原因： vue无法检测实例被创建时，不存在于data中的prope……

浏览器存储：cookie、webStorage、webSQL、IndexedDB、locaForage

2023/12/25 | 前端 | Villen | 暂无评论 | 120 views

随着前端业务的不断扩展，逻辑也越来越复杂，就连服务端存储都逐渐渗透到前端来。几种常见的浏览器存储，了解一下。一、Cookie 存储 cookie 是浏览器的功能，浏览器下有一个 cookie 文件夹专门存放各个域下设置的 cookie。Cookie都是name=value的结构，name和value都为字符串。另外，Cookie是有生命……

微信小程序和H5的差异

2023/12/10 | 前端,鲜货 | Villen | 暂无评论 | 179 views

最近参加了几次面试，有面试官问到了这类问题：微信小程序比h5的优势是什么，为什么小程序要比h5更流畅，小程序内如何使用h5减少包大小等。个人而言，不太喜欢这样的问题，首先，面试官的问题可能更倾向于对运行优化或者小程序的原理，而且也不是小程序和原生html的差异，毕竟原生不具备数据驱动等新开发模式，没啥可比性。后面小程序特指微信小程序，h……

微信小程序进行时优化

2023/11/12 | 前端 | Villen | 暂无评论 | 140 views

小程序的运行时性能直接决定了用户在使用小程序功能时的体验。如果运行时性能出现问题，很容易出现页面滚动卡顿、响应延迟等问题，影响用户使用。如果内存占用过高，还会出现黑屏、闪退等问题。在优化运行时性能前，建议开发者先了解下小程序的运行环境和运行机制。开发者可以从以下方面着手进行启动性能的优化：合理使用 setData 渲染性能优化页面……

H5打开微信小程序

2023/11/04 | 前端 | Villen | 暂无评论 | 133 views

在用户增长业务中，通过各种取巧方式打开微信小程序是一个特别常见的业务需求，但是微信也不想就这么“被利用”，以前微信可能还是很好的分享渠道，但是随着更新迭代，已经关闭了很多入口。我们也是在业务需求下不停的寻找更多的解决办法。一、URL Scheme 原理：前端提供路径和appid，后端对接微信获取accesstoken和短链，最后前端负责……

js实现同步等待

2022/05/11 | 前端 | Villen | 暂无评论 | 153 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判断合集

2022/01/04 | 前端 | Villen | 暂无评论 | 195 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进入可视区域

2022/01/02 | 前端 | Villen | 暂无评论 | 352 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();

除此之外，……

nodejs把html转化为image

2021/03/30 | 前端,后端 | Villen | 暂无评论 | 1819 views

业务需求：每个用户都可以生成自己的卡片，并分享到朋友圈。尝试：canvas画图。但是部分安卓手机不支持，iPhone6以下不支持，最大的问题是canvas功能实现的过程是比较麻烦的，尤其是布局的部分，时刻挑战你的额GPU。网上有一个html2canvas的库，可以把指定的div转化为canvas，不过如果手机本身不支持的话，恐怕这个库也……

“前端”背后刀–Lottie

2020/12/14 | 前端 | Villen | 暂无评论 | 1504 views

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

1Z5K = array( 'It程序猿', 'Code码农', 'Web工程师' )

分类目录：前端