HTML+CSS
文章平均质量分 58
打工人C&K
学编程的小懒
展开
-
前端面试题--详解flex
二根线:起始线(main/cross-start)与结束线(main/cross-end)Flex的主要作用是:解决元素居中问题,自动弹性伸缩,自动适配不同大小的屏幕和移动端。Flex的术语解释:二成员:容器和项目(container / item)二根轴:主轴与交叉轴(main-axis / cross-axis)column-reverse:主轴为垂直方向,起点在下沿。row-reverse:主轴为水平方向,起点在右端。row(默认值):主轴为水平方向,起点在左端。Flex是指弹性盒子布局的意思。原创 2023-02-20 15:00:20 · 1636 阅读 · 0 评论 -
前端面试的基础四十小问(前20问)
文章目录1.什么是HTML语义化?2.标签title与alt属性的区别是什么?3.iframe的优缺点?4.介绍一下CSS的盒子模型?部分答案来源于官方答案和网络综合答案如有错误答案请大佬们不吝赐教。1.什么是HTML语义化?答:语义化的HTML就是正确的标签做正确的事情,能够便于开发者阅读和写出更优雅的代码的同时让网络爬虫很好地解析。其主要目的就是让大家直观的认识标签和属性。对上述问题的补充:(1)为什么要做到语义化?答:有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效原创 2022-03-24 22:18:21 · 1905 阅读 · 1 评论 -
vue中的生命周期(钩子函数)
**vue中的生命周期(钩子函数)**下图是整个vue的生命周期生命周期共有八个钩子函数生命周期:vue是一个构造函数,执行这个函数的时候,即相当于实例化了这个函数,因此我们在创建实力的过程中为了更近一步的确定函数的动态,所以我们需要设置数据监听,编译模板,将实例挂载到DOM上,让数据也可以在dom上更新。钩子函数:钩子函数就是可以让我们在初始化实例的时候可以自己添加代码,注意钩子函数中的this,会默认指向vue实例。beforeCreate created[可以获取数据及方法]bef原创 2022-01-28 11:32:28 · 1351 阅读 · 0 评论 -
vue中模板和组件分离
**vue中模板和组件分离**第一种:使用script,将其类型跟改为text/x-template。代码示例如下: <!-- 第一种方式: 使用script --> <script type="text/x-template" id="comp2"> <div> <h2>组件和模板分离的写法1</h2> </div> </script>原创 2022-01-27 18:19:04 · 1206 阅读 · 0 评论 -
vue中的父子组件以及语法糖写法
**vue中的父子组件**具有上述模样的具有嵌套关系的就是父子组件。我们先用代码定义一个组件名字为comp1// 定义组件1 const comp1 = Vue.extend({ template: <div> <p>组件1</p> </div> })然后再定义第二个组件名为comp2// 定义组件2原创 2022-01-27 18:03:45 · 801 阅读 · 0 评论 -
Vue中全局组件与局部组件
**Vue中全局组件与局部组件**Vue中的组件与普通语言中的变量类似有局部变量也有全局变量,限制条件也是相同的在注册组件的时候是在new Vue({})外面注册的话,是全局组件,也就表示任何一个vue实例对象都可以使用...原创 2022-01-27 17:36:34 · 899 阅读 · 0 评论 -
JavaScript中的构造函数
JavaScript中的构造函数目前比较好的构造函数方法:并且我们要详细了解prototype和constructor和——proto——之间的关系ES6之前的作用域链原创 2021-10-24 15:36:40 · 1040 阅读 · 0 评论 -
JavaScript中的异步编程
JavaScript中的异步编程JavaScript中的异步编程在前端开发的过程中经常出现回调函数,事件监听,promise,generator,async/await这几种方式都是异步编程首先我们需要了解一下同步编程和异步编程有哪些区别,那么同步编程又是什么呢?同步编程就是在执行某段代码时在该代码没有得到返回结果之前,其他代码暂时无法执行,但是一旦执行完成拿到返回值之后就可以执行其他代码了。异步编程就是当某段代码执行异步过程调用发出后这段代码不会立刻得到返回结果。而是在异步调用发出之后,一般通过回原创 2021-10-20 17:50:38 · 95 阅读 · 0 评论 -
进阶练习:手写JavaScript数组多个方法的底层实现
进阶练习:手写JavaScript数组多个方法的底层实现先了解一下push方法的底层实现:下面是ECMA的英文相关解释When the push method is called with zero or more argumentsthe followingsteps are taken:1.Let O be ? To0bject(this value).2.Let len be ? LengthOfArrayLike(O).3.Let argCount be the number of e原创 2021-10-18 18:54:11 · 171 阅读 · 0 评论 -
JavaScript数组排序(上)如何实现数组排序
JavaScript数组排序(上)如何实现数组排序提到数组排序就不得不提到排序算法,那么什么样的排序算法是好算法呢?提到算法就要讲到算法的时间和空间的复杂度下面有一张时间复杂度的曲线图一般来说应当将时间复杂度控制在O(nlogn)以下并且一般再n平方以上的时间复杂度是不能接受的空间复杂度就是程序所需要临时占用存储空间大小的度量下面我们就来讲述各种排序方式排序算法有很多但是我们可以根据它们的特性大致分为种类型:比较类排序:通过比较来决定元素之间的相对次序,其时间复杂度不能突破nlogn,因此也原创 2021-10-18 18:11:57 · 151 阅读 · 0 评论 -
JavaScript数组原理3:实现数组扁平化的几种方式
JavaScript数组原理3:实现数组扁平化的几种方式数组的扁平化其实就是将一个嵌套多层的数组array(嵌套可以是任意层数)转换为只有一层的数组举一个代码的例子:var arr = [1,[2,[3,4,5]]];console.log(flatten(arr));[1,2,3,4,5]...原创 2021-10-18 10:36:01 · 235 阅读 · 0 评论 -
JavaScript数组原理二:类数组详解
JavaScript数组原理二:类数组详解JavaScript中一直存在一种数组对象他们不能直接调用数组的方法,但是又和数组比较类似在某些特定的变成场景中会出现。首先我们要了解在哪些情况下会出现类数组:1.包括函数里面的参数对象arguments2.用getelements bytagname/classname/name获得的HTMLcollection3.用queryselector获得的nodelist这是主要遇到的几种类数组的情况首先先讲解arguments:类数组对象argumen原创 2021-10-15 12:03:56 · 212 阅读 · 0 评论 -
JavaScript数组原理:梳理数组API
数组原理:梳理数组API数组对于JavaScript的重要性:没有数组就不足以写好JavaScript在力扣的刷题题库中1800道题中有三百道都是与数组相关的,也是种类中最多的。本文章将会通过会改变自身值的和不会改变自身值的,遍历方法这三种类型来分开讲解,这样可以把知识更加的结构化。第一:Array构造器通常我们推荐使用对象字面量的方式创建一个数组总有字面量无法表述的时候例如我想创建一个长度为6的空数组用对象字面量的方式是无法创建的因此只能写成如下代码的样子://使用Array构造器,可以自定义原创 2021-10-15 00:50:40 · 179 阅读 · 0 评论 -
JavaScript闭包的重难点剖析
JavaScript闭包的重难点剖析作用域的基本介绍:指变量能够被访问到的范围ES5之前有函数作用域和 全局作用域ES6出现之后:新增块作用域在JavaScript中的全局作用域,全局变量是挂载在window对象下的变量所以在网页中的任何位置你都可以使用并且访问到这个全局变量下面用代码来体验一下全局作用域:var globalName ='global';function getName(){console.log(globalName)// globalvar name = 'inner'原创 2021-10-10 18:26:06 · 111 阅读 · 0 评论 -
继承的进阶
继承的进阶:如何实现new、apply、call、bind的底层逻辑首先我们从new开始,new关键词的主要作用是什么呢?就是执行一个构造函数,返回一个实例对象根据构造函数的情况,来确定是否可以接受参数的传递。代码实现如下:function Person(){this.name = 'jack';}var p = new Person();console.log(p.name)//jack上述代码是p通过person这个构造函数实现的一个实例对象那么new在底层逻辑中是如何实现的呢?1原创 2021-10-10 16:19:07 · 91 阅读 · 0 评论 -
JavaScript的继承实现详解
JavaScript的继承实现详解此文章共提及六种JavaScript中的继承实现方式第一种:原型链继承原型链继承是一种很常见的继承方式其中涉及了构造函数、原型和实例每一个构造函数都有一个原型对象,原型对象又包含一个指向构造函数的指针...原创 2021-10-09 16:24:04 · 109 阅读 · 0 评论 -
关于JavaScript的深浅拷贝详解
关于JavaScript的深浅拷贝详解关于浅拷贝的方法:方法一:object.assign下述JavaScript的代码使用object.assign来简单理解一下浅拷贝:let obj1 = {a:{b:1},sym:Symbol(1)};Object.defineProperty(obj1,'innumerable',{ value:'不可枚举属性', enumerable:false});let obj2 = {};Object.assign(obj2,obj1)obj1.a.b原创 2021-10-06 21:10:27 · 191 阅读 · 0 评论 -
关于JavaScript的类型判断方式和数据转换方式详解
关于JavaScript的类型判断方式和数据转换方式详解对于数据类型的判断方式主要有两中在JavaScript中的内置函数可以判断分别是:typeof,使用typeof所判断出来的类型是如下的:上述是所有JavaScript中类型的判断但是其中的null类型是有问题的,虽然输出的是object类型,但是它并不是对象,这是在JavaScript中的一个bug,所以不要记错了,如果你想在判断条件中判定是不是null你可以直接在判断条件中使用三个等于号来直接判定就可以了。第二种判断方式是使用内置函数:in原创 2021-10-04 20:19:01 · 146 阅读 · 0 评论 -
教你如何使用JavaScript如何80行代码写个小项目
最适合新手练习JavaScript的小项目:网页计算器网页计算器是由HTML和CSS以及最重要的JavaScript来构建出来的,能和普通的计算器一样进行各种运算包括开根号等等的复杂运算,并且有助于理解JavaScript中的面向对象和函数调用并且全长代码只有80行,是最适合新手的小项目了不多BB上代码:<!doctype html><html lang="en"><head> <!-- 添加文档头部内容 --> <meta http-eq原创 2021-10-02 09:00:00 · 363 阅读 · 0 评论