前端技术相关
关注
分享
扫一扫
文章平均质量分 67
收集一下前端相关的问题
落叶惊雷
做一个不秃顶的程序员
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
发布订阅模式
一、是什么就好比你在微博上关注了一个人，然后他每次发动态的时候，你都能收到消息提示。这就是发布订阅模式，博主就是发布者，你就是订阅者。博主的粉丝就是发布者的缓存列表，每当他发表说说后，就会遍历粉丝列表，通知所有的订阅者（就是粉丝）。二、作用和应用松耦合发布者和订阅者互相独立运行。能够解决负载问题。方便维护。应用常见应用有 图片或模块懒加载。层级复杂的组件之间通信。三、实现方式实现思路：创建一个对象在该对象上创建缓存列表on 方法用来把函数 fn 都加到缓存列表中（订阅者注册事件到调原创 2021-06-16 21:46:54 · 106 阅读 · 0 评论 -
H5和安卓交互时，H5渲染滞后的坑
一、H5页面和安卓如何交互的1.为什么会有h5和安卓的交互？在手机app中，有时候需要在app中嵌入h5网页，能增加app的跨平台性，也就是相同的h5也可以嵌在ios平台。减少跨平台的开发成本。同时，也能增强响应速度，减少内存消耗等优点。2.如何交互？主要在app中镶嵌webview的方式。webview可以看做一个内置浏览器，在webview中通过链接进入页面。h5调移动端：在app中定义一个全局方法A，h5去调用。移动端调h5：相同的，在h5 中定义一个全局方法B，然后app中调用。原创 2021-04-30 13:57:35 · 1003 阅读 · 0 评论 -
iview实现表格动态添加输入框校验
需求描述1.有一个表格，里面能展示原有数据，同是也能在表格中动态增加一行输入框2.增加的每个输入框，要动态添加表格的验证，以及表单数据的绑定3.为了样式统一，使用iview的ui框架主要难点让表格中同时展示原有数据和新增的输入框新增的输入框，动态绑定表单数据输入框动态增加校验实现方式1.使用Table组件，创建表格，绑定好表格列的定义, 使用tableColums变量表示<Table :columns="tableColums"> </Tabl原创 2021-03-08 14:26:47 · 3662 阅读 · 0 评论 -
如何在前端web服务器中，打印出用户操作网页痕迹的操作日志
一、背景由于前端项目是静态文件，是在浏览器端运行，如果要打日志到服务器，无法直接通过某些工具完成。只有那些运行在服务器端的程序，如后台程序，才能直接的在服务器端打印日志。但是我们必须要记录下前端页面的操作轨迹，就必须另辟蹊径了。二、探索结果1.从apache的日志入手通过查阅资料，发现apache服务器或者nginx服务器都能够记录前端发送到服务器的请求。并能记录请求的url连接，请求时间，客户端浏览器等信息。2.通过请求的URL记录日志所以，我们可以通过前端请求的url来记录日志。将日志写在u原创 2020-12-21 16:28:48 · 4414 阅读 · 0 评论 -
解决ＶＵＥＸ刷新store消失的问题
现象，在设置好ｓｔｏｒｅ之后，刷新页面，ｓｔｏｒｅ中的内容会消失解决在刷新前将store中的内容添加到sessionStorage,例如，可以在App.vue的created() 方法中添加如下内容// 在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem('store')) { // 存储状态 this.$store.replaceState(Object.assign({}, this.$store.stat原创 2020-12-21 16:24:31 · 1234 阅读 · 0 评论 -
vue-cli脚手架安装jest单元测试，运行异常解决办法
利用vue-cli搭建了一个demo工程，在选项里选择了单元测试跟jest框架，npm install完成，npm run dev 也OK，但是npm run unit，报错了解决：此属性已移除，详细可以见 https://jestjs.io/docs/en/configuration 官方公布的属性，在test/unit/jest.conf.js找到并删除该属性问题2：localStorage is not available for opaque origins解决：在jest.config.原创 2020-12-21 15:30:13 · 678 阅读 · 0 评论 -
Vue 组件多级继承、继承全部属性
核心方法在B组件中添加v-bind="$attrs" 和 v-on="$listeners"两个属性即可`A 组件中：<B v-bind="$attrs" v-on="$listeners></B>这样在A中就能使用B的属性和绑定的方法了如果想详细理解，请继续阅读一、关于组件之间的通信组件之间相互传递数据、方法，就可以理解为组件之间的通信。比如A组件传一个对象给B组件，这就是通信。二、组件之间通信的常见方式使用props或vuex可以实现。具体实现可参考：但原创 2020-12-21 15:00:07 · 5294 阅读 · 0 评论 -
Vue 中v-model双向绑定的实现
方式一：定义一个子组件：命名为child.vue<template> <div> <p>子组件当前的值：{{num}}</p> <button @click="btnClick">增加</button> </div></template><script>export default { name: 'child', props: { v原创 2020-12-09 09:08:29 · 174 阅读 · 0 评论 -
vue 表格大量数据展示时，页面卡顿问题解决
解决方案参考：https://blog.csdn.net/tzllxya/article/details/90676040?utm_medium=distribute.wap_relevant_download.none-task-blog-baidujs-1.nonecase&depth_1-utm_source=distribute.wap_relevant_download.none-task-blog-baidujs-1.nonecase一、原因分析当页面表格出现大量数据时，页面中的DO原创 2020-12-08 14:36:50 · 6628 阅读 · 0 评论 -
js动态修改伪类的content
目的：为了在页面中动态改变某个标签的伪类中的content的内容。实际运用场景有，如输入框下方的输入错误提示可以使用伪类的方式实现，又要根据不通的错误提示不同的内容。主要使用 css中的 attr()方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, .原创 2020-12-08 14:10:37 · 2531 阅读 · 0 评论 -
es6 使用filter给对象数组去重
一般的去重方式var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];var arr2 = arr.filter((x, index,self)=>{ // self:表示该数组对象 // x: 表示当前对象 // index: 表示当前元素下标 ...原创 2019-05-16 17:36:42 · 17475 阅读 · 0 评论