极乐技术周报 (第七期)

极乐技术周报，最新，最热的互联网技术资讯。
更名三部曲: 极乐前端周报 > 极乐周报 > 极乐技术周报
作者: 极乐科技

1.将Google Analytics添加到React应用程序

<img src="https://pic2.zhimg.com/v2-230d73a9f71d64383d53a2b6fc5feeb9_b.jpg" data-rawwidth="666" data-rawheight="300" class="origin_image zh-lightbox-thumb" width="666" data-original="https://pic2.zhimg.com/v2-230d73a9f71d64383d53a2b6fc5feeb9_r.jpg">

Google Analytics是著名互联网公司Google为网站提供的数据统计服务。可以对目标网站进行访问数据统计和分析，并提供多种参数供网站拥有者使用。国内可以正常使用，数据呈现需要翻墙。

链接地址

2.一劳永逸的搞定Flex布局

<img src="https://pic3.zhimg.com/v2-6436dc8f244beb1532e5d8c3a97aa352_b.jpg" data-rawwidth="666" data-rawheight="300" class="origin_image zh-lightbox-thumb" width="666" data-original="https://pic3.zhimg.com/v2-6436dc8f244beb1532e5d8c3a97aa352_r.jpg">

切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存在 float: center 的写法，那么 text-align: center、verticle-align: center 是否可行呢？答案也是否定的。这两个属性只能用于行内元素，对于块级元素的布局是无效的。

链接地址

3.如何在不到20行代码中构建Web框架

<img src="https://pic2.zhimg.com/v2-c5d0556764988418f39624b70be4c6f9_b.jpg" data-rawwidth="666" data-rawheight="300" class="origin_image zh-lightbox-thumb" width="666" data-original="https://pic2.zhimg.com/v2-c5d0556764988418f39624b70be4c6f9_r.jpg">

框架不再像十年前那样重要。当下浏览器中几乎已经实现新的Web标准，你可以使用简单的CSS和JavaScript代码来执行需要数百行框架代码才能实现的功能。

链接地址

4.绘画与代码

<img src="https://pic1.zhimg.com/v2-ea2db1c31038628a947514f169fa0cf4_b.jpg" data-rawwidth="666" data-rawheight="300" class="origin_image zh-lightbox-thumb" width="666" data-original="https://pic1.zhimg.com/v2-ea2db1c31038628a947514f169fa0cf4_r.jpg">

今天，我们很高兴分享一个我们开发的工具，它可以帮助减少设计师和程序开发者在工作中的差距。React-sketchapp是一个开源库，它允许您编写渲染到Sketch文档的React组件。

链接地址

5.探讨判断横竖屏的最佳实现

<img src="https://pic2.zhimg.com/v2-d72b8e0058bc7bea370dbde05bcde1d9_b.jpg" data-rawwidth="666" data-rawheight="300" class="origin_image zh-lightbox-thumb" width="666" data-original="https://pic2.zhimg.com/v2-d72b8e0058bc7bea370dbde05bcde1d9_r.jpg">

在移动端，判断横竖屏的场景并不少见，比如根据横竖屏以不同的样式来适配，抑或是提醒用户切换为竖屏以保持良好的用户体验。 判断横竖屏的实现方法多种多样，本文就此来探讨下目前有哪些实现方法以及其中的优缺点。

链接地址

6.Java 的 23 种设计模式全解析

<img src="https://pic4.zhimg.com/v2-a263fe9fe6f58ff41ad1a1a65a17a0bb_b.jpg" data-rawwidth="666" data-rawheight="300" class="origin_image zh-lightbox-thumb" width="666" data-original="https://pic4.zhimg.com/v2-a263fe9fe6f58ff41ad1a1a65a17a0bb_r.jpg">总体来说设计模式分为三大类：总体来说设计模式分为三大类：
创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。
结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。
行为型模式，共十一种：策略模式、模板方法模式、观察者模式、迭代子模式、责任链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式、解释器模式。
其实还有两类：并发型模式和线程池模式。

链接地址

7.知乎日报 API 分析 (解决跨域精简版)

<img src="https://pic3.zhimg.com/v2-62eaa11d9725b90c715ffd2b97962802_b.jpg" data-rawwidth="666" data-rawheight="300" class="origin_image zh-lightbox-thumb" width="666" data-original="https://pic3.zhimg.com/v2-62eaa11d9725b90c715ffd2b97962802_r.jpg">

自己用 electron 开发知乎日报桌面客户端的时候遇到的跨域问题，将问题解决的同时也造福下大家~

链接地址