
js学习笔记整理
文章平均质量分 61
冰雪为融
我与我周旋久,宁做我
展开
-
常用镜像 npm
常用镜像 npm原创 2022-11-15 10:19:01 · 484 阅读 · 0 评论 -
vue原理之-神奇的Object.defineProperty
这个方法了不起啊。。vue.js和avalon.js 都是通过它实现双向绑定的。。而且Object.observe也被草案发起人撤回了。。所以defineProperty更有必要了解一下了几行代码看他怎么用 var a= {} Object.defineProperty(a,"b",{ value:123 }) console.log(a.b);//123很简单,,它接受三个参数,而且都是必填的。。传入参数第一个参数:目标对象第二个参数...转载 2021-03-31 17:21:49 · 246 阅读 · 0 评论 -
解决input自动获取焦点的问题
解决方案:设置tabindex="-1"即可<input type="submit" name="Submit" value="提交" tabindex="-1" />当浏览者浏览网站时可以通过按TAB键在网页的链接中依次移动,这是一个相当方便实用的功能。但如果网页中链接太多,恐怕按TAB键就没什么作用了,这时不妨通过改变TAB键移动的顺序来突出重点,在某些重要页面上方便访问者。使用TABINDEX属性可以设置TAB键在链接中的移动顺序。把链接的TABINDEX属性设成1到3..转载 2020-05-22 16:07:11 · 3396 阅读 · 0 评论 -
Web图片资源的加载与渲染时机
原文出处: Leechikit 此文研究页面中的图片资源的加载和渲染时机,使得我们能更好的管理图片资源,避免不必要的流量和提高用户体验。浏览器的工作流程要研究图片资源的加载和渲染,我们先要了解浏览器的工作原理。以Webkit引擎的工作流程为例:从上图可看出,浏览器加载一个HTML页面后进行如下操作:解析HTML —> 构建DOM树加载样式 —> 解析样式 —> 构建样式规则树...转载 2018-06-06 18:52:21 · 1575 阅读 · 0 评论 -
js数组中的find、filter、forEach、map四个方法的详解和应用实例
数组中的find、filter、forEach、map四个语法很相近,为了方便记忆,真正的掌握它们的用法,所以就把它们总结在一起喽。find():返回通过测试的数组的第一个元素的值在第一次调用 callback 函数时会确定元素的索引范围,因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被c...原创 2018-04-27 21:30:31 · 113977 阅读 · 7 评论 -
Js中的模块函数和命名空间的介绍
命名空间namespace(某些语言中叫package),是一个在静态语言中常见的概念。它可以帮助我们更好地整理代码,并可避免命名冲突。遗憾的是,JS中并不提供原生的命名空间支持。在JS中创建的任何对象都默认是全局对象。在现代的大规模JS开发中,不采用命名空间会造成非常糟糕的命名方式,比如用前缀命名函数和变量,导致代码丑陋不可读。当引入第三方库后,更可能会发生命名覆盖的情况。简单地说,我们可以创建...原创 2018-05-04 22:39:34 · 371 阅读 · 0 评论 -
js中函数名后面的括号加与不加的区别和作用
虽然有点基础,但是本人认为越是基础的东西越应该重视起来,毕竟一座大楼,想要建的高,地基就要足够牢固function fn(){ return 10}var a=fnvar b=fn()上面的实例,a是fn函数,b是10函数是一种叫做function引用类型的实例,因此函数是一个对象。对象是保存在内存中的,函数名则是指向这个对象的指针。var a = fn表示把函数名fn这个指针拷贝一...原创 2018-05-03 22:44:08 · 831 阅读 · 0 评论 -
JavaScript中的Object.is()、==和===
Object.is()方法:判断两个值是否是相同的值语法:Object.is(value1, value2);value1是需要比较的第一个值,value2是需要比较的第二个值返回值:布尔值,如果两个值相同返回true,不相同返回false这中相等性判断逻辑和传统的==运算符所用的不同,==运算符会对它两边的操作数做隐式类型转换(如果它们类型不同),然后才进行相等性比较(所以才会有类似""==fa...原创 2018-04-24 22:33:49 · 1160 阅读 · 0 评论 -
前端Unicode字符图标汇总
前端Unicode字符图标 原文链接地址:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141225979.html如果你的页面设计中需要一些图标,你不必使用图片,也不必使用像 Font Awesome 这样的字体图标,我们要告诉你的是,在你的浏览器中已经有一个庞大的图标和符号库-Unicode。它是一个为每一个数字、字符、符号和图标分配的...转载 2018-04-04 15:44:27 · 21935 阅读 · 0 评论 -
深入理解浏览器的重绘与重排
原文章出处https://www.cnblogs.com/zichi/p/4720000.html先回顾下前文高性能JavaScript DOM编程,主要提了两点优化,一是尽量减少DOM的访问,而把运算放在ECMAScript这一端,二是尽量缓存局部变量,比如length等等,最后介绍了两个新的API querySelector()以及querySelectorAll(),在做组合选择的时候可以大...转载 2018-04-02 19:21:51 · 1820 阅读 · 0 评论 -
实现百度下拉菜单实例(利用jsonp跨域请求百度数据接口)
JSONP:是JSON with padding(填充式JSON或参数式JSON)的简写,它由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般是在请求中指定的,而数据就是传入回调函数中的JSON数据jsonp原理:在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据),函数里面利用这个参数做一些事情,然后需要的时候通过script标签加载对应远...原创 2018-03-26 17:08:31 · 1562 阅读 · 0 评论 -
js中的children实时获取子元素
先看下面一个小例子的结果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ul,li{list-sty原创 2018-06-07 21:05:07 · 38001 阅读 · 2 评论 -
js中的Math对象知识点整理
整理的都是我觉得比较常用的Math 是一个内置对象, 它具有数学常数和函数的属性和方法。不是一个函数对象。与其它全局对象不同的是, Math 不是一个构造器. Math 的所有属性和方法都是静态的. Math的属性Math.PI圆周率,一个圆的周长和直径之比,约等于 3.14159.需要注意的是很多数学函数都有一个精度,并且精度在不同环境下也是不相同的。这就意味着不同的浏览器会给出不同的结果,甚...原创 2018-06-22 21:42:16 · 469 阅读 · 0 评论 -
Javascript设计模式详解
在掘金上随便翻着看,看到了JavaScript设计模式详解,涂根华写,真的很详细,看来接下来有的学了,分享出来,希望更多的正在学前端的你可以看到喽。...原创 2018-06-09 19:32:33 · 213 阅读 · 0 评论 -
获取当天日期的时间戳||日期相关的函数
一、获取当天的时间戳new Date(new Date().setHours(0, 0, 0, 0)).getTime() //当天0点的时间戳new Date(new Date().setHours(23, 59, 59, 999)).getTime() //当天24点的时间戳二、日期相关的封装函数import _ from 'lodash'const hiddenP...原创 2019-03-13 15:45:26 · 4419 阅读 · 0 评论 -
数组和字符串对象中的共有的方法
因为容易搞混数组和字符串的方法,所以特地总结了一下数组和字符串都有的方法:concat、includes、indexOf、lastIndexOf、slice、toString数组中concat:concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。字符串中的concatconcat 方法将一个或多个字符串与原字符串连接合并,形成一个新的字符...原创 2019-02-26 10:02:35 · 858 阅读 · 0 评论 -
对象深拷贝
var deepCopy = function(obj) { // 只拷贝对象 if (typeof obj !== 'object') return // 根据obj的类型判断是新建一个数组还是一个对象 var newObj = obj instanceof Array ? [] : {} for (var ke...原创 2018-11-21 16:14:32 · 227 阅读 · 0 评论 -
CSS控制前端图片HTTP请求的各种情况示例
图片的http请求,有很多种情况,那么究竟什么情况下面不会发生请求呢?下面我用案例一一列举一下,希望对你深入了解http图片请求有所帮助。1. 隐藏图片XML/HTML Code复制内容到剪贴板<img src="haorooms.jpg" style="display: none" /> http请求如下:结论:只有Opera不产生请求。 注意:用visibili...转载 2018-09-13 14:37:40 · 1682 阅读 · 0 评论 -
js中的内置对象,宿主对象和自定义对象
JS中,可以将对象分为“内置对象”、“宿主对象”和“自定义对象”三种。1,内置对象js中的内置对象包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类对象,包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。...原创 2018-09-11 12:14:21 · 984 阅读 · 0 评论 -
js数组中的map方法使用实例
对于map方法我之前是有总结的:而且MDN上面也比较详细,所以这里我主要是写几个小例子方便理解详细内容查看:MDN|map例1:var arr = [1,2,3,4,5,6,7]; var ar = arr.map(function(elem){ return elem*4; }); console.log(ar);//[4, 8, 12, 16, 20, 24, 28...原创 2018-08-29 21:15:14 · 12218 阅读 · 1 评论 -
js中倒计时学习笔记
倒计时原理:未来的时间点-现在的时间点// 现在的时间点(在变) var iNow = new Date();// 未来的时间点(不变)//下面两种方法都可以定义未来的时间点// var iNew = new Date( 2013, 10, 27, 21,56,0 );var iNew = new Date( 'November 27,2013 22:3:0' );// 数...原创 2018-08-31 19:59:32 · 220 阅读 · 0 评论 -
js 闭包、常见认识误区与主要应用
编程语言中的闭包( Closure )不同于其他数学领域(例如集合论)中的闭包,它来源于函数式语言,但早已不局限在函数式语言中。在实现了闭包特性的各种语言中,具体的特性会有细微的差异,但总体特征是一致的。本文集中讨论 js 语言中的闭包。讨论闭包的文章、书籍已经有很多,其中不乏有准确而精辟的论述(当然重点不明、似是而非的论述也不少),然而对闭包持有误解的人依然相当多。因此本文会首先用相对较少的...转载 2018-08-21 09:26:44 · 1733 阅读 · 1 评论 -
js随机产生不同颜色
方法一(随机RGB颜色值)##### //颜色对象 function getRandomColor(){ this.r = Math.floor(Math.random()*255); this.g = Math.floor(Math.random()*255); this.b = Math.floor(Math.random()*255); ...原创 2018-07-31 15:31:31 · 8423 阅读 · 0 评论 -
Object.defineProperty
下列代码输出什么?for(var i=0;i<5;i++){ (function(i){ setTimeout(function(){ console.log(i); },i*1000) })(i)} // 0,1,2,3,4下列代码输出什么?for(var i=0;i<5;i++){ setTimeout(function(){ ...原创 2018-07-08 10:09:24 · 218 阅读 · 0 评论 -
classList属性的知识点整理
classLIst属性返回元素的类名,作为DOMTokenList对象该属性用于在元素中添加、移出、切换css类语法:elem.classList方法:add( String[,String]):添加指定的类值。如果这些类已经存在于元素的属性中,那么他们将被忽略remove(String[,String]):删除指定的类值item(Number):按集合中的索引返回类值toggle(String[...原创 2018-06-30 18:58:08 · 5546 阅读 · 0 评论 -
深入理解函数声明和函数表达式、深入理解立即执行函数(自执行函数)
在学习函数声明和函数表达式之前如果你对作用域和作用域链掌握的不是特别的好,建议您先看完js深入理解函数作用域和作用域链,再进行接下来的学习函数声明:function 函数名(){}函数表达式:function 函数名(){},函数名,可写可不写,有名函数是命名函数表达式,无函数名是匿名函数表达式长得那么像,怎么判断是函数声明还是函数表达式呢?其实就是看上下文判断的var a = function...原创 2018-03-21 19:19:03 · 1613 阅读 · 0 评论 -
深入彻底理解原生js的作用域、作用域链(以及浏览器是怎样解析js代码的)
在学习闭包的过程中,我发现,要想真正的理解闭包,光知道什么闭包是不行的,我们还需要知道什么是作用域以及作用域链、函数声明和函数表达式,当然还牵扯到的知识有,垃圾回收机制和内存泄漏等,所以,今天我就多用一点时间把这些知识点都总结一下,为了防止内容太多造成大家眼睛疲劳,我会把这些知识点分开写在不同的页面,如果觉得不错的话,再看后续的就可以。首先说函数作用域之前,我们先唠唠浏览器是怎么解析js代码的...原创 2018-03-21 18:19:41 · 460 阅读 · 0 评论 -
js面向对象(三)组件开发实现弹窗效果
组件开发:多组对象,像兄弟之间的关系(也是代码复用的一种形式)组件开发需要解决的问题:1、参数的顺序问题 2、参数不写报错的问题解决办法:主要就是通过设置默认参数和配置参数话不多说,直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <titl原创 2018-03-21 15:29:39 · 554 阅读 · 0 评论 -
js中 点和中括号的区别
"."后面的值无法改变,而"[ ]"后面的值可以改变js中允许把"."替换成"[ ]",但不是所有的[]都可以替换为点例: obj.style.top = '20px'; 也可以写作 obj.style[top]='20px';但是如果是function css(obj,attr){ return obj.currentStyle ? obj.currentStyle[at...原创 2018-03-11 19:51:27 · 1864 阅读 · 1 评论 -
Javascript中Array.filter()
filter是Javascript中Array常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。下面这篇文章就给大家介绍了关于Javascript中Array.filter()的妙用(注意使用filter可以有效实现数组去重) filter把传入的函数依次作用于每个元素,然后根据返回值是 true 还是false决定保留还是丢弃该元素。filter() 方法创建一个新的数组,新数...原创 2018-03-11 19:33:18 · 1741 阅读 · 0 评论 -
原生js实现商品筛选
用到的知识:js基础、dom、第一种方法用到的是js中的数组方法,第二种方法用到的是json和for-in以及es6实现步骤1、根据数据结构生成HTML结构(利用dom操作)2、获取每一个li,给每一个li中每一个a标签绑定事件处理函数3、点击a标签,把a标签的内容添加在对象中,同时添加样式4、根据对象存的属性生成选择则条件的HTML结构(按顺序排列)5、点击关闭选择的条件,删除数据,移除HTML...原创 2018-03-11 19:00:46 · 3643 阅读 · 0 评论 -
dom知识点总结
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。Dom:document Object Model(文档对象模型)简单来说,就是document提供了一些API(接口),赋予开发者操作页面的能力官方解释:是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的...原创 2018-03-11 08:11:43 · 546 阅读 · 0 评论 -
利用ajax技术从后端获取数据来制作留言本类瀑布流效果
详细解释请看注释html代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>留言本</title> <link rel="stylesheet" href="cs原创 2018-03-10 18:56:27 · 333 阅读 · 0 评论 -
cookie的原理及作用以及如何设置、读取和删除cookie
cookie:存储数据,当用户访问了某个网站(网页)的时候,我们就通过cookie来向访问者电脑上存储数据不同的浏览器存放的cookie位置不一样,也是不能通用的。 cookie的存储是一域名的形式进行区分的 cookie的数据可以设置名字的 一个域名下存放的cookie的个数是有限制的(不同浏览器不一样)document.cookie= ‘名字 = 值’;写入document.c...原创 2018-03-10 15:20:14 · 3329 阅读 · 0 评论 -
js中call、apply、bind的用法及区别
call、apply和bind:三者作用一致(都是改变函数的this指向),只是使用的方法不同而已。apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;apply 、 call 、bind 三者都可以利用后续参数传参;bind 是返回对应函数,便于稍后调用;apply ...原创 2018-05-02 22:28:57 · 533 阅读 · 0 评论 -
js中的运动框架(缓冲运动)
window.onload = function() { var oDiv1 = document.getElementById('div1'); oDiv1.onclick = function() { /*startMove(this, { width : 200 }, function() { startMove(this, { height ...原创 2018-03-13 19:59:06 · 2019 阅读 · 1 评论 -
js中的缓冲运动
缓冲运动的效果,就是对象的速度越来越小缓冲运动的原理:速度由距离决定,速度=(目标值-当前值)/缩放比例可能遇到的bug:没有对速度取整,导致对象的运动不能够精确的到达目标值,切记对速度进行取整运算<script>window.onload = function() { var oBtn = document.getElementById('btn'); var oDiv1 = ...原创 2018-03-09 17:00:39 · 963 阅读 · 0 评论 -
js中运动回调函数(链式运动)
js中的链式运动总结<script>window.onload = function() { var oDiv1 = document.getElementById('div1'); oDiv1.onclick = function() { startMove(this, { width : 200 }, 10, function() { startM...原创 2018-03-09 16:28:41 · 354 阅读 · 0 评论 -
js碰撞检测函数的封装
主要运用的getBoundingRect()方法,这个方法的详细解释下面有function getRect(obj){ return obj.getBoundingClientRect(); }function collision(obj1,obj2){ var obj1Rect = getRect(obj1); var obj2Rect = getRect(obj2); //...原创 2018-03-15 20:06:58 · 1292 阅读 · 0 评论 -
scrollTop、offsetHeight和offsetTop等属性用法详解以及兼容性的解决
下面有每个属性详细的解释网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidt...原创 2018-03-09 14:09:50 · 8874 阅读 · 0 评论