![](https://img-blog.csdnimg.cn/46614ca3d7aa4a91bd97091029308a18.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
文章平均质量分 67
前端文章库
Shansec~
前端领域新星创作者,专注于前端各领域技术,共同学习共同进步,一起加油!
展开
-
盘点一些惊艳一时的 CSS 属性
随着前端的不断发展,更多新的 `CSS` 属性不断加入提案,本文列举 5 个不常用但很有用且你见过也可能没见过的 `CSS` 属性,带大家领略 `CSS` 之美。原创 2023-02-01 12:29:51 · 1923 阅读 · 3 评论 -
七个 Vue 项目用得上的 JavaScript 库分享
借助开源库加速 Vue 项目的开发进度是现代前端开发比较常见的方式,平常收集一些 JavaScript 库介绍,在遇到需要的时候可以信手拈来。Vue 生态有很多不错的依赖库或者组件,是使用 Vue 开发前端的原因之一。接下来将会介绍七个 Vue 项目中会用到的 JavaScript 库。原创 2023-01-28 11:33:16 · 1480 阅读 · 5 评论 -
推荐16个前端必备的实用工具与网站
上面就是和大家分享的平时日常工作中比较实用的一些工具和网站,如果感觉对你有用的话可以收藏一下。原创 2023-01-04 23:12:48 · 742 阅读 · 0 评论 -
Vue3 Composition API: 对比ref和reactive
vue3 reactive和ref 定义响应式变量对比原创 2022-12-28 16:16:02 · 595 阅读 · 0 评论 -
谈谈我对path.resolve()的理解
前一段时间在阅读源码的时候,遇到了path.resolve(),经过请教,终于知道了这个方法的作用。这边文章用来记录自己的使用心得。原创 2022-12-22 12:05:02 · 755 阅读 · 0 评论 -
Promise难懂?一篇文章让你轻松驾驭
前端js学习中,让大家最难受的就是异步的问题,解决异步、回调地狱等问题时你必须得学会promise,对于多数前端程序员来说promise简直就是噩梦,本篇文章就是从通俗易懂的角度做为切入点,帮助大家轻松掌握promise。原创 2022-12-22 11:59:37 · 1031 阅读 · 0 评论 -
JavaScript 中哪一种循环最快呢?
究竟哪一种循环更快?答案其实是: for(倒序)最让我感到惊讶的事情是,当我在本地计算机上进行测试之后,我不得不接受 for(倒序)是所有 for 循环中最快的这一事实。下面我会举个对一个包含超过一百万项元素的数组执行一次循环遍历的例子。声明:console.time() 结果的准确度在很大程度上取决于我们运行测试的系统配置。你可以在此处对准确度作进一步了解。const million = 1000000; const arr = Array(million);console.time('⏳')原创 2021-03-20 14:01:21 · 654 阅读 · 3 评论 -
推荐 7 个 Github 上近 200k Star 的计算机学习资源,练好前端内功的秘籍!
computer-scienceStar :58kGithub 地址:https://github.com/ossu/computer-science介绍:通往计算机科学免费自学教育之路!OSSU课程是使用在线材料进行的完整的计算机科学教育。它不仅用于职业培训或专业发展。它适用于那些希望对所有计算学科具有基本概念的正确,全面的基础,以及那些拥有该学科,具有意愿和(最重要的是!)良好习惯的人,可以在很大程度上依靠自己的力量来接受这种教育来自世界各地的学习者社区。它是根据本科计算机科学专业的学位要原创 2021-02-14 10:10:41 · 1593 阅读 · 2 评论 -
推荐几个大厂的前端代码规范,你也能写出诗一样的代码!
前端代码规范代码千万行,安全第一行;前端不规范,同事两行泪。腾讯腾讯包含内容也挺多的:PC端专题:快速上手、文件目录、页面头部、通用title、通用foot、统计代码、兼容测试移动端专题:快速上手、文件目录、页面头部、REM布局、通用foot、统计代码、分享组件、兼容要求京东凹凸实验室对比腾讯的代码规范,我更推荐凹凸实验室的代码规范,比较齐全。HTML规范基于W3C、苹果开发者等官方文档,并结合团队日常业务需求以及团队在日常开发过程中总结提炼出的经验而约定。图片规范了解原创 2021-02-14 09:52:12 · 822 阅读 · 0 评论 -
javascript代码重构之:写好函数
1、函数要短小,一个函数只做一件事如果函数做了较多的事情,它就难以组合、测试和推测。同时让函数只做一件事情的时候,它们就很容易重构。// Badfunction showStudent(ssn){const student = db.get(ssn);if(student !== null){ document.querySelector(`#${elementId}`).innerHTML =`${student.ssn}, ${stu原创 2021-02-11 13:01:06 · 1352 阅读 · 6 评论 -
Vue3开发踩坑
期待了很久的vue3,一发布就上手体验了一把,这里记录几个自己碰到的网上不常见的小坑~自定义全局参数定义:// main.jsconst app = createApp(App)app.config.globalProperties.$test = 'test'除了setup()需要先获得实例,其他地方可以直接通过$test使用:<tempalte> <div>{{ $test }}</div></tempalte><s.原创 2021-02-11 12:09:49 · 1904 阅读 · 4 评论 -
instanceOf 运算符原理
定义instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置。 —— MDN简单理解为:instanceof可以检测一个实例是否属于某种类型。function Foo(){}const a = new Foo()a instanceof Foo // truea instanceof Object // true还可以在继承关系中用来判断一个实例是否属于它的父类型。function Foo(){}function Chi原创 2021-02-10 14:46:16 · 435 阅读 · 0 评论 -
所向披靡的async/await
使用规则凡是在前面添加了async的函数在执行后都会自动返回一个Promise对象注意重点: 返回结果为Promise。async function test() { return 100; }console.log(test()) // Promise {<resolved>: 100}await必须在async函数里使用,不能单独使用async function test() { let result = await Promise.resolve('su原创 2021-02-10 14:42:19 · 265 阅读 · 0 评论 -
Promise一招解决回调地狱
问题首先,什么是回调地狱:层嵌套的问题。每种任务的处理结果存在两种可能性(成功或失败),那么需要在每种任务执行结束后分别处理这两种可能性。当一个接口需要依赖另一个接口的请求数据时,通常有两种解决方式将请求数据的接口设为同步,之后调另一个接口在请求数据接口的成功回调里调另一个接口这两种问题在回调函数时代尤为突出。Promise 的诞生就是为了解决这两个问题。典型的高阶函数,将回调函数作为函数参数传给了readFile。但久而久之,就会发现,这种传入回调的方式也存在大坑, 比如下面这样:原创 2021-02-09 10:51:05 · 560 阅读 · 4 评论 -
什么?你还不知道原型链是什么,一文告诉你
创建对象对象字面量new Object构造函数Object.create// 字面量var obj1 = {name: 'solo obj1'};// new Objectvar obj2 = new Object({name: 'solo obj2'})// 构造函数创建var M = function(name){ this.name = name;}var obj3 = new M('solo obj3');// Object.createvar p =原创 2021-02-09 10:25:26 · 252 阅读 · 3 评论 -
this全面解析
this的绑定规则总共有下面5种:默认绑定(严格/非严格模式)隐式绑定显式绑定new绑定箭头函数绑定绑定规则1.1 默认绑定全局上下文默认this指向全局对象window, 严格模式下指向undefined。function foo() { // 运行在严格模式下,this会绑定到undefined "use strict"; console.log( this.a );}var a = 2;foo(); // TypeError: Cannot read p.原创 2021-02-09 10:09:07 · 223 阅读 · 3 评论 -
你会喜欢的新数组方法:array.at(index)
1.方括号语法的局限性通过索引访问数组元素一般使用方括号array[index]:const fruits = ['orange', 'apple', 'banana', 'grape'];const item = fruits[1];item; // => 'apple'表达式array[index]求值为位于index的数组项,这种方式也叫属性访问器。在大多数情况下,方括号语法是通过正索引(>= 0)访问项的好方法,它的语法简单且可读。但有时我们希望从末尾访问元素,而不是从原创 2021-02-08 20:53:14 · 5775 阅读 · 9 评论 -
JS+CSS自适应屏幕
布局适配方式Media Query(媒体查询):现在比较主流的适配方案,可根据视口不同编写不同样式达到适应效果,比如框架Bootstrap,它能完成大部分项目需求,但是编写过于复杂。flex布局:主流的布局方式,不仅适用于移动Web,网页上也表现良好,也是现在使用最多的布局方式。固定高度,宽度百分比:这种方法只适合简单要求不高的webApp,一般在适应要求不高,或者大屏显示没有要求时候可以使用。rem 单位介绍rem(font size of the root element)是相对长度单位原创 2021-02-08 20:45:24 · 1115 阅读 · 4 评论 -
一文读懂css的四种定位
一、普通定位(Static)在我们的开发过程中,除非专门指定,否则所有框都在普通流中定位。普通流中元素框的位置由元素在(X)HTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。这个就不过多描述了。二 . 相对定位(relative)在我们前端开发中,relative相对定位一直被看作普通文档流定位模型的一部分,定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导原创 2021-02-07 17:45:35 · 174 阅读 · 4 评论 -
js 网络请求框架 ajax和axios、fetch的区别
1.jQuery ajax介绍$.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}});传统 Ajax 指的是 XMLHttpRequest(XHR), 最早出现的发送后端请求技术,隶属于原始js中,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。 JQ原创 2021-02-07 17:39:19 · 439 阅读 · 1 评论 -
一文拨开var、let、const的云雾
var 变量提升机制我们在全局作用域中或还是在局部作用域中,使用var关键字声明的变量,都会被提升到该作用域的最顶部,这就是我们常说的变量提升。function person(status) { if (status) { var value = "小二" } else { console.log(value) // undefined } console.log(value) // undefined}person(false)原创 2021-02-06 20:33:51 · 150 阅读 · 0 评论 -
Vue生命周期
原创 2021-02-05 14:55:59 · 112 阅读 · 0 评论 -
HTML、HTTP、Web综合面试题(六)
1.JavaScript原型,原型链 ? 有什么特点?每个对象都会在其内部初始化⼀个属性,就是 prototype (原型),当我们访问⼀个对象的 属性时如果这个对象内部不存在这个属性,那么他就会去 prototype ⾥找这个属性,这个prototype ⼜会有⾃⼰的 prototype ,于是就这样⼀直找下去,也就是我们平时所说的 原型链的概念关系:instance.constructor.prototype = instance.__proto当我们需要⼀个属性的时, Javascript原创 2021-02-05 09:02:15 · 173 阅读 · 1 评论 -
JavaScript 中 9个需要掌握基础的问题
1.如何从数组中移除一个特定的项思路:首先,使用indexOf查找要删除的数组元素的索引(index),然后使用splice方法删除该索引所对应的项。splice()是一个非纯函数,通过删除现有元素和/或添加新元素来更改数组的内容。const array = [2, 5, 9]const index = array.indexOf(5)if (index > -1) { array.splice(index, 1)}console.log(array)// [ 2, 9 ]原创 2021-02-04 12:47:51 · 175 阅读 · 0 评论 -
JavaScript 中如何判断变量是否为数字
简介JavaScript 是一种动态类型语言,这意味着解释器在运行时确定变量的类型。实际上,这也允许我们在相同的代码中使用相同的变量来存储不同类型的数据。如果没有文档和一致性,我们在使用代码时并不总是知道变量的类型。当我们期望一个变量是数字时,对字符串或数组进行操作可能会在代码中导致奇怪的结果。在本文中,我们将会介绍一些判断变量是否为数字的函数。像"10"之类的数字的字符串不应被接受。在JavaScript中,诸如NaN,Infinity和-Infinity之类的特殊值也是数字类型的。根据这些要求,原创 2021-02-04 12:09:36 · 3364 阅读 · 0 评论 -
10个很棒的 JavaScript 字符串技巧
1.如何多次复制一个字符串JS 字符串允许简单的重复,与纯手工复制字符串不同,我们可以使用字符串的repeat方法。const laughing = '小二'.repeat(3)consol.log(laughing) // "小二小二小二"const eightBits = '1'.repeat(8)console.log(eightBits) // "11111111"2.如何填充一个字符串到指定的长度有时,我们希望字符串具有特定长度。 如果字符串太短,则需要填充剩余空间,直到达到指定原创 2021-02-04 10:48:34 · 181 阅读 · 0 评论 -
HTML、HTTP、Web综合面试题(五)
1.display: none; 与 visibility: hidden;的区别display:none ;会让元素完全从渲染树中消失,渲染的时候不占据任何空间;visibility: hidden ;不会让元素从渲染树消失,渲染师元素继续占据空间,只是内 容不可⻅display: none ;是⾮继承属性,⼦孙节点消失由于元素从渲染树消失造成,通过修改⼦孙节点属性⽆法显示 ;visibility: hidden; 是继承属性,⼦孙节点消失由于继承 了 hidden ,通过设置 visibility原创 2021-02-03 21:01:53 · 136 阅读 · 0 评论 -
8个强大的JavaScript技巧
1.全部替换我们知道string.replace()函数只能替换第一次出现的情况。你可以在正则表达式的末尾添加/g来替换所有出现的内容。let example = "potato potato";console.log(example.replace(/pot/, "tom")); // "tomato potato"console.log(example.replace(/pot/g, "tom")); // "tomato tomato"2.提取唯一值我们可以仅仅通过Set对象和Spr原创 2021-02-03 20:35:37 · 111 阅读 · 0 评论 -
CSS八种让人眼前一亮的HOVER效果
一.发送效果HTML<div id="send-btn"> <button> // 这里是一个svg的占位 Send </button></div>CSS#send-btn{ display: flex; align-items: center; justify-content: center; height: 100vh;}button { background: #5f55af; borde原创 2021-02-02 17:43:03 · 160 阅读 · 3 评论 -
6个规则去净化你的代码
1.注重命名想象以下,将两个数组合并成一个数组,并生成一个唯一值的数组。那么你会怎么命名它呢?我们也许会这样命名?function mergeNumberListIntoUniqueList(listOne, listTwo) { return [...new Set([...listOne, ...listTwo])]}上面的命名并不糟糕,但是还不是很友好。你可以将一个功能函数拆分为两个功能函数,这样命名更友好和函数复用性更好。function mergeLists(listOne, li原创 2021-02-02 17:34:59 · 448 阅读 · 2 评论 -
JavaScript中实用的8个代码片段
1. 反转字符串使用扩展符号…将字符串解析成数组。const reverseString = string => [...string].reverse().join('');reverseString('Medium'); // 'muideM'2. 数阶乘计算数据的阶乘,使用箭头函数和三元运算符。const factorialOfNumber = number => number < 0 ? (() => { throw new Type原创 2021-02-02 17:30:41 · 299 阅读 · 2 评论 -
多个JS优化小技巧
1. if多条件判断// 冗余if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {}// 简洁if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {}2.if…else…// 冗余let test: boolean;if (x > 100) { test = true;} else { test = false;}// 简洁let test =原创 2021-02-02 17:21:43 · 510 阅读 · 5 评论 -
前段元素居中的N种方法
行内元素居中文本垂直居中单行文本垂直居中单行文本的垂直居中是最简单的,设置line-height与盒子高度一样就可以。这里有一个误区,很多人设置单行文本居中的时候会同时设置height与line-height相同,其实大可不必设置height,只设置line-height就可以,这时候盒子的高度由line-height撑起来,与line-height完全相同。.center { // 完全可以不设置高度 // height: 20px; line-height: 20px;}多行原创 2021-02-02 17:17:04 · 392 阅读 · 0 评论 -
聊聊 Vue3.0 响应式数据那些事儿
Vue3.0 为了达到更快、更小、更易于维护、更贴近原生、对开发者更友好的目的,在很多方面进行了重构:使用 Typescript放弃 class 采用 function-based API重构 complier重构 virtual DOM新的响应式机制今天咱就聊聊重构后的响应式数据。尝鲜重构后的 Vue3.0 和之前在写法上有很大的差别,早前在网络上对于 Vue3.0 这种激进式的重构方式发起了一场讨论,见仁见智。不多说先看看 Vue3.0 在写法上激进到什么程度。<!DOCTY原创 2021-02-01 10:57:30 · 395 阅读 · 3 评论 -
webpack------>webpack 的本质
1.概念webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。2.作用webpack 通过 loader 可以支持各种语言和预处理器编写模块(通过loader处理非JavaScript模块,并在bundle中引入依赖),模块可以通过以下方式来表达它们的依赖关系:1.原创 2021-02-01 10:41:04 · 365 阅读 · 9 评论 -
JS 中强大的操作符,总有几个你没听说过
1.数值分割符 _ES2021 引入了数值分割符 _,在数值组之间提供分隔,使一个长数值读起来更容易。Chrome 已经供了对数值分割符的支持,可以在浏览器里试起来。let number = 100_0000_0000_0000 // 0太多了不用数值分割符眼睛看花了console.log(number) // 输出 100000000000000此外,十进制的小数部分也可以使用数值分割符,二进制、十六进制里也可以使用数值分割符。0x11_1 === 0x111 /原创 2021-02-01 10:26:21 · 1559 阅读 · 19 评论 -
JS面试题汇总(四)
1.typeof 于 instanceof 区别typeof 对于基本类型,除了 null 都可以显示正确的类型typeof 对于对象,除了函数都会显示 object对于 null 来说,虽然它是基本类型,但是会显示 object ,这是⼀个存在 很久了的 Buginstanceof 可以正确的判断对象的类型,因为内部机制是通过判断对象的 原型链中是不是能找到类型的 prototype// 我们也可以试着实现⼀下 instanceoffunction instanceof(left, rig原创 2021-02-01 10:01:11 · 238 阅读 · 8 评论 -
HTML、HTTP、Web综合面试题(四)
1.你做的⻚⾯在哪些流览器测试过?这些浏览器的内核分别是什么?IE : trident 内核Firefox : gecko 内核Safari : webkit 内核Opera :以前是 presto 内核, Opera 现已改⽤Google - Chrome 的 Blink 内核Chrome:Blink (基于 webkit ,Google与Opera Software共同开发)2.div+css的布局较table布局有什么优点?改版的时候更⽅便 只要改 css ⽂件。⻚⾯加载速度更快原创 2021-02-01 09:44:29 · 341 阅读 · 8 评论 -
HTML、HTTP、Web综合面试题(三)
1.⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元 素和块级元素有什么区别?⾏内元素有: a b span img input select strong块级元素有: div ul ol li dl dt dd h1 h2 h3 h4… p空元素:<br> <hr> <img> <input> <link> <meta>⾏内元素不可以设置宽⾼,不独占⼀⾏块级元素可以设置宽⾼,独占⼀⾏2.HTML全局属原创 2021-01-31 11:00:02 · 1290 阅读 · 5 评论 -
编写 JavaScript 的好习惯!!!
1. 常量使用const代替var常量是永远不变的变量,这样声明变量可以确保它们永远不变。/* 旧方法 */var i = 1;/* 正确方式 */const i = 1;2.使用let替换变量,而不是varlet语句声明了一个具有块作用域的局部作用域变量/* 不适当的*/var myVal = 1;for (var i; i < 10; i++){ myVal = 1 + i;}/* 正确方式*/let myVal = 1;for (let i; i <原创 2021-01-30 11:45:06 · 248 阅读 · 11 评论