javascript
文章平均质量分 73
Qssn丶
学无止境,码无尽头
展开
-
原型和原型链以及对象的封装继承
代码已经关联到github: 链接地址 文章有更新也会优先在这,觉得不错可以顺手点个star,这里会持续分享自己的开发经验(:JavaScript是弱对象的语言,但是也有面向对象编程的封装与继承的方法,而原型和他们有密切的联系。原型和原型链了解原型和原型链让我们从一个例子开始:function Foo(){}const f1 = new Foo()console.log(Foo.prototype===f1.__proto__)//?这里的prototype和__proto__都是.原创 2022-04-19 11:12:12 · 312 阅读 · 0 评论 -
了解下闭包?
代码已经关联到github: 链接地址 文章有更新也会优先在这,觉得不错可以顺手点个star,这里会持续分享自己的开发经验(:定义一个函数和对其**周围状态(Lexical Environment,词法环境,详细可看《执行上下文、作用域到底是什么?二者有什么关系》)**的引用捆绑在一起(或者说函数被引用包围),这样的组合就是闭包(closure)。也就是说闭包让你可以在一个内层函数中访问到其外层函数的作用域。用途创建私有变量闭包让函数以外也可以访问到函数内部的变量,这样可以用来创建私有.原创 2022-04-18 16:02:41 · 236 阅读 · 0 评论 -
执行上下文、作用域到底是什么?二者有什么关系
代码已经关联到github: 链接地址 文章有更新也会优先在这,觉得不错可以顺手点个star,这里会持续分享自己的开发经验(:什么是执行上下文JavaScript在执行代码之前,需要经过一系列的“准备”,这被称为执行上下文,其包含词法环境(Lexical Environment)和上下文(this)。所有的 JavaScript 代码在运行时都是在执行上下文中进行的,每创建一个执行上下文,就会将当前执行上下文放到一个栈顶,这就就是我们常说的执行栈。执行上下文的创建何时创建执行上下文JavaS.原创 2022-04-18 15:59:18 · 1197 阅读 · 1 评论 -
CSS in JS之styled-components
代码已经关联到github: 链接地址 觉得不错可以顺手点个star,这里会持续分享自己的开发经验(:我们都知道,JSX是JS语法的扩展,增加了对HTML语法的支持,那距离all in js就只差一个CSS语法支持了,目前实现该功能的库比较出名的有60+,感兴趣的可以自己查看:css-in-js。下面要介绍的就是其中之一的styled-components。简介styled-components应该可以说CSS-in-JS最热门的一个库了,到目前为止github的star数已经超过了34k.原创 2021-10-18 14:21:39 · 741 阅读 · 0 评论 -
JavaScript中的this指向全解析
面试常见问题,特地记录一下。代码已经关联到github: 链接地址 觉得不错可以顺手点个star,这里会持续分享自己的开发经验(:this在 JavaScript 中,this 是指当前函数中正在执行的上下文环境,下面从定义的方式和调用的方式上简单聊下其中的this指向问题。定义的形式function关键字通过 function 构造的函数,this是运行时指向,取决于运行时的调用者(作用域)。var obj = { foo: function () { //定义时位于全局,之后原创 2021-09-20 17:30:54 · 415 阅读 · 0 评论 -
JS解析url链接和获得get参数的两种方法
这里使用正则的方式获得具体的参数~/** * 解析url * @param {String} url eg:https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=js&oq=js */const parseUrl = (url) => { const reg = /(\w+):\/\/([\w\.]+)\:?(\d*)?([\/\.\w]*)?\??([^#]*)?#?(\S*)?/原创 2021-08-20 18:21:57 · 1065 阅读 · 0 评论 -
如何获得iframe内部的body和其他元素
记录一下如何获得iframe内部的元素~使用js获得//先拿到iframe元素,可以使用querySelector或者知道id可用window.frames获得const iframe = document.querySelector('#iframe-parent-id').firstElementChild || window.frames['my-frame-id']//2.1 获得bodyconst body = iframe.contentWindow.document.body原创 2021-07-20 10:24:32 · 4389 阅读 · 0 评论 -
根据RGB值判断颜色是否深浅色(附深浅色颜色集合)
做博客云标签时碰到了这个问题,因为自己的背景是白色的,所以标签的背景色要是深色。网上找到了按照灰度值去判断(CSDN论坛),然后又搜了一下已有的文章。g = R0.299 + G0.587 + B*0.114g越小,颜色越深,可以按照你自己的需要定一个阀值。 我的是 g < 100文章都迁移到github啦,深浅色合集也放在了下面文章地址...转载 2020-07-09 10:22:28 · 4508 阅读 · 0 评论 -
querySelector报错:: Failed to execute 'querySelector' on 'Document': '#$$assgrp__f0001' is not a valid
导致这种报错的querySelector是按css规范来实现的,所以它传入的字符串中第一个字符不能是数字、特殊字符,修改成用属性匹配即可解决,如下document.querySelector('[id="$$assgrp__f0001"]')...原创 2020-03-04 13:41:45 · 7047 阅读 · 0 评论 -
IE中输入框绑定input事件触发解析(input事件初始化自动执行问题解决)
在React项目中碰到了个问题,输入框绑定了input事件,在IE中初始化会自动执行,刚开始以为是只要有placeholder就会导致问题,后面网上搜了一轮,自己手撸了一下,总结了导致绑定的input事件自动执行的原因1.输入框的值为空,2.placeholder改变(注意这个改变的就算前后的placeholder值一样也算改变;还有就是input获得焦点时和失去焦点时,也会改变;但是改变前后...原创 2019-08-02 08:58:12 · 2669 阅读 · 1 评论 -
适用于前端JS中文排序的方法(localeCompare)
localeCompare方法返回一个数字来指示一个参考字符串是否在排序顺序前面或之后或与给定字符串相同。referenceStr.localeCompare(compareString[, locales[, options]])compareString 表示用来比较的字符串因为后一个参数浏览器支持不是很友好,就不多做介绍,感兴趣可以到MDN上看。一般的用法就是 a.localeC...原创 2019-06-25 14:17:51 · 4514 阅读 · 1 评论 -
html中引入调用另一个html的方法
html中引入调用另一个html的方法注意:需引用JQuery$("#myHoverQD").load("tyt.html", function(responseContent,status) { console.log(status);}); 参数说明原创 2017-07-07 18:04:41 · 2465 阅读 · 0 评论 -
js控制css中的帧动画, 使动画每点击一次运行一次
今天在模拟右侧栏向左滑出时,发现动画只会起作用一次,最后解决了~如下图解决思路是:动态添加class。css.moveAnimation{ animation:mymove 1s; }@keyframes mymove /*Safari and Chrome*/{ from {right:-400px;} to {right:0px;}}js(用的是react,动态添加class核...原创 2018-04-13 11:42:42 · 3839 阅读 · 0 评论 -
Chrome禁用浏览器的密码框自动保存密码提示输入('autocomplete="off"'在Chrome中不起作用解决方案)
最近在做项目的时候,要求项目的密码框不显示所记住密码的提示框(就是密码输入框点击不显示该网站所保存的密码列表),然后试了很多方法。autocomplete="off"无效,onfocus="this.type='password'"无效等等。然后发现了chrome自动保存密码提示的规则:1.input的id,2.input的name。方法1去掉input的id和name属性,然后给in...原创 2018-07-31 10:17:02 · 6567 阅读 · 2 评论 -
使用原生js实现reduce
mark一下 //var arr=['a','b','c'];//var arr=[1,2,3];//var arr='abc';var sum=function(a,b){ console.log(a,b) return a+b;}/** * * @param {数组} arr * @param {操作函数} f * @param {初始值} ...原创 2018-07-28 11:32:57 · 1450 阅读 · 0 评论 -
js使用indexOf和lastIndexOf判断数组是否有重复值的简单方法
回顾js基础时发现了indexOf和lastIndexOf的概念,想到了这种方式。indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置,是正向查询。lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,是逆向查询。基本思路:indexOf()和lastIndexOf()所返回的index不一致则说明有重复值,如下:var ary=[1, 2,...原创 2018-08-03 15:38:58 · 2957 阅读 · 0 评论 -
从零开始,使用Webpack4配置属于自己的React项目及源码(实现count小例子)
前言:使用react16.8+webpack4配置的项目,项目已经完成es6编译配置,安装命令用红体字标出1.项目目录结构说明及源码下载源码地址:https://download.csdn.net/download/dknightl/11074578下载完成后解压后还要解压node_module.zip压缩包,解压完node_module压缩包,命令行进入,输入npm run dev即...原创 2018-11-10 18:21:50 · 490 阅读 · 0 评论 -
js禁止右键
禁止右键菜单一搜就有了,下面代码是禁止右键事件,可以根据event的which或者bottun进行判断禁止$('#11').mousedown(function(e){ if(3 == e.which){// or e.bottun===2 console.log('这是右键单击事件'); }else if(2 == e.which){//or e.bottun ...原创 2018-12-04 09:03:50 · 408 阅读 · 0 评论 -
JS拖拽时禁止点击事件的三种方法
做项目的时候碰到一个问题,表格列头点击排序,但是拖动列排序的时候也会触发表头的单击事件,找了一圈,大致都是两种思路,但是原理都一样。就是js点击事件和拖拽事件都会执行mousedown(鼠标按下)和mouseup(鼠标释放)两个事件,拖拽多了个mousemove那么就衍生了两种方法mousedown记住鼠标按下的时间戳,然后在mouseup用鼠标释放的时间戳与之比较,少于150毫秒就触发...原创 2019-04-25 15:26:17 · 8815 阅读 · 0 评论 -
JS调用父页面的DIV,Ipunt等等属性(适用于父页面包含子页面)
有些时候我们需要从子页面调用父页面的属性,比如input的value等等。如图:一个html文件的body包含另一个html文件。 思路:先在父页面写好获得该属性值的方法,使用window.parent. 调用父页面方法,用return返回属性. //子页面方法 function getCloseModuleWin(){ console.l原创 2017-04-13 18:34:41 · 1253 阅读 · 0 评论