首页

如何读懂并写出装逼的函数式代码

蓝蓝设计的小编

今天在微博上看到了 有人分享了下面的这段函数式代码,我把代码贴到下面,不过我对原来的代码略有改动,对于函数式的版本,咋一看,的确令人非常费解,仔细看一下,你可能就晕掉了,似乎完全就是天书,看上去非常装逼,哈哈。不过,我感觉解析那段函数式的代码可能会一个比较有趣过程,而且,我以前写过一篇《函数式编程》的入门式的文章,正好可以用这个例子,再升华一下原来的那篇文章,顺便可以向大家更好的介绍很多基础知识,所以写下这篇文章。

先看代码

这个代码平淡无奇,就是从一个数组中找到一个数,O(n)的算法,找不到就返回 null。

下面是正常的 old-school 的方式。不用多说。

//正常的版本 function find (x, y) { for ( let i = 0; i < x.length; i++ ) { if ( x[i] == y ) return i;
  } return null;
} let arr = [0,1,2,3,4,5] console.log(find(arr, 2)) console.log(find(arr, 8))

HTML5手势检测原理和实现

蓝蓝设计的小编

前言

随着 Hybrid 应用的丰富,HTML5 工程师们已经不满足于把桌面端体验简单移植到移动端,他们觊觎移动原生应用人性化的操作体验,特别是原生应用与生俱来的丰富的手势系统。HTML5 没有提供开箱即用的手势系统,但是提供了更底层一些的对 touch 事件的监听。基于此,我们可以做出自己的手势库。

手势

常用的 HTML5 手势可以分为两类,单点手势和两点手势。单点手势有 tap(单击),double tap(双击),long tap(长按),swipe(挥),move(移动)。两点手势有 pinch(缩放),rotate(旋转)。

接下来我们实现一个检测这些手势的 javaScript 库,并利用这个手势库做出炫酷的交互效果。

1.jpg

2016年7个JavaScript框架

蓝蓝设计的小编

当涉及到Web开发时,JavaScript框架往往是一些开发人员和企业的平台。可能,你有机会尝试过一两个的JavaScript框架,但你仍然有点不确定哪个才是最佳的最值得掌握的,或者哪个值得你建议你的开发人员选择用于下一个web开发项目。

JavaScript正在以惊人的速度前进,并且添加新的技能到你的存储库变得有不断的压力。为了做到这一点,知道和了解更多的JavaScript框架在现在看来是必要的。在ValueCoders进行了彻底的研究后,我们入围了其中七个框架,它们是:

1.AngularJS 2.0&1.x

在最受期待的AngularJS 2.0正式发布之后,框架的普及已经达到了一个新的水平。然而,如果你不确定的话,跳到新版本仍然是一个冒险的决定。让我们通过这个流程图来帮助你做出决定:

1.png

JavaScript 数组中的 indexOf 方法详解

蓝蓝设计的小编

最近项目遇到一个小问题代码我会简化成小例子展示给大家。

用心看到最后会有收获哈,基础扎实的童鞋可以直接跳到数组类型使用

说到 indexOf 大家并不陌生,判断字符串是否包涵子字符串时特别常用(正则不熟练同学的利器)。

String 类型的使用

温习一下大家熟知的字符串用法,举个例子

let str = 'orange';

str.indexOf('o'); //0 str.indexOf('n'); //3 str.indexOf('c'); //-1

这里 0 和 3 分别是 o 和 n 在字符串中出现的位置。起始下标是 0。而 -1 代表未匹配。

JavaScript arguments 对象详解

蓝蓝设计的小编

1. 什么是 arguments

MDN 上解释:

arguments 是一个类数组对象。代表传给一个function的参数列表。

我们先用一个例子直观了解下 JavaScript 中的 arguments 长什么样子。

function printArgs() { console.log(arguments);
}

printArgs("A", "a", 0, { foo: "Hello, arguments" });

执行结果是:

jQuery XML 解析器和搜索机制

蓝蓝设计的小编

介绍

这里所描述的过程将使你能够创建一个简单的基于jQuery / XML的解析器和搜索机制。此过程将通过一个AJAX请求检索XML,然后在jQuery中分析数据,为搜索机制做准备。该解决方案将基于不区分大小写的全部或部分关键字匹配地返回结果。来自于关键字搜索的返回结果设置将被格式化为一个直接链接到相应网站的超链接。jQuery搜索方法非常类似于Mike Endale的一个项目,不过增加了一个DOM解析器,正则表达式以及结果集分组。

背景

客户端需要一个简单的搜索工具来查找基于关键字搜索的本地内部网站。关键字搜索必须不区分大小写,并允许返回部分匹配的结果。归咎于客户端内容管理系统的架构,因此(SharePoint)只能执行客户端脚本。其解决方案的另一个障碍是,源数据将来自多个源。数据被存储在多个Excel电子表格,CSV文件和MS Access数据库内。这就对我们提出了这样的需要:开发具有一系列查询和一个宏的Access解决方案,充当可合并、擦洗,并最后格式化数据作为XML输出的伪ETL。对于这个解决方案的目的,我们将详细介绍JavaScript XML分析器的设计,而不是伪Access ETL宏工具的设计。

使用代码

该解决方案的做法是利用一个简单的基于JavaScript / XML的搜索来发送数据结果到HTML / JavaScript前端。前端将引用脚本:jQuery,XML和CSS文件。XML格式将因为它的可读性和它是数据交换行业标准格式之一的事实而被使用。 XML数据将通过使用AJAX的客户端jQuery解析,并通过Internet Explorer 11呈现。

解决方案将使用RegExp对象来处理关键字匹配,验证和特殊字符处理。RegExp对象字符串将检查危险语法从而提高解决方案的稳定性和整体可用性。

我们将默认使用JavaScript分组功能来返回匹配结果作为折叠的纪录集。折叠的记录集线项目将被URL链接到相关的Project Workspace网站。在扩展的组记录集下,结果将存在于相关的子记录中,当通过On Click事件展开的时候。

选择 Reac​​tJS 的五大理由

蓝蓝设计的小编

ReactJS是一个开源的JavaScript库,并且由Facebook和Instagram这样的顶尖IT企业以及开发者社区所维护。该框架广泛使用于为web应用程序开发用户界面的时候。这个特殊的框架被发明时带有这样一个目的:

“构建数据随着时间的推移一次又一次改变的大型应用程序。”

我们经常使用的工具有很多,但只有少数彻底改变了我们的工作流程。ReactJS就是其中之一。随着现在可用框架变得越来越多,我们很难找到一个最终不会穷途末路的框架。这就是为什么在ValueCoders我们建议去往React。

01.png

能用HTML/CSS解决的问题就不要使用JS

蓝蓝设计的小编

为什么说能使用html/css解决的问题就不要使用JS呢?两个字,因为简单。简单就意味着更快的开发速度,更小的维护成本,同时往往具有更好的体验,下面介绍几个实例。

1. 导航高亮

导航高亮是一种很常见的问题,包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制,但是用一点CSS技巧就可以达到这个目的,不需要使用JS。

1.png

2.png

在正常态时,每个导航的默认样式为:

JavaScript 闭包的底层运行机制

蓝蓝设计的小编

当JavaScript在运行的时候,它需要一些空间让它来存储本地变量(local variables)。我们将这些空间称为作用域对象(Scope object),有时候也称作LexicalEnvironment。例如,当你调用函数时,函数定义了一些本地变量,这些变量就被存储在一个作用域对象中。你可以将作用域函数想象成一个普通的JavaScript对象,但是有一个很大的区别就是你不能够直接在JavaScript当中直接获取这个对象。你只可以修改这个对象的属性,但是你不能够获取这个对象的引用。

作用域对象的概念使得JavaScript和C、C++非常不同。在C、C++中,本地变量被保存在栈(stack)中。在JavaScript中,作用域对象是在堆中被创建的(至少表现出来的行为是这样的),所以在函数返回后它们也还是能够被访问到而不被销毁。

JavaScript 中匿名函数的递归调用

蓝蓝设计的小编

不管是什么编程语言,相信稍微写过几行代码的同学,对递归都不会陌生。 以一个简单的阶乘计算为例:

function factorial(n) { if (n <= 1) { return 1;
    } else { return n * factorial(n-1);
    }
}

我们可以看出,递归就是在函数内部调用对自身的调用。 那么问题来了,我们知道在Javascript中,有一类函数叫做匿名函数,没有名称,怎么调用呢?当然你可以说,可以把匿名函数赋值给一个常量:

const factorial = function(n){ if (n <= 1) { return 1;
    } else { return n * factorial(n-1);
    }
}

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档