20171215 前端开发日报-前端开发博客

前端框架架构模式；React系列——socket.io群聊系统在react的实现；Git提交历史的修改删除合并；Vue 2.0学习笔记：自定义指令；性能优化 – 让nodejs再快一点；node-vue前后端分离记录；JS HTTP 请求终极解决方案 – fly.js；重构：从 Promise 到 Async/Await

前端框架架构模式架构模式是使用多种设计模式，来改进代码的组织方式，实现软件设计的低耦合高内聚（降低模块间的接口的复杂度，每个模块尽可能独立完成自己的功能，不依赖于模块外部代码）前后端不分的时代，前端代码由后端生成发送到浏览器（服务端渲染），所以最先是后端采用
React系列——socket.io群聊系统在react的实现前奏这篇文章仅对不熟悉在react中使用socket.io的人、以及socket入门者有帮助。下面这个动态图展示的聊天系统是用react+express+socket搭建的，很模糊吧，要得就是这样的效果，我自己开了2个窗口，创建2个用户…
Git提交历史的修改删除合并今天主要针对在项目版本控制器Git的使用中遇到的一些和提交历史操作相关的常见问题，进行实践总结。在项目开发中经常会需要修改提交commit信息，合并多个提交commit，甚至放弃当前修改回退至某一历史提交的需求，那我们到底该如何操作呢，本篇一一阐述。欢迎访问
Vue 2.0学习笔记：自定义指令在Vue中为了更好的操作DOM元素，其内置了一些指令，比如 v-model 、 v-if 、 v-show 、 v-text 、 v-html 、 v-for 和 v-bind 等。除此之外，Vue也允许注册自定义指令。这些自定义指令可以说我们对普通DOM元素进行底层操作。比如@SARAH DRASNER写的一篇有关于 Vue自定义指令的文章，简单易懂。今天自己也仔细…
性能优化 – 让nodejs再快一点本文首次发表于北斗同构github, 转载请注明出处前言很多前端工程师在做页面性能调优的过程中，极少关注代码本身的执行效率，更多关注的是网络消耗，比如资源合并减少请求数、压缩降低资源大小、缓存等. 我并不…
node-vue前后端分离记录node vue项目开发看了近一周的vue开发，有诸多感触，我之前接触过react、angular所以特别想学学久仰大名的vue。学习半天以后发现，接触到的东西多了，学习起来就是容易很多，vue的指令我能个联想到angular的指令…
JS HTTP 请求终极解决方案 – fly.jsFly.js 是一个功能强大的轻量级的javascript http请求库，同时支持浏览器和node环境，通过适配器，它可以运行在任何具有网络能力的javascript运行环境；同时fly.js有一些高级的玩法如全局ajax拦截、在web app中支…
重构：从 Promise 到 Async/Await 摘要：夸张点说，技术的发展与历史一样，顺之者昌，逆之者亡。JS开发者们，赶紧拥抱Async/Await吧！ GitHub仓库: Fundebug/promise-asyncawait 早在半年多之前，我就在鼓吹Async/Await替代Promise的6个理由，似乎还招致了一些批评。然而，直到最近，我才真正开始进行代码重构，抛弃Promise，全面使…
前端大厂面试总结（at，md）面试过去了这么久，把八月份面试题和总结发一下吧，虽然年底大家都不换工作~ 还是可以看看的。关于面试，引用叶老湿的一句话。你的简历是自己工作的答卷，项目经历是你给面试官出的考纲。所以，我的面试一定是与我的简历、工作经历相关的，一些面试题并不一定适用于任何人，但是你可以从中了解他们考察的点，以及侧重…
管理 Node.js 进程从未如此优雅说到 Node.js 的进程模型，脑子里第一个闪现的可能是 Cluster 模块，亦或是 Master / Worker 进程模型，在长期的使用过程中，我们逐渐发现，这样在应用的开发早晚会有局限性，除了不够优雅之外，每次增减进程或者自定义进程都会产生不可预知的问题。在一些特定的场景下，我们甚至在 Master 下面加入了一个 Agent 进程…
【前端性能】Web 动画帧率（FPS）计算 Web 动画帧率（FPS）计算，详细讲了讲如何计算 Web 动画的 FPS，对动画性能监控优化很有帮助
如何编写一个 HTTP 反向代理服务器如果你经常使用 Node.js 编写 Web 服务端程序，一定对使用 Nginx 作为反向代理服务并不陌生。在生产环境中，我们往往需要将程序部署到内网多台服务器上，在一台多核服务器上，为了充分利用所有 CPU 资源，也需要启动多个服务进程，它们分别监听不同的端口。然后使用 Nginx 作为反向代理服务器，接收来自用户浏览器的…
[Webpack并不难]把它当人物养成游戏吧前言这段可以跳过看下面的。本来，这个教程想完结的了。但回头看自己写的，感觉就像写明了什么意思，具体怎么使用都没说明白，而且让人看得会有点乏味吧。我也是刚开始写文章，在学习怎样可以写好有趣味性而且…
前端代码异常监控实战
跨平台Js bridge新秀-DSBridge Android篇DSBridge是目前地球上最好的IOS/Android javascript bridge. 没有之一！ DSBridge DSBridge 是H5页面与Native之间通信的桥梁，它有如下特点：跨平台；同时支持ios和android。双向调用；js可以调用native， nati…
分享一个自己写的 JSON-SCHEMA 生成库介绍 JSON-SCHEMA 是一种基于 JSON 格式定义 JSON 数据结构的规范，有如下特性：描述现有数据格式。干净的人类和机器可读的文档。完整的结构验证，有利于自动化测试。完整的结构验证，可用于验证客户端提交的数据。 JSON-SCHEMA
ReactNative iOS源码解析（二）迁移老文章到掘金（基于RN 0.26）相关系列文章 ReactNative iOS源码解析（一） ReactNative iOS源码解析（二） Talk about ReactNative Image Component 上一篇了解了 ReactNative是如何初始化一整套JS/OC通信机制，是如何相互通信的。通篇在讲JS/OC的通信…
CSS 终极之战：Grid VS Flexbox 简评：近些年 CSS Flexbox 在前端开发者中变得非常流行。其实并不奇怪，它能让我们更容易创建出动态布局，以及在容器中对其内容。然而城里新来了个小伙叫 CSS Grid，它有许多弹性盒的能力，有时候比弹性盒好用，有时候却不好用。作者点评了弹性盒、网格两者之间的差异，以及什么时候用哪种比较好。先来看…
canvas实现iPhoneX炫彩壁纸屏保外加pixi.js流体动效这篇文章发布于 2017年12月14日，星期四，01:23，归类于canvas相关。阅读 93 次, 今日 93 次 byzhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6614 本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。一、iPhone X风格炫彩壁纸效果先体验这个效果我想实现已经…
【20171214 前端开发日报】从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型；CSS等比例缩放的盒子；听说你想学 React.js ？；全本 | iKcamp翻译 | 《JavaScript 轻量级函数式编程》|《你不知道的JS》姊妹篇；基于gulp+webpack 快速搭…详情→
【纯CSS3实现圆弧(圆圈)百分比动画进度条】来自国外的一个牛人写的代码，根据CSS3的clip、transform和animation来实现的效果，所以你需要很清楚的知道这些属性是具有哪些作用的才能明白他这个CSS的原理。cliptransformkeyframesanima…详情→ #前端开发博客#
Talk about ReactNative Image Component 迁移老文章到掘金相关系列文章 ReactNative iOS源码解析（一） ReactNative iOS源码解析（二） Talk about ReactNative Image Component 最近好像唠叨了好多RN的东西╮(╯_╰)╭，唠叨的我都觉得有点贫，就当随手记笔记吧关于ReactNative的Image组件，我一直很好奇他内部具体的工作过程，这里…
[譯] 解析 Javascript 模組機制與建置函式庫觀念身為前端或 Javascript 的開發者我們或多或少都曾經受到 JavaScript Modules 這個巨大的概念所困擾了。我們都想清楚的理解到底該怎麼使用這些工具以及它們到底在我們的日常開發中扮演什麼角色。 JavaScript 模組是什麼？隨著 JavaScript 的開發越來越複雜，命名空間、變數命名、相依的函式庫等變的越難處理。…
Node.js 中遇到含空格 URL 的神奇“Bug”——小范围深入 HTTP 协议本文首发于知乎专栏蚂蚁金服体验科技。首先声明，我在“Bug”字眼上加了引号，自然是为了说明它并非一个真 Bug。问题抛出昨天有个童鞋在看后台监控的时候，突然发现了一个错误： {代码…} 大概意思就是说：一台…