sxjit的博客

掌握JavaScript是前端开发者目前的必备技能，但代码敲得飞起却对它的执行机制一问三不知。了解JavaScript的执行机制对你的编码能力和代码理解将提高一个层次。1. JavaScript执行机制？很多人第一反应：单线程、自上而下。都没错，javascript是一门单线程语言，虽然在HTML5中提出了Web-Worker的概念，但它单线程的核心仍未改变。也可以说，javascript的“多线程”操作都是建立在单线程机制之上的。先简单看个场景：console.log("场景开始")setTim

从事前端工作的小伙伴肯定都听说过防抖和节流，在工作中，它们常常应用于触发次数频繁的事件，例如(resize、input、scroll、mouse事件…)，因为如果不采取节制，这些高频事件会频繁地执行响应函数，有时会影响性能或体验感。那么什么是节流和防抖？它们的共同作用是控制高频事件执行响应函数的次数。假定一个场景，响应input事件输出input框的值，我们先来看看正常情况：var inputCon = document.getElementsByTagName("input")[0]var text

对本人而言，undefined和null这两个特殊值可谓纠结了我好长一段前端路程，大体意思能明白，但却很少去深究实质区别，最近又特地学习了一番前来分享。六大基本类型(es6版)中，Undefined和Null占其中两位。大体上看，undefined和null都代表空值，实质却有所区别：undefined： 表示该变量未定义或未赋值，是一种代表变量初始化的状态值。例如已经定义了a变量，但没有赋值，获取a变量将返回undefined；又例，当某函数已定义并要求传入形参，但调用函数时未传入实参，则函数形参.

“伪类”可以说是css中的特效元素，按本人亲身经历来看，在不是很系统的自学过程中常常会忽略伪类。这里带大家快速了解:before和:after伪类和简单上手购物车图标的demo。定义：:before和:after伪类的作用就是在指定的元素的内容之前或之后插入一个元素。重点：插入的该元素有自带content属性，可直接指定元素内容，也可以赋空值""。其实在我的上一篇关于实现爱心图案的文章中就已经用到了伪类，就是那样的一种使用方式。除此之外，最常用的用法之一就是利用:after伪类清除浮动：.div {

今天刚好是母亲节，祝全天下的母亲节日快乐幸福~前端工程师怎么能不懂骚操作？制作爱心有很多方法可以实现，今天介绍本人认为目前最简单的方法，仅依靠html+css。一、先看看html结构，仅需一个容器和爱心元素，容器主要作用为相对定位，方便子元素爱心进行绝对定位调整。<div class="heartCon"> <div class="heart"></div></div>二、进行css部分。刚说到heartCon给个相对定位先，然后就是爱心元素.

清空数组这的方法其实很简单，常见的有三种：1. 给数组的length设置为0arr.length = 0前提是该语言中数组的length是可写可读。2. 直接赋值为空数组arr = []3. 使用splice方法arr.splice(0, arr.length)splice(index,number,item0,item1...,itemx)方法可以操作数组删除/替换/增加数...

“如何实现任何元素的水平垂直居中？”前端面试常常会被问到这个似乎挺不起眼没技术含量的问题，有的朋友也就支支吾吾模模糊糊地回答面试官。这里分享四种实现元素水平垂直居中的方法，简单明朗一学就上手。1. margin或padding配合调整由俭入奢，第一种方法是最基础也是比较局限的，就是用margin和padding配合调整，按已知的大小去控制间距：.parent { width: 20...

一直没怎么去深入了解js的apply()和call()的知识，最近空闲就在做demo，总结了一些：- 相同特点1. apply()和call()都是用于改变this指向，也就是改变作用对象。2. 调用的函数立即执行。- 不同点apply(obj,array)只能接受两个参数，一个是改变指向的对象，另一个是要传递的参数的数组；而call(obj,a,b,c,..)可以接受很多个参数，第一个...

实现轮播图是前端学习的一门必修课，也是用来训练js能力。今天我用原生js写了个轮播图，包含无缝衔接、指示器、左右控制器等功能，跟大家分享。先看看效果图：1. 设计html+css部分结构很简单，图片部分用ul作容器(本人习惯ul，你们也可以div)，flex布局让里面的li排成一排，因为我们要做的是滑动效果而不是简单显隐。注意，要在最后另外多一个li存放第一张图，这是为了后面实现无缝轮播。 ...

这里讲解实现抖音网红的正方体相册的动画制作(大正方体包裹小正方体，鼠标点击大正方体弹开展现小正方体)。先上效果图：1. 基础结构老规矩，先写好基础结构。这里关于3D动画制作原理及正方体简单旋转制作的知识还不清楚的话可以参考我上一篇文章。首先父元素cube用来接收3D动画的视觉属性；然后box子元素包裹正方体内容并规定动画形式为3D；然后写进大正方体的6个面div和小正方体元素inner-b...

实现正方体转动有很多方式，但开发中最实在的还是用css3开发，内容涉及过渡、转换，有兴趣可学习使自己更强！- 第一步：创建结构<div class="cube"> <div class="box"> <div class="child-th1">1</div> <div class="child-th2"&...

一、单行长文本显示省略号先讲讲常规情况下长文本不跨行显示省略号的代码：overflow: hidden; //不允许内容超出盒子white-space: nowrap; //不允许文本跨行text-overflow: ellipsis; //文本超出部分以“...”省略号表示overflow：对超出的内容进行处理white-space ：对文本格式进行规定text-ove...

前端开发免不了有图片、视频等一些模块需要大力度渲染，当网速较慢时这些模块的渲染时间相对较长，导致页面其他元素位置可能发生细微抖动，这对产品的用户体验是有所影响的。这时用个小技巧便可以解决问题。height:0: 盒子高度。我们都知道 盒子高度=内容高度+上下内边距，这里我们指定目前盒子高度为0，为下文操作做铺垫。padding-bottom: 盒子的底部内边距。开发中常见的写法是百分比(也可以...

1. reset.css不同浏览器对部分相同标签往往有不同的显示效果，区别不大吧却又多少会影响开发，那么就需要写代码时对基本样式进行设置，使不同浏览器下显示效果相同。这时候，reset.css便派上用场了。reset.css代码：（可收藏，直接引入）*{word-wrap:break-word}html,body,h1,h2,h3,h4,h5,h6,hr,p,iframe,dl,dt,dd...

在项目中会常常遇到给数组、对象排序的问题，这里做个详解供大家参考~一、sort()函数sort()是JavaScript内部提供的函数，用于对数组进行排序。它有两种形态用法：1、sort()：不加任何参数的情况下，函数默认根据字符编码顺序自动进行升序排列。var arr = [23,35,25,46,12];arr.sort(); //结果为[12,23,25,35,46]似乎没什么...

Node.js是一个基于谷歌V8引擎的JavaScript运行环境平台。它有一个特点——“模块机制”。当处理代码量庞大的程序时，我们可以将代码分成多个js文件，分别存放部分函数，再在main.js中引用各js文件和所需的函数，这里的各个js文件在Nodejs中称为“模块”。我们都知道，它的亮点之一就是，所有模块中居然可以存在相同的全局变量，并且在引用中不产生冲突！其实原因很简单，Nodejs的处理...

合格的开发者首先要保证用户信息的安全性。通常涉及的就是用户密码、口令等隐秘性信息，可能有部分人会将安全工作交给后台，但在信息从前端传至后台的过程中早已可以被截获。接下来将关于前端提交表单时的MD5加密内容。MD5加密简介MD5的典型应用是对一段信息（Message）产生信息摘要（Message-Digest），以防止被篡改。js目前是没有相关文件可直接引用的，但网上有现成的MD5加密js文件，...

刚开始接触前端的小白们可能会对HTML关于定位（position）的内容有些混乱，导致无法较好地运用定位。要知道，运用好定位可以解决许多不起眼的小问题和了解文档流。接下来将对四种定位进行简单解析和区分。静态定位静态定位（position：static）是HTML中的默认定位，符合常规文档流，这里没太多内容。相对定位相对定位（position：relative），对象相对于本身位置而言，进行...