JavaScript
关注
分享
扫一扫
Lawliet_ZMZ
ACMERandNODER
展开
-
无限滚动&懒加载&元素位置 etc....
最近遇到了无限滚动的问题，用到了IntersectionObserver API，这里正好就将相关知识梳理整理一下。前置概念知识scrollHeight：容器元素被撑起后的实际大小高度scrollTop：容器元素的滚动距离，也是当前视口相对于容器实际高度定点的距离。offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。el.getBoundingClientRect().top：方法返回元素的大小及其相对于视口的位置。(top相对于视口的高度距离)clientHeight：元素原创 2020-05-12 17:08:05 · 626 阅读 · 0 评论 -
JS中原型对象中的constructor的作用？
最近被同事问道一个问题：function Father() { this.color = ['red', 'green']; } function Child() { this.test = 1; } Child.prototype = new Father(); let instance = new Child();这个例子是经典原型链继承，未做co...原创 2019-12-24 22:15:26 · 2851 阅读 · 1 评论 -
再看JS的函数和闭包
最近遇到React Hook的过时闭包问题，重温了下红宝书，这里整理之前积累的一些基础。1. 函数声明和函数表达式函数声明：function say(){ xxxx}函数表达式：赋值变量的方式可以使用匿名函数(lambda函数)var say = function(){ xxx }注意函数声明在编译期间把声明提前，函数表达式不会。2. 执行环境，活动对象，变量对象这两个概...原创 2019-12-12 16:53:24 · 242 阅读 · 0 评论 -
ES Module,commonjs和Typescript模块系统
TS中常常用import * as React 导入。TS 把 CJS 模块作为一个 Namespace 导入，所以，为了解决上面提到的报错，需要这样导入 CJS 模块，以及任何没有 default 导出的模块： import * as React from ‘react’这样子的代码，如果从 babel 迁移到 TS 就需要大幅的改动代码，不过 TS 也注意到了这个问题，添加了一个 comp...原创 2019-12-06 15:09:38 · 1695 阅读 · 0 评论 -
一个用原生JS造的轮播图插件
a native-js slider一个无缝轮播图的小轮子 ( ͡° ͜ʖ ͡°)•ॢ前言自己弄这个轮子是来自之前vue做一个音乐播放器项目时，用到了一个第三方vue组件better-scroll，当时参考这个文档做轮播图的时候，发现slider-item真实渲染出来的多了两个节点，向作者提问了下，回答当传入 snap:{loop:true} 的时候，前后各 clone 一个节...原创 2018-02-16 16:29:58 · 747 阅读 · 0 评论 -
奇妙JS代码系列（二）call,apply,bind用处整理
延续系列一：链接，此次主要整理JS里面很常见的三个函数call，apply，bind的妙用。(apply和call差不多，只是参数的区别)(下面有些这三个可能只是辅助，但是只要用到，我就在这里整理)1.类型检测上一篇最后一个已经讲到，Object.prototype.toString.call()。犹豫上一篇说了，这里就不多说了。2.解参，等同于ES6中的…扩展运算符es6中提出了...原创 2018-02-17 16:57:12 · 217 阅读 · 0 评论 -
对箭头函数的补充
上一篇：http://blog.youkuaiyun.com/major_zhang/article/details/78616835 最近看了MDN文档，感觉写的是异常好啊。。。。通俗易懂，又有例子。这里想在强调一下箭头函数与this的绑定问题。 eg：function Person() { // Person() 构造函数定义 `this`作为它自己的实例. this.age =原创 2018-01-27 00:18:52 · 226 阅读 · 0 评论 -
Promise和Async/Await用法整理
1.Promise1.简介Promise,简单来说就是一个容器，里面保存着某个未来才会结束的时间(通常是一个异步操作的结果)Promise对象的基本语法：new Promise((resolve,reject) => { //.....});从语法上来说，Promise是一个对象，从它可以获取异步操作的消息。基本语法：let p = new Promise((原创 2018-01-24 21:40:14 · 13901 阅读 · 1 评论 -
js对象引用和zhizhen问题
test.jsvar a = {name: 1};var b = a;console.log(a);console.log(b);b.name = 2;console.log(a);console.log(b);var b = {name: 3};console.log(a);console.log(b);运行 test.js 结果为：{ name: 1原创 2017-11-23 17:01:21 · 442 阅读 · 0 评论 -
Node爬虫 爬博客园
博客园右边有一个“找找看”的索引窗口，我们输入关键词，可以查到几万篇的相关的博客，这里用Node的爬虫来抓取给定关键词的查询的特定内容，实现翻页功能，抓取文章链接，作者，发布日期等信息。Node适合高并发IO操作的程序，用来写爬虫速度最快了。这里我们把爬到的数据存储到数据库中。前奏：1.cheerio模块 ，一个类似jQuery的选择器模块，分析HTML利器。2.r原创 2017-10-19 13:34:15 · 523 阅读 · 2 评论 -
ES6中的const，set，map，Symbol
const，常量声明者01-只在当前的代码块有效02-作用域不会被提升03-在一个作用域里不能重复声明04-申明的常量必须立即赋值05可以改变堆区的对象内容，不能修改栈区的地址(和其他语言如Java类似) <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title原创 2017-12-25 22:26:49 · 394 阅读 · 0 评论 -
([] + {}).length的结果是多少
最近加一个技术学习群，群的问题就是这个，很有意思。我当然直接在控制台里去打印看下结果了在sf里有人给了解释：([]).length --> 空数组的length是0({}).length --> {}是一个空对象，这个对象是没有length 方法的所以是undefined([] + {}).length --> 实际这两个是不能用操作符"+"的，这个原创 2017-11-24 00:46:59 · 2754 阅读 · 3 评论 -
那些短小精悍的&奇葩的&令人感到惊讶的JavaScript代码（一）
自学习前端以来，陆陆续续遇见很多短小令人惊讶的js代码，固有了专门开一片日记来记录这些代码的想法。借此提高写代码的姿势和深度理解JavaScript。1.JavaScript中 (a ==1 && a== 2 && a==3) 可能为 true 吗？来自Stack Overflow的一个问题:链接国外面试题，Nothing is impossible...原创 2018-01-28 21:04:11 · 1517 阅读 · 0 评论 -
18.2.26深信服Web实习生补坑
26号晚上8点左右收到电话，面试大概一小时左右，问的很广，发挥的一般，问到的大部分都答出来了，有些没有讲好。然后面试官说等通知，问了评价，面试官说我现在大三懂这么多已经很不错了，表达能力需要加强，有点紧张口吃。30分钟后收到实习生offer邮件。这里只记录下几个答的不好的点。1.var和不var的区别？我突然醒悟面试官想问的并不是我下面所挖掘的，应该就是单纯的函数作用域？在一个函数中用...原创 2018-03-01 19:24:11 · 2316 阅读 · 0 评论 -
头条前端笔试最后一道题
题目： 题目来源：链接思路：用时间委托机制优化DOM绑定事件，不用为每个新增的li绑定事件。注意DOM上删除节点后，也要在数据中同步删除。模糊匹配用正则对象和字符串的match方法。onkeyup 属性在用户（在键盘上）释放按键时触发，相对于 onkeyup 事件的事件次序： onkeydown onkeypress onkeyup ， onkey是键盘接受字符后的事件，...原创 2018-03-11 23:54:46 · 450 阅读 · 0 评论 -
Object.create()探索
最近在看框架源码的时候，发现作者(或者Contributors)创建对象的时候，或者做继承的时候，都喜欢用到Object.create()。首先MDN上对这个方法介绍的很清楚了，Object.create(proto[, propertiesObject])第一个参数传一个对象，(ps：[]为可选参数)，MDN释义为"新创建对象的原型对象"，一般传xx.prototype，如果直接传对象...原创 2019-08-13 18:48:26 · 239 阅读 · 0 评论 -
await的错误处理问题，一个issue引发的ts社区的讨论
https://github.com/denoland/deno_std/blob/master/fs/empty_dir.ts#L8https://juejin.im/post/5d25b39bf265da1bb67a4176http://es6.ruanyifeng.com/#docs/async任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函...原创 2019-07-13 22:40:28 · 1705 阅读 · 0 评论 -
jQuery的链式调用原理，Promise的链式调用，this的问题
最近被问到这个问题，jq的链式调用原理，当时比较懵=。=，毕竟现在jq接触的机会变很少了。jq的链式调用jq的链式调用其实就是比如我们在选择dom的时候，$('input[type="button"]') .eq(0).click(function() { alert('点击我!');}).end().eq(1).click(function() { ...原创 2018-08-16 01:17:02 · 7158 阅读 · 2 评论 -
再说说__proto__和prototype以及js的继承
1.proto和prototypeJS中的原型链已经是一个老生常谈的问题，毕竟也是JS 这门语言的特色之一了。 首先“万物皆对象“，虽然这句话一直有争议，但是有它的道理的，null类型这些的争论这里就不说了。 对象中有个属性proto，被称为隐式原型，这个隐式原型指向构造改对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。这个实例可能是如图中的new Foo...原创 2018-07-19 17:51:19 · 8890 阅读 · 0 评论 -
Node异步爬虫引出的异步流程控制的一些问题
前记： 想写一个电影天堂的爬虫，因为node很长时间落下，就想用node去写一下。结果遇到了一些列的问题，这些问题归根到底就是异步流程控制的问题，在以前就一直会接触到很多回调地狱，Promise为什么会出现诸如此类的话题，现在终于是深刻体会到了！开始的代码是：const cheerio = require('cheerio');const http = require('http'...原创 2018-06-27 17:13:04 · 456 阅读 · 0 评论 -
jQuery ready方法实现
很早之前就留下了这个问题，赶上五一放假，好好研究总结一下吧。首先jq中ready方法和window的onload方法的不同这里再提一下，首先ready只是dom树加载完毕，一些img等资源可能还没加载完成，而onload则是全部加载成功。而且ready方法可以有多个，而onload只能写一个。还有一个区别是什么了，想起来补上。一般让我们手写模拟一个jq的ready方法，我大多都是这样写：...原创 2018-04-30 03:28:34 · 3294 阅读 · 0 评论 -
bind的那些事
最近面头条的时候，要求自己手动实现一个bind函数，然后又问了bind还能干嘛。这里就围绕这两个好好写一下。首先bind的文档说明： (链接：传送门 ） bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。 fun.bind(thisArg[, arg1[, arg2[, …]]]) 参数...原创 2018-03-27 23:15:36 · 449 阅读 · 0 评论 -
奇妙JS代码系列（三）一道有趣的题(创建一个长度为x数组)
原题描述：不使用loop循环，创建一个长度为100的数组，并且每个元素的值等于它的下标这个问题的一些变种例如给一个长度length和value，返回长度为length值全为value的数组等。1.误区最容易掉入陷阱的：var arr = new Array(100);arr = arr.map(function(item, index) {return index;...原创 2018-03-19 21:02:45 · 7289 阅读 · 1 评论 -
箭头函数
特性：1.单个参数时可省略()，箭头函数函数体只有单条语句返回时，可省略{}和returnvar f = v => v;// 等同于var f = function(v) { return v;}var f = () => 5;// 等同于var f = function() { return 5;}var sum = (num1, nu原创 2017-11-23 17:06:15 · 339 阅读 · 0 评论 -
let和var的一个问题
原代码来自ruan老师ES6书，作为var和let对比的说明。 我特地去SF社区问了下，得到了一些大佬们很好的回答。我这里总结一下。 1. 必须记住的两点：函数作用域是声明时确定的，函数内的值是执行时确定的！所以执行时去确定i，注意function函数参数列表里没有传入i的值，会去外层作用域找，此时i已经在遍历完变成了10。 2. 变量i是v原创 2017-11-30 20:58:01 · 309 阅读 · 0 评论 -
(DOM艺术) 实用的动画
前面用js实现了移动效果(书前面233)，这里用移动效果实现：三个链接，光标移动到哪个链接，显示那个图片。书上面的实现思路比较好，用一张大图片包含三个要显示的图案区域，光标移动到哪里，就显示特定区域的图片。因为如果用三个图片，加载图片也是要时间的，当图片数量多了效果就明显了。这里就是一个优化的技巧。100*300图片，100*100的显示区域，光标移动，移动图片把该显示的部分移动到显示区域就行原创 2017-10-15 22:11:49 · 192 阅读 · 0 评论 -
(DOM艺术)图片仓库改进一：完全分离
因为上个版本中的图片占位区和文字占位区完全是给showPic脚本服务的，所以这里在JS脚本里用DOM的create系列方法把结构和行为彻底分开DOM中提供了insertBefore方法，但没有inserAfter，因为这里占位区是在ul之后，所以我们这里手写这个方法。注意innerHTML方法和create方法,appendChild方法的区别，innerHTML是不管元素节点里面有没有HTML内原创 2017-10-10 00:37:16 · 184 阅读 · 0 评论 -
DOM艺术前六章范例：图片仓库
对象检测向后兼容和浏览器嗅探技术尽量减少访问DOM和尽量减少标记平稳退化JS和HTML的完全分离共享onload事件的实现键盘访问（注意死局的情况）DOM Core 和 HTML-DOM代码：head> meta charset="utf-8"> title>Image Gallerytitle> script type="text/java原创 2017-10-08 23:33:20 · 235 阅读 · 0 评论 -
JS选择器querySelector和~All，三个原生选择器
比较高级的万能选择器，比较常用定义：querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。注意： querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。语法document.querySelector(CSS selectors)原创 2017-09-28 00:25:50 · 20607 阅读 · 1 评论 -
Js控制HTML5 Audio 音乐播放和关闭
参考W3C详细文档：http://www.w3school.com.cn/jsref/dom_obj_audio.asppause()方法只是暂停，这里重新load之后，再次play，音乐可重头播放DOCTYPE html>html>head> meta charset="utf-8"> title>testtitle> script language原创 2017-09-16 16:05:58 · 37556 阅读 · 6 评论 -
用JS改变HTML图像和样式
开始在function函数里面忘记在element加分号，然后路径设置上本文件夹也不能多加/符号，但是可以用./表示当前目录，../表示上级目录。然后就是注意括号，id。match()方法，字符串匹配，在第一个改变图像中，就是检索到这个字符串就返回true，否则false，详细用法 ：http://www.w3school.com.cn/jsref/jsref_match.asp原创 2017-01-20 19:34:14 · 1131 阅读 · 0 评论 -
用JS动态显示文本
index.html： 页面（HTML5） time is long, life is short aside原创 2016-12-03 02:38:40 · 9968 阅读 · 0 评论 -
用JS动态创建一个有序表（根据输入添加子列表项）
index.html: 页面 //定义函数 /*必须闭合*/ time is long,life is shor原创 2016-12-03 02:19:45 · 3999 阅读 · 0 评论 -
JavaScript闭包理解2
####先是读了阮一峰老师的讲解：[传送门](http://www.ruanyifeng.com/blog/2009/08/learning_javascript_closures.html) ，然后问了几个前辈，最后又懂了一些吧。###1. 首先JS为什么又闭包这个机制，这要从变量的作用域说起*变量的作用域无非就是两种：全局变量和局部变量，Javascript语言的特殊之处原创 2017-09-18 18:26:23 · 392 阅读 · 0 评论 -
on()的多事件绑定
之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。基本用法：.on( events ,[ selector ] ,[ data ] )最常见的给元素绑定一个点击事件，对比一下快捷方式与原创 2017-09-07 23:42:45 · 446 阅读 · 0 评论 -
js的Prototype属性
关于js中Prototype属性的解释和方法，看了某位大佬总结的一片博客，写的非常好啊，收益了，我这里转载备份一下，也加点自己一些小理解。原文：http://www.cnblogs.com/wdlhao/p/5743770.html1、prototype的定义javascript中的每个对象都有prototype属性，Javascript中对象的prototype属性的解释原创 2017-10-02 17:14:19 · 241 阅读 · 0 评论 -
JS匿名函数及调用及闭包
源自我以前提的一个煞笔问题=-=两个代码样例如图，看了一些资料后，现在比较清楚。()()这种写法可以说是匿名函数的调用或者叫立即执行函数。 匿名函数就是没有名字的函数了，也叫闭包函数(closures),允许 临时创建一个没有指定名称的函数。最经常用作回调函数(callback)参数的值function 函数名(参数列表){函数体;}如果是创建匿名函原创 2017-10-27 00:19:41 · 1343 阅读 · 0 评论 -
浅谈JS函数调用模式，闭包以及bind()方法
本来是想好好归纳下bind()方法，但是从中又牵扯出了现在读的js语言精粹的一些知识，那这里就从基础开始整理下知识点。 函数 JS中最重要的组成部分就是函数了，由于JS中没有类之说，类的功能实现也是靠函数来完成的，用函数模拟类继承等问题。 JS中的函数就是对象，对象是“名/值”对的集合并拥有一个连到原型对象的隐藏连接。每个函数对象在创建时也随配有一个protot原创 2017-10-22 22:01:50 · 2375 阅读 · 1 评论 -
js的变量提升和函数提升
原文说是深入理解，但是写的很简单，233，原文链接：http://www.cnblogs.com/kawask/p/6225317.html，我这里加了点解释，所以就不标明是纯转载文章了，233---------------------------------------------------------------------------------------------------原创 2017-10-22 22:02:48 · 220 阅读 · 0 评论 -
JS call()方法和apply()方法
原文：http://blog.youkuaiyun.com/ganyingxie123456/article/details/70855586这个是讲的比较简单的，也是最常用的吧。------------------------------------------------------------------------------------------------------------转载 2017-10-22 22:00:36 · 189 阅读 · 0 评论