资讯专栏INFORMATION COLUMN

JavaScript系列(四) - 收藏集 - 掘金

cfanr / 1122人阅读

摘要:函数式编程前端掘金引言面向对象编程一直以来都是中的主导范式。函数式编程是一种强调减少对程序外部状态产生改变的方式。

JavaScript 函数式编程 - 前端 - 掘金
引言 面向对象编程一直以来都是JavaScript中的主导范式。JavaScript作为一门多范式编程语言,然而,近几年,函数式编程越来越多得受到开发者的青睐。函数式编程是一种强调减少对程序外部状态产生改变的方式。因此,它鼓励使...

Ajax入门 - 掘金
前言 总括: 本文讲解了ajax的历史,工作原理以及优缺点,对XMLHttpRequest对象进行了详细的讲解,并使用原生js实现了一个ajax对象以方便日常开始使用。 damonare的ajax库:damonare的ajax库 原文博客地址:你真的懂aja...

JavaScript 经典的难点与重点 - 前端 - 掘金
LazyMan 实现LazyMan(什么是LazyMan?请自行google) ...

MDN JavaScript 中文文档翻译项目 - 前端 - 掘金
JavaScript 文档翻译状态 翻译状态概览 文档总页数 ...

JavaScript 知识点整理 - 前端 - 掘金
JavaScript是按照ECMAScript标准设计和实现的,后文说的JavaScript语法其实是ES5的标准的实现。先说说有哪些基础语法? 最基础语法有哪些? 基础语法几乎所有的语言差异不大,无非数据类型、操作符、控制语句、函数等,简单列举下。 5种基本...

JavaScript 进阶 -- 拉勾网鼠标移入移出效果 - 前端 - 掘金
JavaScript进阶 1024丝毫不减少我敲写代码的激情,因为我闻到了代码的味道。 先上效果图(gif自己录制的,有点难看抱歉,工具licecap) image 其实也是个偶然的机会,让我想去研究一下这个效果。主要是由于有个群里的人发了个讲...

用 ES6 生成器解决 node 回调地狱 - 前端 - 掘金
原文A Study on Solving Callbacks with JavaScript Generators 当我开始写nodejs的时候,非常讨厌两件事情:1.所有流行的模板引擎,2.回调的扩散(回调地狱)。我愿意忍受回调,因为我理解基于事件的服务端是...

JavaScript 面试: 什么是函数式编程?| Eric Elliott - 前端 - 掘金
函数式编程在 JavaScript 界已经成为了一个非常热门的话题。而仅在几年之前,还几乎没有 JavaScript 程序员了解函数式编程是什么,但在最近三年里,我看到非常多的应用程序代码库里大量使用着函数式编程思想。 函数式编程 (通常简称为 FP)是指通过...

JS 瀑布流 - 前端 - 掘金

前言 在我们浏览各大网站,网页,手机APP的时候,可能会遇到很多图片大小不一,看起来杂乱无章,其实,它们是狠有顺序的,排列在一起。这就应用到了网站中一种很流行的页面布局---瀑布流,又称瀑布流布局。 ...

一道颇有难度的 JavaScript 题 - 前端 - 掘金
上次分享了一道题,大家反响不错,很开心自己写的东西有人愿意花时间去看,也给了自己莫大的鼓舞,其实做题虽然不比真正的编程,但是也能够让你发现一些你之前没有注意到的语言层面的问题。所以,这次再分享一道稍微有难度的JavaScript题目。 function Foo...

http状态码是什么,有什么用,在哪里查看,分别代表什么意思? - 掘金
写在前面: 当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头用以响应浏览器的请求。本文主要是:关于http状态码是什么,有什么用,在哪里查看状态码分别代表什么意思...

JavaScript 设计模式 ② 巧用"工厂模式"和"创建者"模式 - 掘金
我为什么把他们两个放在一起讲?我觉得这两个设计模式有相似之处,有时候会一个设计模式不能满足你的需求而采用另一种设计模式。基于这点考虑,而且为了大家更好地理解,我放到了一起,加深大家的印象,活学活用。 [这里我为了能更好的体现下设计模式与JS本体语言的结合,我用...

读 Zepto 源码之内部方法 - 掘金
数组方法 定义 var emptyArray = [] concat = emptyArray.concat filter = emptyArray.filter slice = emptyArray.slicezepto 一开始就定义...

JavaScript深入之执行上下文 - 掘金
JavaScript深入系列第七篇,结合之前所讲的四篇文章,以权威指南的demo为例,具体讲解当函数执行的时候,执行上下文栈、变量对象、作用域链是如何变化的。 前言 在《JavaScript深入之执行上下文栈》中讲到,当JavaScript代码执行一段可执行...

破解前端面试(80% 应聘者不及格系列):从闭包说起 - 掘金
修订说明:发布《80% 应聘者都不及格的 JS 面试题》之后,全网阅读量超过 6W,在知乎、掘金、cnodejs 都引发了很多讨论,还被多个前端微信公号和技术媒体转载。酝酿许久之后,笔者准备接下来撰写前端面试题系列文章,内容涵盖 DOM、HTTP、浏览器、框架...

JavaScript 中函数节流和函数去抖的讲解 - 掘金
我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响,尤其是在做一些效果实现方面,或者逻辑中需要进行后端请求,更是会导致卡顿,效果失效等结果,所以在处理类似的情况时,可以考虑使用函数节流和函数去抖来解决,至于具体使用哪一种方式,根据实际情况分析定夺,先来...

百度前端学院任务动态数据绑定(五) - 掘金
觉得这个系列任务还是很有趣的,这是一种性能很差的实现,也许之后会尝试使用虚拟dom、改善其中的遍历。 任务信息 首先分析一下要干嘛:可以看出Vue是个构造函数;因为传入的对象可能有很多层对象,所以需要一个遍历传入对象的方法;双向绑定打算通过访问器属性实现、需...

高阶函数(软件编写)(第四部分) - 掘金
原文地址:Higher Order Functions (Composing Software)(part 4) 原文作者:Eric Elliott 译文出自:掘金翻译计划 译者:reid3290 校对者:Aladdin-ADD、avocadowang ...

关于 js 中的回调函数 callback - 掘金
本文写于1年前 曾经的学习文章如今拿出来分享 前言 其实我一直很困惑关于js中的callback,困惑的原因是,学习中这块看的资料少,但是平时又经常见,偶尔复制一下前人代码,功能实现了也就不再去追其原由,这么着,这个callback的概念就越来越混乱,因为你总...

JS中的This别再被问倒了,面试常见问题分析 - 掘金
GitHub地址:https://github.com/SimonZhang... this的指向问题应该是让每一个前端er都头疼的问题,我也一样,曾经遇到甚至都是一顿乱猜。最近在研读一些书籍如《你不知道的JavaScri...

es5 编写类风格的代码 - 掘金
分享下《JavaScript忍者秘籍》中的一种编写类风格代码的方法 JavaScript可以让我们通过原型实现继承,许多开发人员,尤其是那些有传统面向对象背景的开发人员,都希望将JavaScript的继承系统简化并抽象成一个他们更熟悉的系统。所以,这不可避免地...

mock.js那点事(上) - 掘金
耐心看完,我保证十五分钟就能学会mock.js 什么是Mock.js Mock.js是一个模拟数据生成器,帮助前端开发和原型与后端进度分离,减少一些单调,特别是在编写自动化测试时。 Mock.js能做什么 提供了以下模拟功能: 根据数据模板生成模拟数据...

我认真起来连面试官都怕(块级作用域,事件代理) - 掘金
作者 混元霹雳手-Ziksang 如果你学完这篇文章之后,你回答完面试官之后,拿一张图告诉面试官 在于前端面试,你给面试官讲一些官方名词,我知道react,vue,angular等等,一系列牛B的框架,对于面试来说并没有卵用,听多了!!有些有是报着真诚的找...

JavaScript 常见设计模式解析 - 掘金
设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问,设计模式于己于他人于系统都是多赢的;设计模式使代码编写真正工程化;设计模...

谁说 JavaScript 很简单了? - 掘金
本文作者:Aurélien Hervé 编译:胡子大哈 翻译原文:http://huziketang.com/blog/po... 英文连接:Who said javascrip...

面试时,你被问到过 TCP/IP 协议吗? - 掘金
前言: 精通 TCP/IP,熟练使用 Socket 进行网路编程。 看到这句话,有没有感到很熟悉呀?相信很多人在投递简历的时候都看到过这条要求,很多人会觉得我们在实际开发中一般用不到这些知识,所以对这些东西不屑一顾. 但是笔者认为想要做出更好的 APP,那...

正则表达式前端使用手册 - 前端 - 掘金
导读 你有没有在搜索文本的时候绞尽脑汁, 试了一个又一个表达式, 还是不行. 你有没有在表单验证的时候, 只是做做样子(只要不为空就好), 然后烧香拜佛, 虔诚祈祷, 千万不要出错. 你有没有在使用sed 和 grep 命令的时候, 感...

JavaScript 核心概念之作用域和闭包 - 前端 - 掘金
相信大家已经阅读了很多关于作用域和闭包文章,我也一样。作用域和闭包是 JavaScript 中的关键概念之一。当我阅读了《高性能的JavaScript》这本书后,我才完全理解这两个概念。所以今天强烈推荐这本书中的解释,并与其他开发人员分享。 作用域 下面会提到...

中国行政区划 JSON 数据(从国家统计局抓取):【省份、城市、区县、乡镇】四级联动 - 前端 - 掘金
本项目 Github 主页 数据来源(国家统计局): 中华人民共和国国家统计局-行政区划代码 中华人民共和国国家统计局-统计用区划和城乡划分代码 本...

JS 中的 call、apply、bind 方法 - 前端 - 掘金
在JavaScript中,call、apply和bind 是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向。call、apply、bind方法的共同点和区别: apply 、 call 、bind 三者都是用来改变函数的th...

漫漫前端路 - 掘金
本人一枚菜鸟,在这里不会跟你唠叨一大篇大道理,只会根据自己的经验谈谈前端这条路适合哪些人走?该怎么走? 前端,是最近几年很火的职业,导致现在是群魔乱舞,这里并没有贬低任何人的意思,只是因为目前各行各业的人都转行前端,导致前端行业很乱,人员技术参差不齐。 到底是...

JavaScript 函数中的外部变量——理解 this - 前端 - 掘金
js 中的 this 指向确实是个坑,网上有人轰轰烈烈地讨论它,讨论 js 闭包,其实并没有那么玄学,让我们一点点剥开它的面纱。 很多知识性内容来自 [邱桐城《JavaScript 中的 this》](https://zhuanlan.zhihu.com/p...

this 的值到底是什么 - 前端 - 掘金
var obj = { foo: function(){ console.log(this) } } var bar = obj.foo obj.foo() // Object bar() // Window 请解释最后两行函数的值为什么不一...

(译) JavaScript 中的定时器是如何工作的? - 前端 - 掘金
如有问题,欢迎指正 原文链接:http://ejohn.org/blog/how-jav... 在一个基础阶段,理解JavaScript定时器的工作原理的是非常重要的。通常它们看起来不那么直观,因为它们处于单线程中。让我们从...

Javascript 深入浅出 this - 前端 - 掘金
What ’s this? 要学一样东西,首先得了解它的含义,this 关键字的含义是明确且具体的,即指代当前对象;细心的童鞋发现了 当前对象 中"当前" 这两个字;说明这个 this 是在某种相对情况下才成立的。 由于其运行期绑定的特性,JavaScrip...

移动导航设计,看这一篇就够了 - 产品 - 掘金
平常我们去商场或者景点逛的时候,通常会看到整个景区或者整个商场的导游图,能让我们知道身处何地并且快速的找到目的地。投射到一个虚拟的产品上面,同样是一个“商场”或“景点”,为了让用户能够顺利的在产品中畅行,则必须为用户提供一个有效的导航系统,让用户时刻清楚自己在...

this 的值到底是什么?一次说清楚 - 掘金
原载于前端开发指南,喜欢请关注。 你可能遇到过这样的 JS 面试题: var obj = { foo: function(){ console.log(this) } } var bar = obj.foo obj.foo() // 打印出的...

JavaScript 填坑史 - 掘金
前言 总括: 这是笔者平时积累的一些觉得比较有意思或是比较有难度的JavaScript题目理解和心得,会保持长期更新。 原文地址:Javascript填坑史 知乎专栏&&简书专题:前端进击者(知乎)&&前端进击者(简书) ...

Ajax 与数据传输 - 前端 - 掘金
背景 在没有ajax之前,前端与后台传数据都是靠表单传输,使用表单的方法传输数据有一个比较大的问题就是每次提交数据都会刷新页面,用户体验很不友好,解决方案有的是采用iframe,表单放在iframe中,不用刷新母页面,有的是在j...

破解前端面试(80% 应聘者不及格系列):从 DOM 说起 - 掘金
共 7384 字,读完需 10 分钟。本文为《破解前端面试(80% 应聘者不及格系列)》文章的第二篇,包含 DOM、Event、浏览器端优化、数据结构和算法功底的考察。可能有同学会问 DOM 有什么好聊的,不就是节点的各种操作么?DOM 是网页构建的基石,熟练...

实例 - Vue 单页应用:记事本 - 掘金
0.前言 若文章中存在内容无法加载的情况,请移步作者其他博客。 简书 CSDN 最近在看 Vue 的时候,别人给我安利了一个国外的小案例,通过 Vue 和 Vuex 来实现一个记事本。 仔细剖析下,发现“麻雀虽小,五脏俱全”,是一个挺适合初学者学习分...

正则表达式前端使用手册 - 前端 - 掘金
导读 你有没有在搜索文本的时候绞尽脑汁, 试了一个又一个表达式, 还是不行. 你有没有在表单验证的时候, 只是做做样子(只要不为空就好), 然后烧香拜佛, 虔诚祈祷, 千万不要出错. 你有没有在使用sed 和 grep 命令的时候, 感...

初学 Canvas 仿知乎登录页面动画 - 前端 - 掘金
写了一个demo 具体git地址  https://github.com/sunweiling... 因为做成动图以后压缩的问题会看不到线,所以就把颜色都改成不透明的了 demo里面还是跟知乎里的一样。 主要的知识点 ...

javascript 正则表达式总结 - 前端 - 掘金
为什么要使用正则表达式 正则表达式通过由普通字符和特殊字符组成的文字模板完成对字符串的校验,搜索,替换。在javascript中类似这样 ...

深入理解 JavaScript 原型和闭包 - 前端 - 掘金
说明: 该教程绕开了javascript的一些基本的语法知识,直接讲解javascript中最难理解的两个部分,也是和其他主流面向对象语言区别最大的两个部分——原型和闭包,当然,肯定少不了原型链和作用域链。帮你揭开javascript最神秘的面纱。 为...

Vue.js 写一个音乐播放器 - 前端 - 掘金
在线预览 在线预览地址1: ?http://microzz.cn/vue-music/在线预览地址2: ?https://microzz.github.io/vue... 源代码 GitHub...

Ajax 知识体系大梳理 - 掘金
这是一篇万字长文, 系统梳理了ajax相关的知识体系, 几乎囊括了所有ajax的知识点. 原文: http://louiszhai.github.io/20... 导读 Ajax 全称 Asynchronous JavaScript an...

《JavaScript 闯关记》之变量和数据类型 - 掘金
当程序需要将值保存起来以备将来使用时,便将其赋值给一个变量,值的类型称作数据类型。 变量 JavaScript 的变量是松散类型的,所谓松散类型就是可以用来保存任何类型的数据。换句话说,每个变量仅仅是一个用于保存值的占位符而已。定义变量时要使用关键字 var ...

一款简洁美观的知乎日报 (web 端) - 前端 - 掘金
轻松查看知乎日报内容, 收藏你喜欢的文章 效果图 首页 查看文章 主题日报 收藏文章 热门文章 首页切换日期 ...

JavaScript 的 this 指向问题深度解析 - 前端 - 掘金
JavaScript 中的 this 指向问题有很多博客在解释,仍然有很多人问。上周我们的开发团队连续两个人遇到相关问题,所以我不得不将关于前端构建技术的交流会延长了半个时候讨论 this 的问题。 ...

全面解析 Javascript - this - 前端 - 掘金
为什么要写这篇文章? 我之前在阿里面试,以及其它公司面试的时候曾经被问到过这个问题,所以想要分享给大家,如果你能清楚地知道下面 this 七种情况的区别,能跟面试官解释清楚,无疑是一个大大的加分项,理解完这篇文章,面试官再怎么问你 this 都不怕了。...

用 VUEJS 做一个网易云音乐 - 前端 - 掘金
前言:自己学习VUEJS也一段时间,但一直没有做出来一东西。我自己一直喜欢用网易云音乐app,于是乎就做了这个app。 技术栈 ...

谈一谈 JavaScript 继承 - 前端 - 掘金
最近在复习一些JavaScript基础的东西,碰到js的原型和继承这一块总是感觉不悟其中精髓。因此,这篇文章算是从我自己理解的角度对js继承进行总结和剖析。 什么是继承 大多数人使用继承不外乎是为了获得...

webpack 简单入门 - 前端 - 掘金
今天来简单地介绍一下webpack的使用! 1、什么是webpack? webpack是时下比较流行的模块加载器兼打包工具,它能把各种资源,例如JavaScript代码、样式(含less/sass)、图片等作为模块来进行分析、压缩、合并、打包。 2、为什...

http 缓存深入研究,200 from cache or 304 not modified? - 前端 - 掘金
前几天看到一篇关于缓存的文章彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法,觉得很有意思,所以打算系统学习下Http缓存相关的知识。 我把缓存分为缓存存储、缓存对比两部分。 ...

javascript 操作符知识点整理 - 前端 - 掘金
前言 初学者会觉得操作符的知识很简单,但是随着学习的深入会发现很多语句都可以用操作符来简化,所以深入理解操作符可以帮助你写出高性能的代码。这篇文章主要记录不同操作符所遵循的规则。javascript的操作符有一元操作符、位操作符、布尔操作符、乘性操作符、加性操...

原生 JavaScript 实现 AJAX、JSONP - 前端 - 掘金
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的。 其实,原生JavaScript实现AJAX并不难,这篇...

前端跨域问题及解决方案 - 前端 - 掘金
1、同源策略 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。 一个源的定义:如果协议,端口(如果指定了一个)和主机对于两个页面是相同的,则两个页面具有相同的源。 ...

征服 JavaScript 面试:什么是闭包 - 前端 - 掘金
“征服 JavaScript 面试”是我写的一系列文章,来帮助面试者准备他们在面试 JavaScript 中、高级职位中将可能会遇到的一些问题。这些问题我自己在面试中也经常会问。 在我面试时问出的一系列问题里,闭包通常是我问的第一个或最后一个问题。坦白地说,...

彻底理解 JS 中 this 的指向 - 前端 - 掘金
首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象(这句话有些问题,后面会解释为什么会有问题,虽然网上大部分的文章都是这样说的,虽然在很多情况下那样去理解不会...

JavaScript 学习思维导图 - 前端 - 掘金
通过几张思维导图,可以了解到整个JavaScript家族的全貌,然后更有利于JavaScript全局学习 JavaScript 数据类型 JavaScript 变量 Javascript 运算符 JavaScript 流程控制 JavaScript ...

不定期更新 JavaScript 技巧 - 前端 - 掘金
 JavaScript技巧,偶尔更新。 计算数组的极值 function smallest(array){ return Math.min.apply...

用原生 js 写一个 "多动症" 的简历 - 前端 - 掘金
用原生js写一个"多动症"的简历 预览地址 源码地址 最近...

走心大白话 JavaScript 教程(二)巧妙理解 call 和 apply - 掘金
JS大法好,JS在手,天下我有,信JS,得永生。 这个系列的教程我一开始是写在github上的,但是觉得放到掘金来可以让更多需要的人看到,就搬到掘金专栏上啦,如果觉得本教程对你有帮助,请点这里去github上给我一颗Star~教程目录也在github上哈~ 本...

走心的一系列 JS 基础 > 进阶的大白话教程 - 前端 - 掘金
JS大法好,JS在手,天下我有,信JS,得永生。 想必每一个前端攻城狮都知道,区分能力的最重要的指标就是对JavaScript的掌握程度, 在热门框架满天飞,自动化越来越被推崇的今天, 好多开发者都失其本...

JS原型链与继承别再被问倒了 - 掘金
我面试过很多同学,其中能把原型继承讲明白的寥寥无几,能把new操作符讲明白的就更少了。希望这篇文章能够解决你的疑惑,带你面试飞起来。原文:详解JS原型链与继承 摘自JavaScript高级程序设计: 继承是OO语言中的一个最为人津津乐道的概念.许多OO语言都支...

JavaScript 常见设计模式解析 - 掘金
设计模式(Design pattern)是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问,设计模式于己于他人于系统都是多赢的;设计模式使代码编写真正工程化;设计模...

30 分钟搞定 ES6 常用基础知识 - 前端 - 掘金
ES6基础智商划重点 在实际开发中,ES6已经非常普及了。掌握ES6的知识变成了一种必须。尽管我们在使用时仍然需要经过babel编译。 ES6彻底改变了前端的编码风格,可以说对于前端的影...

工作中经常用到 github 上优秀、实用、轻量级、无依赖的插件和库 - 前端 - 掘金
原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ,喜欢的可以关注最新动态,大家一起多交流学习,共同进步,以学习者的身份写博客,记录点滴。 按照格式推荐好用的插件有福利哦,说不定会送1024论坛邀请码,好自为之,...

一个只有 99 行代码的 JS 流程框架 - 前端 - 掘金
作者 | 张镇圳编辑 | 京露 张镇圳,腾讯Web前端高级工程师,对内部系统前端建设有多年经验,喜欢钻研捣鼓各种前端组件和框架。 最近一直在想一个问题,如何能让js代码写起来更语义化和更具有可读性。 上周末的时候突发奇想,当代码在运行的时候,其实跟我们做事...

JavaScript 的原型和原型链的前世今生 (一) - 前端 - 掘金
大家不要被这个感觉高大上的名字给吓着,我没有打算把原型的历史给说一遍,本文只是想帮助大家理解为什么要有原型和原型链这个独一无二的语言特性,别的语言(或者说是我学过的编程语言中)没有见过这一个概念的,这也是我从C语言转来学习JavaScript的时候最为困惑不解...

Node入门 » 一本全面的Node.js教程 - 后端 - 掘金
关于 本书致力于教会你如何用Node.js来开发应用,过程中会传授你所有所需的“高级”JavaScript知识。本书绝不是一本“Hello World”的教程。 ...

(译) Webpack 入门指南 - 前端 - 掘金
原文 Webpack是目前最火的前端自动化工具,它是一个module bundler并和大部分现代前端相关模块完美结合,包括Babel,ReactJS等等。本文从新手的角度一步一步用webpack配置一个react项目。 安装 首先要知道: Webpa...

javascript 正则表达式总结 - 前端 - 掘金
为什么要使用正则表达式 正则表达式通过由普通字符和特殊字符组成的文字模板完成对字符串的校验,搜索,替换。在javascript中类似这样 ...

(译) 懒加载图片?不要依赖 JavaScript ! - 前端 - 掘金
原文链接 : Lazy Loading Images? Don’t Rely On JavaScript! 译文出自 : 掘金翻译计划 译者 : jk77 校对者: mypchas6fans, hpoenixf 现在许多网页都包含加...

实现图片懒加载(Lazyload) - 掘金
本文标题:实现图片懒加载(lazyload)文章作者:Jake发布时间:2016-11-26, 18:46:34最后更新:2016-11-28, 17:12:59原始链接:http://i.jakeyu.top/2016/11/26/实现图片懒加载/许可协议:...

5分钟撸一个js图片懒加载(可视区域加载) - 前端 - 掘金
图片懒加载(可视区域加载)</title&...</p> <p>你应该知道的 4 种 JavaScript 设计模式 - 前端 - 掘金<br>每位开发者都努力写出可维护的、易读的、可复用的代码。随着应用变得越来越大,代码的结构也越来越重要。设计模式验证了解决这个挑战的重点——在特定环境中,对同类事物提供相同的组织结构。 JavaScri...</p> <p>JS 进阶篇: 这可能是关于闭包最好的一篇文章 - 前端 - 掘金<br>原谅我把标题起的像搞个大新闻的样子~ 每次下午打完球之后,晚上的学习总是提不起什么精神,趁着看不下新知识的空,把前两天总结的知识发出来给大家参考参考,挺多是摘抄的,也有一些是自己写的,如果有什么错误的,敬请指正! ...</p> <p>廖雪峰JS学习总结-函数篇 - 掘金<br>最近在刷廖雪峰的JS教程,把里面的自己不太清楚的东西在刷一遍。教程网址:http://www.liaoxuefeng.com/wi... 函数的定义和调用: ...</p> <p>JavaScript 常用 API 集合 - 前端 - 掘金<br>一、节点 1.1 节点属性 Node.nodeName //返回节点名称,只读 Node.nodeType //返回节点类型的常数值,只读 Node.nodeValue //返回Text或Comment节点的文本值,只读 Node.textConte...</p> <p>前端常见算法的 JS 实现 - 前端 - 掘金<br>原文链接 排序算法 1、冒泡排序 function bubbleSort(arr){ var i = j = 0; for(i=1; i<arr.length; i+...</p> <p>Typescript 2+迷你书 :从入门到不放弃 - 掘金<br>前言 文中会穿插部分ES6&7的代码(此处不在解释什么作用域什么的,作用什么的),能言简意赅的绝不废话哈; 文中的ts或者ts2皆指typescript; 这不是一个合格的手册,要想深入和更全应该看官方的手册文档加以练习和尝试 Typescrip...</p> <p>这里有超过20家的前端面试题,你确定不点进来看看? - 掘金</p> <b>0.备注 若文章中部分内容无法显示,请移步李鹏的其他博客。 简书 CSDN ## 1. 前言 这里有超过20家的前端面试题,你确定不点进来看看? 好吧,如果你看到这句话,你明显是点进来了。 那么恭喜你,接下来我就和你们分享一下,近期我收集到的各个公司...</b> <p>详解 Javascript十大常用设计模式 - 前端 - 掘金<br>一:理解工厂模式    工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。    简单的工厂模式可以理解为解决多个相似的问题;这也是她的优点;比如如下代码:&...</p> <p>写好你的JavaScript - 掘金<br>关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 在实际工作中,我们应该经常会看到一些功能上没有问题,但编码风格和规范却十分糟糕的代码,这往往会让人不敢再往下阅读,甚至会影响阅读者一天的心情。这些代码不仅不...</p> <p>是时候替换你的 for 循环大法了~ - 前端 - 掘金<br>《小分享》JavaScript中数组的那些迭代方法~...</p> <p>javascript 基础总结(一)——综合 - 前端 - 掘金<br>1、查找作用域 当前函数在哪个作用域下定义的,那么他的上级作用域就是谁  , 和函数在哪执行没有任何关系 //作用域实例 var num = 12; function fn(){ var num = 1...</p> <p>JavaScript巧学巧用 - 掘金<br>关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于工作和生活上的一些变化,最近写文章的频率有点下降了,实在不好意思,不过相信不久就会慢慢恢复过来,感谢大家一直以来的关注和支持。 本文主要给大家分享一下在...</p> <p>走心的一系列 JS 基础 > 进阶的大白话教程 - 前端 - 掘金<br>JS大法好,JS在手,天下我有,信JS,得永生。 想必每一个前端攻城狮都知道,区分能力的最重要的指标就是对JavaScript的掌握程度, 在热门框架满天飞,自动化越来越被推崇的今天, 好多开发者都失其本...</p> <p>this 与 JavaScript 中的四种调用模式 - 前端 - 掘金<br>this 与 JavaScript 中的四种调用模式...</p> <p>javascript 基础总结(二)——异步编程情况 - 前端 - 掘金<br>异步:规定要做一件事,不是立马执行这件事,需要等一定的时间,这样的话,我们不会等着它执行,而是继续执行下面的操作,只有将下面的事情处理完了,才会返回头处理之前的事情;如果下面的事情并没有处理完成,不管之前的事情有没有到时间,都踏踏实实的给我等着; ...</p> <p>javascript 基础总结(三)——盒子模型 - 前端 - 掘金<br>1、js中的盒子模型 通过js中提供一系列的方法和属性获取页面中元素的样式信息值; 2、...</p> <p>JavaScript 设计模式 ① 正确使用面向对象编程的姿势 - 掘金<br>javascript是一门弱语言,他有着分同一般的灵活性使它迅速的成为几乎人人必会的一门语言,but,你们使用的姿势真的正确吗? 在以前的开发过程当中,老板:给我加个验证用户邮箱、验证用户短信...功能! function checkMessage(){......</p> <p>走心大白话JavaScript教程(一)理解JS中this指向的小技巧 - 掘金<br>JS大法好,JS在手,天下我有,信JS,得永生。 这个系列的教程我一开始是写在github上的,但是觉得放到掘金来可以让更多需要的人看到,就搬到掘金专栏上啦,如果觉得本教程对你有帮助,请点这里去github上给我一颗Star~教程目录也在github上哈~ 本...</p> <p>JS 红宝书 · 读书笔记 -- 下篇 - 前端 - 掘金<br>个人博客:https://yeaseonzhang.github.io 花了半个多月的时间,终于又把“JS红宝书”又撸了一遍。 第一次读“JS红宝书”还是2015年初学JS的时候,那时候只是把语法部分读了一遍,还有一些浏览器相关知识做了下了解,大概也就读了半...</p> <p>JavaScript 迷之 this 总结 - 前端 - 掘金<br>JavaScript的this迷之指向是不是弄晕了你,我是被转的晕头转向,所以来总结一下this的指向问题。 this的指向总体可以分为四种情况: 直接调用 作为对象方法调用 构造函数调用 ...</p> <p>精读前后端渲染之争 - 前端 - 掘金</p> <p><p>引言我为什么要选这篇文章呢?十年前,几乎所有网站都使用 ASP、Java、PHP 这类做后端渲染,但后来随着 jQuery、Angular、React、Vue 等 JS 框架的崛起,开始转向了前端渲染。从 2014 年起又开始流行了同构渲染,号称是未来,...</p></p> <p>JavaScript 最全数组方法总结 (上) - 前端 - 掘金<br>JavaScript中提供了多种数组方法,如下: 转换方法—toLocaleString()方法、toString()方法、valueOf()方法 栈方法——push()方法、pop()方法 队列方法——shift()方法、unsh...</p> <p>30 分钟搞定 ES6 常用基础知识 - 前端 - 掘金<br>ES6基础智商划重点 在实际开发中,ES6已经非常普及了。掌握ES6的知识变成了一种必须。尽管我们在使用时仍然需要经过babel编译。 ES6彻底改变了前端的编码风格,可以说对于前端的影...</p> <p>详解 Javascript十大常用设计模式 - 前端 - 掘金<br>一:理解工厂模式    工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。    简单的工厂模式可以理解为解决多个相似的问题;这也是她的优点;比如如下代码:&...</p> <p>前端常见算法的 JS 实现 - 前端 - 掘金<br>原文链接 排序算法 1、冒泡排序 function bubbleSort(arr){ var i = j = 0; for(i=1; i<arr.length; i+...</p> <p>《你不知道的JavaScript》读书笔记(一) - 掘金<br>1、编译原理 分词/词法分析( Tokenizing/Lexing) 这个过程会将由字符组成的字符串分解成( 对编程语言来说) 有意义的代码块, 这些代码块被称为词法单元( token)。 例如, 考虑程序 var a = 2;。 这段程序通常会被分解成为下...</p> <p>JS 进阶篇: 这可能是关于闭包最好的一篇文章 - 前端 - 掘金<br>原谅我把标题起的像搞个大新闻的样子~ 每次下午打完球之后,晚上的学习总是提不起什么精神,趁着看不下新知识的空,把前两天总结的知识发出来给大家参考参考,挺多是摘抄的,也有一些是自己写的,如果有什么错误的,敬请指正! ...</p> <p>JS 中常见排序算法详解 - 前端 - 掘金<br>本文将详细介绍在JavaScript中算法的用法,配合动图生动形象的让你以最快的方法学习算法的原理以及在需求场景中的用途。 有句话怎么说来着: 雷锋推倒雷峰塔,Java implement...</p> <p>JavaScript 原型链 - 前端 - 掘金<br>结论 细探 原型链解释 原型链工作原理 ...</p> <p>JavaScript 设计模式 - 前端 - 掘金<br>目录 前言 单体模式 工厂模式 迭代器模式 装饰者模式 策略模式 外观模式 代理模式 中介者模式 观察者模式 前言 本文参考于《javascript模式》,因此会大...</p> <p>JavaScript 经典的难点与重点 - 前端 - 掘金<br>LazyMan 实现LazyMan(什么是LazyMan?请自行google) ...</p> <p>【英】JS 之道 - 前端 - 掘金<br>这个指南旨在帮助大家了解 JavaScript 的最佳实践。GitHub 上有 6000 多 Star....</p> <p>Ajax 与数据传输 - 前端 - 掘金<br>背景 在没有ajax之前,前端与后台传数据都是靠表单传输,使用表单的方法传输数据有一个比较大的问题就是每次提交数据都会刷新页面,用户体验很不友好,解决方案有的是采用iframe,表单放在iframe中,不用刷新母页面,有的是在j...</p> <p>从今天起好好认识 JavaScript 面向对象 - 前端 - 掘金<br>很开心,最近收获了很多知识,而且发现很多东西,以前理解的都是错的或者是肤浅的,还以为自己真的就get到了精髓,也很抱歉会影响一些人往错误的道路上走,不过这也告诉了我们,看任何一篇文章都不能盲目的去相信,要实践验证再验证。今天就重新整理一下,我对面向对象的理解,...</p> <p>JavaScript 深入之类数组对象与 arguments - 掘金<br>JavaScript深入系列第十三篇,讲解类数组对象与对象之间的相似与差异以及arguments的注意要点 类数组对象 所谓的类数组对象: 拥有一个 length 属性和若干索引属性的对象 举个例子: var array = ["name", "age"...</p> <p>JS 风格指南 - 掘金<br>JavaScript风格指南 目录 介绍 变量 函数 对象和数据结构 类 测试 并发 错误处理 格式化 注释 介绍 作者根据Robert C. Martin《代码整洁之道》总结了适用于JavaScript的软件工程原则《Clean Code JavaScr...</p> <p>JavaScript 代码整洁之道 - 前端 - 掘金<br>概述 Robert C. Martin 在 《代码整洁之道》 中提到的软件工程原则,同样适用于 JavaScript。这不是一个风格参考。它指导如何用 JavaScript 编写可读、可复用、可重构的软件。 并不是每一个原则都必须严格遵循,甚至很...</p> <p>JavaScript 设计模式 ① 正确使用面向对象编程的姿势 - 掘金<br>javascript是一门弱语言,他有着分同一般的灵活性使它迅速的成为几乎人人必会的一门语言,but,你们使用的姿势真的正确吗? 在以前的开发过程当中,老板:给我加个验证用户邮箱、验证用户短信...功能! function checkMessage(){......</p> <p>JavaScript 设计模式 ② 巧用"工厂模式"和"创建者"模式 - 掘金<br>我为什么把他们两个放在一起讲?我觉得这两个设计模式有相似之处,有时候会一个设计模式不能满足你的需求而采用另一种设计模式。基于这点考虑,而且为了大家更好地理解,我放到了一起,加深大家的印象,活学活用。 [这里我为了能更好的体现下设计模式与JS本体语言的结合,我用...</p> <p>HTML5 进阶系列:拖放 API 实现拖放排序 - 掘金<br>前言 HTML5 中提供了直接拖放的 API,极大的方便我们实现拖放效果,不需要去写一大堆的 js,只需要通过监听元素的拖放事件就能实现各种拖放功能。 想要拖放某个元素,必须设置该元素的 draggable 属性为 true,当该属性为 false 时,将不允...</p> <p>【译】You Don"t Need jQuery - 前端 - 掘金<br>You Don"t Need jQuery ...</p> <p>细说 JavaScript 事件编码维护 - 前端 - 掘金<br>在学习完JavaScript事件之后,我们对事件都有一定的了解了,但是你的编码是否利于维护了呢?这里将讲述编写事件代码的两个规则。 规则1: 将应用逻辑将事件处理程序分离 我们先定义一些对象用于存储跨浏览器的事件处理程序与事件对象方法,这里将不讲解这个代码,详...</p> <p>一组有趣的 slide 效果实现 - 前端 - 掘金<br>最近重新写了 Ghost-theme 的主题。其中主要是取消了Icon-font,改为了SVG Sprite 。其次非常重要的板块首屏的Slide 和导航重新设计了。先看下具体的效果吧: 视频无...</p> <p>微信小程序 swiper 滑动页面实践 - 类似于安卓 ViewPager - 前端 - 掘金<br>一言不合,上效果 效果一 效果二 效果三 ...</p> <p>浏览器插件 | 帮助你从各个网站轻松 Copy 代码 - 前端 - 掘金<br>Because copy to clipboard buttons should exist on every code snippet. ...</p> <p>【译】10 个基于 JavaScript 的机器学习实例 - 前端 - 掘金<br>随着人工智能技术的发展,机器学习越来越受到开发者们的关注,从而也导致了机器学习库如雨后春笋般的涌现出来,而且没有任何放缓的趋势。虽然,传统意义上 Python 已经成为了最受欢迎的机器学习语言。但目前神经网络可在任何编程语言中运行,当然也包括 JavaScri...</p> <p>JS 中的 call 和 apply 应用 - 前端 - 掘金<br>JavaScript中的call和apply应用 ECMAScript3给Function的原型定义了两个方法,他们是Function.prototype.call 和 Function.prototype.apply...</p> <p>JavaScript深入之bind的模拟实现 - 掘金<br>JavaScript深入系列第十一篇,通过bind函数的模拟实现,带大家真正了解bind的特性 bind 一句话介绍bind: bind()方法会创建一个新函数。当这个新函数被调用时,bind()的第一个参数将作为它运行时的 this, 之后的一序列参数将...</p> <p>编写高质量的 JavaScript 代码(一) - 前端 - 掘金<br>作者 | 杨潼编辑 | 迷鹿 2016年6月加入腾讯,目前在SNG社交网络质量部从事内部平台工具的研发。熟悉PHP、JS、CSS,喜欢弹吉他。 一、理解JavaScript的浮点数 由IEEE754标准制定,JavaSc...</p> <p>用原生 js 写一个 "多动症" 的简历 - 前端 - 掘金<br>用原生js写一个"多动症"的简历 预览地址 源码地址 最近...</p> <p>你真的懂 JavaScript 的正则吗? - 掘金<br>本文内容主要出处为《JavaScript权威指南》(第六版),笔者只是在搬砖的同时整理思路,有误望及时指出,感谢! 定义正则表达式 概述 对于正则表达式的概念我们就不多费口舌了...在JavaScript中使用正则表达式进行模式匹配离不开RegExp对象,...</p> <p>JavaScript字符串所有API全解密 - 掘金<br>关于 我的博客:louis blog SF专栏:路易斯前端深度课 原文链接:JavaScript字符串所有API全解密 本文近 6k 字,读完需 10 分钟。 字符串作为基本的信息交流的桥梁,几乎被所有的编程语言所实现(然而c、c++没有提供)。多数开发者...</p> <p>深入 JavaScript,从对象开始 - 前端 - 掘金<br>入坑前端开发有一段时间了,面对形形色色的JavaScript优秀框架,到底该选择那一款呢?最近在使用Vue.js写一款markdown编辑器插件(mavonEditor)的时候,遇到了各种各样的问题,而导致这些问题的根本原因不是Vue.js,而是JavaScr...</p> <p>jsonp 跨域请求详解——从繁至简 - 前端 - 掘金<br>什么是jsonp?为什么要用jsonp?JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1...</p> <p>跨域——CORS 详解 - 前端 - 掘金<br>CORS(Cross-origin resource sharing) “跨域资源共享” 在出现CORS标准之前, 我们还只能通过jsonp(jsonp跨域请求详解)的形式去向“跨源”服务器去发送 XMLHttpRequest 请求,这种方式吃力不讨好,在请...</p> <p>希望是通俗易懂的谈一下JS 闭包问题 - 前端 - 掘金<br>有时候在查一个知识点的时候,如果你只看了一篇文章,恰巧那篇文章讲的并不准确,可能你一辈子都要认为的有偏差了。  闭包首先要从内存管理说起  不管现代浏览器做的再好,我们总会在上一些网站时发现很卡,卡的原因可能千千万吧,但是如果因为代码质...</p> <p>JavaScript字符串所有API全解密 - 掘金<br>关于 我的博客:louis blog SF专栏:路易斯前端深度课 原文链接:JavaScript字符串所有API全解密 本文近 6k 字,读完需 10 分钟。 字符串作为基本的信息交流的桥梁,几乎被所有的编程语言所实现(然而c、c++没有提供)。多数开发者...</p> <p>JS 一些优化性能的小细节 - 掘金<br>Github博客: https://github.com/asd0102433...喜欢的朋友star 支持一下 Js高性能优化小结 谨慎使用闭包 由于闭包[[Scope]] 属性包含与执行环境作用域链相同的对象引用,函数活动对象本来会随着执行环境完毕...</p> <p>JavaScript巧学巧用 - 掘金<br>关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 由于工作和生活上的一些变化,最近写文章的频率有点下降了,实在不好意思,不过相信不久就会慢慢恢复过来,感谢大家一直以来的关注和支持。 本文主要给大家分享一下在...</p> <p>破解前端面试(80% 应聘者不及格系列):从闭包说起 - 掘金<br>修订说明:发布《80% 应聘者都不及格的 JS 面试题》之后,全网阅读量超过 6W,在知乎、掘金、cnodejs 都引发了很多讨论,还被多个前端微信公号和技术媒体转载。酝酿许久之后,笔者准备接下来撰写前端面试题系列文章,内容涵盖 DOM、HTTP、浏览器、框架...</p> <p>谁说 JavaScript 很简单了? - 掘金<br>本文作者:Aurélien Hervé 编译:胡子大哈 翻译原文:http://huziketang.com/blog/po... 英文连接:Who said javascrip...</p> <p>Google 是如何审批20亿行代码的?coding style 真的很重要! - 掘金<br>专栏 | 九章算法网址 | www.jiuzhang.com 有些人觉得,代码只要写出来了,程序跑通过了就可以了,为什么要浪费时间去约束人家怎么写代码呢。但是,现实工作中,我们发现,不少人就是因为代码风格不佳,被挂掉了面试,或者出现团队协作问题。 为什么代码...</p> <p>80% 应聘者都不及格的 JS 面试题 - 掘金<br>共 5024 字,读完需 6 分钟,速读需 2 分钟,本文首发于知乎专栏前端周刊。写在前面,笔者在做面试官这 2 年多的时间内,面试了数百个前端工程师,惊讶的发现,超过 80% 的候选人对下面这道题的回答情况连及格都达不到。这究竟是怎样神奇的一道面试题?他考察...</p> <p>你真的了解 javascript 吗?(一) - 前端 - 掘金<br>原题出处:JavaScript Puzzlers!当初以为不过是一些小题目,结果做到怀疑人生,都要怀疑可能我javascript白学了。读者可以去试试。 不多说,直接上题: 第一题...</p> <p>撸 js 基础之数组 - 前端 - 掘金<br>数组基础 简介 数组是应用最广泛的数据存储结构。它被植入到大部分编程语言中。在 ECMAScript 中数组是非常常用的引用类型。 &amp;amp;lt;img ...</p> <p>廖雪峰JS学习总结-函数篇 - 掘金<br>最近在刷廖雪峰的JS教程,把里面的自己不太清楚的东西在刷一遍。教程网址:http://www.liaoxuefeng.com/wi... 函数的定义和调用: ...</p> <p>详解 Javascript十大常用设计模式 - 前端 - 掘金<br>一:理解工厂模式    工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。    简单的工厂模式可以理解为解决多个相似的问题;这也是她的优点;比如如下代码:&...</p> <p>ES6语言特性的总结(1) - 掘金<br>虽然在编写项目的过程中,也会用到ES6的语法以及新特性。但感觉学习的不是特别系统,索性这两天重新刷了一下Understanding The ES6,也对ES6有了更深的理解。这里,针对感觉应用比较多,知识点比较重要的部分做了一下总结。内容有点多,因此预计将分为...</p> <p>函数式编程术语及示例 - 前端 - 掘金<br>译者注:本项目译自 functional-programing-jargon,专业术语居多,如有错误,可以提 pr 更正。除了术语翻译,针对每项术语,也有代码示例,位于 /demos 目录下。另外,这里也有几份不错的文章和仓库。 ...</p> <p>44 个 JavaScript {{BANNED}}题解析 - 前端 - 掘金<br>原题来自: http://javascript-puzzlers.he... 读者可以先去做一下感受感受. 当初笔者的成绩是 21/44... 当初笔者做这套题的时候不仅怀疑智商, 连人生都...</p> <p>前端基础进阶(七):函数与函数式编程 - 前端 - 掘金<br>函数:菜鸟收割者 纵观JavaScript中所有必须需要掌握的重点知识中,函数是我们在初学的时候最容易忽视的一个知识点。在学习的过程中,可能会有很多人、很多文章告诉你面向对象很重要,原型很重要,可是却很少有人告...</p> <p>前端基础进阶:详细图解,彻底搞懂闭包与作用域链 - 前端 - 掘金<br>攻克闭包难题 初学JavaScript的时候,我在学习闭包上,走了很多弯路。而这次重新回过头来对基础知识进行梳理,要讲清楚闭包,也是一个非常大的挑战。 闭包有多重...</p> <p>深入浅出妙用 Javascript 中 apply、call、bind - 前端 - 掘金<br> (点击 上方公众号,可快速关注) 作者:伯乐在线专栏作者 - chokcoco 如有好文章投稿,请点击 → 这里了解详情 如需转载,发送「转载」二字查看说明 这篇文章实在是很难下笔,因为网上相关文章不胜枚举。 巧...</p> <p>JavaScript Promise API - 阅读 - 掘金<br>尽管同步代码易于追踪和调试,但异步代码普遍在性能和灵活性上更具优势。Why "hold up the show" when you can trigger numerous requests at once and then handle them when ...</p> <p>前端知识点大百科全书 - 前端 - 掘金<br>These share data are from my usual work and learning,hoping to help you,If you like you can star Javas...</p> <p>征服 JavaScript 面试:什么是闭包 - 前端 - 掘金<br>“征服 JavaScript 面试”是我写的一系列文章,来帮助面试者准备他们在面试 JavaScript 中、高级职位中将可能会遇到的一些问题。这些问题我自己在面试中也经常会问。 在我面试时问出的一系列问题里,闭包通常是我问的第一个或最后一个问题。坦白地说,...</p> <p>JavaScript 中的 call、apply、bind 深入理解 - 前端 - 掘金<br>一、函数的三种角色 首先要先了解在函数本身会有一些自己的属性,比如: length:形参的个数; ...</p> <p>JavaScript 闭包 - 前端 - 掘金<br>原文链接 什么是闭包(Closure) 简单讲,闭包就是指有权访问另一个函数作用域中的变量的函数。 MDN 上面这么说:闭包是一种特殊的对象。它由两部分构成:函数,以及创建该函数的环境。环境由闭包创建时在作用域中的任何局部变量组成。 但是,网上找了好多资料...</p> <p> JavaScript 闭包入门(译文) - 掘金<br>前言 总括 :这篇文章使用有效的javascript代码向程序员们解释了闭包,大牛和功能型程序员请自行忽略。 译者 :文章写在2006年,可直到翻译的21小时之前作者还在完善这篇文章,在Stackoverflow的How do JavaScript closu...</p> <p>(译) 高效地使用闭包 - 前端 - 掘金<br>翻译能力有限,原文请点这里 Use JavaScript Closures Efficiently,越到后面,内容才越重要,如果想看,请耐心看完(我也是翻译之后才知道的) 闭包普遍地用在 Node.js 中,以支持各种形式的异步和事件驱动这两种编程模式。如果...</p> <p>理解 javascript 中的闭包 - 前端 - 掘金<br>闭包在 javascript 来说是比较重要的概念,平时工作中也是用的比较多的一项技术。...</p> <p>深刻理解 JavaScript--- 闭包 - 前端 - 掘金<br>闭包是指那些能够访问独立(自由)变量的函数 (变量在本地使用,但定义在一个封闭的作用域中)。换句话说,这些函数可以“记忆”它被创建时候的环境。——这句话其实有点难以理解。我觉得应该用一些例子来理解闭包的含义。 闭包#1 先来看一个函数:function f...</p> <p>JavaScript 之闭包与高阶函数(一) - 前端 - 掘金<br>欢迎访问我的个人博客 JavaScript虽是一门面向对象的编程语言,但同时也有许多函数式编程的特性,如Lambda表达式,闭包,高阶函数等。 函数式编程是种编程范式,它将电脑运算视为函数的计算。函数编程语言最重要的基础是 λ 演算(lambda c...</p> <p>JavaScript字符串所有API全解密 - 掘金<br>关于 我的博客:louis blog SF专栏:路易斯前端深度课 原文链接:JavaScript字符串所有API全解密 本文近 6k 字,读完需 10 分钟。 字符串作为基本的信息交流的桥梁,几乎被所有的编程语言所实现(然而c、c++没有提供)。多数开发者...</p> <p>程序员福利:各大平台免费接口,非常实用 - 工具资源 - 掘金<br>电商接口京东获取单个商品价格接口:http://p.3.cn/prices/mgets?sk...商品ID&type=1ps:商品ID这么获取:http://item.jd.com/954086.html物流接口快递接口:http://www.kuai...</p> </div> <div class="mt-64 tags-seach" > <div class="tags-info"> <a style="width:120px;" title="GPU云服务器" href="https://www.ucloud.cn/site/product/gpu.html">GPU云服务器</a> <a style="width:120px;" title="云服务器" href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo">云服务器</a> <a style="width:120px;" title="javascript专题系列" href="https://www.ucloud.cn/yun/tag/javascriptzhuantixilie/">javascript专题系列</a> <a style="width:120px;" title="javascript深入系列" href="https://www.ucloud.cn/yun/tag/javascriptshenruxilie/">javascript深入系列</a> <a style="width:120px;" title=" 掘金" href="https://www.ucloud.cn/yun/tag/ juejin/"> 掘金</a> <a style="width:120px;" title="掘金社区" href="https://www.ucloud.cn/yun/tag/juejinshequ/">掘金社区</a> </div> </div> <div class="entry-copyright mb-30"> <p class="mb-15"> 文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。</p> <p>转载请注明本文地址:https://www.ucloud.cn/yun/83003.html</p> </div> <ul class="pre-next-page"> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/83002.html">上一篇:记录一次被360干掉的MongoDB服务修复过程......</a></li> <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/83004.html">下一篇:FineReport连接多维数据库示例及操作</a></li> </ul> </div> <div class="about_topicone-mid"> <h3 class="top-com-title mb-0"><span data-id="0">相关文章</span></h3> <ul class="com_white-left-mid atricle-list-box"> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/111977.html"><b>CSS技巧 - <em>收藏</em><em>集</em> - <em>掘金</em></b></a></h2> <p class="ellipsis2 good">摘要:笔者作为一位,将工作以来用到的各种优秀资料神器及框架整理在此,毕竟好记性不如烂键盘,此前端知识点大百科全书前端掘金,,不定期更新技巧前端掘金技巧,偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案,还有一些是在css-tricks看到的。记录一下,以后会用到。会持续更新… 一、...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-921.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/09/small_000000921.jpg" alt=""><span class="layui-hide64">Jonathan Shieber</span></a> <time datetime="">2019-08-29 12:33</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/91731.html"><b>CSS技巧 - <em>收藏</em><em>集</em> - <em>掘金</em></b></a></h2> <p class="ellipsis2 good">摘要:笔者作为一位,将工作以来用到的各种优秀资料神器及框架整理在此,毕竟好记性不如烂键盘,此前端知识点大百科全书前端掘金,,不定期更新技巧前端掘金技巧,偶尔更新。计算数组的极值技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。 CSS 样式画各种图形 - 前端 - 掘金下面是一些我在 CSS 中经常用到的图案,还有一些是在css-tricks看到的。记录一下,以后会用到。会持续更新… 一、...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-122.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/01/small_000000122.jpg" alt=""><span class="layui-hide64">SHERlocked93</span></a> <time datetime="">2019-08-22 11:04</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/67161.html"><b>类的加载机制 - <em>收藏</em><em>集</em> - <em>掘金</em></b></a></h2> <p class="ellipsis2 good">摘要:是现在广泛流行的代从开始学习系列之向提交代码掘金读完本文大概需要分钟。为了进行高效的垃圾回收,虚拟机把堆内存划分成新生代老年代和永久代中无永久代,使用实现三块区域。 React Native 开源项目 - 仿美团客户端 (Android、iOS 双适配) - Android - 掘金推荐 React Native 学习好项目,仿照美团客户端... 极简 GitHub 上手教程 - 工具...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-1686.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/16/small_000001686.jpg" alt=""><span class="layui-hide64">Gilbertat</span></a> <time datetime="">2019-08-14 18:40</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> <li> <div class="atricle-list-right"> <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/83359.html"><b>大前端 - <em>收藏</em><em>集</em> - <em>掘金</em></b></a></h2> <p class="ellipsis2 good">摘要:是目前唯一一个支持同步调用的跨平台年度上最多的个项目前端掘金年接近尾声,在最近的几篇文章中,会整理总结一些年度开源项目。 JS 全栈教程 - 前端 - 掘金本课程是基于阮一峰的 js 全栈教程的视频版本,免费供大家观看... 2016 年 10 个最佳的 CodePen 作品 - 前端 - 掘金说到 CodePen,前端开发者们肯定不会陌生。如果说 Dribbble 是设计师们聚集的圣...</p> <div class="com_white-left-info"> <div class="com_white-left-infol"> <a href="https://www.ucloud.cn/yun/u-615.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/06/small_000000615.jpg" alt=""><span class="layui-hide64">honhon</span></a> <time datetime="">2019-08-20 17:03</time> <span><i class="fa fa-commenting"></i>评论0</span> <span><i class="fa fa-star"></i>收藏0</span> </div> </div> </div> </li> </ul> </div> <div class="topicone-box-wangeditor"> <h3 class="top-com-title mb-64"><span>发表评论</span></h3> <div class="xcp-publish-main flex_box_zd"> <div class="unlogin-pinglun-box"> <a href="javascript:login()" class="grad">登陆后可评论</a> </div> </div> </div> <div class="site-box-content"> <div class="site-content-title"> <h3 class="top-com-title mb-64"><span>0条评论</span></h3> </div> <div class="pages"></ul></div> </div> </div> <div class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right"> <div class=""> <div class="com_layuiright-box user-msgbox"> <a href="https://www.ucloud.cn/yun/u-1306.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/13/small_000001306.jpg" alt=""></a> <h3><a href="https://www.ucloud.cn/yun/u-1306.html" rel="nofollow">cfanr</a></h3> <h6>男<span>|</span>高级讲师</h6> <div class="flex_box_zd user-msgbox-atten"> <a href="javascript:attentto_user(1306)" id="attenttouser_1306" class="grad follow-btn notfollow attention">我要关注</a> <a href="javascript:login()" title="发私信" >我要私信</a> </div> <div class="user-msgbox-list flex_box_zd"> <h3 class="hpf">TA的文章</h3> <a href="https://www.ucloud.cn/yun/ut-1306.html" class="box_hxjz">阅读更多</a> </div> <ul class="user-msgbox-ul"> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/124871.html">#黑五#Friendhosting LTD:所有 SSD VDS 均可享受 55% 的折扣,月付€1</a></h3> <p>阅读 1992<span>·</span>2021-11-24 10:45</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/121957.html">每日一练的榜单公布啦~ 速来领奖品!</a></h3> <p>阅读 1849<span>·</span>2021-10-09 09:43</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/120545.html">如何提虚拟主机需求参数-如何购买虚拟主机?需要注意什么?</a></h3> <p>阅读 1290<span>·</span>2021-09-22 15:38</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/118282.html">Hostodo:美国VPS服务器$19.99/年起,KVM虚拟架构,1Gbps带宽、免费SolusV</a></h3> <p>阅读 1218<span>·</span>2021-08-18 10:19</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/117365.html">2019年前端学习路线</a></h3> <p>阅读 2835<span>·</span>2019-08-30 15:55</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/115032.html">checkbox样式研究——按钮</a></h3> <p>阅读 3056<span>·</span>2019-08-30 12:45</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/114988.html">啦咯ill图</a></h3> <p>阅读 2959<span>·</span>2019-08-30 11:25</p></li> <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/111695.html">大战border的0.5px</a></h3> <p>阅读 356<span>·</span>2019-08-29 11:30</p></li> </ul> </div> <!-- 文章详情右侧广告--> <div class="com_layuiright-box"> <h6 class="top-com-title"><span>最新活动</span></h6> <div class="com_adbox"> <div class="layui-carousel" id="right-item"> <div carousel-item> <div> <a href="https://www.ucloud.cn/site/active/kuaijiesale.html?ytag=seo" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/240625/2rTjEHmi.png" alt="云服务器"> </a> </div> <div> <a href="https://www.ucloud.cn/site/product/gpu.html" rel="nofollow"> <img src="https://www.ucloud.cn/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服务器"> </a> </div> </div> </div> </div> <!-- banner结束 --> <div class="adhtml"> </div> <script> $(function(){ $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/ad/getad/1.html", cache: false, success: function(text){ $(".adhtml").html(text); } }); }) </script> </div> </div> </div> </div> </div> </section> <!-- wap拉出按钮 --> <div class="site-tree-mobile layui-hide"> <i class="layui-icon layui-icon-spread-left"></i> </div> <!-- wap遮罩层 --> <div class="site-mobile-shade"></div> <!--付费阅读 --> <div id="payread"> <div class="layui-form-item">阅读需要支付1元查看</div> <div class="layui-form-item"><button class="btn-right">支付并查看</button></div> </div> <script> var prei=0; $(".site-seo-depict pre").each(function(){ var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">',''); $(this).attr('data-clipboard-text',html).attr("id","pre"+prei); $(this).html("").append("<code>"+html+"</code>"); prei++; }) $(".site-seo-depict img").each(function(){ if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){ $(this).remove(); } }) $("LINK[href*='style-49037e4d27.css']").remove(); $("LINK[href*='markdown_views-d7a94ec6ab.css']").remove(); layui.use(['jquery', 'layer','code'], function(){ $("pre").attr("class","layui-code"); $("pre").attr("lay-title",""); $("pre").attr("lay-skin",""); layui.code(); $(".layui-code-h3 a").attr("class","copycode").html("复制代码 ").attr("onclick","copycode(this)"); }); function copycode(target){ var id=$(target).parent().parent().attr("id"); var clipboard = new ClipboardJS("#"+id); clipboard.on('success', function(e) { e.clearSelection(); alert("复制成功") }); clipboard.on('error', function(e) { alert("复制失败") }); } //$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5)); </script> <link rel="stylesheet" type="text/css" href="https://www.ucloud.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css"> <script src="https://www.ucloud.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script> <script src="https://www.ucloud.cn/yun/static/js/clipboard.js"></script> <script>hljs.initHighlightingOnLoad();</script> <script> function setcode(){ var _html=''; document.querySelectorAll('pre code').forEach((block) => { var _tmptext=$.trim($(block).text()); if(_tmptext!=''){ _html=_html+_tmptext; console.log(_html); } }); } </script> <script> function payread(){ layer.open({ type: 1, title:"付费阅读", shadeClose: true, content: $('#payread') }); } // 举报 function jupao_tip(){ layer.open({ type: 1, title:false, shadeClose: true, content: $('#jubao') }); } $(".getcommentlist").click(function(){ var _id=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); $("#articlecommentlist"+_id).toggleClass("hide"); var flag=$("#articlecommentlist"+_id).attr("dataflag"); if(flag==1){ flag=0; }else{ flag=1; //加载评论 loadarticlecommentlist(_id,_tid); } $("#articlecommentlist"+_id).attr("dataflag",flag); }) $(".add-comment-btn").click(function(){ var _id=$(this).attr("dataid"); $(".formcomment"+_id).toggleClass("hide"); }) $(".btn-sendartcomment").click(function(){ var _aid=$(this).attr("dataid"); var _tid=$(this).attr("datatid"); var _content=$.trim($(".commenttext"+_aid).val()); if(_content==''){ alert("评论内容不能为空"); return false; } var touid=$("#btnsendcomment"+_aid).attr("touid"); if(touid==null){ touid=0; } addarticlecomment(_tid,_aid,_content,touid); }) $(".button_agree").click(function(){ var supportobj = $(this); var tid = $(this).attr("id"); $.ajax({ type: "GET", url:"https://www.ucloud.cn/yun/index.php?topic/ajaxhassupport/" + tid, cache: false, success: function(hassupport){ if (hassupport != '1'){ $.ajax({ type: "GET", cache:false, url: "https://www.ucloud.cn/yun/index.php?topic/ajaxaddsupport/" + tid, success: function(comments) { supportobj.find("span").html(comments+"人赞"); } }); }else{ alert("您已经赞过"); } } }); }); function attenquestion(_tid,_rs){ $.ajax({ //提交数据的类型 POST GET type:"POST", //提交的网址 url:"https://www.ucloud.cn/yun/favorite/topicadd.html", //提交的数据 data:{tid:_tid,rs:_rs}, //返回数据的格式 datatype: "json",//"xml", "html", "script", "json", "jsonp", "text". //在请求之前调用的函数 beforeSend:function(){}, //成功返回之后调用的函数 success:function(data){ var data=eval("("+data+")"); console.log(data) if(data.code==2000){ layer.msg(data.msg,function(){ if(data.rs==1){ //取消收藏 $(".layui-layer-tips").attr("data-tips","收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>'); } if(data.rs==0){ //收藏成功 $(".layui-layer-tips").attr("data-tips","已收藏文章"); $(".layui-layer-tips").html('<i class="fa fa-heart"></i>') } }) }else{ layer.msg(data.msg) } } , //调用执行后调用的函数 complete: function(XMLHttpRequest, textStatus){ postadopt=true; }, //调用出错执行的函数 error: function(){ //请求出错处理 postadopt=false; } }); } </script> <footer> <div class="layui-container"> <div class="flex_box_zd"> <div class="left-footer"> <h6><a href="https://www.ucloud.cn/"><img src="https://www.ucloud.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud (优刻得科技股份有限公司)"></a></h6> <p>UCloud (优刻得科技股份有限公司)是中立、安全的云计算服务平台,坚持中立,不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品,并深入了解互联网、传统企业在不同场景下的业务需求,提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。</p> </div> <div class="right-footer layui-hidemd"> <ul class="flex_box_zd"> <li> <h6>UCloud与云服务</h6> <p><a href="https://www.ucloud.cn/site/about/intro/">公司介绍</a></p> <p><a href="https://zhaopin.ucloud.cn/" >加入我们</a></p> <p><a href="https://www.ucloud.cn/site/ucan/onlineclass/">UCan线上公开课</a></p> <p><a href="https://www.ucloud.cn/site/solutions.html" >行业解决方案</a></p> <p><a href="https://www.ucloud.cn/site/pro-notice/">产品动态</a></p> </li> <li> <h6>友情链接</h6> <p><a href="https://www.compshare.cn/?ytag=seo">GPU算力平台</a></p> <p><a href="https://www.ucloudstack.com/?ytag=seo">UCloud私有云</a></p> <p><a href="https://www.surfercloud.com/">SurferCloud</a></p> <p><a href="https://www.uwin-link.com/">工厂仿真软件</a></p> <p><a href="https://pinex.it/">Pinex</a></p> <p><a href="https://www.picpik.ai/zh">AI绘画</a></p> </li> <li> <h6>社区栏目</h6> <p><a href="https://www.ucloud.cn/yun/column/index.html">专栏文章</a></p> <p><a href="https://www.ucloud.cn/yun/udata/">专题地图</a></p> </li> <li> <h6>常见问题</h6> <p><a href="https://www.ucloud.cn/site/ucsafe/notice.html" >安全中心</a></p> <p><a href="https://www.ucloud.cn/site/about/news/recent/" >新闻动态</a></p> <p><a href="https://www.ucloud.cn/site/about/news/report/">媒体动态</a></p> <p><a href="https://www.ucloud.cn/site/cases.html">客户案例</a></p> <p><a href="https://www.ucloud.cn/site/notice/">公告</a></p> </li> <li> <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="优刻得"></span> <p>扫扫了解更多</p></div> </div> <div class="copyright">Copyright © 2012-2023 UCloud 优刻得科技股份有限公司<i>|</i><a rel="nofollow" href="http://beian.miit.gov.cn/">沪公网安备 31011002000058号</a><i>|</i><a rel="nofollow" href="http://beian.miit.gov.cn/"></a> 沪ICP备12020087号-3</a><i>|</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-DZSMXQ3P9N'); </script> <script> (function(){ var el = document.createElement("script"); el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a"; el.id = "ttzz"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(el, s); })(window) </script></div> </div> </footer> </body> <script src="https://www.ucloud.cn/yun/static/theme/ukd/js/common.js"></script> <<script type="text/javascript"> $(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%"); </script> </html>