神奇的Lambda表达式——函数式编程必学

作为一名有追求的程序员,对于计算机基础的理论一定要有所了解。最近几年,随着分布式、云计算等技术的发展,函数式编程语言也趋于流行。如果要学习函数式编程,一定要深入理解它背后的理论知识。从收益的角度上讲,这些基础理论知识几十年不变,是十分值得花时间进行学习的。lambda演算(Lambda Calculus)就属于这样一套理论,可以说它在函数式编程领域就如牛顿万有引力定律一样基础。接下来这篇文章我将主要介绍lambda演算的基本知识,最后我还会尝试用es6的箭头函数来演示如何利用lambda演算来实现编程语言中的基本组成要素。

Mehr lesen

ES2019新特性预览

阅读javascript语言标准规范应该是每一个前端开发者都要进行的一项工作,那么了解标准化的过程也可以使我们在阅读文档工程中更加有的放矢。我们平常使用的javascript标准是由ecma international这个组织来发布的,它是javascript这个语言的标准化组织,成立于1960年,所以我们也把javascript叫做ecmascript。这里,简单介绍一下,ecmascript的文档中提到的几个阶段:

Mehr lesen

CSS Grid 网格布局全攻略

所有奇技淫巧都只在方寸之间。

几乎从我们踏入前端开发这个领域开始,就不停地接触不同的布局技术。从常见的浮动到表格布局,再到如今大行其道的flex布局,css布局技术一直在不断地推陈出新。其中网格布局(grid)作为css3的产物,它更加贴近网页设计师所使用的布局策略,学习并利用好它可以让我们免受很多布局困扰。

Mehr lesen

正则表达式不要背

正则表达式一直是困扰很多程序员的一门技术,当然也包括曾经的我。大多数时候我们在开发过程中要用到某些正则表达式的时候,都会打开谷歌或百度直接搜索然后拷贝粘贴。当下一次再遇到相同问题的时候,同样的场景又再来一遍。作为一门用途很广的技术,我相信深入理解正则表达式并能融会贯通是值得的。所以,希望这篇文章能帮助大家理清思路,搞懂正则表达式各种符号之间的内在联系,形成知识体系,当下次再遇到正则表达式的时候可以不借助搜索引擎,自己解决。

Mehr lesen

前端模块化的前世今生

凡是开发大型应用程序,模块块必然是不可或缺的一部分。那么什么是模块化呢?其实模块化就是将一个复杂的系统分解成多个独立的模块的代码组织方式。在很长的一段时间里,前端只能通过一系列的<script>标签来维护我们的代码关系,但是一旦我们的项目复杂度提高的时候,这种简陋的代码组织方式便是如噩梦般使得我们的代码变得混乱不堪。所以,在开发大型Javascript应用程序的时候,就必须引入模块化机制。由于早期官方并没有提供统一的模块化解决方案,所以在群雄争霸的年代,各种前端模块化方案层出不穷。本文将从最早期的IFEE闭包方案到现在的ES6 Modules, 追根溯源,带你详细了解前端模块化的前世今生。

Mehr lesen

理解Redux中间件

中间件是什么

如果你用过express.js之类的web框架,对中间件(Middleware)这个概念可能不会陌生。中间件其实就是一种独立运行于各个框架组件之间的胶水代码。在Express.js或Koa等框架中,中间件通常是运行在收到请求到处理请求之间,可是实现日志记录、身份认证等预处理操作。而在Redux里,中间件是运行在action发送出去,到达reducer之间的一段代码。

Mehr lesen

React中的五种组件形式

目前的前端开发主流技术都已经往组件化方向发展了,而每学一种新的框架的时候,最基础的部分一定是学习其组件的编写方式。这就好像学习一门新的编程语言的时候,总是要从hello world开始一样。而在React中,我们常用的组件编写方式又有哪些呢?或者说各种不同的组件又可以分为几类呢?

Mehr lesen

浅谈性能优化之Tree Shaking

前端技术发展太快,感觉一天不努力就要被超越。这不, 最近在写Angular2练习项目的时候,遇到了一个性能优化的技术点,叫做Tree Shaking。于是,我愉快地开始了学习之旅。

从技术实现上来说,它是依托于ES6提供的模块系统对代码进行静态分析,并将代码中的死代码(dead code)移除的一种技术。因此,利用Tree Shaking技术可以很方便地实现我们代码上的优化,减少代码体积。

Mehr lesen

那些年,那些跨域问题

​ 浏览器在请求不同域的资源时,会因为同源策略的影响请求不成功,这就是通常被提到的“跨域问题”。作为前端开发,解决跨域问题应该是一个被熟练掌握的技能。而随着技术不断的更迭,针对跨域问题的解决也衍生出了多种解决方案。我们通常会根据项目的不同需要,而采取不同的方式。这篇文章,将详细总结跨域问题的相关知识点,以便在遇到相同问题的时候,能有一个清晰的解决思路。

Mehr lesen

响应式图片的处理

如果需要在响应式网页设计中,针对不同的设备使用不同图片的话。可以利用HTML5新增的picture标签:

1
2
3
4
5
<picture> 
<source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)">
<source srcset="default.jpg, default_retina.jpg 2x">
<img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
</picture>

Mehr lesen