前端(HTML+CSS+JS+ES6)
文章平均质量分 96
zlq_csdn
有志者自有千计万计,无志者只感千难万难。
展开
-
前端性能优化 24 条建议
前端性能优化是把双刃剑,有好的一面也有坏的一面。好的一面就是能提升网站性能,坏的一面就是配置麻烦,或要遵守的规则太多。并且性能优化并不适用于所有的场景,需要谨慎使用。1. 减少 HTTP 请求一个完整的HTTP请求需要经历 DNS 查找,TCP 握手,浏览器发出 HTTP 请求,服务器接收请求,服务器处理请求并发出响应,浏览器接收响应等过程。接下来看一个具体的例子帮助理解 HTTP :这是一个 HTTP 请求,请求的文件大小为 28.4KB。名词解释:Queueing: 在请求队列中的时间。转载 2021-01-02 23:35:59 · 517 阅读 · 1 评论 -
js中正则表达式验证URL 网址,亲测有效
/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/ 大家可直接复制上面的正则表达式 https://www.example.comhttp://www.example.comwww.example...转载 2020-09-16 18:34:03 · 2623 阅读 · 1 评论 -
React中super(props)和super()以及不写super()的及ES6和ES5的区别
一、constructor和super的基本含义constructor() – 构造方法这是es6中的类的默认方法,通过new命令生成对象实例自动调用的方法。并且,该方法是类中必须要有的,如果没有显示定义,则会默认添加空的constructor()方法。super() – 继承在class方法中,继承是使用extends关键字来实现继承的。子类必须在constructor()中调用super()方法,否则新建实例时会报错。报错的原因是,子类是没有自己的this对象的,它只能继承父类的this对转载 2020-08-14 09:07:29 · 839 阅读 · 0 评论 -
npm 发包
1. 初始化package.jsonnpm init结果:{ "name": "react-pc-ui", "version": "1.0.0", "description": "\"React PC 组件库(React pc component library)\"", "main": "index.js", // publish 入口 "scripts": { "start": "webpack-dev-server --open --config ./build/原创 2020-07-25 16:50:05 · 206 阅读 · 0 评论 -
css元素z-index设置为什么不起作用?
元素位置重叠的背景常识(x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序是由元素在文档中的先后位置决定的,此时一般不会产生重叠(但指定负边距可能会产生重叠)。当我们使用css为某个元素指定 float 浮动或者 positoin 定位后,元素的定位将会依据情况发生如下改变:指定float值left/right 行内元素也会隐形变成块元素,元素会脱离文档的普通流,向左或右浮动,直到其外边缘碰到包含框或另一个浮动框。指定position值relative 可以相对于其转载 2020-05-29 17:14:26 · 334 阅读 · 0 评论 -
js 删除 (同名)cookie 失败
前言: 在刚完成的毕设项目中,使用到了cookie,主要是用来记录用户信息,方便用户下次访问时,在有效期内直接跳过登录页面进入主界面。总结一下遗留的问题:在删除同名cookie时,无法全部删除、覆盖。问题:只在登录界面对用户信息进行了保存,但发现在其他 url 界面也会出现cookie保存着用户信息,删除的时候将cookie信息的 expires 设置为过期时间即可,但只删除了其中一个同名的cookie,其他同名的cookie未删除。cookie 属性定义:设置 cookie 属性设置 cooki原创 2020-05-29 12:07:34 · 912 阅读 · 0 评论 -
回调函数、异步编程
回调函数: 是一段可执行的代码,作为参数传递到另外一个函数中,其作用是在需要的时候调用这段(回调函数)代码。回调函数使用场景:异步编程事件监听、处理setTimeout、setInterval定时器方法通用方法,简化逻辑异步编程常见方法:回调函数DOM事件监听发布订阅模式ES6中的promise 对象ajax请求注意:异步任务又可分为宏任务(macro-task)...原创 2020-04-17 22:08:30 · 336 阅读 · 0 评论 -
JavaScript----什么是纯函数
定义简单来说,一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用,我们就把这个函数叫做纯函数。这么说肯定比较抽象,我们把它掰开来看:函数的返回结果只依赖于它的参数。函数执行过程里面没有副作用const a = 1const foo = (b) => a + bfoo(2) // => 3foo 函数不是一个纯函数,因为它返回的结果依赖于外部变量 a,我...转载 2020-04-09 15:07:23 · 155 阅读 · 0 评论 -
js中关于各个循环的认识
for循环循环最原始的写法,相比起来说,写法较为麻烦。forEachforEach是数据内置的循环方法,会对数组中的每个元素提供一次回调执行函数匿名函数中this是指的window执行的速度没有for循环快,因为接收了一个回调函数,性能上比不上for循环其返回值是 undefined ,不可以链式调用,可以通过数据的索引修改原来数组的数据forEach遍历过程中没有办法通过 ret...原创 2020-03-06 20:45:18 · 169 阅读 · 0 评论 -
js new的原理解析
new 的使用场景:一般是用来创建一个 obj 实例的。代码分析:function People(name) { // 构造函数可以直接以函数的方式来使用 this.name = name; console.log(this); return {name: name};}var p1 = new People("zlq");var p2 = People("zs");co...原创 2020-03-06 17:38:53 · 305 阅读 · 0 评论 -
原生js实现 bind 绑定 this 指向
我们都知道对于 this 指向来说,可以通过 call、apply、bind 来改变 this 的指向,那么如何自己实现 bind 绑定 this 的方法呢?如下分析:要想直接当全局的方法来使用,那么需要在 Function 原型上添加bind方法;获取方法自身的 this 指向获取调用函数的上下文(传递参数)通过 apply 改变其指向并返回Function.prototype....原创 2020-03-06 16:41:22 · 426 阅读 · 0 评论 -
面向对象、面向过程编程的理解
概念理解1. 面向过程编程面向过程编程是一种以过程为中心的编程思想,分析解决问题的步骤,然后使用函数的方式把这些 步骤 一步一步的实现。特点:数据和对数据的操作是分离的。2. 面向对象编程面向对象编程是将事务对象化,通过 对象通信 来解决问题。特点:数据和对数据的操作是绑定在一起的。三大特征:(1)封装:把客观事务封装成抽象成的类,隐藏对属性和方法的实现细节,仅对外提供接口。(...原创 2020-03-06 10:54:13 · 965 阅读 · 1 评论 -
js之字形输出二叉树
/* 1 2 3 4 5 6 7 输出:[[1], [3, 2], [4, 5, 6, 7]]*/// 主要思想就是二叉树的遍历function print(root) { if(!root) return []; var result = [], queue = [], flag = true; queue.pu...原创 2020-03-04 15:26:01 · 317 阅读 · 0 评论 -
JS中string值类型为什么会有length属性、以及其他字符串方法 -- js包装对象
前言JavaScript数据类型包含两种:基本类型(或原始类型)和引用类型;基本类型的值是保存在栈内存中的简单数据段,是按值来访问的。有 String、Number、Boolean、Undefined、Null;引用类型的值是保存在堆内存中的对象,是按引用来访问的。有Object、Function、Array、Date、RegExp等;对象自身是拥有属性方法的,如下:var arr ...原创 2020-03-03 09:19:53 · 2182 阅读 · 0 评论 -
排序问题
js数据去重常用方法:sort、冒泡、快排、归并等。sort排序sort() 方法不传递回调方法时,会默认调用每一项的 toString()方法,然后返回得到比较的字符串。sort 方法是在原数组上进行的修改,不会生成副本。var arr = [1,5,2,9];arr.sort(function(a, b) { if(a > b) return 1; // 互换...原创 2020-03-02 17:16:35 · 217 阅读 · 0 评论 -
js object 深、浅拷贝
基本类型值常见基本数据类型:string、number、boolean、undefined、null、symbol;基本类型是按值来访问的,从一个变量复制基本类型到另一个变量后,这两个变量是完全独立的,二者互不影响。var str = "zlq":var str2 = str;str2 = "qlz";console.log(str); //zlq引用类型值常见引用类型...原创 2020-03-02 20:49:18 · 324 阅读 · 0 评论 -
常见的文件类型:mime.json
可以直接复制过去创建一个mime.json文件 Content-Type:***{ ".323":"text/h323" , ".3gp":"video/3gpp" , ".aab":"application/x-authoware-bin" , ".aam":"application/x-authoware-map" , ".aas":"application/x-...原创 2019-05-29 14:02:19 · 2479 阅读 · 0 评论 -
Promise的理解
一、理解Promise1.简介new Promise( /* 执行器 executor */ function (resovle, reject){ //执行耗时较长的异步操作 resolve(); //数据处理完成 reject(); //数据处理失败 }).then(function A(){//成功下一步处理}, function B(){//失败处理});...原创 2019-10-14 14:52:09 · 171 阅读 · 0 评论 -
slice,substr和substring的区别
首先,他们都接收两个参数,slice和substring接收的是起始位置和结束位置(不包括结束位置),而substr接收的则是起始位置和所要返回的字符串长度。string.slice(start, end)提取一个字符串string.substring(start, end)提取一个字符串,end不支持负数string.substr(start, len)提取一个长度为len的字符串 ...翻译 2019-03-23 15:33:04 · 216 阅读 · 0 评论 -
js中什么是伪数组,怎么将伪数组转化为标准数组?
伪数组就是:具有0到length-1的属性,并有length属性一般获取到的DOM元素或者jQuery获取到的元素都是伪数组。伪数组:将伪数组转化为标准数组需要用到数组原型中的方法 slice //需要使用到call方法,因为lis并没有该方法,需要使用call来借调 console.log(Array.prototype.slice.call(lis));...原创 2019-06-07 11:21:40 · 3050 阅读 · 0 评论 -
JS-自定义滚动条的几个实例
首先要说的就是:怎么实现一个自定义的滚动条主要步骤:1. 定义两个div,一大一小,让小div在大div上滚动2. 利用拖拽原理使小div可以滚动,这里拖拽的时候,只是改变小div的left值;3. 限制小div的滚动范围 <div id="parent"> <div id="child"></div>...转载 2019-06-02 21:26:01 · 274 阅读 · 0 评论 -
Object对象entries(),keys(),values()等方法的总结
一、Object.entries()`Object.entries()` 方法返回一个给定对象 *自身* 可枚举属性的键值对数组,其排列与使用 `for...in` 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。 通俗点就是 `Object.entries()` 可以把一个对象的键值以数组的形式遍历出来,结果和 `for...in` 一致,但不会遍历原型属...原创 2019-07-13 14:54:05 · 1231 阅读 · 1 评论 -
H5的学习笔记
讲在前面:建议在IDE集成环境下开发学习。HTML5一、什么是H5?H5并不是一个新的语言,它只是HTML语言的第五次重大的修改----版本。支持:支持所有的主流浏览器(Chrome、火狐、Safari、苹果、IE及9以上),IE8以下的不支持,需要考虑兼容性。改变了用户与文档的交互方式。多媒体:video、audio、canvas等。增加了新特性:语义特性、本兮存储特性、网页多媒体...原创 2019-10-01 17:44:08 · 712 阅读 · 0 评论 -
CSS3学习笔记
一、认识C3CSS3 是 CSS2 的“进化”版本,在CSS2的基础上,增强或新增了许多特性。弥补了C2的不足之处,使得web开发更加便捷高效。现状:浏览器的支持性比较差,需要添加特定的前缀来处理兼容性;移动端支持由于PC端;在不对的改进中(可以替代一部分js操作),应用相对广泛;坚持渐进增强的原则。...原创 2019-10-04 12:10:10 · 317 阅读 · 0 评论 -
js中函数标识符arguments
function sum() { let a = 12; let b = 3; console.log(arguments); //[Arguments] {} console.log(arguments.callee); //[Function: sum] console.log(arguments.callee.toString()) ...原创 2019-05-26 11:14:17 · 238 阅读 · 0 评论 -
CSS属性:vertical-align:middle,设置为什么无效!
最近,在学习CSS中,每次对一个页面进行排版的时候,总是需要对文字居中,每次在div里面设置text-align和vertical-algin两个属性就会以为他会居中!图一:图二:图三:这是外面一个div里面在分几个div,我在其中一个中输入文字,但是写了text-align即文字居中和vertical-align垂直居中,以为就会让文字居于正中间,但是却显示如图二的效果!这是为什...转载 2019-05-12 16:58:10 · 2783 阅读 · 0 评论 -
前端项目添加自定义icon图标步骤
在开发过程中,往往需使用到各式各样的icon图标,而有的图标库提供的资源并不多,由于icon图标属于字体样式,如果使用图片替代的话,缺点比较明显,比如放大失真,每次联网都要加载等。所以往往需要自己利用其他的icon图标库自定义图标样式,下面借用阿里巴巴矢量图标库为例分享一下如何在前端项目中自定义icon图标。其中,红色字体标出来是容易漏掉的步骤。一.登陆阿里巴巴矢量图标库打开网址:http...转载 2019-05-12 16:46:50 · 3496 阅读 · 0 评论 -
user-select的使用
之前在我编写音乐官网的时候,涉及到关于歌曲名称复制的问题,这个时候可能不让复制更符合常理,因此我们可以用到user-select来进行设置。具体用法如下:语法:user-select:none |text| all | element默认值:text适用于:除替换元素外的所有元素继承性:无动画性:否计算值:指定值取值:none:文本不能被选择text:可以选择文本all:当所有内容作为一个整体时...原创 2019-03-31 07:48:02 · 2484 阅读 · 0 评论 -
Underscore.js (1.7.0) 中文文档
本文档为Underscore.js (1.7.0) 中文文档,查看1.6.0版本的文档请点击:http://www.css88.com/doc/underscore1.6.0查看1.5.2版本的文档请点击:http://www.css88.com/doc/underscore1.5.2Underscore一个JavaScript实...转载 2019-03-31 21:13:57 · 1114 阅读 · 0 评论 -
JS实现验证码
温馨提示:不推荐使用下面方法(及前端验证码校验)进行校验,因为只进行前台验证而不进行后台服务器端的校验,黑客大咖们很容易攻破这道防线,不能够很好的保证网站的安全性。<!Doctype html><head> <title>js验证码</title> <style type="text/css"> .co...原创 2019-03-31 18:01:51 · 5009 阅读 · 2 评论 -
HTML中的几种隐藏的区别
CSS中让元素隐藏的方法很多,但是呢,隐藏之后有的占据原有空间,有的不占据空间;有的可以响应点击,有的不能响应点击。{ display: none; /* 不占据空间,无法点击 */ }{ visibility: hidden; /* 占据空间,无法点击 */ }{ position: absolute; top: -999em; /* 不占据空间,无法点击 */ }{ position:...转载 2019-03-27 09:19:45 · 4818 阅读 · 0 评论 -
jQuery通过Ajax向服务器获取数据
服务器返回的数据一般分为两种,一种是xml,一种是json前端发送Ajax请求ajax({ type:"GET", url:"10.php", data:{}, timeout:3000, success:function (msg) { // console.log(msg.responseText); //注意:如...原创 2019-03-23 15:38:55 · 1038 阅读 · 0 评论 -
title标签的怎么实现文字滚动效果
在我实现QQ音乐官网的时候,遇到了这样的问题,就是title标签中文字过长时,如何实现文字的滚动效果呢?别慌,看下面的代码解析: //我在动态的设置title标签中的内容,可以将text()中的内容看做是string $("head title").text(" 正在播放 "+$item.get(0).music.name+"-"+$item.get(0).music.singer); /...原创 2019-03-29 21:10:51 · 605 阅读 · 0 评论 -
怎么获取网站上的icon图片
我们在写网站或页面的时候,设置的 icon 图片通常在head中的 link 标签里设置,如下:<link rel="icon" type="image/x-icon" href="./images/favicon.ico">但是在大部分的网站的中,都不能直接在 link 标签中,这类型的网站 icon 存放了根目录下,名为 favicon.ico。例如:QQ音乐:http...原创 2019-03-29 16:45:10 · 2618 阅读 · 0 评论 -
W3C 代码标准规范
W3C通过设立领域(Domains)和标准计划(Activities)来组织W3C的标准活动,围绕每个标准计划,会设立相关的W3C工作组织(包括工作组、社区组、商务组等)。W3C会根据产业界的标准需求调整Domains和Activity的设置及相关的工作组设置。截至2014年7月,W3C共设立5个技术领域,开展24个标准计划。查看所有工作组列表(英文)。w3cinteraction domain...原创 2019-03-26 09:17:31 · 367 阅读 · 0 评论 -
前端面试——W3C标准及规范
作为前端工程师对W3C标准和规范不是很陌生。很多招聘要求中经常提到深入了解W3C标准及规范。那下面就总结一下W3C标准及规范:概念:W3C标准 中文名:万维网联盟,外文名:World Wide Web Consortium 万维网联盟标准不是某一个标准,而是一些列标准的集合。网页主要有三部分组...转载 2019-03-26 09:04:17 · 313 阅读 · 0 评论 -
js中style,currentStyle和getComputedStyle的区别以及获取css操作方法
currentStyle和getComputedStyle的区别以及获取css操作方法style:各大浏览器都兼容,能设置样式和获取样式,但是获取不了外部样式,如果写了行内没有的样式,返回的是空值写法:元素.style.样式名=“样式值”;currentStyle属性和getComputedStyle属性不能设置属性,只能获取currentStyle:该属性只兼容IE,不兼容火狐和谷歌写...原创 2018-12-23 21:16:19 · 228 阅读 · 0 评论 -
网址后参数的处理
在Get请求时,传递过去的参数会跟在网址的后面,格式为:https://www.baidu.com?uername=zlq&age=20; 但是很多时候,网址后面的参数不仅仅是我们需要传递的参数,还会加一个随机数,以保证每次打开网站是,网址都不一样。解决方法:传递的参数以一个对象为例://将对象转化为字符串的方法,然后将字符串加到网址后面即可function obj2str(obj...原创 2019-04-01 10:59:52 · 2373 阅读 · 2 评论 -
CSS中font-weight属性
在这之前我使用该属性加粗字体时,只知道将其属性值设置为700这一种方法,今天呢,我专门就该属性做了系统化的学习。如下:定义和用法:font-weight 属性设置文本的粗细。实例设置三个段落的字体的粗细:p.normal {font-weight:normal;}p.thick {font-weight:bold;}p.thicker {font-weight:900;}可能有的值...原创 2019-03-28 08:53:26 · 2457 阅读 · 0 评论 -
jQuery中内容滚动器插件
大家可能发现,在我写的默认的文章内容中出现的滚动条样式很难看,而我们在浏览一下网站时,见到很多不同样式的滚动条,其实他们就是采用我们 jQuery 框架中插件来做的。jQuery内容滚动器(jQuery custom content scroller)使用方法:首先我们需要登录网站进行向文件的下载http://manos.malihu.gr/jquery-custom-content-sc...原创 2019-03-28 09:11:03 · 311 阅读 · 0 评论