Web前端
文章平均质量分 80
青天诀
狂傲,却不从门缝看人;散漫,骨子里却是真诚。
展开
-
Vue scoped与深度选择器deep的原理
JS引入模块化概念后,变得更易于开发维护,但是css样式由于其特殊性,一直没有实现模块化,scoped的出现就是为了实现样式模块化,其本质利用属性选择器实现的一种伪模块化,并非真正意义上的模块化,但这已经让css模块化前进了一大步,要知道JS的模块化也是以这种方式开始的,比如早期的seajs,requirejs都是利用闭包封装达到模块化的效果,后来慢慢的出现了ES6的模块化规范import/export,说不定未来的某一天css也会出现真正的模块化,我们就不用学习这种知识点了。说回正题,该篇文章主要从以下原创 2020-09-25 10:48:37 · 1811 阅读 · 1 评论 -
【第25题】node模块的循环加载
题目描述:node 环境下,有A、B两个模块,两个模块互相调用,打印的输出结果是什么?// a.jsexports.x = 'a1';console.log('a.js ', require('./b.js').x);exports.x = 'a2';// b.jsexports.x = 'b1';console.log('b.js ', require('./a.js').x);exports.x = 'b2';// main.jsconsole.log('main.js ',原创 2020-06-20 17:45:43 · 381 阅读 · 0 评论 -
彻底解决背景跟随弹窗滚动问题
背景在移动端使用弹窗时,我们会经常遇到这种现象:滑动弹窗时,遮罩层下面的背景(body)也会跟随滑动,带来的用户观感体验很差。市面上的解决方案大部分通过阻止touchmove默认事件执行event.preventDefault()解决,但是这种方案存在兼容性,不能对所有浏览器都有效,而且如果弹窗本身存在滚动(如活动规则弹窗),这种解决方案并不能阻止背景滑动,如下图活动规则弹窗所示:终极解决方案先上代码,超级简短// 展示弹窗时,阻止背景滚动function stopScroll () {原创 2020-06-20 17:44:43 · 1977 阅读 · 0 评论 -
【第24题】三条路径理清原型链(定格记忆篇)
面试题(头条)利用原型和原型链相关知识,画出 Object、 Function、Object.prototype、Function.prototype 四个对象间的关联关系答案解析:原型和原型链,是javascript这门语言中的重要概念,同时也是面试过程中的必考知识点。小编对它也是日常迷惑,每次都需要查资料、重新理逻辑,近日重新换了个角度思考,对原型和原型链有了更加深刻的认识和理解。...原创 2019-12-26 10:44:56 · 265 阅读 · 1 评论 -
node 文字生成图片
背景不知不觉,公众号【前端名狮】已经做了三个月时间了,期间共更新了22篇解析经典面试题的文章,60篇精选文章,真的是困苦和收获共存的三个月。公众号发布文章时,需要为文章配置一个封面图片。我的常规做法就是网上搜一张图片,然后利用 PhotoShop,在图片上加入文章标题,然后导出生成图片,如下图所示:上图实际就是在一张背景图中,加入了一行文字。操作步骤简单,但是每次都需要打开PhotoSho...原创 2019-12-04 09:42:40 · 3191 阅读 · 0 评论 -
【第23题】排列组合
题目描述高中的时候数学课上(或者小学奥数)学的排列组合,大家还记得吗?排列比较简单,就不提了。那么,组合怎么用程序来实现呢?比如箩筐里有6个标了号的苹果,1 2 3 4 5 6,从里面取出3个苹果,都有什么取法呢?/* * arr 一筐苹果的数组,比如['1', '2', '3', '4', '5', '6'] * num 选出几个 */function getCombinat...原创 2019-11-15 10:40:05 · 320 阅读 · 0 评论 -
【第22题】理解 JS 模块化
题目描述简单描述一下你所了解的JS模块化答案解析这道题目主要考察对JS模块化发展历程的了解,以及发展中出现的一些规范和技术的掌握。模块化是每一种语言膨胀的毕竟之路,JS 也不例外,从原来的不支持模块化,到现在支持模块化,经历了一个曲折的过程。JS 模块化产生的原因以前JS本身没有模块化的概念和相关API,开发者一般都是在html中引入多个script标签,业务逻辑复杂时,就会带来很多...原创 2019-11-11 09:59:38 · 226 阅读 · 0 评论 -
Navigator.sendBeacon 无阻塞发送统计数据
业务场景当用户关闭浏览器、刷新浏览器或者跳转其他页面时,向服务器发送一些统计数据。常规方案1. 直接发送 xhr 请求我们会优先想到监听页面的unload或者beforeunload事件,在事件回调里使用XMLHttpRequest发送异步请求。但是由于是xhr请求是异步发送,很可能在它即将发送的时候,页面已经卸载了,从而导致发送取消或者发送失败。异步请求响应返回后,由于页面和相关资...原创 2019-10-28 12:23:44 · 7850 阅读 · 0 评论 -
【第21题】数组随机排序的三种方法
题目描述给定一个数组,对其进行随机排序。示例如下:// 示例输入:[0, 2, 4, 8, 1, 3, 5, 8]// 因为是随机排序,输出结果不唯一输出:[3, 0, 4, 5, 8, 2, 8, 1]答案解析这道题目在面试中也是常考的,变相考察思维逻辑、数组操作API的熟练程度等方面,题目难度为Easy。我能想到的应用场景就是:接口返回若干道题目,希望每次进入页面,题目的展...原创 2019-10-12 09:29:00 · 1392 阅读 · 0 评论 -
javascript 数组排序sort()用法
sort() 方法用于对数组的元素进行排序。原创 2014-11-14 20:43:14 · 704 阅读 · 0 评论 -
javascript 无缝滚动源码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> 无缝滚动 *{ margin:0px; padding:0px; } #move{ width:920px; height原创 2014-11-17 09:54:05 · 437 阅读 · 0 评论 -
javascript 延时提示框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> New Web Project div{ margin:10px; float:left; } #div1{ width:50px原创 2014-11-15 21:11:04 · 500 阅读 · 0 评论 -
JavaScript初学者福利!必须收藏的24条小技巧
这篇文章将回顾JavaScript的知识 !如果你看完了下面的内容,请务必让我们知道你掌握的小技巧!1.使用 === 代替 ==JavaScript 使用2种不同的等值运算符:===|!== 和 ==|!=,在比较操作中使用前者是最佳实践。“如果两边的操作数具有相同的类型和值,===返回true,!==返回false。”——《JavaScript:语言精粹》然而,当使用==和!转载 2014-11-16 11:52:38 · 597 阅读 · 0 评论 -
javascript制作的时钟
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> New Web Project body{ margin:0px; padding:0px; } #timer{ mar原创 2014-11-15 20:18:25 · 610 阅读 · 0 评论 -
DOM基础操作
html代码:原创 2014-11-17 19:23:37 · 446 阅读 · 0 评论 -
jQuery幻灯片效果源码赏析
jQuery幻灯代码*{ margin:0; padding:0;}body{ background:#222; margin:30px auto; width:960px;}/* slide */#slide{ width:960px; height:300px; background:#FFF; overflow:hidden; position:relati原创 2014-11-01 22:41:59 · 550 阅读 · 0 评论 -
javascript创建删除节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> New Web Project window.onload=function() { var oTx1=document.getElementById(原创 2014-11-18 19:01:44 · 457 阅读 · 0 评论 -
javascript 对表格元素的快捷操作
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> New Web Project table{ width: 500px; } td{ border:1px solid #ccc原创 2014-11-19 18:55:37 · 826 阅读 · 0 评论 -
javascript 多物体任意运动框架
每个复杂的运动效果都是由简单的效果组成的,我们可以为简单的效果制定一个框架,也就是写一个通用函数,这样可以对元素的任何属性进行变换,复杂的效果就可以很容易实现。注意事项:当变换元素的透明度时,需要做特殊处理如果变换元素宽度时,对于有border的元素,如果我们使用obj.offsetWidth来取得元素宽度时,会出现错误,因为offsetWidth包括边框。如果边框是1px,定时函原创 2014-11-25 16:36:08 · 833 阅读 · 0 评论 -
javascript 排序li
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> New Web Project window.onload=function(){ var oU1=document.getElementById('uAge原创 2014-11-20 19:26:34 · 876 阅读 · 0 评论 -
javascript 搜索功能
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> New Web Project table{ width: 500px; } td{ border:1px solid #ccc原创 2014-11-20 19:37:12 · 1938 阅读 · 0 评论 -
javascript 淡入淡出效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> New Web Project #dd{ width:200px; height:200px; background:red; opa原创 2014-11-21 13:53:44 · 829 阅读 · 0 评论 -
javascript 侧边栏一键分享移入移出效果
运动框架:先要清除定时器,防止多次点击或者移入移出时,开启多个定时器,元素的运动会是所有定时器中运动的总和当达到目的时,要清除定时器(使用if/else 实现)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> N原创 2014-11-21 16:21:26 · 1450 阅读 · 1 评论 -
javascript 悬浮跟随框缓动效果
悬浮跟随框是我们在网页中经常见到的效果,我们还是使用上一实例中的运动框架去实现。定义一个运动函数,当触发时调用,并且传递一个目标位置作为参数运动函数内部,调用定时函数,在定时函数内部,先求出元素位置与目标位置的距离差,然后除以一个数值作为速度(由于距离差一直在缩小,所以速度值也一直在变小,从而达到缓动效果)由于网页上位置设置最小单位是1px,所以在步骤二中的运算可能会出现小数的情况,我原创 2014-11-24 18:18:48 · 1221 阅读 · 0 评论 -
选项卡制作学习
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> New Web Project #contents div{ width:230px; height:300px; background-co原创 2014-11-07 10:33:40 · 444 阅读 · 0 评论 -
JS基础——Cookie与存储
一、Cookie是什么Cookie是一种客户端(浏览器)把用户信息以文件形式存储到本地硬盘的技术,说白了就是一种浏览器技术二、Cookie的作用Cookie的作用很单一,就是存储客户数据。(存储数据的文件叫Cookie文件)三、Cookie与变量的区别变量:数据是存储到内存中的,是一种暂时存储(一关浏览器就没了)Cookie:数据是存储到Cookie文件中的(硬盘)原创 2014-12-15 22:27:23 · 3990 阅读 · 0 评论 -
javascript 微博发布框
发布后的内容高度缓慢变大,透明度从0到100js代码:window.onload=function(){ var oTxt=document.getElementById('txts'); var oBtn=document.getElementById('btn'); var oUl=document.getElementById('ul1'); var oLi=oUl.get原创 2014-12-01 21:04:54 · 783 阅读 · 0 评论 -
JS模块化工具requirejs教程(一):初识requirejs
随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同转载 2014-12-16 21:02:24 · 620 阅读 · 0 评论 -
JS模块化工具requirejs教程(二):基本知识
前一篇:JS模块化工具requirejs教程(一):初识requirejs 我们以非常简单的方式引入了requirejs,这一篇将讲述一下requirejs中的一些基本知识,包括API使用方式等。基本APIrequire会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短define转载 2014-12-16 21:03:26 · 820 阅读 · 0 评论 -
javascript 类对象的应用
类对象继承的实现先创建一个父级对象Drag/** * @author zhaoshaobang */function Drag(id){ var _this=this; this.oDiv=document.getElementById(id); this.oDiv.onmousedown=function(evt) { _this.downFn(evt); };};原创 2014-12-12 17:13:21 · 650 阅读 · 0 评论 -
javascript 拖拽功能
拖拽功能是我们经常用到的一个功能,流程如下:鼠标点击选框时,计算出鼠标位置和选框位置的距离差,也就是disX和disY;鼠标移动,获取鼠标位置坐标,然后减去步骤一种的距离差,就是选框的坐标;鼠标弹起时,清除鼠标移动函数需要注意以下几点:鼠标移动时,有可能移出选框的范围,所以需要使用全局的移动函数,也就是document.onmousemove;鼠标弹起时,可能不在选原创 2014-12-04 15:04:00 · 944 阅读 · 0 评论 -
javascript 滚动条
滚动条的实现原理和上一篇文章中的拖拽有很大关系,滑动条就是通过拖拽实现的,通过计算滑动条的拖拽区间来得出一个比例scale,这个就是咱们要用到的文字滚动距离了,div3里别忘记添加文字具体代码如下<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose原创 2014-12-04 20:26:18 · 703 阅读 · 0 评论 -
javascript 利用ajax读取json数据
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"> New Web Project window.onload=function() { var oBtn=document.getElementB原创 2014-12-09 18:44:14 · 1754 阅读 · 0 评论 -
DOM对象和jQuery对象的相互转换
在学习jQuery的时候,有时候总是把DOM对象和jQuery对象弄混,用DOM对象去调用jQuery对象的方法,用jQuery对象的方法去调用DOM对象的方法,这是不可以的。其实这两种东西可以进行相互的转换,在使用的时候可以搭配使用。转换的过程十分的简单。1、DOM对象转换为jQuery对象对于一个DOM对象来说,要把它转换成jQuery对象只需要给DOM对象前加上$符号即可。原创 2015-01-13 17:38:25 · 787 阅读 · 0 评论 -
this 指向区分
var x = 1;function f(){ // alert(x); var x = 2; alert(this.x); x = 3;}a = f();b= new f();a=f() 这句执行时,函数里的 this 等价于 window,也就是window.x,所以弹出 结果为1b=new f()会生成一个函数实例,this指向当前实例,原创 2015-01-13 18:47:20 · 701 阅读 · 0 评论 -
简单的jQuery图片切换
在网站建设的过程中,我们经常会使用到jQuery图片切换的功能,关于该功能实际上非常简单, 但是写起来需要一些精力,所以佚站互联在这里提供一个jQuery图片切换的插件供大家使用,有兴趣的朋友可以参考一下。该插件的名字叫Swipe,是由国外达人分享的插件。使用方式:1.定义图片切换区域 2.在JS中初始化对象,原创 2015-01-19 10:26:59 · 1207 阅读 · 0 评论 -
javascript 浏览器版本检测
var ClientParams={};var Sys = {};var ua = navigator.userAgent.toLowerCase();var s;(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :(s =原创 2014-12-14 13:47:00 · 425 阅读 · 0 评论 -
cookie的使用
通过date设置过期时间date通过setDate(当前date+过期时间)来完成过期日期的设置具体使用如下:var myDate=new Date();myDate.setDate(myDate.getDate()+14);dateStr=myDate.getFullYear()+'-'+(myDate.getMonth()+1)+'-'+myDate.getDate();al原创 2014-12-14 14:14:36 · 638 阅读 · 0 评论 -
jquery 筛选元素方法
jQuery常用的元素查找方法总结1.基础$("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素原创 2014-12-15 21:40:00 · 1001 阅读 · 0 评论 -
抽奖小程序
年底了为了备战年会抽奖,特此写了抽奖的小程序,主要思路:点击抽奖,程序已经选中界面中的某一项,在选中此项之前要做类似于转盘的操作,在转动几圈后逐渐把焦点放到终点处。因此会用到定时器,要做到缓冲由快到慢,要不停地把定时器间隔时间拉长,从而实现了慢慢接近目标的效果。这个程序中用到了随机数设置转几圈,随机选中哪一个元素的算法,大家以后可以在自己的程序中应用。转载 2014-12-15 22:15:08 · 2564 阅读 · 0 评论