u013776700的博客

前端打包发版后如何用户一个更新提示，该提示会让用户主动去更新当前正在操作的页面，或者在系统有较大更新时，让用户重新更新本地缓存信息，这一操作比较友好，且能避免用户不更新当前系统，导致某些接口依赖更新后的数据而导致接口请求失败报错。

如果你的项目要求加载速度要快，我们如果使用传统的vue3+sfc模式去开发，因为只有一个根节点，空白页面加载出来之后js才回去加载组件渲染，这样页面总是有一个短暂的空白。我们这里不讨论服务器端ssr和预渲染方案，仅仅是为了满足比较极端的优化需求，在这种情况下我的这套方案就是一种比较好的解决方案。

采用artComponent模板引擎,在数据更新后实现UI更新，当然这里做了优化处理,尽量减小页面渲染受影响的范围，实现最小化更新。基于框架，开发了一套常用UI组件，提升开发速度。组件库采用开放原则，也就是说别人都可以使用我的开发接口去开发组件库。我本人的个人开发web前端前框架xui，正在开发中，业已完成50%的核心开发工作，并且在开发过程中逐渐完善.目前框架未采用任何和市面上框架模式，没有打包过程，实现真实的开箱即用。框架完成了事件触发和事件监听的封装，在页面和组件事件处理上更加方便。

我们在使用Web Components自定义组件的时候，我们需要继承HTMLElement这个浏览器内置对象，但是如果我要一些高级封装，给组件内置一些方法的话。我们就需要使用继承的方式，在父类中实现基本功能的封装。

首先就是要给shadow Dom中要插入style标签和你自定义内容的html代码，这样来实现样式和html代码封装，主要的还是要实现代码的隔离。当然你接下来的交互，自然也要约束在你组件内部。detail,bubbles: true, // 允许事件冒泡composed: true, // 允许事件穿透shadow DOM});这里就是定义一个自定义事件，然后使用this.dispatchEvent(closeEvent(this.dialog.returnValue))派发出去。

要说css的变化那是发展比较快的，新增的选择器也很多，而且还有很多都是比较实用的。这里举出一些案例，看看你平时都是否用过。1 新增的一些写法：1.1 导入css这个是非常好的一个变化。这样可以让我们将css拆分成公共部分或者多个模块化的css,然后在需要的地方按需导入实用。1.2 变量和函数变量这个自然不用多说，大家用的可能比较多，但是大家也要注意变量的作用域问题。函数这里重点谈一下。attr函数：函数用于获取被选中元素的某个 HTML 属性值，并在样式文件中使用该值。

等等，还有一些其他的，比如formData,fileRender等等这些大家平时用的比较多的，我这里就不再举例。navigator.mediaDevices.getDisplayMedia() 这个就是将当前指定的屏幕分享出去。img, video, div元素等加上这个方法就可以实现全屏，使用document.exitFullscreen();这个api可用来替代使用interval回调时动画都问题。当然vue底层也用了这个新的api.通过writeText写入内容，通过 readText读取复制内容。

事件：支持一个close事件，并且在close中可以拿到returnvalue,可用用来判断关闭事件传递的参数。也支持插槽，也有生命周期的概念。showModel: 展示弹窗，并带有遮罩，采用了一个特殊的#top-layer的标记层，会位于整个页面的最顶层，且水平，垂直居中。年龄稍大一点的码农可能见证了html的发展，亲历了头声明的变化，但是现在起步就是html5,那么html有哪些不为大家常用的新东西呢，这一章我先来谈谈这个问题。甚至现在我们在用各种UI库的时候这个弹窗也是必须的一个功能。