前端及开发文章及欣赏

Spring 5 新特性:函数式Web框架

蓝蓝

举例

我们先从示例应用程序的一些摘录开始。下面是暴露Person对象的响应信息库。很类似于传统的,非响应信息库,只不过它返回Flux<Person>而传统的返回List<Person>,以及返回Mono<Person>的地方返回Person。Mono<Void>用作完成标识:指出何时保存被完成。关于Reactor类型的更多信息,请参阅

public interface PersonRepository { Mono<Person> getPerson(int id); Flux<Person> allPeople(); Mono<Void> savePerson(Mono<Person> person);
}

下面是我们如何暴露带有新的函数式web框架的资源库:

RouterFunction<?> route = route(GET("/person/{id}"),
    request -> {
        Mono<Person> person = Mono.justOrEmpty(request.pathVariable("id"))
            .map(Integer::valueOf)
            .then(repository::getPerson); return Response.ok().body(fromPublisher(person, Person.class));
    })
    .and(route(GET("/person"),
        request -> {
            Flux<Person> people = repository.allPeople(); return Response.ok().body(fromPublisher(people, Person.class));
    }))
    .and(route(POST("/person"),
    request -> {
        Mono<Person> person = request.body(toMono(Person.class)); return Response.ok().build(repository.savePerson(person));
}));

下面我们要介绍如何运行,比如在Reactor Netty中:

详解 javascript 的类

蓝蓝

前言

生活有度,人生添寿。

Javascript从当初的一个“弹窗语言”,一步步发展成为现在前后端通吃的庞然大物。javascript的受欢迎程度也是与日俱增,今年编程语言又是花落javascript,这实在是一个充满了活力的语言。如今,随随便一个网页javascript代码量都不下数千行,要是node后端那更不止几千行了。(WTF)代码量的增加给编程带来的首要的问题就是如何去编写和维护如此庞大的代码呢?答案就是模块化思想,其实就是面向对象(OOP)编程,如今比较流行的三大前端框架(angular,react,vue)基本都实现了组件化编程,但组件化和我们所说的模块化又有所不同,应该可以这么理解,组件化是模块化的升级版,模块化是组件化的基础。那么,问题来了,javascript怎么面向对象编程呢?我想这很多老鸟也不定说的清楚吧,前端杂而活跃的各种社区,很多前端er一度依赖各种插件,根本不需要去了解这些深层的东西却照样能完成任务。但我想作为一个有追求的前端er还是很有必要去学习这些看似用不着的东西的,别的不说,就单单因为我们是前端er,只会用jquery一个稍微厉害的后端都能代替你。好吧,废话不多说,到底如何面向对象coding呢…..

很不幸,es5中并没有给出明确的定义‘类’的概念,所以传统的面向对象编程似乎是行不通的,那么又该肿么办呢?值得庆幸的是,前辈们通过不断探索总结,成功的用javascript模拟出了“类”。那么,javascript的类又该怎么定义呢?

在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称”实例”)共有的属性和方法。

深入了解font-weight

蓝蓝

1.jpg

问题提出

font-weight的属性值有100、200、300、400、500、600、700、800、900和normal、bold、lighter、bolder,它们的区别是?
另外,在实际开发中,我们应该使用数值表达还是文字表达呢?

认识font-weight

根据W3C Fonts节章的规范标准,可知:

一起理解Virtual DOM

蓝蓝

前言

React 好像已经火了很久很久,以致于我们对于 Virtual DOM 这个词都已经很熟悉了,网上也有非常多的介绍 React、Virtual DOM 的文章。但是直到前不久我专门花时间去学习 Virtual DOM,才让我对 Virtual DOM 有了一定的理解,以致于要怀疑起很久之前看过的那些文章来。倒不是这些文章讲得不对,而是现在在我看来角度不太好,说得越多,越说不清。

让我能够有所开窍(自认为)的,是这篇文章:


Change And Its Detection In JavaScript Frameworks
Monday Mar 2, 2015 by Tero Parviainen


作者看问题的角度很棒,从数据变更与UI同步的角度来介绍各个典型框架,特别是对于 React 的 Virtual DOM,从这个角度理解起来更容易些。

了解并使用CSS中的rem单位

蓝蓝

什么是 rem

可能在你使用收音机或者用其他音乐播放器之前,就已经听过“R.E.M.”这个词了。在这个乐队眼中,这个词是“浅睡眠时眼球的快速转动”的缩写,而在 css 中,rem 代表着“以根元素为参照物的 em 单位“。他不会让你抛弃你的宗教信仰也不会让你相信那个远在月球的人,但是它可以帮助你实现一个和谐、平稳的设计。

根据 W3C 规范中对 1rem 的定义:

1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时,rem 单位以该属性的初始值作参照。

Web服务器、应用程序服务器、HTTP服务器区别

蓝蓝

WEB服务器、应用程序服务器、HTTP服务器有何区别?IIS、Apache、Tomcat、Weblogic、WebSphere 都各属于哪种服务器?这些问题困惑了很久,今天终于梳理清楚了:

Web服务器的基本功能就是提供Web信息浏览服务。它只需支持HTTP协议、HTML文档格式及URL。与客户端的网络浏览器配合。因为Web服务器主要支持的协议就是HTTP,所以通常情况下HTTP服务器和WEB服务器是相等的(有没有支持除HTTP之外的协议的web服务器,作者没有考证过),说的是一回事。

应用程序服务器(简称应用服务器),我们先看一下微软对它的定义:”我们把应用程序服务器定义为“作为服务器执行共享业务应用程序的底层的系统软件”。 就像文件服务器为很多用户提供文件一样,应用程序服务器让多个用户可以同时使用应用程序(通常是客户创建的应用程序)”

通俗的讲,Web服务器传送(serves)页面使浏览器可以浏览,然而应用程序服务器提供的是客户端应用程序可以调用(call)的方法(methods)。确切一点,你可以说:Web服务器专门处理HTTP请求(request),但是应用程序服务器是通过很多协议来为应用程序提供(serves)商业逻辑 (business logic)。

JavaScript 中对象的深拷贝

蓝蓝

在JavaScript中,对对象进行拷贝的场景比较常见。但是简单的复制语句只能对对象进行浅拷贝,即复制的是一份引用,而不是它所引用的对象。而更多的时候,我们希望对对象进行深拷贝,避免原始对象被无意修改。

对象的深拷贝与浅拷贝的区别如下:

  • 浅拷贝:仅仅复制对象的引用,而不是对象本身;
  • 深拷贝:把复制的对象所引用的全部对象都复制一遍。

一. 浅拷贝的实现

浅拷贝的实现方法比较简单,只要使用是简单的复制语句即可。

1.1 方法一:简单的复制语句

/* ================ 浅拷贝 ================ */ function simpleClone(initalObj) { var obj = {}; for ( var i in initalObj) {
        obj[i] = initalObj[i];
    } return obj;
}

JavaScript世界万物诞生记

蓝蓝

一. 无中生有

起初,什么都没有。

1.png

 

造物主说:没有东西本身也是一种东西啊,于是就有了null:

现在我们要造点儿东西出来。但是没有原料怎么办?

有一个声音说:不是有null嘛?

另一个声音说:可是null代表无啊。

造物主说:那就无中生有吧!

于是:

2.png

更快学习JS的6个简单思维技巧

蓝蓝

当人们尝试学习 JavaScript , 或者其他编程技术的时候,常常会遇到同样的挑战:

  • 有些概念容易混淆,特别是当你学习过其他语言的时候。
  • 很难找到学习的时间(有时候是动力)。
  • 一旦当你理解了一些东西的时候,却很容易再一次忘记。
  • 可以使用的工具甚多且经常变化,所以不知道从哪里开始入手。

幸运的是,这些挑战最终都可以被战胜。在这篇文章里,我将介绍 6 个思维技巧来帮你更快的学习 JavaScript ,让你成为一个更快乐更多产的程序员。

对于很多学习 JavaScript 的人来说,他们问的第一个问题是选用哪个框架(现有框架非常多)。但是如果你还不熟悉原生的 JavaScript ,那这就是个不该问的问题。你会花费你全部的时间去查询不同的框架并且不会取得任何进展。

详解JS 变量、作用域及内存

蓝蓝

基本类型值有:undefined,NUll,Boolean,Number和String,这些类型分别在内存中占有固定的大小空间,他们的值保存在栈空间,我们通过按值来访问的。

 

1)值类型:数值、布尔值、nullundefined
2)引用类型:对象、数组、函数。
 
如果赋值的是引用类型的值,则必须在堆内存中为这个值分配空间。由于这种值的大小不固定(对象有很多属性和方法),因此不能把他们保存到栈内存中。但内存地址大小是固定的,因此可以将内存地址保存在栈内存中。
 
<script type="text/javascript”>
var box = new Object();  //创建一个引用类型
var box = "trigkit4";   //基本类型值是字符串
box.age = 21;    //基本类型值添加属性很怪异,因为只有对象才可以添加属性。
alert(box.age);  //不是引用类型,无法输出;
</script>
 

日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档