IntersectionObserver 与无限滚动列表

无限滚动在实际项目中用到很多,比较在vipkid 数字图书馆的的书库这个业务中,就用到滚动加载,如下视频所示

无限滚动

正常思路是,我们监听scroll事件,当滚动条滑到底部的时候,触发加载,请求数据,将新数据插入尾部。

这里面,我们会碰到两个问题,

  • 1.一个是scroll 事件的触发,会触发的非常频繁,
  • 2.dom节点会越来越多
阅读 “IntersectionObserver 与无限滚动列表” 发表评论

Javascript响应式的最通俗易懂的解释(译)

许多javascript框架(比如:Angular,React,以及Vue)都有它们自己的响应式引擎。我们如果理解了响应式的原理,搞清楚它们是怎么工作的,我们可以提高自己的编程技巧,更有效的使用JavaScript框架。下面的视频和内容,将会帮助我们实现一个与Vue一样的响应式引擎。

响应式系统

 

当我们第一次看见Vue响应式系统工作的时候,感觉它就像充满了魔法一样。 现在我们举一个简单的例子

<div id="app">
    <div> Price :${{price}} </div>
    <div> Total:${{price * quantity}} </div>
    <div> Taxes: ${{totalPriceWithTax}} </div>
</div>

 

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  var vm = new Vue({
     el:"#app",
    data:{
       price:5.00,
       quantity:2
    },
    computed:{
        totalPriceWithTax(){
              return this.price * this.quantity * 1.03
        }
    }
  })
</script>

不知道为什么,当price 发生变化的时候,Vue就知道自己需要做三件事情:阅读 “Javascript响应式的最通俗易懂的解释(译)”

发表评论

更新webpack4记录

webpack4发布到现在3个多月的时间,webpack的配置正在向parcelljs靠齐,尽量让用户少配置,不要把时间浪费到配置工具上来。废话不多说,我们一步步来使用webpack4来构建vue2.x 应用。

目标

利用webpack4 打包 vue+ vue-router 应用

1.实现缓存常驻(基本库能够在每次打包没有变化)。

2. 基于路由进行代码分割,实行代码基于路由懒加载

3. 在每次提交代码的时候 利用eslint进行代码的检查,

4. 在编写过程中,能够实现热更新,能够自动打开浏览器。

5.在开发过程中,利用开发服务对api请求使用代理,解决跨域问题

6. 利用jest + vue-test-utils测试框架进行测试

7. 部分UI单元测试采用puppteer测试,如用户的登录注册,各个端的模拟

8. 将每个文件分割成小于200kB的文件(在HTTP2协议中,多个小文件比大文件传输速度快,而且只有一个tcp连接)

本次开发,vue-template 我们使用 pug 模板,css的编写使用stylus预处理语言。现在让我们Let’s rock it.项目地址是https://gitee.com/lmz2423/vue-webpack4/

阅读 “更新webpack4记录”

发表评论