概念类知识点
文章平均质量分 56
马优晨
生活中的打击和挫折远比想象的更多,有时灾难又会让你的一切努力白费,也许明天我们就会死去,但如果我们还活着,在面对着种种不公和无奈过后,“明天的明天的明天,你是否会依然爱着这个世界。” 我想我会.......................
展开
-
使用throttle防止按钮多次点击
如上图所示,点击按钮,防止按钮点击多次。原创 2024-06-05 11:26:59 · 302 阅读 · 0 评论 -
TCP/IP 介绍
TCP /IP 是(注释:通信协议是对的规则的描述,只有遵守这些规则,计算机之间才能进行通信。因特网浏览器和因特网服务器均使用 TCP/IP 来连接因特网。浏览器使用 TCP/IP 来访问因特网服务器,服务器使用 TCP/IP 向浏览器传回 HTML。因特网的地址也是 TCP/IP,比如:你的因特网地址 250.250.149.19 也是标准的 TCP/IP 协议的一部分TCP/IP 指传输控制协议网际协议TControlProtocolInternetProtocol。原创 2023-07-25 15:36:53 · 1119 阅读 · 0 评论 -
正则表达式测试(一)
第三行代码 str.match(patt1) 返回一个数组,实例中的数组包含 5 个元素,索引 0 对应的是整个字符串,索引 1 对应第一个匹配符(括号内),以此类推。最后,第四个括号子表达式捕获 Web 地址指定的路径和 / 或页信息。该子表达式能匹配不包括 # 或空格字符的任何字符序列。只能重复一次该子表达式。默认情况下的圆点 . 是 匹配除换行符 \n 之外的任何字符,加上 s 之后, . 中包含换行符 \n。第二个括号子表达式捕获地址的域地址部分。子表达式匹配非 : 和 / 之后的一个或多个字符。原创 2023-07-06 17:24:26 · 965 阅读 · 0 评论 -
Sass 使用说明
CSS 样式表越来越大、 越来越复杂、越来越难以维护。这就是预处理可以提供帮助的地方。Sass 为你提供了 CSS 中还不存在的特性,例如变量、 嵌套、混合、继承和其它实用的功能,让编写 CSS 代码变得有意思。最直接的方式就是在命令行中调用 sass 命令。安装 Sass 之后,你就可以用sass命令将 Sass 编译为 CSS 了。原创 2022-11-16 20:42:21 · 361 阅读 · 0 评论 -
前端class的中括号用法
如上图所示,在上面的CSS中,可以通过class类名过滤一些元素。原创 2022-11-16 16:58:23 · 448 阅读 · 0 评论 -
SSG、SSR、CSR的区别
到页面首屏完全展示这一过程所花的时间极短,而且在页面中点击链接切换路由的操作非常顺滑,几乎页面可以达到“秒切”的效果,根本不会有卡顿等待的情况发生,这是怎么实现的呢?文档,由于代码量实在是太多,所以只保留了具有象征意义的部分代码,但不难发现,服务端渲染返回的HTML。,下面我们简单介绍一下它们各自的特点,看完之后相信你就能清晰的感受到它们的区别所在了。树的结构,使得页面成为希望成为的样子,这种渲染方式叫动态渲染,也就是平时我们所称的。在开始之前,我们先来回顾一下页面最基本的渲染流程是怎么样的?.......原创 2022-08-12 17:53:04 · 1801 阅读 · 0 评论 -
编译型语言与解释型语言的区别
什么是编译型语言和解释型语言原创 2022-07-29 17:48:35 · 480 阅读 · 0 评论 -
封装axios请求
通用能力1、正常请求该有的(跨域携带cookie,token,超时设置);2、请求响应拦截器;请求成功,业务状态码200,解析result,不要一层一层的去判断拿数据; http请求200, 业务状态码非200,说明逻辑判断这是不成功的,那就全局message提示服务端的报错 http请求非200, 说明http请求都有问题,也全局message提示报错 http请求或者业务状态码401都做注销操作3、全局的loading配置, 默认开启,可配置关闭(由于后端的问题,经常会让前端加原创 2022-05-09 18:20:16 · 3035 阅读 · 2 评论 -
前端常见封装的方法
1、复制文本复制各种自定义的文本,浏览器兼容性高const copyText = (text) => { const clipboardData = window.clipboardData; if (clipboardData) { clipboardData.clearData(); clipboardData.setData("Text", text); return true; } else if (document.execCommand) {原创 2022-04-29 23:13:16 · 2128 阅读 · 1 评论 -
媒体查询media的3种引入方式
利用@media引入在<style>...</style>标签里使用@media来实现媒体查询<style> @media (min-device-width: 300px) and (max-device-width: 500px) { #box { width: 100px; height: 100px; background-color: cadetblue; } }原创 2022-04-09 19:13:28 · 619 阅读 · 0 评论 -
前端的布局方式
自适应布局布局特点:不同设备对应不同的HTML 局部自适应总结:不同的设备用不同的页面或者局部缩放响应式布局布局特点:确保一个页面在所有的终端上,都能显示出令人满意的效果总结:一套方案,处处运行设计思路:使用%或者rem作为单位rem弹性布局布局特点:确为了保证在各种屏幕上的不失真,就要根据实际屏幕宽度做等比例换算总结:一套方案,使用不同的尺寸,分辨率的视口、都能呈现出较好的效果设计思路:使用%或者rem作为单位flex的特殊写法.原创 2022-04-09 18:19:57 · 163 阅读 · 0 评论 -
项目开发流程规范
需求阶段需求文档(背景、收益、详细需求、原型图、A/B实验、埋点) 需求评审(PM-产品经理、RD-研发、QA-测试) 遗留问题修改再次评审研发阶段根据原型图拆分功能模块 评估开发联调排期 技术方案设计 业务代码实现测试阶段测试用例评审 研发自评 正式提测演示 修复BUG上线阶段打包部署 线上验证 数据收集 效果回归学习建议先学使用,在学原理 对比学习,构建体系 动脑动手,大量实践 良好心态,不断进步...原创 2022-04-09 18:01:48 · 322 阅读 · 0 评论 -
npm的使用技巧
一、基本概念npm 全称为 Node Package Manager,是一个基于 Node.js 的包管理器,也是 Node.js 社区最流行、支持的第三方模块最多的包管理器。它的初衷就是让开发人员更容易分享和重用代码。npm 提供了命令行工具,其主要功能是管理Node.js包,包括安装、更新、删除、查看、搜索、发布等。 npm 最初只是Node.js 的包管理器,但随着前端技术的不断发展,它的定位变成了广义的包管理器,可以实现JavaScript、React、Vue、Gulp、移动开发等包管理,原创 2022-01-29 12:04:28 · 2639 阅读 · 0 评论 -
判断手机浏览器还是桌面浏览器
(1)使用navigator.userAgent最简单的方法就是分析浏览器的 user agent 字符串,它包含了设备信息。JS 通过navigator.userAgent属性拿到这个字符串,只要里面包含mobi、android、iphone等关键字,就可以认定是移动设备。if (/Mobi|Android|iPhone/i.test(navigator.userAgent)) { // 当前设备是移动设备}// 另一种写法if ( navigator.userAgent.m原创 2021-10-13 17:54:23 · 1674 阅读 · 0 评论 -
将16进制的颜色转为rgb颜色
考虑到通用性, 就定义一个colorToRGB函数吧,将16进制的颜色值当做参数传入。 首先需要将参数转为字符串类型的,'color = ""+color;' 检查第一个字符是否为"#", 如果第一个字符为“#”,截取“#”之后的字符,判断当前color的位数,需要考虑到色值是可以简写为3位的,如果是3位颜色值,每一位重复一次代表一个颜色,例如#fff,其实是#ffffff的简写,然后分别取得rgb三个色值:color1, color2, color3。 到这一步之后,就没什么了,...原创 2021-10-12 10:39:48 · 4190 阅读 · 1 评论 -
SDK 和 API 有什么区别
贴近生活讲讲两者的关系:有一杯密封饮料,它的名字叫做“SDK”。饮料上插着吸管,吸管的名字叫“API”。把你叫做“XX系统”。如果你想喝到SDK里的饮料(让系统拥有SDK中的功能),你必须通过API这根吸管来实现(通过API连接你的系统和SDK工具包),否则你就喝不到饮料。所以:SDK=放着你想要的软件功能的软件包API=SDK上唯一的接口讲个小故事:研发人员A开发了软件A,研发人员B正在研发软件B。有一天,研发人员B想要调用软件A的部分功能来用,但是他又..原创 2021-07-06 15:38:00 · 244 阅读 · 0 评论 -
编译时和运行时区别
编译时编译时顾名思义就是正在编译的时候.那啥叫编译呢?就是编译器帮你把源代码翻译成机器能识别的代码.(当然只是一般意义上这么说,实际上可能只是翻译成某个中间状态的语言.比如Java只有JVM识别的字节码,C#中只有CLR能识别的MSIL.另外还有啥链接器.汇编器.为了了便于理解我们可以统称为编译器)那编译时就是简单的作一些翻译工作,比如检查老兄你有没有粗心写错啥关键字了啊.有啥词法分析,语法分析之类的过程.就像个老师检查学生的作文中有没有错别字和病句一样.如果发现啥错误编译器就告诉...原创 2021-06-15 16:03:06 · 6018 阅读 · 0 评论 -
一方包,二方包,三方包的区别
一方包(也称一方库): 本工程中的各模块的相互依赖二方包(也称二方库): 公司内部的依赖库,一般指公司内部的其他项目发布的jar包三方包(也称三方库): 公司之外的开源库, 比如apache、ibm、google等发布的依赖...原创 2021-04-07 21:54:55 · 3196 阅读 · 0 评论 -
微前端和原子设计
「1」微前端 (Miro frontends)"微前端" 应该是我们 2020 年里听的最多的一个前端技术。现在非常多的大厂都在尝试这个新技术来解决大型前端项目中的问题。虽然我们前端开发中有模块化(modular)的组件(components),但是它相比后端的 “微服务” 是大有不同的。在了解 “微前端” 之前,我们先给没有接触过后端的同学科补一下后端的 “微服务” 知识。微服务是什么?微服务是一种开发软件的架构和组织方法,其中软件由通过明确定义的 API 进行通信的小型独立服务组成。这些服.转载 2021-03-31 16:48:08 · 553 阅读 · 0 评论 -
HTML框架
一、框架实例垂直框架水平框架混合框架框架结构标签(<frameset>)注意事项二、内联框架添加 iframe 的语法<iframe src="URL"></iframe>URL 指向隔离页面的位置。Iframe - 设置高度和宽度height 和 width 属性用于规定 iframe 的高度和宽度。属性值的默认单位是像素,但也可以用百分比来设定(比如 “80%”)。Iframe - 删除边框frameborder 属性规.原创 2021-03-25 10:50:15 · 249 阅读 · 0 评论 -
Error: listen EADDRINUSE: address already in use :::8080
这个问题想必很多人都遇到过,端口被占用了;这里说一下MAC端口占用的处理办法:(1)第一步// 查看被占用进程的pidsudo lsof -i:8080查找占用8080端口的pid(2)第二步举例:查找到pid 是54939(3)第三步sudo kill 54939然后再检查是否杀死sudo lsof -i:8080...原创 2020-11-17 17:10:35 · 6686 阅读 · 0 评论 -
gulp,grunt,bower,feoman,fis 简单说明
grunt说明(1)grunt网址:https://www.gruntjs.net/getting-started(2)说明:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。(3)安装gruntsudo npm install -g grunt-cli找个文件夹npm initsud原创 2020-11-16 21:06:08 · 210 阅读 · 0 评论 -
前端基础知识2
作用域理解就是一块"地盘", 一个代码段所在的区域它是静态的(相对于上下文对象), 在编写代码时就确定了分类全局作用域函数作用域没有块作用域(ES6有了)作用隔离变量,不同作用域下同名变量不会有冲突<script type="text/javascript">/* //没块作用域 if(true) { var c = 3 ...原创 2018-10-29 18:38:12 · 182 阅读 · 0 评论 -
前端基础知识1
今天不知道什么原因心血来潮,说一说JS中最最最最最基本的概念吧,但是很多人可能不知道喔。自己有个小计划就是希望三年内写一门自己的语言,虽然已经有JS了。因为我姓马,所以如果有了这门语言我会起名叫MS。废话不多说,还是写心得吧。基础知识(1)数据类型分类基本(值)类型String: 任意字符串Number: 任意的数字boolean: true/falseundefined...原创 2018-10-26 15:31:10 · 294 阅读 · 0 评论 -
什么是框架?
在编程领域,软件框架是指一种抽象形式,它提供了一个具有通用功能的软件,这些功能可以由使用者编写代码来有选择的进行更改,从而提供服务于特定应用的软件。软件框架提供了一种标准的方式来构建并部署应用。软件框架是一种通用的、可复用的软件环境,它提供特定的功能,作为一个更大的软件平台的一部分,用以促进软件应用、产品和解决方案的开发工作。软件框架可能会包含支撑程序、编译器、代码、库、工具集以及 API,它把...翻译 2018-10-10 09:29:05 · 12488 阅读 · 0 评论 -
基于 Token 的身份验证:JSON Web Token
转载自:https://ninghao.net/blog/2834&amp;amp;nbsp;最近了解下基于 Token 的身份验证,跟大伙分享下。很多大型网站也都在用,比如 Facebook,Twitter,Google+,Github 等等,比起传统的身份验证方法,Token 扩展性更强,也更安全点,非常适合用在 Web 应用或者移动应用上。T...转载 2018-10-18 14:14:53 · 1148 阅读 · 0 评论 -
XHTML、HTML4,HTML5 之间的区别
这几个都是W3C负责制定的一个标准,用于网页内容的标签。HTML4是html标准中比较成熟的一个版本,使用时间比较长,也是现今大部分网页遵循的标准。XHTML 1.0标准为了规范HTML,W3C结合XML制定了XHTML 1.0标准,XHTML是能满足XML要求的HTML。XHTML 2.0标准不兼容HTML,现已被证明不符合潮流而淘汰HTML5的标准HTML5是htm...原创 2018-08-08 10:11:32 · 3745 阅读 · 0 评论 -
JavaScript垃圾回收机制理解
JS的内存的生命周期:1- JS运行程序 分配你所需要的暂时使用内存大小。2- JS运行程序 在每次创建字符串、对象的时候,程序都会分配新内存来存储那个实体。3- JS运行程序 对于不需要使用的内存将其释放。垃圾回收机制所存在的意义在不需要字符串、对象的时候,需要释放其所占用的内存,否则将会消耗完系统中所有可用的内存,造成系统崩溃内存泄漏由于疏忽或错误造成程...原创 2018-07-10 13:56:08 · 1065 阅读 · 1 评论 -
JS页面跳转的各种形式
普通跳转页面const url = “/XXX/YYYYY/MMMMM”;window.location.href = url ;普通跳转打开新页面const url = “/XXX/YYYYY/MMMMM”;window.open(url, “_blank”, “”);vue页面跳转// 字符串this.$router.push(’/home/first’)// 对...原创 2018-11-27 11:14:38 · 271 阅读 · 0 评论 -
如何解决JavaScript中0.1+0.2不等于0.3
原文转载自:https://www.cnblogs.com/weshare/archive/2018/02/20/8455470.htmlconsole.log(0.1+0.2===0.3)// true or false??在正常的数学逻辑思维中,0.1+0.2=0.3这个逻辑是正确的,但是在JavaScript中0.1+0.2!==0.3,这是为什么呢?这个问题也会偶尔被用来当做...转载 2019-01-03 17:27:51 · 1595 阅读 · 0 评论 -
JavaScript splice() 方法使用
定义:splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。注释:该方法会改变原始数组。参数解释:1.增加数据:在本例中,我们将创建一个新数组,并向其添加一个元素:<script type="text/javascript">var arr = new Array(6)arr[0] = "George"arr[1] = "John"arr[2]...原创 2019-03-24 10:23:15 · 1323 阅读 · 0 评论 -
js基本数据类型和复杂数据类型的区别
js基本数据类型和复杂数据类型的区别为:let b = { age: 10}let a = b;a.age = 20;console.log(a); //{ age: 20 }//基本数据类型let b = 10function change(info) { info=20;}//info=b;基本数据类型,拷贝的是值得副本,二者互不干扰change...原创 2019-05-27 09:41:53 · 4106 阅读 · 0 评论 -
HTML5语义化的理解
语义化意味着顾名思义,HTML5的语义化指的是合理正确的使用语义化的标签来创建页面结构,如 header,footer,nav,从标签上即可以直观的知道这个标签的作用,而不是滥用div。...原创 2019-05-27 09:45:49 · 4298 阅读 · 0 评论 -
HTML中的Content-Type的类型
Content-Type的类型如下:常见的媒体格式类型如下:text/html : HTML格式text/plain :纯文本格式text/xml : XML格式image/gif :gif图片格式image/jpeg :jpg图片格式image/png:png图片格式以application开头的媒体格式类型:application/xhtml+xml :XHTML格...原创 2019-05-23 11:49:15 · 29380 阅读 · 0 评论 -
把一个div的属性都打印出来
如何把一个简单的div元素的属性都打印出来?这里有一段神奇的代码var docu = document.createElement('div')var str = '';for(var key in docu){ str += key+'';}console.log(str);效果图:...原创 2019-07-08 15:05:47 · 1112 阅读 · 0 评论 -
回调函数和普通函数有什么区别?
普通函数与回调函数主要是在调用方式上有区别:1、对普通函数的调用:调用程序发出对普通函数的调用后,程序执行立即转向被调用函数执行,直到被调用函数执行完毕后,再返回调用程序继续执行。从发出调用的程序的角度看,这个过程为“调用–>等待被调用函数执行完毕–>继续执行”。2、对回调函数调用:调用程序发出对回调函数的调用后,不等函数执行完毕,立即返回并继续执行。这样,调用程序执和被调用...转载 2019-08-06 10:07:11 · 13745 阅读 · 0 评论 -
Virtual DOM和diff算法 概念理解
(1)vdom是什么?vdom是虚拟DOM(Virtual DOM)的简称,指的是用JS模拟的DOM结构,将DOM变化的对比放在JS层来做。换而言之,vdom就是JS对象。如下DOM结构:<ul id="list"> <li class="item">Item1</li> <li class="item">Item2</l...原创 2019-08-22 17:37:53 · 489 阅读 · 0 评论 -
前端this的理解
前端的this,是会发生变化的。this主要四种常见方式有:this 永远指向函数运行时所在的对象,而不是函数创建时所在的对象。匿名函数和不处于任何对象中的函数,this指向window.call,appply,with 指的this 是谁就是谁。普通函数调用,函数被谁调用,this就指向谁。...原创 2018-03-19 09:27:12 · 5651 阅读 · 0 评论