前端工程师
文章平均质量分 83
前端小vegetable
一个正在前端路上疯狂学习的小菜鸡
展开
-
获取元素相对于浏览器的距离
方法一利用DOM元素的offsetParent属性对其父级进行遍历,拿到它们的offsetLeft相加,直到访问到body标签终止(body.offsetParent为null)function getOffsetLeft(obj, direction){ if(direction === "left"){ var tmpLeft = obj.offsetLeft; ...原创 2020-04-19 17:07:07 · 1113 阅读 · 0 评论 -
Vue数据双向绑定的实现
实现原理利用Proxy代理实现对对象的代理,重写set方法,在对该代理对象就行赋值时,更新绑定该对象属性值的DOM元素。首先定义两个input标签以及它们的label,还定义一个内容展示区,用于看到input标签内值改变时数据值的变化<label for="name">姓名:</label><input id="name" type="text" oninpu...原创 2020-04-18 12:01:10 · 217 阅读 · 0 评论 -
JS模块化
简介js目前的主流模块化有CommonJS、AMD、CMD(阿里员工开发,但已经卖给国外,只需要做了解)、ES6规范。CommomJS首先是用在服务器端(Node)的规范,后来也可以用在浏览器端,但是需要提前打包编译(使用Browserify)。基本语法暴露模块:module.exports = valueexports.xxx = value注意暴露的模块是一个对象。引入模块...原创 2020-03-01 14:14:50 · 198 阅读 · 0 评论 -
CSS画等腰三角形与直角三角形
代码<html> <head> <meta charset="utf-8"> <style> .triangle{ width: 0; height: 0; border: 50px solid transparent; border-top-color: red; /* 要显示的边的对边可以...原创 2019-08-10 10:38:05 · 1938 阅读 · 0 评论 -
为什么要清除浮动以及怎么清除浮动?
不清除浮动的后果HTML结构如下: <div class="topDiv"> <div class="textDiv">文本信息</div> <div class="floatDiv">浮动元素</div> </div> <div class="bottomDiv"> 底部元素 </di...原创 2019-08-10 10:25:41 · 412 阅读 · 0 评论 -
利用documentFragment优化DOM操作
createdocumentfragment()方法创建了一虚拟的节点对象,节点对象包含所有属性和方法。将要添加的节点一次性放入节点碎片中,然后进行一次DOM操作添加节点即可。优化前:<div id="wrap"></div> <script> let wrap = document.getElementById("wrap"); ...原创 2019-08-14 09:39:03 · 288 阅读 · 0 评论 -
事件委托(事件代理)的简单例子,看完就懂
使用背景事件委托常用在导航和列表中,话不多说,直接上例子。原创 2019-08-01 20:54:07 · 3097 阅读 · 0 评论 -
AJAX的理解和原生实现
唠嗑 如果你面试过前端方面的岗位,肯定对AJAX不陌生,因为几乎是前端工程师必问的问题,概念在此不再叙述,简单来说就是在不更新整个页面的前提下更新某个页面的模块内容,为什么这么说呢,因为以前的form表单提交时,会指定一个action选项,当表单发出提交请求时会跳转到这个页面,拿PHP举例,PHP是一种...原创 2019-07-22 20:39:05 · 141 阅读 · 0 评论 -
CSS中左右两块固定,中间自适应的简单实现
因为在面试中遇到过几次这样一个经典的问题,而且在自己实际开发过程中也遇到过这样的布局要求,所以在此做一个简单的记录,一般的需求场景为根据屏幕大小自适应的调整布局,多出现在移动端和响应式网页中,话不多说,先看最终的效果。最终效果代码实现<html><hea...原创 2019-07-22 20:04:45 · 238 阅读 · 0 评论 -
事件捕获和事件冒泡以及addEVentListener添加事件时指定事件触发方式
事件捕获事件从最不精确的对象(document 对象)开始触发,然后到最精确的对象(例如鼠标点击时,最接近鼠标的Dom节点)事件冒泡事件按照从最精确的事件目标(例如点击鼠标时,最接近鼠标的Dom节点)到最不精确的事件目标(document对象)的顺序触发。addEVentListeneraddEventListener() 方法用于向指定元素添加事件句柄。语法为:eleme...原创 2019-07-31 20:51:47 · 770 阅读 · 0 评论 -
JS对象继承的几种方式
背景在学习的过程中学到的知识,在此分享给大家,同时也给自己记录一下下1. 原型链继承例子: Grand.prototype.lastName = "Wang"; function Grand(){ } Father.prototype = new Grand(); Father.prototype.age = 50; function Father(){ } Son....原创 2019-07-30 22:17:41 · 217 阅读 · 0 评论 -
原生JS实现轮播图(事件委托和普通实现)
轮播图轮播图的概念相信不用赘述,那么我们直接开始思路解析。如果直接要源代码,请点击此处思路解析轮播图实现的思路其实很简单,我采用的是几张图片依次横向排列,通过将可视区域和图片大小统一来实现每次只播放一张图片,然后设定定时器来定时的轮播图片(本质就是改变后面一整张图的位置,有点类似于几张横向粘在一起的照片的感觉,前面有个相框,你可以拉动后面的照片来决定相框里显示哪张照片),思路很简单,那么,上...原创 2019-07-30 21:46:22 · 423 阅读 · 0 评论