js
文章平均质量分 65
南笙前端工程
互相分享,提升自我。
合抱之木,生于毫末;九层之台,起于累土;千里之行,始于足下。
展开
-
总结:数组常用方法
javaScript基本数组方法原创 2022-08-09 14:49:52 · 113 阅读 · 1 评论 -
基于http网络层的‘前端优化‘
文章目录扫盲知识URL/URL/URN传输协议域名端口号HASY 哈希值URL编码缓存检查HTTP报文扫盲知识URL/URL/URNURI=URL+URNURI:统一资源标识符URL:统一资源定位符URN:统一资源名称传输协议http/https/ftp…客服端和服务器端用来传输信息的方式’像快递小哥’http:超文本传输协议[除了文本还可以运输音乐/等等之类的]https: ssl 比http更安全,因为要经过sll加密[支付类网站都需要使用https]ftp:文件上传下载协原创 2021-06-01 20:42:18 · 160 阅读 · 5 评论 -
JS盒子模型--scroll概述
scroll系列属性scroll翻译过来就是滚动,我们使用scroll系列的相关属性可以动态的得到该元素的大小以及滚动的距离下表所有值均带padding不带borderscroll系列的作用作用element.scrollTop返回被卷去的上侧距离,返回值不带单位element.scrollLeft返回被卷去的左侧距离,返回值不带单位element.scrollWidth返回自身实际宽度,不含边框,返回数值不带单位element.scrollHeigth原创 2021-05-31 22:54:53 · 198 阅读 · 0 评论 -
JS盒子模型--client概述
client概述client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息通过client系列的相关属性可以动态的得到该元素边框的大小、元素大小等client系列属性作用element.clientTop返回元素上边框的大小element.clientLeft返回他不属于左边框的大小element.clientWidth返回自身包括padding 、内容区的宽度、不含边框、返回数值不带单位element.clientHei原创 2021-05-31 22:26:35 · 325 阅读 · 0 评论 -
前端JS基础面试题总结(6)
1、JS是单线程还是多线程的语言单线程2、渲染页面的过程是同步还是异步执行同步3、列举三个常见的异步执行。两个定时器,ajax,promise.then()4、怎么阻止默认事件执行• e.preventDefault();//阻止默认事件• return false• e.returnValue=false;//IE5、怎么阻止事件冒泡。e.stopPropagation();e.cancelBubble=true;//兼容IE6、简述事件传播机制。在点击事件原创 2021-05-31 20:37:06 · 239 阅读 · 0 评论 -
前端JS基础面试题总结(5)
1、在正则表达式中,[^&]匹配的是除了&开头的字符2、设置怪异盒模型的css样式是box-sizing:border-box;3、*号用于匹配前面的字符出现零到多次4、/^1[3578]\d{9}$/正则的匹配规则什么字符以1开头,3578中的一个,九个数字(手机号规则)5、验证只能输入5-20个以字母开头、可带数字、“_”、“.”的字串,正则应该怎么写/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/6、获取页面的可视区域原创 2021-05-31 20:33:17 · 141 阅读 · 0 评论 -
前端JS基础面试题总结(4)
1、call、bind、apply的区别call改变this并执行函数;bind改变this,但不会执行函数,会把改变this后的函数体返回;apply与call的传参方式不同,需要把传给F函数的参数放到一个数组(或者类数组)中传递进去2、构造函数与普通函数执行的区别构造函数执行之前,首先创建一个对象(创建一个堆内存,暂时不存储任何东西),并且让函数中的执行主体(this)指向这个新的堆内存(this===创建的对象)。执行完以后把this这个堆内存返回。3、构造函数执行,如果有retu原创 2021-05-31 20:27:12 · 73 阅读 · 0 评论 -
前端JS基础面试题总结(3)
1.值类型和对象类型的数据有什么不同?值类型:存在栈内存中,是按值操作对象类型:存在堆内存中,是按地址操作2.let与var有什么区别。let、const:• 不存在变量提升。• 只能声明一次,不能重复声明• 变量声明出来存在VO(变量对象)或AO(活动对象)中,不会给window增加属性var:• 有变量提升• 在全局中声明的变量,会给window增加一个属性。3.简要描述一下变量提升机制。)当栈内存(作用域)形成,js代码执行之前,浏览器会把所有带有var/functi原创 2021-05-31 20:21:25 · 99 阅读 · 0 评论 -
前端JS基础面试题总结(2)
1、JS中设置定时器的两种方法:setTimeout 、 setInterval2、函数中内置接收参数的集合是:arguments3、把函数体中的某个值返回到外面用:return4、数组的基础知识和应用在数组的后面追加一项(至少两种办法): arr.push 、 arr[arr.length] =x删除数组的最后一项(至少两种办法): pop 、 arr.length–克隆一份和原来一样的数组(至少两种): arr.concat() 、原创 2021-05-31 20:17:51 · 100 阅读 · 0 评论 -
前端JS基础面试题总结(1)
01、JS的组成部分ES DOM BOM02、JS中的数据类型都有哪些?以及两大类之间的区别?03、检测数据类型的四种方式?(常见面试题)04、JS中创建变量的几种常用方式?05、常用浏览器的内核都有哪些?(常见面试题)...原创 2021-05-31 20:12:04 · 121 阅读 · 0 评论 -
发布订阅设计模式
设计模式一种编程思想,这类思想会解决一种问题例如:单例模式:简单来说是一个对象,平时使用时用闭包包起来工厂模式:在jQuery中使用$(’’)或者jQuery()包起来,当做普通函数执行,最后创造一个他的实例,使用init中转一下构造函数设计模式:new一个东西执行就是构造函数模式,解决了:可以创造一个类的多个实例,每一个实例之间既是独立的,每一个都有自己的单独属性,而且还能找到所属的公共属性。例如swiper插件,使用它就是要new,因为这个项目中可能有多个,每次使用swiper创造多个轮原创 2021-05-27 22:33:02 · 140 阅读 · 0 评论 -
高级JS--浏览器底层机制!什么是浏览器底层机制?你了解浏览器底层机制吗?
文章目录浏览器机制具体渲染过程浏览器机制浏览器拿到代码后,会渲染和解析代码,最后在页面中渲染除图形和效果渲染HRML/CSS代码:基于WC3规范规定,进行编写代码,浏览器按照WC3规范进行解析(通俗来说浏览器就相当于一个画家来按照你的需求来给你绘画),由GUI渲染线程来进行处理渲染JS代码:ECAMScript(ECMA-262[代表ECMAScript的版本号])规则,交给JS引擎线程去处理+如果在渲染代码中,遇到了link/img/script[src=‘XXX’]/audio/viode原创 2021-05-20 23:09:28 · 572 阅读 · 0 评论 -
JS盒子模型--offset概述
JS元素偏移量office概述office:翻译过来就是偏移量,我们使用offset系列相关属性可以动态得得到该元素得位置(偏移)、大小等。获得元素距离带有定位得父级元素位置,如果没有则是body获得元素自身大小(宽度和高度(width/top))注意:返回值不带单位offset系列常用属性offset系列常用属性作用element.offsetParent返回作为该元素带有定位的父级元素如果父级元素没有定位,则返回距离body的值element.offse原创 2021-05-14 00:21:51 · 1202 阅读 · 3 评论 -
js综合测试
一、填空题1、在正则表达式中,[^&]匹配的是?以&开头的字符2、设置怪异盒模型的css样式是box-sizing:border-box;3、*号用于匹配前面的字符出现零到多次4、/^1[3578]\d{9}$/正则的匹配规则什么字符以1开头,3578中的一个,九个数字(手机号规则)5、验证只能输入5-20个以字母开头、可带数字、“_”、“.”的字串,正则应该怎么写 /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/6原创 2021-05-10 22:18:06 · 234 阅读 · 0 评论 -
JS的正则表达式
文章目录正则表达式什么是正则?正则有什么用?正则的基本概念正则表达式什么是正则?正则有什么用?正则的基本概念正则:简单点来说他就是用来处理"字符串"的规则原创 2021-05-08 23:56:51 · 110 阅读 · 0 评论 -
JS基础——面向对象[单例设计模式、工厂模式、oop、基于构造函数自定义类、构造函数运行机制]
文章目录面向对象、构造函数单例设计模式(singleton pattern)工厂模式(factoryPattern)oop基于构造函数创建自定义类(constructor)构造函数执行的机制关于构造函数中的细节问题面向对象、构造函数单例设计模式(singleton pattern)1、表现形式• 对象 var obj={xxx:xxx;……}• 早单例设计模型中,obj不仅仅是对象名,他被称为‘命名空间’,把描述事物的属性放到命名空间中,多个命名空间是独立分开的,互不冲突2、作用• 把描述同原创 2021-05-07 18:47:26 · 74 阅读 · 0 评论 -
JS基础——基于V8底层渲染机制变量提升机制、闭包、作用域、垃圾回收机制、函数执行过程、手撕call方法、bind预处理....
文章目录变量提升数据类型核心操作原理基本数据类型(值类型)可执行(调用)对象 funtion(){}非标准特殊对象《函数、作用域、上下文及浏览器中的垃圾回收机制》函数基本概念作用域闭包执行上下文普通函数执行的过程匿名函数具名化浏览器垃圾回收机制(内存管理机制)js运行环境this与call apply bindthis(函数执行的主体)callCALL中的细节阿里call面试题另一种思路手撕call方法bind预处理this,不执行函数变量提升数据类型核心操作原理基本数据类型(值类型)numb原创 2021-05-07 18:44:38 · 296 阅读 · 0 评论 -
JS基础——数组排序、[冒泡排序、快排、递归法快排、对象去重等等]以及效果案例解读
文章目录数组排序冒泡排序 双for O(n^2)快速排序 递归法 O(nlgn)数组去重双循环法indexOf处理法对象去重法利用Set或Map结构console.dir(Math)查看Math的所有操作方法abs取绝对值Math.round()max && min 取最大最小值PI 获取圆周率Date方法效果案例数组求和选项卡效果递归 累加求和字符串案例定时器案例数组排序冒泡排序 双for O(n^2)var ary=[10,2,1,3,4,2,1,2]for (var j=0;j原创 2021-05-07 18:41:31 · 148 阅读 · 0 评论 -
JS基础——字符串常用方法以及案例解读
文章目录字符串常用方法charAt & charcodeAtcharAt:substr && substring && slice 截取字符substr(n,m)substring(n,m)slice(n,m)indexOf && lastIndexOf && includes查询字符串indexOf(x,y):lastIndexOf(x):includes(''):split字符串常用方法1、字符串有索引用索引查找字符2、有原创 2021-05-07 18:38:50 · 163 阅读 · 0 评论 -
JS基础——数组常用方法
文章目录数组方法基本结构类数组改变原来数组的常用方法增加1、push : 向末尾追加2、unshift :向开头追加删除1、pop:删除数组最后一项2、shift:删除数组第一项3、把数组当做一个普通对象,使用键值对的操作删除splice1、删除2、修改3、增加不改变原有数组的方法数组克隆:slice将两个数组进行拼接:concat验证数组中是否包含某一项:indexOf/lastIndexOf验证数组中是否包含某一项:includes数组中的排序和排列1、reverse:把数组中的每一项倒过来排列2、so原创 2021-05-07 18:36:10 · 92 阅读 · 0 评论 -
JS基础——函数
文章目录函数函数创建的具体过程匿名函数匿名函数的第一种情形匿名函数的第二种情形定时器匿名函数的第三种情形匿名函数的第四种情形箭头函数与普通函数的区别:自执行(匿名)函数回调函数callback递归函数函数的意义在于封装:把实现某一个功能的代码封装在一起,后期在想实现这个功能,只需要执行函数即可,不需要重新编写这些代码了。“低耦合、高内聚”:减少代码的冗余,提高代码使用率。1.创建函数function 函数名(形参1,…){//=>函数体:实现具体功能的代码}*2.执行函数:让原创 2021-05-07 18:33:48 · 44 阅读 · 0 评论 -
JS基础——栈堆问题、各种数据类型转换、JS常用语句、DOM获取元素方法
文章目录堆栈内存阿里面试题(关于栈堆内存问题)各数据类型转换(汇总)对象转化为数字或字符串各类型转换为数字运算toString转换为字符串把其他数据类型转换为布尔类型其余情况大部分是转换为数字比较特殊情况JS中的常用语句if判断三元运算符switch相对等于与绝对等于==相对等于===绝对等于for循环循环中的关键字breakcontinueFOR IN循环DOM获取元素的方法js操作DOM获取元素节点行内属性操作样式操作堆栈内存所谓堆栈内存,其实就是在计算机内存中分配出来一块空间,用于执行和存储代码原创 2021-05-07 18:29:50 · 114 阅读 · 0 评论 -
JS基础——数学运算
文章目录JS中的数学运算模板字符串布尔类型!的用法!=:不等于!取反:把!后的字符转化为布尔类型,然后再取反。!!在一个布尔类型的基础上取反再取反,相当于转化为布尔类型。null和undefined的区别对象数据类型object数据类型的检测及堆栈内存的区别数据类型的检测数据类型typeoftypeof 局限性基本数据类型与引用数据类型的区别(划重点)JS中的数学运算• 加减乘除±*/• 取余%1、加号,在JS中既有数学运算,也有字符串拼接的意思(只要加号两边的任意一边出现字符串,则变为字符串拼接原创 2021-05-07 18:26:25 · 1329 阅读 · 0 评论 -
JS基础——基本数据类型/数据类型之间的转换
文章目录JS中的数据类型及详解js数据类型分类`基本数据类型``number数字类型`` string字符串类型``boolean布尔类型`` 空 null`类型`Sumbol`唯一值类型` object普通对象:`` Array数组对象:``RegExp正则对象:``function函数:`` 箭头函数``number类型 数字``NaN``Numder`PL:数字例子parseInt([val], [radix])处理机制**parseFloat()****num.toFixed(n)保留两(n)位原创 2021-05-07 15:57:10 · 333 阅读 · 0 评论 -
JS基础知识——简介/语法/应掌握基础框架
JS发展及基础前端应该掌握的技术:语言基础:HTML(5)、css(3)、js框架基础:vue、react、node.js、TS、小程序等等语言类型:HTML 标记语言css (层叠样式表)标记语言JS 弱类型的脚本语言 负责用户交互(点击 拖拽)浏览器内核:我们把浏览器中识别代码绘制页面的东西称为浏览器的内核或者渲染引擎。webkit(V8引擎)谷歌 chrome苹果 Safari国内大部分浏览器IE新版本 EDGEGecke火狐浏览器 FireFoxPrest原创 2021-05-07 15:52:51 · 126 阅读 · 0 评论 -
JS中的THIS问题
THIS问题THIS总结规律1、给当前元素的某一个事件进行行为绑定方法,当事件行为触发,浏览器会帮我们把绑定的方法执行,此时方法中的this是当前操作元素的本身。pl:"use strict"------->开启严格模式<style> //.............</style>const fn=function fn(){ console.log(this); //----->此时中的this是字符串};let obj={原创 2021-04-25 21:25:28 · 99 阅读 · 0 评论