Web 开发 | AlloyTeam

In 未分类 on 2016年10月22日 by june01 view: 13,056

5

简介

模板引擎，其实就是一个根据模板和数据输出结果的一个工具。

我们要开发一个将模板文件转换成我们实际要使用的内容的工具，这个工具就是模板引擎。我们把模板文件里的内容当成字符串传入到模板引擎中，然后模板引擎根据一定语法对该字符串进行解析处理，然后返回一个函数，之后我们在执行函数时把数据传输进去，即可拿到根据模板和数据得到的新字符串。最后我们想怎么处理该字符串就看需求了，如果用于前端模板生成的话，则可以用 dom 的 innerHTML 这个属性来追加内容。

目前前端的模板引擎多得数不胜数，语法特性也花样百出，用行内的话来说，我们要实现的是一种基于字符串的模板引擎。

谈谈函数式编程

In 未分类 on 2016年09月20日 by TAT.joeyguo view: 5,604

1

原文地址

函数式编程 ( Functional Programming ) 是一种以函数为基础的编程方式和代码组织方式，能够带来更好的代码调试及项目维护的优势。本篇主要结合笔者在实际项目开发中的一些应用，简要谈谈函数式编程。

Preload：有什么好处？（下）

In 未分类 on 2016年07月25日 by TAT.Johnny view: 3,728

1

==============接上篇 Preload：有什么好处？（上）=================

译者注：上文讲到了利用 Preload，我们可以做到哪些事情，从这里继续～

响应式加载（RESPONSIVE LOADING）

因为 Preload 是一个链接，遵循规范它应有 media 属性（目前 Chrome 还未支持，不过很快就可以了）。这个属性可以启用资源的条件加载能力。

它又有什么用处呢？举个例子，你的网站的初始视窗，对于 PC／宽屏设备展示可交互的地图版本，而对于手机／窄屏设备则展示静态的地图版本。如果你擅于加载性能优化，会想到在特定设备只加载其中一个版本的资源，而不是所有资源。而要做到这样唯一的办法就是使用 JS 去动态地加载资源。但是这么做，会使得资源对于 preloader（译者注：上文提到过的浏览器内部的预加载器）不可见，因此会使得资源的加载时机稍微滞后，不但影响了用户的视觉体验，还对站点的 SpeedIndex 得分有着负面影响。

所以我们该怎么做，才能让浏览器尽早知道所需加载的资源呢？没错，就是 Preload！

我们可以使用 Preload 提前加载这些资源，并且使用 media 属性，做到只加载需要的资源：

1

2

3

时光倒流程序设计-AlloyTicker

In 未分类 on 2016年07月25日 by TAT.dnt view: 5,852

3

熵与负熵

熵遵循熵增原理，即无序非热能与热能之间的转换具有方向性。薛定谔说过：生命本质在于负熵。熵代表的是无序，负熵就是熵的对立，而负熵表示的则是有序。汲取负熵（米饭、面包、牛奶、鸡蛋），可以简单的理解为从外界吸收了物质或者能量之后，转化成负熵流，使系统的熵降低，人体变得更加有序。

HTTP,HTTP2.0,SPDY,HTTPS 你应该知道的一些事

In 未分类 on 2016年07月23日 by TAT.tennylv view: 50,618

21

作为一个经常和 web 打交道的程序员，了解这些协议是必须的，本文就向大家介绍一下这些协议的区别和基本概念，文中可能不局限于前端知识，还包括一些运维，协议方面的知识，希望能给读者带来一些收获，如有不对之处还请指出。

1. web 始祖 HTTP

全称：超文本传输协议 (HyperText Transfer Protocol) 伴随着计算机网络和浏览器的诞生，HTTP1.0 也随之而来，处于计算机网络中的应用层，HTTP 是建立在 TCP 协议之上，所以 HTTP 协议的瓶颈及其优化技巧都是基于 TCP 协议本身的特性，例如 tcp 建立连接的 3 次握手和断开连接的 4 次挥手以及每次建立连接带来的 RTT 延迟时间。

Nodejs 原生支持的 ES6 特性

In 未分类 on 2016年07月04日 by TAT.李强 view: 22,932

35

随着 React 的风靡，配合 Webpack 以及 Babel 等技术，越来越多的前端同学将 ECMAScript 2015(ES6) 的特性运用在项目中，import、export、class、箭头函数、块级作用域等特性屡试不爽。而对于 Node.js 实现的后台代码来说，我们也同样希望使用这些 ES6 特性，下面将以 v4.4.4(LTS version) 长期支持版本为例展开话题，从兼容性以及性能两方面着手分析 Node.js 对 ES6 的支持情况。

Node 直出理论与实践总结

In 未分类 on 2016年07月04日 by TAT.joeyguo view: 8,897

14

原文地址

直出是什么？到底是怎样的性能优化？本文将结合从在浏览器输入 url，到展示最终页面的过程来对其进行一步步分析，并将在手 Q web 中的实际应用实践进行总结。

腾讯新闻 React 同构直出优化实践

In 未分类 on 2016年06月27日 by TAT.heyli view: 7,804

1

原文地址
 本文 start kit: steamer-react

为什么做直出

就是为了“ 性能”！！！
按照经验来说，直出，能够减少 20% - 50% 不等的首屏时间，因此尽管增加一定维护成本，前端们还是前赴后继地在搞直出。

除此之外，有些特定的业务做直出能够弥补前后端分离带来的 SEO 问题。像这次选取的腾讯新闻，大多数页面首屏其实都是直出的（但肯定不是 React 直出）。

kmdjs 集成 uglifyjs2 打造极致的编程体验

In 未分类 on 2016年06月14日 by TAT.dnt view: 2,897

1

回顾

上篇文章大概展示了 kmdjs0.1.x 时期的编程范式：
如下面所示，可以直接依赖注入到 function 里，

1

2

3

4

kmdjs.define('main',['util.bom','app.Ball','util.dom.test'], function(bom,Ball,test) {

var ball = new Ball(0, 0, 28, 1, -2, 'kmdjs');

var vp = bom.getViewport();

});

也可以直接在代码里把 full namespace 加上来调用，如：

1

2

3

4

kmdjs.define('main',['util.bom','app.Ball','util.dom.test'], function() {

var ball = new app.Ball(0, 0, 28, 1, -2, 'kmdjs');

var vp = util.bom.getViewport();

});

React 同构直出优化总结

In 未分类 on 2016年06月14日 by TAT.joeyguo view: 13,377

12

原文地址

React 的实践从去年在 PC QQ 家校群开始，由于 PC 上的网络及环境都相当好，所以在使用时可谓一帆风顺，偶尔遇到点小磕绊，也能够快速地填补磨平。而最近一段时间，我们将手 Q 的家校群重构成 React，除了原有框架上存在明显问题的原因外，选择 React 也是因为它确实有足够的吸引力以及优势，加之在 PC 家校群上的实践经验，斟酌下便开始了，到现在已有页面在线上正常跑起。