草庐IT

纯前端

全部标签

前端面试:DOM怎么封装的?各种库是怎么写的?

DOM怎么封装的?各种库是怎么写的?(DOM库,AJAX库,动画库,事件库)?在作用域套作用域的时候;子作用域内尽量不返回引用数据类型,因为闭包内的值,是另外一个子闭包的返回值的时候,如果子闭包的返回值是字面量,那么浏览器会在空闲的时候,把作用域销毁;而如果返回值的是一个引用数据类型的值,那么闭包是不会销毁的,在性能优化上,不好!下面是封装思路:varTool=function(){//构造函数模式;用的时候需要new一下;this.flag="getElementsByClassName"indocument; //getElementsByClassName在IE678中是不存在的。用这个

前端vue uni-app多图片上传组件,支持单个文件,多个文件上传 步骤条step使用

快速实现多图片上传组件,支持单个文件,多个文件上传步骤条step使用;下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12747效果图如下:使用方法 使用方法//添加多张图片(少于6张)addPhotoClick(){uni.hideLoading();letmyThis=this;if(myThis.photoList.length>=6){myThis.photoList=[];}uni.chooseImage({count:6,sizeType:['compressed'],//可以指定是原图还是压缩图,默认二者都有s

前端vue 宫格组件提供常见九宫格菜单组件,扩充性好,可切换九宫格 十二宫格 十五宫格

快速实现vueuni-app宫格组件提供常见九宫格菜单组件,扩充性好,可切换九宫格十二宫格十五宫格;下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12680效果图如下:使用方法HTML代码部分JS代码(引入组件填充数据)importccGridButtonfrom'../components/ccGridButton.vue';exportdefault{components:{ccGridButton},data(){return{gridList:[{name:'功能1',imgSrc:"../../static/ap

独家揭秘:Kotlin编译器前端—解析阶段

独家揭秘:Kotlin编译器前端:解析阶段Kotlin编译器对我来说就像一个黑盒子,虽然有关于KotlinPSI在IDE插件中有使用的文档,但除了源代码中留下的注释之外,几乎没有其他信息可用。接下来的文章中我们来探索Kotlin编译器前端:解析阶段。Kotlin编译器的独特之处在于其前端是建立在其之上,这使得前端易于与编译器插件和IDE插件共享。对于Kotlin,前端的目标是解析编写的代码并分析其解释结构,以便生成中间表示(IR)。然后,将此IR和额外生成的信息一起发送到编译器的后端,后端会进一步分析、增强和优化IR,最终将其转化为机器码。这个系列观察了当您通过Kotlin编译器提供代码时发生

前端如何用form-data方式上传图片js

1.场景工作场景中,需要一个上传图片的功能效果如下PC端 mob端2.业务逻辑PC端和Mob端最多可以上传3张照片每张大小不超过3M格式支持bmp,gif,jpg,png,jpegPC端上传的图片会展示在添加图片按钮和上传图片文案描述中间mob端默认是一个添加图片的图如果上传了图片会出现在添加图片这张图之前上传到第三张的时候添加图片这张图就隐藏掉了当前行显示3张正方形的上传图。PC和Mob端每一个上传好的图上面都有一个x按钮点击x可以删除掉上传的图片并且这个块是封装成了组件组件复用在了查看详情页如果是查看详情进入这个组件我这里会传递进来一个resonDisabled让input框隐藏掉只能查看

这一次,彻底入门前端测试,覆盖单元测试、组件测试(2.4w 字)

前端测试一直是前端工程化中很重要的话题,但是很多人往往对测试产生误解,认为测试不仅没有什么用而且还浪费时间,或者测试应该让测试人员来做,自己应该专注于开发。所以,文章开头会先从"软件工程语境下的软件测试"的角度,介绍软件测试的定义、作用及其分类,让读者正确认识测试,明确自身在软件测试阶段中的定位,以及在软件测试过程中所承担的职责和所应完成的任务。在理解软件测试的定义及作用之后,就要开始入门前端测试了,在这一部分我介绍了许多常用的自动化测试基础知识,比如断言、模拟,还介绍了单元测试框架Jest和最新的Vitest的基本使用并进行了较深入的比较。最后是前端测试的实战部分,我演示了如何测试一个地址列

卡口服务——基于前端巡检系统的拓展实践

一、背景体验是得物的业务关键词之一,对于前端开发而言,提高用户体验更是重要工作内容之一。得物前端平台目前有巡检系统、监控平台等多种手段保障线上页面稳定运行,但是仍有一部分问题处于“监控死角”,而且巡检、监控都属于后置告警手段,为了确保页面上线前就能得到一定的用户体验保障,结合公司的战略目标,我们决定开发一个H5页面检测服务,用来前置检测即将上线的页面,提前暴露该页面可能存在的问题反馈给对应的开发/运营,我们将这个服务称之为:“体验卡口”。本文从这次“体验卡口”服务的开发实践出发,同时介绍得物巡检系统的架构和设计,希望能给参与稳定性建设的开发小伙伴提供一定的学习和参考价值。二、用户体验量化标准当

以工作中的项目为例实践前端常见十大性能优化方法

一、记录优化前的初始状态1.查看首屏初次渲染加载时间打开控制面板,勾选停用缓存后,刷新项目首屏,得到首屏初次渲染的资源加载情况。标记1处:DomContentLoaded:dom内容加载完毕的时间为11.64秒,它对应着瀑布栏下蓝色的那条竖线。标记2处:加载时间:页面上所有的资源(图片,音频,视频等)被加载完成的时间为11.66秒,对应着瀑布栏下红色的那条竖线。我们主要关注首屏的加载时间这个指标,这里11.66秒过长了,那么我们重点关注下完成加载时间最晚的几个资源文件,也就是标记3和标记4处的资源文件。观察标记4处的瀑布图,我们发现加载时间最长的是vendor.js这个文件,这是我们项目的打包

以工作中的项目为例实践前端常见十大性能优化方法

一、记录优化前的初始状态1.查看首屏初次渲染加载时间打开控制面板,勾选停用缓存后,刷新项目首屏,得到首屏初次渲染的资源加载情况。标记1处:DomContentLoaded:dom内容加载完毕的时间为11.64秒,它对应着瀑布栏下蓝色的那条竖线。标记2处:加载时间:页面上所有的资源(图片,音频,视频等)被加载完成的时间为11.66秒,对应着瀑布栏下红色的那条竖线。我们主要关注首屏的加载时间这个指标,这里11.66秒过长了,那么我们重点关注下完成加载时间最晚的几个资源文件,也就是标记3和标记4处的资源文件。观察标记4处的瀑布图,我们发现加载时间最长的是vendor.js这个文件,这是我们项目的打包

前端vue可以左右滚动的切换的tabs tabs选项卡 滑动动画效果 自动宽度

前端vue可以左右滚动的切换的tabstabs选项卡滑动动画效果自动宽度, 下载完整代码请访问https://ext.dcloud.net.cn/plugin?id=13003效果图如下:     ####使用方法```使用方法swiperTabList:["2023-06-10","2023-06-11","2023-06-12","2023-06-13","2023-06-14","2023-06-15"],//导航列表swiperTabIdx:0,swiperColor:'#161616',//导航栏字体未选中前颜色swiperCurrentColor:'#1D63FF',//选中当前导