frontend
frontend
叶常落
一朝眉羽成,钻破亦在我
展开
-
chatgpt教给我的MutationObserver
我想使用油猴脚本,去给网页上的一些元素添加监听事件,但是呢,这些网页元素,在页面加载完成之后,并没有出现,也就是无法选中呢。比如说页面有一部分是通过ajax动态获取的,那么这一部分的内容的变化,通过MutationObserver可以监视到。想要在这些元素出现的时候,然后添加监听,这种情况下MutationObserver可以解决了。MutationObserver通俗的说,可以监听页面元素的变化。原创 2024-08-26 21:41:18 · 104 阅读 · 0 评论 -
window中的一些属性理解self、top、parent
很好理解,top代表着最顶层,最外层,parent代表着上一层。当然了top和parent有可能指向同一层。self 就是自身window。说明没有被嵌入iframe中。top和parent的区别。原创 2022-10-24 20:02:11 · 477 阅读 · 0 评论 -
【前端】flex布局 未完待续
20220829。原创 2022-08-29 23:39:54 · 202 阅读 · 0 评论 -
【前端】如何监听滚动事件?存疑
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。页面上的位置固定,当页面进行滚动的时候,滚动到一定程度时候,元素融入文档流。这种效果类似于吸顶,但是好像不是吸顶。可以说是吸顶的相反。2、监听滚动事件,这里存在困惑。这个效果是如何实现的?...原创 2022-08-29 22:34:59 · 560 阅读 · 0 评论 -
【前端】css如何实现箭头>?
css箭头的两种方式:border和伪元素原创 2022-08-29 21:00:57 · 582 阅读 · 0 评论 -
【前端】伪元素的postion:absolute是对哪里的?
主元素设置成relative,伪元素设置成absolute,这样伪元素的定位是基于主元素的。1、::after的使用。原创 2022-08-28 23:15:17 · 341 阅读 · 0 评论 -
【frontend】chrome devtools flex debugger
最近在F12看网页源码的时候,忽然间发现某些网站多了一个flex按钮,我一阵恍惚,竟然记不得究竟是何时出现了这个功能。在display:flex的右侧也增加了一个小菜单,点击菜单可以弹出flex-wrap在网上搜了一下,daily-dev-tips有一个简单的介绍,很基础。...原创 2022-08-16 20:26:13 · 232 阅读 · 0 评论 -
【frontend】如何横向排列?
div 默认是纵向排列的,但是很多时候我们有在一个容器内横向排列的要求。如果横向排满了再进行换行,这个如何实现呢?float: left可以使其横向排列,但是这个时候父容器好像没有撑开,如何让父容器也能够撑开呢?但是我感觉设置display:inline-block的效果更好。如何实现这种类似于标签的显示?一行依赖于内容的长度进行显示。鼠标悬浮显示全部文字如何做到?从上往下排列比较容易理解,那么从左往右排列改如何实现呢?可以在父容器里面使用display:flex。可以使用float=left进行控制吗?.原创 2022-08-16 19:50:54 · 178 阅读 · 0 评论 -
简单介绍和学习vue安全和路由的一些知识点
vue的安全性vue如何保护你https://v3.cn.vuejs.org/guide/security.html#vue-%E5%A6%82%E4%BD%95%E4%BF%9D%E6%8A%A4%E4%BD%A0虽然很多内容都是可以跳过的,但是安全相关的内容始终应该得到应有的重视。路由陆游曾经写过一首诗,叫做示儿。当然了这里的陆游和路由器的关系,就是雷锋和雷峰塔的关系一样。但是标题上的路由还不是路由器概念中的路由,而是url中的路由。示儿陆游〔宋代〕死去元知万事空,但悲不见九州同。王师原创 2022-05-03 15:09:24 · 432 阅读 · 0 评论 -
学习vue的第一天
把你的疑惑写在前面:组件本身是否能够有data()这样的函数???计算属性缓存 vs 方法??众所周知,我曾经学习过一点vue,对vue也算是略懂。可惜士别三日,必然忘记,现在的我根本记不得vue是什么了,今天就是我学习vue的第一天。愿山河无恙,岁月静好,吾vue技术必有所成。魏晋时期的杜预曾经有一篇文章,我的特别喜欢。vue的安装方式,我最喜欢cdn,因为我不是在生产环境使用,使用cdn方便快捷。然后粗略的过一下vue的教程目录。基本上比较简单,只有组件化这块我不太理解。所以重点就放在原创 2022-05-03 11:46:56 · 411 阅读 · 0 评论 -
数据可视化
获取数据,可以是网上的数据,也可以是自己拉数据数据清洗数据分析数据可视化数据分析和可视化是非常密切的,通过可视化能够更好的了解业务的增长规律,业务发展情况。数据可视化可视化是我一直想涉足的一个领域,常用的工具用excel, numbers,echarts,python,mysql等等。...原创 2019-07-28 15:40:53 · 489 阅读 · 0 评论 -
there are so many javascript library
关键词:sweetalertsweetalertwhat is sweetalert?A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript’s popup boxes. Zero dependencies.it’s good, but i don’t understand why there so many doll become sweetalert’原创 2022-03-19 18:24:47 · 780 阅读 · 0 评论 -
How to display images in the JavaScript console of the Browser & how loop through an object?
https://ourcodeworld.com/articles/read/457/how-to-display-images-in-the-javascript-console-of-the-browserIn this article, i will introduce two things:1、how to show image in browser console2、How to Loop Through an Object in JavaScript第一部分:在console里面显示图片原创 2022-03-19 17:20:00 · 389 阅读 · 0 评论 -
noise函数的使用
使用noise画waves效果。原创 2022-03-13 23:29:58 · 642 阅读 · 0 评论 -
lodash和debounce
lodash是什么?https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.jsA modern JavaScript utility library delivering modularity, performance & extras.debounce刚才在写golang我刚才进入心流的状态了, 现在是上午9:36,但是我当时忽然觉得时间好像是中午了。我写了个笔记结果发现有xss注入漏洞,所以我干脆放开了,直接变成了一个html原创 2022-03-13 22:24:14 · 1324 阅读 · 0 评论 -
the next generation block styled editor -- eidtor.js
what’s editor?Next generation block styled editor.Free. Use for pleasure.Editor.js is a block-style editor for rich media stories. It outputs clean data in JSON instead of heavy HTML markup. And more important thing is that Editor.js is designed to be A原创 2022-03-13 22:08:34 · 99 阅读 · 0 评论 -
代理proxy&网络代理自动发现wpad&代理自动配置pac三个概念解析
这里使用代理不是目的,抓包和修改请求和响应数据才是目的,使用代理只是为了实现抓包这个目的。无代理模式数据直来直往,浏览还可以通过devtools查看到接口的请求和响应数据,但是客户端无法查看和修改数据,用时候出现问题,不知道是接口问题还是客户端问题。代理模式在实际的使用场景就是测试的过程中需要抓包,常用的抓包工具例如Charles和Fiddler都是以代理的模式进行工作的。但是这个时候又出现了一个问题,代理切换问题,尤其是在安卓手机上,每次我都需要手动修改安卓手机的网络配置,这个过程的痛苦只有原创 2021-04-01 19:51:28 · 2773 阅读 · 1 评论 -
vue基础入门-应用 & 组件实例
https://v3.cn.vuejs.org/guide/instance.html#%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E5%BA%94%E7%94%A8%E5%AE%9E%E4%BE%8B应用 & 组件实例又到了我不太理解的地方,再上一篇文章中,我好不容易把组件是什么给弄明白了,这里我又遇到了新的概念。生命周期示意图,先混个脸熟模版语法v-htmlv-ifv-onv-bind:href缩写:v-bind<a :href="ur原创 2022-03-12 19:02:11 · 1077 阅读 · 0 评论 -
vue.js中的组件是什么?
我已经知道了vue是什么,但是我还不清楚vue中的组件是什么,所以本文的核心就是要搞清楚vue中组件的概念。我非常认可树形结构的概念,而且我认为树是这个世界的抽象,列表和集合很简单,也很容易理解,但是树会稍微比列表和集合复杂一些。根据vue官方文档的说明:组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:下面的例子是一个简单的关于组件的使用方式的介绍。但是我现在有一个疑惑,我定义的原创 2022-03-12 13:03:18 · 882 阅读 · 2 评论 -
vue.js tutorial for beginner [Is it possible for us to learn vue.js in a minute?]
下面的几个概念是我已经有一定基础的概念:htmlcssjavascriptbootstrapjqueryreact小程序本文将记录我开始学习vue的过程。学习参考:https://v3.cn.vuejs.org/guide/introduction.html练习环境:https://codepen.io/team/Vue/pen/KKpRVpx名词理解:声明式渲染:Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统响应式:变量的变化会反应在页面上原创 2022-03-06 09:13:36 · 242 阅读 · 0 评论 -
tampermonkey脚本header介绍
本文简单介绍了,tampermonkey是什么?如何使用tampermonkey?tampermonkey脚本中的header的概念。原创 2022-03-02 21:18:40 · 987 阅读 · 0 评论 -
分享个提高自己审美的网站
icons8https://icons8.com/icon/set/logos/color多逛逛好的网站,熏陶下审美观。原创 2022-02-11 23:17:40 · 181 阅读 · 0 评论 -
快速生成插画
本文转载自https://github.com/ant-design/ant-design/blob/master/docs/spec/illustration.zh-CN.md问题:海兔是开源了,但是能不能商用呢? 项目背景图形化是品牌识别度的关键核心元素,在互联网产品,线下物料中使用中无处不在。与单纯的文案信息不同,图形化在直观描述固有信息的同时塑造情感背景,使用户更具沉浸感和共情性。提升产品用户体验的同时来完成商业目标。图形化的风格缤纷复杂,插画师的个人风格明显,不同的设计师在图形转载 2022-02-11 23:01:24 · 356 阅读 · 0 评论 -
阿里前端开源的一些产品
阿里的前端真的很强,在国内应该是TOP100的团队了。这里罗列下阿里(蚂蚁)前端开源的一些产品。开源产品虽好,但是使用者也应该明白,开源不足托付以信任。君还记得当初圣诞节的彩蛋吗?这种事情应该铭记于心。我想我最先应该是从antd了解的。然后跟着antd,逐步了解其开源的其他产品。antd ant designant design: An enterprise-class UI design language and React UI libraryantv ant visionhttps://原创 2022-02-11 22:10:44 · 531 阅读 · 0 评论 -
JSON的历史
很久很久以前,大概是在编程界的远古时期吧,人们通过xml交换业务数据。很多工作都建立在xml和类似于xml的数据结构之上,例如html。【后面我会再写一篇博客专门讲xml的历史,这里就不多说了】人们就这样用啊,用啊,有人习惯了,有人不习惯但是没有更好的解决方案,直到有人不习惯且提出了更好的解决方案。JSON是什么JSON是一种数据格式JSON的诞生Douglas Crockford...原创 2020-05-04 16:24:11 · 899 阅读 · 1 评论 -
react的一些概念
fetch从服务端获取数据可以使用fetch,但是当网络传输较慢或者数据较大的时候,长时间获取不到数据,用户可能很困惑,这个时候可以添加loading的功能。https://loading.io/https://css-tricks.comhttps://animejs.com/formformik受控组件非受控组件如何热更新?我的一个痛点,就是每次修改代码都要重新编译,怎么能...原创 2020-05-01 19:00:48 · 195 阅读 · 0 评论 -
react领域里面jsx中的style的值为什么放到了{}中
我的疑问是:jsx中的style为什么不是像html中写字符串?而是使用javascript object?同类提问:关于 React 为什么使用 JS Object 代替 CSS 来创建样式?答案:我的感觉是动态和灵活。很高兴我能在搜索答案之前想到这一点。基于字符串修改css和基于javascript Object修改css的难度根本不再一个级别。来自react文档的说明:The...原创 2020-04-24 16:56:34 · 330 阅读 · 0 评论 -
React教程
React 教程系列https://www.youtube.com/watch?v=DLX62G4lc44说实话,这个视频教程是Awesome级别的。但最好你本地有npm webpack babelCourse Contents ⭐️⌨️ (0:00:00) Course Introduction & Philosophy⌨️ (0:05:22) What we’ll be...原创 2020-04-24 14:29:36 · 494 阅读 · 0 评论 -
nodejs的一些玩法
node的一些玩法怎么稳定的部署node.js项目npm install pm2 -g pm2可以完全掌控程序的生命周期,创建,删除,查看等。pm2 start app.js 开启一个应用进程http://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/一个常见的需求时,在进程崩溃或者系统重启后,我的应用进程可以自动唤起。pm2是...原创 2019-08-10 08:35:11 · 269 阅读 · 0 评论 -
使用node的pm2管理相关进程
安装pm2, npm install pm2pm2 start app.js 开启进程pm2 log查看日志pm2 stop 关闭进程原创 2019-05-27 21:59:28 · 823 阅读 · 0 评论 -
【node】之nvm的使用
nvm是什么?你可以把nvm理解为python里面的virtualenv如果想在同一台机器,同时安装多个版本的node.js,就需要用到版本管理工具nvm。安装nvm使用git克隆下来cd ~/ from anywhere then git clone https://github.com/nvm-sh/nvm.git .nvm切换到指定分支cd ~/.nvm and check ...原创 2019-05-10 00:08:13 · 545 阅读 · 0 评论 -
npm 使用说明
npm audit可以用来审计代码,如果有安全问题,可以使用npm audit fix进行修复钩子,在提交代码的时候会触发“precommit”: “npm run lint”原创 2019-08-09 12:50:25 · 318 阅读 · 0 评论 -
前端使用js发起http请求的几种方法
通用的一些流程要判断http返回码要判断body里面业务返回码是否能够跨域是否能够携带Cookiefetchhttps://scotch.io/tutorials/how-to-use-the-javascript-fetch-api-to-get-dataaxiosajaxXMLHttpRequestrequest一种比较可行的方案是在utils里面...原创 2018-10-27 21:08:36 · 30089 阅读 · 1 评论 -
在react中使用定时器
定时器的应用场景:支付订单的倒计时前端的时钟轮训接口这里涉及到了lifecycle的使用 componentDidMount() { this.timerID = setInterval( () =&gt; this.tick(), 1000 ); } componentWil...原创 2018-10-27 11:08:09 · 6811 阅读 · 0 评论 -
create-react-app第一步
教程 https://www.youtube.com/watch?v=Ke90Tje7VS0react只是一个view层次的库babel是什么?babel在react里面的的作用是什么?将jsx转换为js虽然没有直接使用React,但是为什么还要引入呢?我们的react应用代码里面一般都会有 用来引入React的语句,虽然在代码表面看来没有直接使用React的地方,但是当我们写下jsx...原创 2018-10-22 23:31:06 · 369 阅读 · 0 评论 -
web前端校验
前端校验非常高的频率使用到正则表达式。http://campus.hundsun.com/Portal/Account/Login?returnUrl=%2Fnewsdetail%2F230000214登陆界面的源码。电子邮箱正则表达式(有没有可能利用其正则表达式进行REDos呢)以字母或者数字开头第二个字母为字母数字.-_或者为空接下来是@字符接下来是原创 2017-03-11 11:07:47 · 790 阅读 · 1 评论 -
了解javascript
你可以理解为纵使本地浏览器,也可以解析javascript语言。网络上有时候不需要传送你所看到的实际数据,只要传输能够实现该效果的代码就可以了。html中加上javascript. 这样还有一个好处就是,性能分配给了用户自己去处理。原创 2016-12-18 20:38:41 · 220 阅读 · 0 评论 -
CSS层叠样式表
HTML主要控制内容CSS主要控制格式。样式表是用来指定样式信息的句法机制。之所以将CSS称为层叠样式表,是因为它可以在3个层次上进行定义。内联样式表内联样式表位于开始标签中,其设置只对该元素起作用文档样式表文档样式表位于文档的头部区域,能够作用于文档的整个主体。文档样式表的说明是作为一个元素对的内容出现的。语法格式为 选择器 {一组属性值对}例如:原创 2017-03-26 20:42:23 · 443 阅读 · 0 评论 -
一些前端常用工具的生命周期
天上一日,地下一年,地下一年,互联网十年。技术的发展真的是飞快啊,本文记录一些常用编程工具或者语言的诞生和发展。2009-2019git的诞生nodejs的诞生npm的诞生react的诞生git的诞生大约在2005年,我小学毕业了,那个暑假我要第一次去城里参加招生考试,考试的前几天我还感冒了,妈妈带着我去隔壁村卫生所输液,这是我关于当时的记忆。与此同时,Linus Torvalds...原创 2019-08-09 23:14:19 · 353 阅读 · 0 评论 -
触摸事件touchevent
触摸事件的历史:2007年乔帮主神之手iphone的发布,使得便携设备进入了每个普通人的生活。多年以后的一个秋天,也就是2013年的10月10日,touchevent被写入了w3c的提案中https://www.w3.org/TR/touch-events/, 提案中明确的提到了事件类型和事件包含的接口。直到今天,touchevent在移动端h5开发中被广泛的使用,我想我真的很尊敬乔布斯。...原创 2020-01-09 22:29:21 · 1683 阅读 · 0 评论