![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
web前端技术
文章平均质量分 90
和你一起去月球
工作10年+,先后从事后端开发,前端开发,前端leader,项目管理,产品,技术leader等工作。阿里云专家博主,分享全栈开发相关知识,以梦为马,以汗为泉,不忘初心,不负韶华。
展开
-
开发一个自己的VSCode插件
首先,需要在pageage.json定义,所需要的命令,如下图所示:然后需要配置,在编辑区域选中,进行转换。配置如下所示:在这里定义完所有的自定义的命令之后,就需要在入口文件(extension.ts)写每个命令对应的逻辑代码。原创 2024-08-05 20:00:00 · 1088 阅读 · 21 评论 -
前端代码常见的安全缺陷(一)
在使用标签中使用target属性,当值设置为“_blank”攻击者会针对`window.opener`API进行恶意行为的攻击,有可能导致钓鱼安全漏洞问题。例如,以下示例使用的`target`属性,但是没有设置`rel`属性。原创 2024-04-22 09:27:03 · 2109 阅读 · 24 评论 -
写一个Chrome浏览器插件(manifest v3)
可以通过chrome api 对background.js 和 popup 页面的js部分进行通信,background.js 可以一直接受content.js发送过来的消息,因为background.js 一直在后台运行,而content.js 只有在popup页面打开的时候才能接收到对应的消息。最好参考chrome 官方文档,360的文档,里面的内容并不是最新的,是manifest v2 版本,v3 和 v2 还是有一些差异的,在开发的时候注意以下manifest对应的版本。原创 2023-09-26 07:00:00 · 1282 阅读 · 85 评论 -
Angular 调试工具(Augury)
1、简介Augury是Chrome& Firefox Developer Tools扩展,用于调试Angular 2+应用程序。github地址是:https://github.com/rangle/augury您可以从以下位置安装扩展:Chrome 应用商店Fixfox 附加组件Augury 源码编译2、检验代码Augury仅适用于Angular 2+应用程序。一个硬性要求是Angular应用程序在开发模式下运行,这是由于安全限制。如果您打算阅读原始源代码,那么生成源映射是个好主意。原创 2023-07-07 07:00:00 · 12609 阅读 · 97 评论 -
PNPM(高性能的npm)介绍
pnpm代表performant npm,即高性能的npm。Pnpm 是一种快速、磁盘空间高效的包管理器:快,比npm等其他包管理器快2倍左右。高效,中的文件从单个内容可寻址存储器链接。非常适合monorepos.严格,一个包只能访问它的中指定的依赖项。确定行,有一个名为的锁文件。可以作为Node.js版本管理器。(类似于nvm等工具)支持多平台(Windos、Linux、macOS)久经考验自2016年以来,各种规模的团队都在生产中使用。原创 2023-06-28 07:00:00 · 4386 阅读 · 92 评论 -
JavaScript数组遍历的各种方式
for...of语句在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。forEach() 不会改变其调用的数组,但是,作为 callbackFn 的函数可以更改数组。这只是一个大概的测试结果,影响测试的结果也包括运行数据的大小,运行抽样数据的大小等因素。map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。,而且不能继续链式调用。原创 2023-06-26 07:00:00 · 2217 阅读 · 89 评论 -
Element-ui 滚动条美化
有时候为了使界面滚动条,各个浏览器的滚动条能保持一致,这样我们的项目避免在各个浏览器存在差异导致UI界面的不一致,这时候我们就可以考虑使用通用组件的方式,对各个需要滚动的页面,或者弹出窗口添加统一的组件进行包裹,来保证滚动效果在各个浏览器中能有更好的体验效果。最后我们看到各个浏览器中滚动条的效果,基本上各个浏览器的表现效果是一致的,添加通用组件,默认情况下滚动条是不显示的,只有鼠标移动过去才会进行显示,整体上效果和用户体验会更好。在源码顶部,看到有一个链接地址,是参考另一个插件的实现,如下所示。原创 2023-06-21 07:00:00 · 6662 阅读 · 79 评论 -
web存储(Storage)
Web Storage API 提供了存储机制,通过该机制,浏览器可以安全地存储键值对,比使用 cookie 更加直观。原创 2023-06-17 00:21:47 · 7670 阅读 · 72 评论 -
学习Angular的编程之旅
Angular 是一个应用设计框架与开发平台,旨在创建高效而精致的单页面应用。Angular 是一个基于TypeScript构建的开发平台。它包括:一个基于组件的框架,用于构建可伸缩的 Web 应用一组完美集成的库,涵盖各种功能,包括路由、表单管理、客户端-服务器通信等一套开发工具,可帮助你开发、构建、测试和更新代码借助 Angular,无论单人项目还是企业级应用,你都能获得平台带来的优势。原创 2023-06-16 07:00:00 · 3652 阅读 · 35 评论 -
跨站点脚本(XSS)的介绍
跨站点脚本 (XSS) 攻击是一种注入,其中 恶意脚本被注入到其他良性和受信任的脚本中 网站。当攻击者使用 Web 应用程序执行以下操作时,会发生 XSS 攻击 发送恶意代码(通常以浏览器端脚本的形式)到 不同的最终用户。允许这些攻击成功的缺陷是 相当普遍,并且发生在 Web 应用程序使用来自 用户在其生成的输出中,而无需对其进行验证或编码。攻击者可以使用 XSS 向毫无戒心的人发送恶意脚本 用户。最终用户的浏览器无法知道脚本应该 不可信,并将执行脚本。原创 2023-06-14 07:00:00 · 3032 阅读 · 65 评论 -
React 基本介绍
在组件化开发的越来越流行的趋势下,我们应将局部的逻辑进行封装,通过尽可能少的接口与其他组件进行组装和交互,可以将逻辑大的项目逻辑拆成一个个小的相对独立的部分,以减少开发和维护的负担。的一切都是基于组件的,组件有着良好的封装性,组件可以让代码的复用和测试变得更加简单。,不需要组件的生命周期,这类组件可以写成一个纯函数,它只是根据输入生成组件,没有其他的副作用。节点的添加,删除或修改,事件的监听,回调,销毁需要处理,会导致大量。组件的生命周期包括组件初始化,更新,卸载对应的钩子函数。原创 2023-06-09 07:00:00 · 4361 阅读 · 55 评论 -
CSS 水平垂直居中的方式
在实际使用最好测试下最低版本是否支持对应的实现方式,尽量选各个浏览器支持比较好的,或者最常见的实现方式。浏览器兼容性:最新主流浏览器基本上兼容,对于老版本浏览器可能会有兼容性问题。兼容性:基本都支持,只是书写起来比较繁琐,多层嵌套。浏览器兼容性:主流浏览器基本上都支持的。原创 2023-06-02 07:00:00 · 1308 阅读 · 65 评论 -
浏览器跨域的配置
在我们进行前端开发的时候,我们请求的后端的接口可能是在不同的域名之下,就会产生跨域的问题,跨域是浏览器本身从安全策略(同源策略)考虑的,默认会限制跨域的请求,因为使用不当,可能会导致一些安全问题,包括用户隐私数据的泄露,而在实际开发中,我们可能需要有跨域的需求,那么从前端的角度怎么去解决呢?原创 2023-06-01 00:24:41 · 9990 阅读 · 48 评论 -
ECMAScript 6 新特性详解
ECMAScript 6,也称为ECMAScript2015,是ECMAScript标准的最新版本。ES6是该语言的一次重大更新,也是自2009年ES5标准化以来该语言的首次更新。目前正在主要的JavaScript引擎中实现这些功能。有关ECMAScript 6语言的完整规范,请参阅ES6标准。箭头函数类增强对象字面量模板字符串解构赋值默认参数、剩余参数、展开操作符let、constIterators(迭代器)、for ofGenerators(生成器)原创 2023-05-25 07:30:00 · 1158 阅读 · 8 评论 -
谷歌WebGPU的发布,web图形化的新曙光。
WebGPU是W3C的“网络GPU”社区小组合作的成果,其中包括Mozilla、苹果、英特尔和微软等大公司的贡献。经过六年的开发(90个贡献者,2000个提交,3000个问题),从2017年的初步设计开始,第一个实现现在可以在Chrome中使用,对Firefox和Safari的支持正在进行中。经过多年的开发,Chrome团队推出了WebGPU,它允许在网络上进行高性能的3D图形和数据并行计算。Chrome团队很高兴地宣布,WebGPU现在默认可以在Chrome 113中使用,目前正在Beta版本中。原创 2023-04-08 18:08:15 · 728 阅读 · 0 评论 -
Vue-devtools、React Developer Tools安装
vue的devtools,React的React Developer Tools的安装原创 2022-08-17 16:06:50 · 470 阅读 · 2 评论 -
tauri 开发
tarui开发的基本教程原创 2022-08-16 21:38:52 · 5517 阅读 · 1 评论 -
JavaScript中JSON.stringify()
JSON.stringify()方法可以js对象转换成json字符串。原创 2021-03-07 21:17:23 · 2069 阅读 · 0 评论 -
ant design 日期月份区间选择
ant design(3.x) 月份区间的选择import React, { Component } from 'react';import { DatePicker } from 'antd';export default class extends Component {constructor(props) { super(props); this.state = { monthRange: '' } } handleChange = value =&原创 2020-10-20 10:24:23 · 3459 阅读 · 0 评论 -
事件当做参数传递导致浏览器崩溃
导致浏览器崩溃谷歌浏览器:火狐浏览器:safari浏览器中:直接导致内存爆满,风扇一直在响原因因为onClick事件中直接绑定了一个方法。<Button onClick={get()}> 查询 </Button>const get = (params) => { axios(Object.assing(params, {...})) // 再次把click默认事件dispatchConfig一并传入,导致页面崩溃。} ...原创 2020-09-05 12:31:13 · 204 阅读 · 0 评论 -
sentry 服务的搭建
sentry 服务的搭建一、环境在Mac环境下进行的搭建。安装需要docker的环境,可以点击下面文本进行下载docker的下载地址安装完毕之后,可以在下面网站中申请一个dockeriddockerid申请地址申请的时候需要翻墙,否则点击“注册”按钮都一直是无法点击的。(注)查看版本$docker --versionDocker version 19.03.4, bui...原创 2019-10-28 18:23:03 · 2169 阅读 · 1 评论 -
angular从iframe里面调用父页面的controller的方法
从iframe中调用父页面的controller中方法1、从当前页面中获取对应的controller,可以通过一下方法去获取。angular.element(xxx).scope()2、获取父页面的controllerwindow.parent.angular.element(xxx).scope(); // 未能获取window.parent.$(‘div[ng-controller...原创 2019-10-24 19:43:16 · 1820 阅读 · 3 评论 -
Cannot find module 'webpack'
npm run dev,报错,昨天还运行好好的,然后执行了 git clean xfd, 然后本地无法启动> node build/dev-server.jsinternal/modules/cjs/loader.js:651 throw err; ^Error: Cannot find module 'webpack' at Function.Module...原创 2019-10-15 11:07:55 · 453 阅读 · 0 评论 -
改善Java Script程序的建议(二)
1、数组长度的有限性和无限性 var myArray = []; myArray.lenght; // 0 myArray[10000] = true; myArray.length // 10001 根据 ECMAScript 标准,数组的下标必须是大于或等于0且小于2^32 -1 的证书。 我们可以指原创 2016-01-27 16:36:44 · 425 阅读 · 0 评论 -
改善Java Script程序的建议(一)
1、减少全局变量的污染 定义全局变量的三种方式: (1)在任何函数外面直接执行 var 语句。 var f = 'value'; (2)直接添加一个属性对全局对象上。 window.f = 'value'; (3)直接使用为经生命的变量,以这种方式定义的全局变量被称为隐式的全局变量。 f = 'value';2原创 2016-01-27 16:25:33 · 440 阅读 · 0 评论 -
javascript深入理解js闭包
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。一、变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种:全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。Js代码 var n=999; fu转载 2016-01-27 16:15:46 · 328 阅读 · 0 评论 -
去哪儿网前端架构师司徒正美:如何挑选适合的前端框架?
前端框架不断推新,众多IT企业都面临着“如何选择框架”,“是否需要再造轮子”的抉择。去哪儿网前端架构师司徒正美分析了各主流行框架优劣点、适用场景,并针对不同规模的公司、项目给出了相应的前端技术选择方案。最近几年,前端技术迅猛发展,差不多每年都会冒出一款主流的框架。 每次新开业务线或启动新项目时,首先第一件事就是纠结:使用什么框架,重造什么轮子?我很高兴应CSDN的邀请谈我的看法。转载 2016-01-26 17:20:58 · 971 阅读 · 0 评论 -
js中apply和call方法的应用
对象的继承,就是:Function.apply(当然使用Function.call也是可以的)apply方法能劫持另外一个对象的方法,继承另外一个对象的属性Function.apply(obj,args)方法能接收两个参数obj:这个对象将代替Function类里this对象args:这个是数组,它将作为参数传给Function(args-->arguments)apply示范原创 2016-01-26 15:28:19 · 297 阅读 · 0 评论 -
Jquery 笔记(十一)
1、jQuery介绍 (1)jQuery是什么? 是一个js框架,其主要思想是利用jQuery提供的选择器查找要操作的节点,然后将找到的节点封装成 一个jQuery对象。封装成jQuery对象的目的有两个: 一是为了兼容不同的浏览器,另外,也简化了代码。 (2)编程的基本步骤 first.html原创 2016-01-26 15:19:17 · 336 阅读 · 0 评论 -
Ajax 笔记(十)
1、ajax是什么? asynchronous javascript and xml :异步的 javascript和xml。 ajax是用来改善用户体验的一种技术,其本质是利用浏览器内置的一个特殊的对象(XMLHttpRequest,一般称之为ajax对象)异步地(当ajax对象向服务器发请求时,浏览器不会销毁当前页面, 用户仍然可以对当前原创 2016-01-26 15:18:10 · 250 阅读 · 0 评论 -
select2 使用详解
构造函数:2.5.2版本:(具体详见http://select2.github.io/select2/#documentation)参数类型描述Width字符串控制宽度样式属性的Select2容器divminimumInputLengthint最小数量的字符maximumInputLengthint最大数量的字符minimumResultsForSearchInt最小数量的结果maximu...原创 2016-01-26 15:01:28 · 33455 阅读 · 16 评论 -
JAVA程序中乱码处理
1、Mysql编码问题:要更改连接数据库的url,即在原url后加上一个参数:url="jdbc:mysql://127.0.0.1:3306/xxx?useUnicode=true&characterEncoding=utf8";在建立数据库之前要保证处在一个utf8的环境,显示各个变量的编码: show variables like '%character%'; 截图如下:原创 2016-01-26 14:51:57 · 430 阅读 · 0 评论 -
浏览器Quirksmode与CSS1compat
Quirks mode(怪异模式)和Standars mode(标准模式)由于历史的原因,各个浏览器在对页面的渲染上存在差异,甚至同一浏览器在不同版本中,对页面的渲染也不同。在W3C标准出台以前,浏览器在对页面的渲染上没有统一规范,产生了差异(Quirks mode或者称为Compatibility Mode);由于W3C标准的推出,浏览器渲染页面有了统一的标准(CSScompat或称为S转载 2016-03-02 17:02:22 · 383 阅读 · 0 评论 -
React 入门实例教程(原作者: 阮一峰)
转载(http://www.ruanyifeng.com/blog/2015/03/react.html)现在最热门的前端框架,毫无疑问是 React 。上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC转载 2016-01-27 16:10:21 · 11883 阅读 · 1 评论 -
vue2+iview2 的实践
vue2+iview2 的实践vue2-iview2-admin 是基于vue2 + iview2 + axios + webpack2 为主要技术,开发的一个后台管理系统。登录界面登录进去之后的表格登录进去之后的echarts图表展示form表单展示 安装可以有多种方法进行安装。使用命令行githubFork 当前库 复制一下命令到您的目录 https://github.com/hanjia原创 2017-08-24 18:15:03 · 6468 阅读 · 20 评论 -
package.json 配置
基本详解1、devDependencies 开发环境依赖的库2、dependencies 生产环境需要依赖的库包依赖的更新:1、安装: npm install -g npm-check-updates2、检查package.json中dependencies的最新版本: ncu3、更新dependencies到新版本: ncu -u4、更新全部dependenc原创 2017-03-11 19:10:18 · 703 阅读 · 0 评论 -
velocity.js 使用示例
volevity.js 使用示例1、概述速度已经达到1.0.0。发生了三个重要变化:jquery.velocity.js已经重命名为velocity.js,因为Velocity不再需要jQuery函数。如果你仍然使用jQuery与Velocity,你不需要改变任何代码; 速度将表现得完全一样,它总是有。已经进行了两个向后不兼容的更改:1)当访问传递到begin / complete / prog原创 2017-02-15 11:27:11 · 8862 阅读 · 0 评论 -
echarts timeline 设置多个点,却只显示一个
echarts timeline 设置多个点,却只显示一个timeline :{ "data": [ "2016-10", "2016-11", "2016-12" ], "lineStyle": { "color": "#2497be" }, "controlStyle": {原创 2017-01-12 00:56:48 · 4837 阅读 · 0 评论 -
VSCODE 插件初探,顺便还有博主的写的背景图插件
原文:http://www.cnblogs.com/lianmin/p/5499266.html#dev写在前面 分享一个vscode插件background(用于改变背景)。点击直接跳到vscode插件开发步骤做vscode的插件,很久就有这个想法了,但是一直因为这样,那样的事情耽误,放弃了N次。不过确实让我对文档有了个直观的了解。上周末的时候因为测试妹纸转载 2016-12-16 22:56:29 · 2961 阅读 · 0 评论 -
史上最全的CSS hack方式一览
做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况。基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的,要知道一名好的前端,要尽可能不使用hack的情况下实现需求,做到较好的用户体验。可是啊,现实太残酷,浏览器厂商之间历史遗留的问题让我们在目标需求下不得不向hack妥协,虽然这只是个别情况。今天,结合自己的经转载 2016-05-24 13:59:17 · 482 阅读 · 0 评论