大笨儿钟的博客

前言pipe其实是一种设计思想，经常被用于架构设计，也能体现‘函数式编程’ 思想 — 通过组合一系列的函数来完成一个既定的功能。而在前端开发中，本身强调 组合大于继承，所以掌握这种思想是十分重要的。实例pipe大概像如下那样使用// 假设有个三个方法，分别实现+1， 求与2的乘积，-1 这三个功能let add = n => n + 3;let multiple = n => n * 2;let minus = n => n - 1;// 假设现在有个pipe方法con

单例模式是比较常见的一种设计模式，基于此可以延伸出一个惰性单例的使用方法，以登录框为例// version 1 缺点是初始化时就会执行登录框的实例化，但是有时候这个动作不一定会触发const loginDialog = (function(){ const dialog = document.createElement('div') dialog.innerHTML = '登录' // 设置样式 dialog.style.display = 'none' dialog.style.xxxx =

前言大多数前端框架都提供了组件化的能力，在日常开发中，我们经常会用组件去封装自己的业务逻辑，那么如何去写一个复用率高的组件就变成了一个重的技巧。这里总结一下，在使用Vue时，几种复用组件的方式。场景表单验证是一个经常碰到的场景，表单内的不同组件常常需要有相同的验证逻辑，比如验证值非空，这里就按照这个场景来举几个例子。使用MixinVue提供了 “混入” 这个方案来达到一个复用的效果，所以...

前言迭代器模式应该算是比较 “低调” 的设计模式了，因为这种模式在日常工作中经常遇到，但由于本身这种模式的思想十分简单，所以一般不会特别的去关注他。迭代器模式注重的是如何去迭代集合中每一个元素，大部分语言都内置了实现迭代器接口的数据结构，并且暴露出对应的方法供我们使用。JavaScript中的迭代器模式体现常用的数组就是一个可以迭代的对象，它提供了一个forEach方法可以让我们快速使用...

原题来自力扣，这里用到了JS中的Map这个数据结构。利用散列表和双向链表实现。力扣LRU原题var LinkNode = function(key,value){ this.key = key; this.value = value; this.next = null; this.pre = null;}var DoubleLinkedList = func...

前言对于前端同学而言，发布-订阅模式应该是最熟悉的设计模式了。平常写的最多的事件监听就是一个最好的例子。var dom = document.querySelector('xxx');dom.addEventListener('click', () => { //do something });dom.click();这里开发同学订阅这个dom对象的click事件，并且传入了一个...

前言异步编程作为JavaScript 中的核心内容，是必须要掌握的一个基础。在日常开发过程中，会有很多异步的场景。比如定时器，网络请求，事件监听等等… 而异步编程中让人诟病较多的一个点就是 callback hell...

前言在我们编写业务代码时，分支结构应该是我们最常用到的结构了。下面先模拟一个简单的业务场景：要根据当前用户登录的身份（达人/机构/卖家）和对应的角色等级来展示用户的logo// 假设有这么一个基于React的logo组件<logo role={role} level={level} />// 假如内部的实现是这样子的render(){ const { role, le...

前言闭包（closure）这个概念总是那么晦涩难懂，这篇文章希望结合自己的经验来说说这个概念。作用域在谈闭包之前，作用域这个概念是一定绕不开的。但是这里并不准备展开来详细说明他。简单总结几点。JavaScript中函数能形成一个作用域。在使用某个变量时，会在当前作用域查找；如果没有找到，则向外层作用域查找，直到全局作用域。也就是说，变量的搜索是从内到外，而不是从外到内。变量的生存周...

前言函数防抖和节流是前端经常会用到的两个技巧。在处理用户交互时，我们可以通过这俩技巧来限制事件或者网络请求的触发频率。1. 防抖前端和服务端交互场景中，经常会有一个输入关键字查找结果的需求，如果不做处理，可能会导致大量的请求到达服务端，并且大部分请求是没有意义的。这个时候我们就可以使用防抖来优化一下。我们希望的是在某个时间间隔内，假如事件一直被触发，则不执行相关动作，直到某一个事件的触发间...

前言继承，作为复用代码的一种有效手段，在面向对象编程中有着重要意义。但是这门脚本语言的确不像某些静态语言那样提供了真正意义上的基于类实现的继承方式，而是采用了一种基于原型的继承。这里将说说在ES5时，使用JavaScript来实现继承的几种方式。在具体讲这些方式之前，先预先说清楚几个概念。函数:在JavaScript中，通常每一个函数上都会有一个prototype对象，假如我们通过new这个...

动态改变 bootstrap-select 数据源维护一个历史项目时，需要动态改变一个下拉框的options选项，这里使用了bootstrap-select 这个组件，开始再尝试了很多方法之后，都不能达到效果，这里直接给出解决方法，希望给看到的人少走弯路。<!-- HTML --><select class="form-control" id="contentTypeN...

给定一个整数类型的数组 nums，请编写一个能够返回数组“中心索引”的方法。我们是这样定义数组中心索引的：数组中心索引的左侧所有元素相加的和等于右侧所有元素相加的和。如果数组不存在中心索引，那么我们应该返回 -1。如果数组有多个中心索引，那么我们应该返回最靠近左边的那一个。思路：假如存在该中心索引i，那么此时记数组nums[]所有元素的和为sum，该中心索引左边的数列之和为left sum，...

很久之前接触过这样一道题目，总共有十层阶梯，从1层开始往上爬，每次可以上1层或者2层，问到10层总共有多少种方法?思路：这个问题就是动态规划的一个经典例子，所谓动态规划，就是把复杂的问题进行拆解，拆解成一个个子问题，而这类问题最后非常适合使用递归来解决。诸如这道题目，可以记到某层阶梯的走法为F(n)，那么到10层阶梯就是F(10)。 那么F(10)等于什么呢，这里进行假设，如果只差最后一次就可以...

对generator不熟悉的可以先看下相关的基础资料https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator在早些时候，generator + promise 可以比较优雅的解决JS中较为头痛的回调嵌套问题，并且为了解决让 generator 能够自动执行的问题，出现了诸...

起因平常自己使用MAC来开发项目，但是有一天电脑罢工，无奈暂时使用了window电脑，在开发完成后想提交代码时，git就发出了一个警告：fatal: CRLF would be replaced by LF …一眼就明白了，想起来不同操作系统的行尾符号不同，windows下是CRLF，而MAC则是LF分析先去搜索了一些资料，了解到git可以设置如下配置项：# 拒绝提交包含混合换行符的文件...

先来个例子如果能很快知道执行的顺序结果，那么说明你对这块的内容理解非常深刻。&lt;div class="parent" data-spm="2.2.2.2"&gt; &lt;div class="child"&gt;123&lt;/div&gt;&lt;/div&gt;&lt;script&gt; var parent = document.g

之前写过利用Hash来实现前端路由的文章，这一篇是关于如何使用H5的history来实现一个前端路由Hash实现和History实现比较hash实现方式是通过锚点来改变浏览器的URL，体现在URL后面会加上#，并且可以通过window.onhashChange来监听这一变化，从而我们可以建立好hash值和对应回调函数的映射关系，然后可以通过点击a标签，实现在不刷新页面情况下，通过...