ethanYin

ethanYin 查看完整档案

上海编辑  |  填写毕业院校xxx  |  码农 编辑 www.null.com 编辑
编辑

如果你想做,下一秒就去。

个人动态

ethanYin 关注了用户 · 3月3日

冴羽 @yayu

JavaScript深入系列 15 篇已完结。

JavaScript专题系列 20 篇已完结。

underscore 系列 8 篇已完结。

ES6 系列 20 篇已完结。

现在写起了各种单篇……

React 系列还在懒惰中……

公众号:冴羽的JavaScript博客

关注 2117

ethanYin 赞了文章 · 3月3日

JavaScript专题系列20篇正式完结!

写在前面

JavaScript 专题系列是我写的第二个系列,第一个系列是 JavaScript 深入系列

JavaScript 专题系列共计 20 篇,主要研究日常开发中一些功能点的实现,比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里、递归、乱序、排序等,特点是研(chao)究(xi) underscore 和 jQuery 的实现方式。

JavaScript 专题系列自 6 月 2 日发布第一篇文章,到 10 月 20 日发布最后一篇,感谢各位朋友的收藏、点赞,鼓励、指正。

20 篇下来,我们已经跟着 underscore 写了 debounce、throttle、unique、isElement、flatten、findIndex、findLastIndex、sortedIndex、indexOf、lastIndexOf、eq、partial、compose、memorize 共 14 个功能函数,跟着 jQuery 写了 type、isArray、isFunction、isPlainObject、isWindow、isArrayLike、extend、each 共 8 个功能函数,自己实现了 shallowCopy、deepCopy、curry、shuffle 共 4 个功能函数,加起来共有 26 个功能函数,除此之外,最后一篇还研究了 V8 的排序源码,真心希望读者能从这个系列中收获颇丰。

顺便宣传一下该博客的 Github 仓库:https://github.com/mqyqingfeng/Blog,欢迎 star,鼓励一下作者。

而此篇,作为专题系列的总结篇,除了汇总各篇文章,作为目录篇之外,还希望跟大家聊聊,我为什么要写这个系列?

我为什么写专题系列?

如果说深入系列是为了了解 JavaScript 这门语言本身,专题系列就是为了用 JavaScript 具体实现一些功能,我希望它抽离于实践,无关乎 DOM、BOM,能对大家有所帮助,一想到这些,映入脑海的竟是那些年做过的前端面试题……

是的,回顾整个系列,你会发现,防抖、节流、去重、深浅拷贝、数组扁平化、乱序、柯里化等等不都是面试的经典吗?我还记得曾经为了准备面试,死记硬背了一个去重的函数,却从来没有研究过其他去重的方法,也从来没有想过它们之前的区别,防抖和节流更是傻傻分不清楚,深浅拷贝反正有 jQuery 的 extend 呢,数组扁平化,我也就有一个递归的思路,具体怎么实现我还真是不清楚,乱序我就没有思路了……哎,都是一知半解或是只是有所耳闻。

想着想着,便不知不觉写下了很多待研究的课题,研究的方法也随之浮现,那就是研究 underscore 以及 jQuery 的实现方式,曾经它们看起来很是神秘,也知道阅读起来并非难事,可还是想一探究竟。

然而研究的过程确实是十分的艰难,因为要做到看懂源码,理解实现的原理,然而,一段源码的实现往往会牵涉到多个地方,结果为了看懂某一个函数的具体实现,还要一连串的看多个函数,在理解源码的过程中,也会有很多的疑惑,我会告诉自己去理解每一个产生疑惑的地方,这句话说起来简单,做起来很难,我来举个例子吧,在数组乱序中,有一个方法是:

arr.sort(function(){
    return Math.random() - 0.5;
});

然而,这个方法的实现是有问题的,它并不能做到真正的乱序。很多文章中,只是用 demo 验证了这种方法有问题,却从来没有说过这个方法究竟哪里有问题,然而我就是对此感到非常疑惑,因为我觉得这个方法很不错呀,思路巧妙,初见时,还有点小惊艳呢……可是为什么会有问题呢?我百思不得其解,搜了很多文章,也无果,最终,为了解决这个困惑,去看了 v8 的 sort 源码,然而这段源码也并不是很容易看的,资料少之又少,先要理解插入排序,快速排序,再去理解 v8 做的诸多优化,结果为了解决这个疑惑,看完了 v8 的 sort 源码,理解了 sort 的原理后,以数组 [1, 2, 3] 为例,细细分析这种乱序方法在 v8 下具体的排序过程,最后算出来 [1, 2, 3] 乱序后的 6 种结果的概率分别是多少,结果 3 还在原位置的概率有 50%! 到此,才算是心满意足的解决了这个困惑。

关于这个困惑的具体内容,可以查看该系列的第 19 篇文章。

除此之外,所有的函数我都会自己实现一遍,然而即便看懂了原理,实现也并非能一蹴而就,毕竟如果是你写,怎么能一开始就想得如此完善呢?所以我都是从一个简单的写法开始,向着 underscore 和 jquery 的最终实现方式,一个功能一个功能的迭代实现,你看这个系列很多的文章,都会跟大家讲解如何从零实现,一版一版的代码其实就是迭代实现时的记录。

感叹一下,写文章不容易呀~

全目录

  1. JavaScript专题之跟着underscore学防抖
  2. JavaScript专题之跟着underscore学节流
  3. JavaScript专题之数组去重
  4. JavaScript专题之类型判断(上)
  5. JavaScript专题之类型判断(下)
  6. JavaScript专题之深浅拷贝
  7. JavaScript专题之从零实现jQuery的extend
  8. JavaScript专题之如何求数组的最大值和最小值
  9. JavaScript专题之数组扁平化
  10. JavaScript专题之学underscore在数组中查找指定元素
  11. JavaScript专题之jQuery通用遍历方法each的实现
  12. JavaScript专题之如何判断两个对象相等
  13. JavaScript专题之函数柯里化
  14. JavaScript专题之偏函数
  15. JavaScript专题之惰性函数
  16. JavaScript专题之函数组合
  17. JavaScript专题之函数记忆
  18. JavaScript专题之递归
  19. JavaScript专题之乱序
  20. JavaScript专题之解读v8排序源码

致歉

有些读者给我的文章留言,或感谢,或讨论,或指正,因为各种各样的原因,没能回复或及时回复,对此致以歉意。

下期预告

在我 Github 博客仓库的描述中,说到我预计写四个系列:JavaScript深入系列、JavaScript专题系列、ES6系列、React系列。专题系列完结,本来应该是写 ES6 系列,可是有一个朋友跟我说,写了这么多函数,可是该如何组织这些函数,形成自己的工具函数库呢?

对呀,既然都写了这么多工具函数,为什么不再进一步,将它们以某种方式组织起来呢?

我首先想到的便是借鉴 underscore,underscore 是如何组织代码的?又是如何实现链式调用的?又是如何实现拓展的?有很多值得研究的地方,所以我决定,在 ES6 系列之前,再进一步,写一个 underscore 系列,旨在帮助大家写出一个自己的 “underscore”。

感谢大家的阅读和支持,我是冴羽,underscore 系列再见啦![]~( ̄▽ ̄)~**

查看原文

赞 116 收藏 564 评论 30

ethanYin 关注了标签 · 1月28日

javascript

JavaScript 是一门弱类型的动态脚本语言,支持多种编程范式,包括面向对象和函数式编程,被广泛用于 Web 开发。

一般来说,完整的JavaScript包括以下几个部分:

  • ECMAScript,描述了该语言的语法和基本对象
  • 文档对象模型(DOM),描述处理网页内容的方法和接口
  • 浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口

它的基本特点如下:

  • 是一种解释性脚本语言(代码不进行预编译)。
  • 主要用来向HTML页面添加交互行为。
  • 可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务:

  • 嵌入动态文本于HTML页面
  • 对浏览器事件作出响应
  • 读写HTML元素
  • 在数据被提交到服务器之前验证数据
  • 检测访客的浏览器信息

《 Javascript 优点在整个语言中占多大比例?

关注 173030

ethanYin 关注了标签 · 1月28日

css

层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表,由W3C定义和维护的标准,一种用来为结构化文档(如HTML文档或XML应用)添加样式(字体、间距和颜色等)的计算机语言。

关注 94065

ethanYin 关注了标签 · 1月28日

vue.js

Reactive Components for Modern Web Interfaces.

Vue.js 是一个用于创建 web 交互界面的。其特点是

  • 简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。
  • 数据驱动 自动追踪依赖的模板表达式和计算属性。
  • 组件化 用解耦、可复用的组件来构造界面。
  • 轻量 ~24kb min+gzip,无依赖。
  • 快速 精确有效的异步批量 DOM 更新。
  • 模块友好 通过 NPM 或 Bower 安装,无缝融入你的工作流。

官网:https://vuejs.org
GitHub:https://github.com/vuejs/vue

关注 134232

ethanYin 关注了标签 · 1月28日

react.js

React (sometimes styled React.js or ReactJS) is an open-source JavaScript library for creating user interfaces that aims to address challenges encountered in developing single-page applications. It is maintained by Facebook, Instagram and a community of individual developers and corporations.

关注 66665

ethanYin 关注了标签 · 1月28日

前端

Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。2005年以后,互联网进入Web 2.0时代,各种类似桌面软件的Web应用大量涌现,网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。

Web前端优化
  1. 尽量减少HTTP请求 (Make Fewer HTTP Requests)
  2. 减少 DNS 查找 (Reduce DNS Lookups)
  3. 避免重定向 (Avoid Redirects)
  4. 使得 Ajax 可缓存 (Make Ajax Cacheable)
  5. 延迟载入组件 (Post-load Components)
  6. 预载入组件 (Preload Components)
  7. 减少 DOM 元素数量 (Reduce the Number of DOM Elements)
  8. 切分组件到多个域 (Split Components Across Domains)
  9. 最小化 iframe 的数量 (Minimize the Number of iframes)
  10. 杜绝 http 404 错误 (No 404s)

关注 191073

ethanYin 关注了标签 · 1月28日

程序员

一种近几十年来出现的新物种,是工业革命的产物。英文(Programmer Monkey)是一种非常特殊的、可以从事程序开发、维护的动物。一般分为程序设计猿和程序编码猿,但两者的界限并不非常清楚,都可以进行开发、维护工作,特别是在中国,而且最重要的一点,二者都是一种非常悲剧的存在。

国外的程序员节

国外的程序员节,(英语:Programmer Day,俄语:День программи́ста)是一个俄罗斯官方节日,日期是每年的第 256(0x100) 天,也就是平年的 9 月 13 日和闰年的 9 月 12 日,选择 256 是因为它是 2 的 8 次方,比 365 少的 2 的最大幂。

1024程序员节,中国程序员节

1024是2的十次方,二进制计数的基本计量单位之一。程序员(英文Programmer)是从事程序开发、维护的专业人员。程序员就像是一个个1024,以最低调、踏实、核心的功能模块搭建起这个科技世界。1GB=1024M,而1GB与1级谐音,也有一级棒的意思。

从2012年,SegmentFault 创办开始我们就从网络上引导社区的开发者,发展成中国程序员的节日 :) 计划以后每年10月24日定义为程序员节。以一个节日的形式,向通过Coding 改变世界,也以实际行动在浮躁的世界里,固执地坚持自己对于知识、技术和创新追求的程序员们表示致敬。并于之后的最为临近的周末为程序员们举行了一个盛大的狂欢派对。

2015的10月24日,我们SegmentFault 也在5个城市同时举办黑客马拉松这个特殊的形式,聚集开发者开一个编程大爬梯。

特别推荐:

【SF 黑客马拉松】:http://segmentfault.com/hacka...
【1024程序员闯关秀】小游戏,欢迎来挑战 http://segmentfault.com/game/

  • SF 开发者交流群:206236214
  • 黑客马拉松交流群:280915731
  • 开源硬件交流群:372308136
  • Android 开发者交流群:207895295
  • iOS 开发者交流群:372279630
  • 前端开发者群:174851511

欢迎开发者加入~

交流群信息


程序员相关问题集锦:

  1. 《程序员如何选择自己的第二语言》
  2. 《如何成为一名专业的程序员?》
  3. 《如何用各种编程语言书写hello world》
  4. 《程序员们最常说的谎话是什么?》
  5. 《怎么加入一个开源项目?》
  6. 《是要精于单挑,还是要善于合作?》
  7. 《来秀一下你屎一般的代码...》
  8. 《如何区分 IT 青年的“普通/文艺/二逼”属性?》
  9. 程序员必读书籍有哪些?
  10. 你经常访问的技术社区或者技术博客(IT类)有哪些?
  11. 如何一行代码弄崩你的程序?我先来一发
  12. 编程基础指的是什么?
  13. 后端零起步:学哪一种比较好?
  14. 大家都用什么键盘写代码的?

爱因斯坦

程序猿崛起

关注 151272

ethanYin 关注了标签 · 1月28日

typescript

TypeScript 是微软开发的 JavaScript 的超集,TypeScript兼容JavaScript,可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方。包括:加入注释,让编译器理解所支持的对象和函数,编译器会移除注释,不会增加开销;增加一个完整的类结构,使之更新是传统的面向对象语言。

关注 32449

ethanYin 关注了标签 · 1月28日

python

Python(发音:英[ˈpaɪθən],美[ˈpaɪθɑ:n]),是一种面向对象、直译式电脑编程语言,也是一种功能强大的通用型语言,已经具有近二十年的发展历史,成熟且稳定。它包含了一组完善而且容易理解的标准库,能够轻松完成很多常见的任务。它的语法非常简捷和清晰,与其它大多数程序设计语言不一样,它使用缩进来定义语句。

Python支持命令式程序设计、面向对象程序设计、函数式编程、面向切面编程、泛型编程多种编程范式。与Scheme、Ruby、Perl、Tcl等动态语言一样,Python具备垃圾回收功能,能够自动管理存储器使用。它经常被当作脚本语言用于处理系统管理任务和网络程序编写,然而它也非常适合完成各种高级任务。Python虚拟机本身几乎可以在所有的作业系统中运行。使用一些诸如py2exe、PyPy、PyInstaller之类的工具可以将Python源代码转换成可以脱离Python解释器运行的程序。

Python的主要参考实现是CPython,它是一个由社区驱动的自由软件。目前由Python软件基金会管理。基于这种语言的相关技术正在飞快的发展,用户数量快速扩大,相关的资源非常多。

关注 134895

认证与成就

  • 获得 9 次点赞
  • 获得 22 枚徽章 获得 1 枚金徽章, 获得 2 枚银徽章, 获得 19 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-10-17
个人主页被 728 人浏览