- 博客(208)
- 收藏
- 关注
RSS订阅
转载 web前端--10个妨碍进步的学习方式
1.前言从事web前端的人很多，每个人的学习方式，学习习惯基本不会一模一样！关于web前端（或者直接互联网），大家都知道，是做到老，学到老的一个行业。之前写文章的时候，我说过很多学习的方式和建议。今天换一下，说一下我个人不建议的学习方式，或者我个人觉得是妨碍进步的学习方式，希望大家引以为鉴！如果大家有什么补充和指点的，欢迎指出。大家一起交流意见，互相帮助！2.具体情况1.只看教程，不动
2017-09-18 15:42:13
676
转载 前端跨域问题解决办法, Nginx配置为例
docker-componse.yml需要配置文件/目录/端口等映射关系，否则基于docker启动的Nginx无法访问。💡 Tips：docker启动Nginx 需要配置docker-componse.yml文件。💡 Tips：可以将多个系统融合成一个系统，无技术壁垒，可以像iframe一样实现功能组合。💡 Tips：跨域就是非同源网站发起请求，浏览器安全策略保护机制导致的。● 文件跨域：html页面，静态资源跨域等。● 接口跨域：get，post等等请求跨域。携程支持(团队已跑路)（腾讯支持）本人推荐。
2024-04-08 10:51:58
3
原创 vue3 webpack ant deign vue 黑暗模式实现
注意：引入黑暗模式文件 import darkThemeCss from 'ant-design-vue/dist/antd.dark.css?raw' ，需要引入源码文件，需配置 webpack 使用 'raw-loader'编译。
2023-06-02 12:06:30
2700
1
原创 vue3 vite ant deign vue 黑暗模式实现
3,创建dark.less和light.less文件对应黑暗和白天。1,实现黑暗模式主要是对css变量的抽取和全局css的替换。4,在less和css中用变量替换掉原本的数值。2,编写一个全局的css变量css文件。6,编写一个切换黑暗白天模式的函数。5,编写切换css函数。
2023-06-02 11:51:07
2887
原创 js 树结构数据的递归操作
一般用于因后端给的数据字段不够完善，类型不正确，需要前端进行处理树数据。一般用于手动设置vue/react的UI库中的树的展开节点。一般用于前端做树的查询功能。
2023-01-11 16:12:26
2075
原创 javascript对指定元素添加父元素
在处理自己的文章博客时，有一个需求：当富文本编辑器中插入的表格过长的话，就给它设置一个横向滚动条。本来是一个很简单的需求，也就是给指定的元素添加一个父div，让div拥有overflow: auto;属性就解决了。我当时的实现代码是这样的：addDiv () {// 获取所有的table表格 let tables = document.querySelectorAll('table'); // 如果table存在于当前界面就执行接下的操作 if (tables) {
2022-09-04 13:41:28
851
原创 前端实现文件下载（a标签实现文件下载 避免直接打开问题)
先说结论所有情况通用的方式： 后端设置下载请求的响应头 Content-Disposition: attachment; filename="filename.jpg" attachment 表示让浏览器强制下载 filename 用于设置下载弹出框里预填的文件名 非跨域情况下 给a标签加上 download 属性，如 <a href="url" download="xxx.png"></a> download 里写文件名 注意后缀 (值非必填) 通过请求
2022-01-26 10:09:32
29506
8
原创 文本域@at功能
1.框架和库的区别框架（framework）：有着自己的语法特点、都有对应的各个模块。库（library）：专注于一点。框架的好处： 提到代码的质量，开发速度 提高代码的复用率 降低模块之间的耦合度（高内聚低耦合） UI：user interfaceGUI：graphical user interfaceCLI：command line interfaceAPI：application interface思维模式的转换：从操作DOM的思维模式 切换到
2022-01-09 23:17:25
648
原创 Vue项目打包文件过大（优化）
问题Vue项目打包文件过大，项目加载慢，前端可以做哪些优化？分析其实，这是项目的性能优化，一般在项目开始开发之前就应该考虑，但在实际开发中，开发之前会被忽略。解决方案如下一、懒加载什么叫懒加载？在需要的时候进行加载，随载随用。常见的有：路由、图片等。例子：官方路由懒加载{ path: "/timeAxis", name: "timeAxis", component: () => import ('@/views/xxx'),}
2022-01-05 19:49:50
4936
转载 强缓存与协商缓存
在工作中，前端代码打包之后的生成的静态资源就要发布到静态服务器上，这时候就要做对这些静态资源做一些运维配置，其中，gzip和设置缓存是必不可少的。这两项是最直接影响到网站性能和用户体验的。缓存的优点：减少了不必要的数据传输，节省带宽 减少服务器的负担，提升网站性能 加快了客户端加载网页的速度 用户体验友好缺点：资源如果有更改但是客户端不及时更新会造成用户获取信息滞后，如果老版本有bug的话，情况会更加糟糕。所以，为了避免设置缓存错误，掌握缓存的原理对于我们工作中去更加合理的配置缓存是非
2021-09-17 17:35:06
184
转载 Webpack优化篇
带你深度解锁Webpack系列(基础篇) 和 带你深度解锁Webpack系列(进阶篇)，主要是讲解了 Webpack 的配置，但是随着项目越来越大，构建速度可能会越来越慢，构建出来的js的体积也越来越大，此时就需要对 Webpack 的配置进行优化。本文罗列出了十多种优化方式，大家可以结合自己的项目，选择适当的方式进行优化。这些 Webpack 插件的源码我大多也没有看过，主要是结合 Webpack 官方文档以及项目实践，并且花了大量的时间验证后输出了本文，如果文中有错误的地方，欢迎在评论区指正。鉴
2021-07-26 16:13:42
4344
转载 关于sessionStorage的一个误区
前言所有人都知道，localStorage和sessionStorage的最大区别是生命周期，一个永久，一个仅针对一个会话期间有效。那么，到底什么是一个会话？多个标签页之间的数据是否会共享呢？后台的session我们对会话session的认识一般都是从后台的session开始的，比如Java的session，它是基于往cookie写入一个JSESSIONID来实现的，所以，只要你不是打开一个隐身窗口，无论你开多少个标签页，不同标签页之间都会被认为是一个session，你在这个标签页登录了，新开一
2021-05-26 14:23:37
540
1
原创 nvm的安装和使用
何时使用nvm需要在不同项目中使用不同的node版本时，可以使用nvm管理卸载node卸载之前安装的node，使用nvm重新install node版本进行管理sudo rm -rf /usr/local/{bin/{node,npm},lib/node_modules/npm,lib/node,share/man/*/node.*}安装nvm打开终端执行以下命令：curl -o- https://raw.githubusercontent.com/creatio..
2021-05-21 10:49:48
347
转载 npm init @vitejs/app 到底干了什么
背景最近在闲暇时间学习尤大大的新框架 ViteJs 的时候发现，创建一个新的基于 Vite 的项目时，使用的命令方式是：npm init @vitejs/app复制代码这跟我们熟悉的 CLI 创建 Vue 项目的命令完全不一样：vue create project-name复制代码「在不安装脚手架工具的情况下，还能直接使用 npm 创建项目？」带着好奇心小小的探究了一下。首先我们要知道这个命令 npm init @vitejs/app 是要做什么？一番谷歌 + 官网文档，
2021-05-20 23:37:32
6596
转载 视频标签 video的一些特殊属性
HTML5标签video在PC上显示很简单，就一个标签加资源，很少需要关心其它属性。但放到移动设备上，video的标准，Android和iOS有很多区别，另外还有很多各家浏览器特定的属性，本文详细讲了video在移动端的实践。 原文：视频H5 video标签最佳实践随着 4G 的普遍以及 WiFi 的广泛使用，手机上的网速已经足够稳定和高速，以视频为主的 HTML5 也越来越普遍了，相比帧动画，视频的表现更加丰富，这里介绍一些实践经验。video的属性<video id="video".
2020-12-15 18:33:51
809
转载 如何唤醒APP？
移动互联网时代，“用户增长”成为每个公司关注的重点话题。为了将更多用户引导到客户端内，产品经理会习惯性地在网页的各个地方巧妙隐藏唤醒App的“机关”。常见的出现场景浏览器 —唤醒—> App 用户在浏览器中浏览网页时，当检测到该网页来自于某个App时，此时可以引导用户呼起或者下载App微信、QQ —唤醒—> App 用户将App中自己喜欢的内容分享到微信、QQ，在站外打开网页时，可以正常浏览，也可以引导用户呼起或者下载App接下来，让我们深入研究下唤醒App的几种解决方案.
2020-11-13 15:44:57
1758
2
转载 前端codeLint
导读Code Lint是前端工程化中的一个重要环节（what is code lint?），它可以帮助我们在部署代码到生产环境之前及时发现错误并纠正它们，也可以规范我们的编码习惯，让团队的代码风格保持统一。Code Lint的工作原理是借助一些lint工具对代码进行静态分析，并在合适的时机触发校验，提示错误。Note：本文可能无法覆盖所有知识点，若有知识盲区请主动查阅补齐，也可以在文章...
2020-04-09 10:57:18
1000
1
转载 仿 vue-cli 搭建属于自己的脚手架
脚手架是啥从前我总觉得脚手架是个很高大上的东西，好像得牛叉????一点的人才写的出来，可望而不可即。其实并不是因为困难使我们放弃，而是因为放弃才显得困难（这是个好词好句????）。只要你肯花个一天半天的时间✊，也能写出属于你自己的脚手架。早前脚手架这个词是从 vue-cli 这里认识的，我们通过 npm install -g vue-cli 命令全局安装脚手架后, 再执行 vue init webpac...
2020-03-29 10:57:20
580
转载 如何搭建一个私有 npm 服务器
为何需要搭建私有npm仓库?npm——我们大家都知道是NodeJS的包管理工具，用于Node插件的管理包括安装、卸载、管理依赖等。基于npm命令行我们可以快速的安装项目中所依赖的代码模块，甚至可以自己发布一些自己写的插件等。使得我们的项目开发效率得到大大的提升。那么基于npm我们可以做哪些事情呢？简单来说就是：一行命令，(批量）安装别人写好的模块 一行命令，卸载安装好的模块...
2020-03-29 10:49:13
5517
1
原创 16:9适配方案
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>16:9窗体演示</title></head><style> #closeBox { background-color...
2020-01-15 15:15:30
1212
原创 图片适配
<!DOCTYPE html><html lang="zh"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片适配</ti...
2020-01-13 14:45:33
201
转载 前端代码异常日志收集与监控
在复杂的网络环境和浏览器环境下，自测、QA测试以及 Code Review 都是不够的，如果对页面稳定性和准确性要求较高，就必须有一套完善的代码异常监控体系，本文从前端代码异常监控的方法和问题着手，尽量全面地阐述错误日志收集各个阶段中可能遇到的阻碍和处理方案。☞ 收集日志的方法平时收集日志的手段，可以归类为两个方面，一个是逻辑中的错误判断，为主动判断；一个是利用语言给我们提供的捷径，暴力式...
2020-01-09 10:38:14
751
原创 js监听浏览器离开和关闭页面操作
大家是否经常遇到在关闭网页的时候，会看到一个确定是否离开当前页面的提示框？或者想执行些别的操作，想一些在线测试系统、信息录入系统等就经常会有这一些提示，避免用户有意或者无意中关掉了页面，导致数据丢失。这里面的实现过程很简单： mounted() { window.addEventListener('unload', function() { //窗口关闭后 ...
2019-10-30 13:17:02
7796
3
原创 假如测试说你的网站在iOS 10有问题
这篇文章不那么有趣，只是解决了一个bug。但对我来讲，因为后面还要用Vue做很多项目，而且可以预见几乎每一个项目都会遇到这个问题，所以记录在案是有用的。一个bug你用Vue做了一个单页面应用，它在一切设备上都工作正常，但是突然有一天，你的测试和你说，这个网站在iOS 10上跑不起来，怎么办？于是你打开你电脑上的Chrome浏览器，工作正常；打开Safari浏览器，工作正常；打开iOS ...
2019-08-22 17:51:10
288
转载 video 标签属性
为了文章的完整性，首先还是列举一下video标签的属性：src ：视频的属性 poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 width：视频宽度 height：视频高度Video 对象属性：audioTracks： 返回表示可用音频轨道的 AudioTrackLis...
2019-08-02 14:30:15
1908
转载 解决浏览器保存密码自动填充问题
问题描述话说有一天，我如往常一样打开我的开发网站进行登录操作。浏览器很平常的在我们进行登录操作之后询问我是否需要记住密码，懒惰如我点击了记住密码。一切都很正常的进行着，没有什么异常发生。然而，问题就出现了。当我打开一个新建用户的操作，里面的输入框自动将我的用户名和密码默认填写进去了，然后触发了内置的校验规则在我确认过在打开编辑框的时候已经输入框的...
2019-07-03 15:25:28
1928
1
转载 HTML5点播m3u8(hls)格式视频
这两年来我们发现越来越多的视频应用使用了m3u8格式的视频，因为可以兼容PC、移动端。相比mp4等视频源，m3u8可以减轻服务器压力（按需加载）。HLS是由苹果公司率先提出的一种协议标准，可用于直播。m3u8是一种基于HLS(HTTP Live Streaming) 文件视频格式，它主要是存放整个视频的基本信息和分片(Segment)组成。不同于mp4大文件，m3u8是由一系列的ts文件组成，...
2019-05-23 10:18:04
9785
转载 节流和防抖
防抖你是否在日常开发中遇到一个问题，在滚动事件中需要做个复杂计算或者实现一个按钮的防二次点击操作。这些需求都可以通过函数防抖动来实现。尤其是第一个需求，如果在频繁的事件回调中做复杂计算，很有可能导致页面卡顿，不如将多次计算合并为一次计算，只在一个精确点做操作。PS：防抖和节流的作用都是防止函数多次调用。区别在于，假设一个用户一直触发这个函数，且每次触发函数的间隔小于wait，防抖的情况...
2019-02-20 15:28:54
185
转载 5个技巧让你更好的编写 JavaScript(ES6) 中条件语句
使用 JavaScript 时，我们经常需要处理很多条件语句，这里分享5个小技巧，可以让你编写更好/更清晰的条件语句。1.使用 Array.includes 来处理多个条件我们来看看下面的例子：JavaScript 代码:// conditionfunction test(fruit) { if (fruit == 'apple' || fruit == 'strawberr...
2018-11-22 15:51:47
341
原创 vue-router 在微信浏览器中操作history URl未改变的解决方案
问题描述：在PC端和手机浏览器中router.replace() or router.push()能够正常使用，页面的地址和页面都正常显示；但是在微信中，从/a页面通过router.push('/b')跳转到/b页面后，页面正常，但是复制浏览器的地址会发现其地址仍为/a;选择在浏览器打开发现也是显示的/a的页面。这应该是微信浏览器那边的问题，微信浏览器只会记住你第一次进来的地址。 微...
2018-10-15 15:22:39
3956
转载 Web 前端如何播放 HLS(.m3u8) 视频
WEB 上主流的视频直播方案有 HLS 和 RTMP，移动 WEB 端目前以 HLS 为主（HLS存在延迟性问题，也可以借助 video.js 采用RTMP），PC端则以 RTMP 为主实时性较好移动端 iOS 和 Android 都天然支持HLS协议，做好视频采集端、视频流推流服务之后，便可以直接在H5页面配置 video 标签播放直播视频, HLS 在 PC 端仅支持safari浏览器，类似...
2018-07-12 18:37:50
35447
3
转载 HTML5如何实现视频直播功能
最近视频直播比较火，发现目前 WEB 上主流的视频直播方案有 HLS 和 RTMP，移动 WEB 端目前以 HLS 为主，PC端则以 RTMP 为主实时性较好，接下来将围绕这两种视频流协议来展开H5直播主题分享，下面通过本文给大家分享HTML5视频直播思路详解，一起看看吧 前言前不久抽空对目前比较火的视频直播，做了下研究与探索，了解其整体实现流程，以及探讨移动端HTML5直播可行性方案。发现目前 ...
2018-07-12 18:26:56
40783
1
转载 直播常见概念和协议说明
题外话：HTTP渐进下载流媒体播放: 基于TCP。yy、乐视、爱奇艺、优酷土豆、搜狐视频、花椒直播，主要还是通过rtmp&hls来实现的，但他们也意识到rtmp的天生缺陷，所以不管是技术预研也好，还是测试版也好，都已经或多或少在弄WebRTC了。流媒体概述：所谓流媒体是指采用流式传输的方式在 Internet 播放的媒体格式。 流媒体又叫流式媒体，它是指商家用一个视频传送服务器把节目当成...
2018-07-12 18:22:26
951
原创 （js）常用方法
最近项目用到了的一个比较常用封装的公共方法，记录一下：import Config from '@/../config.js';import wx from 'weixin-js-sdk';import http from '@/http'; const PROJECT_NAME = Config.data.name; // 设置localstorageexport ...
2018-07-09 15:08:07
571
转载 【npm】利用npm安装/删除/发布/更新/撤销发布包
正文 回到顶部什么是npm?npm是javascript的包管理工具，是前端模块化下的一个标志性产物简单地地说，就是通过npm下载模块，复用已有的代码，提高工作效率 1.从社区的角度：把针对某一特定问题的模块发布到npm的服务器上，供社区里的其他人下载和使用，同时自己也可以在社区里寻找特定的模块的资源，解决问题2.从团队的角度：有了npm这个包管理工具，复用团队既有的代码也变的更加地方便 回到顶...
2018-07-09 10:03:17
1922
原创 微信浏览器禁止页面下拉查看网址（不影响页面内部scroll）
此类事件是手机touchmove默认事件行为，可以通过js代码隐藏事件：$("body").on("touchmove", function (event) {event.preventDefault();});ordocument.addEventListener('touchmove', function(e){e.preventDefault()}, false);但这样往往会把页面原生的s...
2018-07-06 17:13:20
2197
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人