前端
文章平均质量分 69
老谭TYH
这个作者很懒,什么都没留下…
展开
-
分析Flex布局空间分配, flex-grow、flex-shrink,flex-basis
布局方案很适合应用与多栏等高布局场景,本文将深入分析flex-growflex-basis三个属性,充分了解这些属性如何与增长和缩小的flex子元素一起工作是掌握Flex布局的关键所在。三个属性都是作用在flex子元素中,主要控制一个flex子元素的以下几个方面:flex-grow: 这个flex子元素得到多少剩余空间?flex-shrink: 从这个flex子元素要收缩多少空间?flex-basis: 在flex子元素未伸张和收缩之前,它的原始大小是多少?flex可以通过flex-basis。转载 2023-03-16 10:53:03 · 1557 阅读 · 0 评论 -
csdn 导出文章 pdf
打开控制台输入以上代码,就可以。我采用的是Edge浏览器。原创 2023-03-09 14:53:02 · 105 阅读 · 0 评论 -
js 拷贝
对数据拷贝的时候只拷贝一层,深层次的只拷贝了地址1. (1)对于,可以使用(start, end)方法,返回一个新的数组。(备注:slice 方法一直复制到 end 所指定的元素,但是不包括该元素。如果 start 为负,将它作为 length + start处理;如果 end 为负,就将它作为 length + end 处理;如果省略 end ,那么 slice 方法将一直复制到数组结尾;如果 end 出现在 start 之前(即end原创 2023-03-08 20:28:44 · 303 阅读 · 0 评论 -
js typeof instanceof 以及数据类型
类型:String、Number、Boolean、Null、Undefined、Symbol(es6)类型:Object、Array、Function用来说明变量的数据类型返回值是一个字符串,用来说明变量的数据类型;所以可以用此来判断number, string, object, boolean, function, undefined, symbol 这七种类型,每种情况返回的内容如下表所示typeof有一定的局限性:对于。原创 2023-03-08 14:53:56 · 324 阅读 · 0 评论 -
vue中Mixin和extends详解
目前我们使用组件化开发方式来开发应用程序,但是在不同组件之间存在一些相同的代码逻辑,此时我们希望对相同的代码逻辑进行抽取。在vue2和vue3中都支持使用Mixin来解决,Mixin提供了一种非常灵活的方式,来分发Vue组件中的可复用功能,一个Mixin对象可以包含任何组件选项,当组件使用Mixin对象时,所有Mixin对象的选项将被 混合 进入该组件本身的选项中。转载 2023-03-06 12:01:18 · 1212 阅读 · 0 评论 -
rollup从入门到打包一个按需加载的组件库
rollup 是一个 JavaScript 模块打包器,在功能上要完成的事和webpack性质一样,就是将小块代码编译成大块复杂的代码,例如 library 或应用程序。在平时开发应用程序时,我们基本上选择用webpack,相比之下,rollup.js更多是用于library打包,我们熟悉的vue、react、vuex、vue-router等都是用rollup进行打包的。转载 2022-11-18 17:48:09 · 1789 阅读 · 0 评论 -
用webpack从0到1打包一个按需加载的vue组件库
在vue项目开发中,我们会将经常用到的逻辑或模块抽象成组件,对于那些多个项目都有用到的组件,可以考虑封装成组件库,发布到npm。每次要到只需要一下,就不用来回拷贝了。下面我们就从0开始来打包一个vue组件库。转载 2022-11-18 17:31:36 · 1797 阅读 · 0 评论 -
前端播放m3u8格式视频
m3u8是苹果公司推出的视频播放标准,是m3u的一种,只是编码格式采用的是UTF-8。,使用m3u8文件实际上是通过它来解析对应的放在服务器上的视频网络地址,从而实现在线播放。的视频是将文件分成一小段一小段的ts文件,播放完一个在播放下一个,由于每次请求的ts文件都很小,所以基本可以做到无延时播放。目前WEB上主流的直播方案主要是HLS和RTMP,移动端主要是HLS,PC端主要是RTMP。HLS是苹果推出的,移动端不管是IOS还是Android都天然支持HLS协议,直接在h5页面直接配置即可使用;原创 2022-11-18 16:08:12 · 6106 阅读 · 0 评论 -
JS调用C++动态库dll
Electron开发过程中,很多时候都会遇到调用C++动态库dll的需求。使用JS调用dll库,听上去都很高大上,JS和C++基本上没有什么交集的两种语言,在这个时候碰出了火花。今天就在Electron的基础上介绍一下这个神奇的使用过程和过程可能遇到的各种问题。转载 2022-11-01 17:35:02 · 5251 阅读 · 1 评论 -
npx 使用教程
Node 自带 npm 模块,所以可以直接使用 npx 命令。万一不能用,就要手动安装一下。转载 2022-10-29 12:07:40 · 591 阅读 · 0 评论 -
【无标题】Webpack中publicPath详解
关于webpack中的path。转载 2022-10-25 17:52:49 · 4498 阅读 · 0 评论 -
iframe X-Frame-Options
下面介绍下X-Frame-Options主要用处是用于防止点击劫持,**点击劫持(ClickJacking)**是一种视觉上的欺骗手段。攻击者使用一个透明的iframe,覆盖在一个网页上,然后诱使用户在网页上进行操作,此时用户将在不知情的情况下点击透明的iframe页面。HTTP响应头信息中的X-Frame-Options,可以指示浏览器是否应该加载一个iframe中的页面。网站可以通过设置X-Frame-Options阻止站点内的页面被其他页面嵌入从而防止点击劫持。那么怎样自定义配置呢?转载 2022-10-24 10:29:25 · 1197 阅读 · 0 评论 -
内容安全策略 Content-Security-Policy
1、限制资源获取:限制网页当中一系列的资源获取的情况,从哪里获取,请求发到哪个地方限制方式:default-src限制全局的和链接有关的作用范围根据资源类型(connect-src、img-src等),限制资源范围2、报告资源获取越权:在网页当中获取了一些我们不应该获取的资源的时候,给服务进行报告,报告资源获取越权,然后做出调整之所以报这个错误,就是我们加了这个头的作用。这个时候 inline脚本还是不能执行的。如果引入外链的脚本文件,则会报错,这样就可限制,只能使用我们本站使用的脚本。转载 2022-10-24 10:25:19 · 30263 阅读 · 0 评论 -
java / 前端 在线查看文档
测试地址,方案兼容性比较好,需要资源同域 或者 cors跨域,可以自定义样式。PDF.js由 Mozilla 提供支持。目标是创建一个通用的、基于 Web 标准的平台,用于解析和呈现 PDF。使用方式自己部署一个 pdfjs-view。(推荐,更稳定)下载项目,然后项目分为两个版本和。legacy 支持低版本浏览器,使用 es5 编写,讲道理采用这个方案,你肯定也是为了兼容所有浏览器。(没有的话,就生成一份)然后将相关内容复制到你的目录,上传 FTP。转载 2022-10-14 19:01:09 · 650 阅读 · 0 评论 -
在线代码编辑器:Monaco Editor
Monaco Editor不得的不说是一个非常强大的在线代码编辑器,可以为自己的项目提供云端代码编辑器的基础技术支持,可以在其基础上扩展很多强大的功能,当然上手不一定简单,需要根据自己的需求确定开发方案,有需求的小伙伴可以去研究一下!转载 2022-09-28 20:20:07 · 9864 阅读 · 3 评论 -
全面理解JS模块的标准(AMD、CMD、COMMON.JS 、 UMD、ESM)
require.js是AMD模块规范的一个具体实现核心是通过define方法对无序的代码进行有序的模块化定义,通过require方法实现代码的模块化加载});control.js/*** 登录状态检测*/};/*** 模块调用及配置*/{// 登录页});};// 注册页});};};{// 详情页});};};};});sea.js是CMD模块规范的一个具体实现在定义模块方面, CMD和AMD一样通过define函数来定义模块;转载 2022-09-23 10:33:27 · 4307 阅读 · 0 评论 -
深入理解webpack的chunkId对线上缓存的思考
想必经常使用基于webpack打包工具的框架的同学们,无论是使用React还是Vue在性能优化上使用最多的应该是分包策略(按需加载)。按需加载的方式使我们的每一个bundle变的更小,在每一个单页中只需要引入当前页所使用到的JavaScript代码,从而提高了代码的加载速度。但是,由于webpack目前版本自身的原因分包策略虽然可以提高我们的加载速度,然而在线上缓存方面却给了我们极大的破坏(webpack5中解决了这个问题)。chunkId是怎么生成的?chunkId是怎么破坏线上缓存的?转载 2022-09-13 15:16:52 · 760 阅读 · 0 评论 -
webpack webpack-cli
ebpack 是一个静态的模块化打包工具,为现代的JavaScript应用程序服务打包 bundler:webpack可以帮助我们进行打包,所以它是一个打包工具静态的static:将代码打包成最终的静态资源(部署到静态服务器)模块化module:webpack默认支持各种模块化开发,ES Module、CommonJS、AMD等现代modern:前端开发的各种问题,催生了webpack的出现webpack 从 4.0 版本开始,在安装时,就必须要安装这两个东西。转载 2022-09-13 11:53:21 · 3688 阅读 · 0 评论 -
CSS 单位
在不同的设备之间,每 1 个 CSS 像素所代表的物理像素是可以变化的。当DOM元素嵌套加深时,并且同时给很多层级显式的设置了font-size的值的单位是em,那么就需要层层计算,复杂度会很高。当使用这个单位时,无论显示器的分辨率是多少,打印在纸上的结果都是一样的。这些单位比较适合用于创建全视区界面,例如移动设备的界面,因为元素是根据视区的尺寸而变化的,与文档树中的任何元素都没有关系。这四个单位都是视窗单位,所谓的视窗,在web端指的就是可视区域,移动端的视窗指的就是布局视窗。转载 2022-09-02 09:35:17 · 1087 阅读 · 0 评论 -
JavaScript的富文本编辑
本文介绍了实现富文本编辑器有两种方式:使用iframe和属性。介绍了使用方法来实现加粗、斜体样式等功能,还有一些相应的功能。而且富文本编辑的内容要上传到服务器,还要将内容先复制到表单中的一个字段上,然后在提交。转载 2022-08-22 11:38:06 · 3512 阅读 · 1 评论 -
富文本编辑 空格 变成问号 ? 特殊的空格-ASCII码值160
最近遇到个问题,在页面的搜索框输入带有空格的字符串时,总是无法从db中搜索出来对应的数据,于是将db里的空格复制出来,发现其ASCII码值为160,这才知道,原来ASCII码中除了32之外还有160这个特殊的空格。平时我们用键盘输入的空格的ASCII值是32,而这个ASCII值为160的空格,其实是不间断空格(non-breaking space),是不是从来没听说过这东东?其实你平时一定也用过很多次的,就是页面上的 所产生的空格。不间断空格non-breaking space的缩写正是nbsp。转载 2022-08-19 18:43:30 · 736 阅读 · 0 评论 -
js / java 文档对比
js / java 文档对比原创 2022-08-17 19:31:00 · 905 阅读 · 0 评论 -
Javascript中window.parent ,top,self,opener 详解
的页面时,parent是父窗口,top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe),self是当前窗口, opener是用open方法打开当前窗口的那个窗口。一个浏览器窗口可以根据你的需要分成任意多的框架,一个单个的框架也可以分成其它多个框架,即所谓的嵌套框架。在框架网页中,一般父窗口就是顶层窗口,但如果框架中还有框架,父窗口和顶层窗口就不一定相同了。注:如果窗口本身是顶层窗口,parent属性返回的是对自身的引用。注:如果窗口本身就是顶层窗口,top属性返回的是对自身的引用。..转载 2022-08-13 00:10:43 · 1004 阅读 · 0 评论 -
前端程序员常用构建工具
1:webpackhttps://webpack.js.org/webpack是一个打包模块化JS的工具,在webpack里一切文件都是模块,通过loader转换文件,通过plugin注入钩子,最后输出由多个模块组合成的文件。webpack专注于构建模块化项目。2:gulphttps://www.gulpjs.com.cn/gulp是一个基于流的自动化构建工具。除了可以管理和执行任务,还支持监听文件、读写文件。基于内存实现的,其构建速度比 Grunt 快,而且,Gulp 的生态也很完善,插件质量很高。目前转载 2022-06-01 14:17:47 · 1951 阅读 · 0 评论 -
Javascript闭包(Closure)
一、变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种:全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。 var n=999; function f1(){ alert(n); } f1(); // 999另一方面,在函数外部自然无法读取函数内的局部变量。 function f1(){ var n=999; } alert(n); // er转载 2022-03-03 14:46:28 · 92 阅读 · 0 评论 -
函数去抖(debounce)& 函数节流(throttle)
1. 什么是函数去抖 & 函数节流让某个函数在一定 事件间隔条件(去抖debounce) 或 时间间隔条件(节流throttle) 下才会去执行,避免快速多次执行函数(操作DOM,加载资源等等)给内存带来大量的消耗从而一定程度上降低性能问题。debounce: 当调用动作n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。throttle:预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期。debounce使用场景scrol转载 2022-03-03 14:44:46 · 496 阅读 · 0 评论 -
vue项目中 路径使用的@和~的区别
首先:@和~ 都是在路径访问时使用的。1. @ 使用说明 @这是webpack设置的路径别名。在build/webpack.base.conf这个文件里面定义。vue项目中默认定义了@(最常用)和vue$两个别名,如果需要,可以自己添加。 默认定义:@这东西代表着到src这个文件夹的路径自己添加:2. ~ 使用说明~ 是 stylus-loader 的东西,参考 https://github.com/shama/stylus-loader(但是好像不引入这个库...转载 2022-02-25 09:47:39 · 1584 阅读 · 1 评论 -
Fiddler下载、安装、使用教程
转:Fiddler下载、安装、使用教程Fiddler是一款免费网络代理调试工具。Fiddler是一个蛮好用的抓包工具,可以将网络传输发送与接受的数据包进行截获、重发、编辑、转存等操作。也可以用来检测网络安全。反正好处多多,举之不尽呀!一、Fiddler 下载注意:Fiddler2需要.NET v2,Fiddler4需要.NET v4,不过这些也不用怎么管,下载用默认的就好了。官网下载:https://www.telerik.com/fiddler百度网盘链接: https://pan转载 2021-12-28 11:02:55 · 17766 阅读 · 1 评论 -
JAVA 前端 扫码登录
转:扫码登录原理及实现二维码扫码登录核心流程:1、请求业务服务器获取用以登录的二维码和 UUID。2、通过 websocket 连接 socket 服务器,并定时(时间间隔依据服务器配置时间调整)发送心跳保持连接。(也可以定时请求)3、用户通过 APP 扫描二维码,发送请求到业务服务器处理登录。根据 UUID 设置登录结果。4、socket 服务器通过监听获取登录结果,建立 session 数据,根据 UUID 推送登录数据到用户浏览器。为了安全浏览器可以拿到登录信息进行服务器验转载 2021-12-22 11:59:47 · 518 阅读 · 1 评论 -
Vue 3 编译慢 包分析
转:Vue 项目编译时间过长问题 - 简书1. 使用 webpack-bundle-analyzer 分析项目外部依赖大小# NPMnpm install --save-dev webpack-bundle-analyzer# Yarnyarn add -D webpack-bundle-analyzer官网显示的使用方法,需要在 webpack.config.js 内配置:const BundleAnalyzerPlugin = require('webpack-bundle-转载 2021-12-22 09:45:18 · 686 阅读 · 0 评论 -
Cookie
一、 CookieCookie是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常,它用于告知服务端两个请求是否来自同一浏览器,如保持用户的登录状态。Cookie 使基于无状态的HTTP协议记录稳定的状态信息成为了可能。 Cookie主要用于以下三个方面:会话状态管理(如用户登录状态、购物车、游戏分数或其它需要记录的信息) 个性化设置(如用户自定义设置、主题等) 浏览器行为跟踪(如跟踪分析用户行为等)二、Cookie的一些属性转载 2021-12-10 19:49:57 · 1493 阅读 · 0 评论 -
vue 引入图片路径问题
方法一.:直接将你的图片源文件放在项目目录的static或public文件夹里,然后和正常写图片路径那样写就可以了方法二:文件放在asset中,需要将路径转换为编译打包后的路径。如果是直接在img标签或者css中使用,可以直接引入路径,打包会处理但是如果是作为字符串的形式使用,需要使用request 或import的方式来引入,加入打包行列imageUrl: require('../../assets/logo.png')import img from "../../assets/lo.原创 2021-12-02 16:02:15 · 1673 阅读 · 0 评论 -
vue组件中name的使用
官方文档指出:name只有作为组件选项时起作用。我的理解就是在vue中,name属性是和组件息息相关的,只有在需要处理组件方面的问题才会牵扯到name属性。常见的几种用途1、组件递归操作vue允许组件模板调用自身,这在日常需求中也时有出现,此时我们就可以根据组件的name,来进行操作。例:<!-- 父组件 --><div class="container"> <ul> <child-tree :list="comRecursive..转载 2021-12-02 11:23:34 · 2469 阅读 · 0 评论 -
SSR 服务端渲染
官网GitHubSSR全拼是Server-Side Rendering,服务端渲染。所谓服务端渲染,指的是把vue组件在服务器端渲染为组装好的HTML字符串,然后将它们直接发送到浏览器,最后需要将这些静态标记混合在客户端上完全可交互的应用程序。左侧Source部分就是我们所编写的源代码,所有代码有一个公共入口,就是app.js,紧接着就是服务端的入口(entry-server.js)和客户端的入口(entry-client.js)。当完成所有源代码的编写之后,我们通过webpack的构建.原创 2021-11-23 10:19:27 · 2995 阅读 · 0 评论 -
前端 sqllite sql.js
SQL.js 官网翻译API DOCGitHub - 源码地址asm.js 和 Emscripten 入门介绍 - 阮一峰的网络日志编译器项目Emscripten,这个编译器可以将 C / C++ 代码编译成 JS 代码,但不是普通的 JS,而是一种叫做asm.js的 JavaScript 变体。WebAssembly 的技术,也能将 C / C++ 转成 JS 引擎可以运行的代码,WebAssembly 与asm两者的功能基本一致,就是转出来的代码不一样:asm.js 是文本,We...原创 2021-11-18 17:28:13 · 1922 阅读 · 0 评论 -
PDFium
官网 PDFium原创 2021-11-18 16:24:41 · 936 阅读 · 0 评论 -
package.json中 npm依赖包版本前的符号的意义
版本的格式major.minor.patch主版本号.次版本号.修补版本号major:新的架构调整,不兼容老版本patch:修复bug,兼容老版本minor:新增功能,兼容老版本version必须匹配某个版本如:1.1.2,表示必须依赖1.1.2版>version必须大于某个版本如:>1.1.2,表示必须大于1.1.2版>=version可大于或等于某个版本如:>=1.1.2,表示可以等于1.1.2,也可以大于1.1.2版本转载 2021-11-04 14:30:12 · 257 阅读 · 0 评论 -
import 被 webpack 编译后的代码
import 被 webpack 编译后的代码转载 2021-11-03 14:55:21 · 145 阅读 · 0 评论 -
Token登录认证
使用基于Token的身份验证方法,在服务端不需要存储用户的登录记录。大概的流程是这样的:1.前端使用用户名跟密码请求首次登录2.后服务端收到请求,去验证用户名与密码是否正确3.验证成功后,服务端会根据用户id、用户名、定义好的秘钥、过期时间生成一个Token,再把这个Token发送给前端4.前端收到 返回的Token,把它存储起来,比如放在Cookie里或者里resources?: string[];}{},value);}5.前端每次路由跳转,判断有无token。转载 2021-11-03 14:51:03 · 230 阅读 · 0 评论 -
Monorepo 管理前端项目
Monorepo转载 2021-11-03 14:46:18 · 170 阅读 · 0 评论