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

Web 动画帧率计算；WebSocket详解（六）：刨根问底WebSocket与Socket的关系；React+Redux仿Web追书神器；HTTP/2 Server Push 最佳实践；Vue项目SSR改造实战；移动端开发框架哪个好？jQuery/Vue/AngularJS有哪些区别和优缺点？；Vue原理以及简单实现；JS写的一个抽奖小Demo从普通写法到设计模式再向ES6的进阶路程

Web 动画帧率计算我们知道，动画其实是由一帧一帧的图像构成的。有 Web 动画那么就会存在该动画在播放运行时的帧率。而帧率在不同设备不同情况下又是不一样的。有的时候，一些复杂或者重要动画，我们需要实时监控它们的帧率，或者说是需要知道它们在不同设备的运行状ԛ
WebSocket详解（六）：刨根问底WebSocket与Socket的关系 1、前言对于很多初次接触Web端即时通讯技术的人来说，WebSocket是个很新的概念，但无疑它是当前Web端即时通讯技术中最热门的关键词。随便点开一篇文章，只要说打算开发Web端即时通讯相关的的应用，老司机们推荐的无一例外都是WebSocket。那么好
React+Redux仿Web追书神器引言由于 10 月份做的 React Native 项目没有使用到 Redux 等库，写了一段时间想深入学习 React，有个想法想做个 demo 练手下，那时候其实还没想好要做哪一个类型的，也看了些动漫的，小说阅读，聚合资源的开源项目。由于正好在学习开源
HTTP/2 Server Push 最佳实践在合适的时机，推送合适的资源，Push 比 No Push 带来的网站时延提升是明显的。
Vue项目SSR改造实战我们先看“疗效”，你可以打开我的博客u3xyz.com，通过查看源代码来看SSR直出效果。我的博客已经快上线一年了，但不吹不黑，访问量非常地小，我也一直在想办法提升访问量（包括在sf写文章，哈哈）。当然，在PC端，…
移动端开发框架哪个好？jQuery/Vue/AngularJS有哪些区别和优缺点？ JS框架，我认为大体上可以分为两种。一种是类似jQuery/ d3那样的，通过修改html的DOM结构来渲染UI的库。还有一种则是类似于AngularJS/ReactJS 那样的，采用MVC分层的，通过Model来渲染View UI框架。性能比较 jQuery基本都是浏览器原生操作，实计上h5的很多api都借鉴了jQuery，比如说在兼容IE6~IE7的蛮荒时…
Vue原理以及简单实现在vue原理中，最重要的部分就是如何实现数据的观测，依赖的收集，视图的更新。本文讲的就是Observer, Dep, Watcher这三个的简单实现。 pub(publish)表示发布者，sub(subscribe)表示订阅者, cb(callback)表示回调函数如果你觉得这篇讲的对你有所帮助，请帮我点个 star observer的实现 Observer的作用简单来说…
JS写的一个抽奖小Demo从普通写法到设计模式再向ES6的进阶路程前言写这个小Demo是想提升自己的JS代码风格和水平，所以这个Demo我写了三个版本这款抽奖小Demo拥有类似现实中转盘抽奖的效果，会在最后慢慢停止。献上效果效果地址请点这里工程目录 1. 整体目录 2. HTML结构 <p c
web知识进阶——字符编解码作者简介：nekron 蚂蚁金服数据前端背景因为中文的博大精深，以及早期文件编码的不统一，造成了现在可能碰到的文件编码有GB2312、GBk、GB18030、UTF-8、BIG5等。因为编解码的知识比较底层和冷门，一直以来我对这几个编码的认知也很肤浅，很
每日源码分析 – lodash(after.js) 本系列使用 lodash 4.17.4 前言本文件无对引用其他文件的引用正文 /** * The opposite of `before`. This method creates a function that invokes * `func`
Vue响应式原理以及简单实现在vue原理中，最重要的部分就是如何实现数据的观测，依赖的收集，视图的更新。本文讲的就是Observer, Dep, Watcher这三个的简单实现。 pub(publish)表示发布者，sub(subscribe)表示订阅者, cb(callback)表示回
前端开发的思考–看起来简单，做起来难今天和网上的朋友聊到了前端开发，这位朋友真是一位大师级人物，聊聊几句话，几乎就概括了整个前端的开发工作。我整理了一下，前端的开发工作大致包含3点： 1. 前后端的数据交互 2. DOM操作 3. 模块化设计 /* 因此，我也兴趣大发，想借此写点什么。首先声明一下，下面的口水话较多，仅当是一次技术闲聊，多有…
Node.js 中遇到含空格 URL 的神奇“Bug”：小范围深入 HTTP 协议作者深入探索问题的经历，再次体现了遇到问题看源码看规范的重要性。
使用纯粹的JS构建 Web Component原文链接：https://ayushgp.github.io/htm…译者：阿里云 – 也树 Web Component 出现有一阵子了。 Google 费了很大力气去推动它更广泛的应用，但是除 Opera 和 Chrome 以外的多数主流浏览器对它的支持仍然不够理…
three.js进阶创建一个3d的空间粒子效果 three.js点击事件的处理着色器的初步使用实现一个光晕效果 1.创建一个3d的空间可以想象一下我们在房间内，房间是一个立方体，如果你有生活品味，可能会在房间内贴上壁纸，three.js可以很方便的创建一个立方体，并且给它的周围贴上纹理，让照相机在立方体之中，照相机可…
认识Vue组件 Vue.js是一套构建用户界面的渐进式框架（官方说明）。通俗点来说，Vue.js是一个轻量级的，易上手易使用的，便捷，灵活性强的前端MVVM框架。简洁的API，良好健全的中文文档，使开发者能够较容易的上手Vue框架。本系列文章将结合个人在使用Vue中的一些经(cai)验(keng)和一些案例，对Vue框架掌握的部分知识进行输出，同…
《一篇真正教会你开发移动端页面的文章(二)》那是本篇文章的基础，如果没有阅读过的同学可以去看看，今天就给大家带来干货，真真正正的讲到如何很好的开发一个移动端的页面。（by HcySunYang）
JS 开发者：最喜欢 React，Vue.js 比 Angular 值得尝试 State Of JavaScript 2017 调查结果已经出炉。作者对众多 JavaScript 开发者进行了调查，以了解现在前端开发者对前端各种技术栈、框架的使用情况与看法。根据 10 月份的 State of the Octoverse 2017 报告，在现有的 337 种开发语言中，JavaScript 仍然是 GitHubbers 的最爱。JavaScript 的生态系统一年比一年…
《Chrome 扩展程序的开发与发布 — 手把手教你开发扩展程序》Chrome 扩展程序的开发与发布 — 手把手教你开发扩展程序。（by chokcoco ）
每日源码分析 – lodash(chunk.js) 一. 写在前面：本系列使用 lodash 4.17.4版本这个函数的作用是用来切割数组的，通过传入数组 Array 和块数量 size 来进行数组分割，返回新的数组块. 二. 函数使用示例 function chunk(array, size) {
换种方式理解 JavaScript 中的 this 在这篇博文中，我将采取了一种不同的方式来解释 JavaScript 中的 this ：我假设箭头函数是真正的函数，而普通函数是特殊结构的方法。我认为这样更容易理解 this – 试试看。注：在没特殊说明的情况下，示例默认在 strict mode(严
解读 JavaScript 之引擎、运行时和堆栈调用随着 JavaScript 变得越来越流行，很多团队在他们的堆栈中实现诸多层级的支持 – 前端、后端、混合应用程序、嵌入式设备等等。本文是该系列文章的第一篇，旨在深入研究 JavaScript 及其实际工作原理：我们认为通过了解 JavaScript 的构建块以及它们如何一起协作的，你将能够编写更好的代码和应用。如 GitHut 统…
深入理解JavaScript系列——this 前言回顾之前的知识，我们知道在进入执行上下文阶段会完成变量对象（ VO ）的创建、作用域链的建立，还有就是确定 this 的指向。本章节就会从 ECMA-262-5 规范去解读
Git 提交历史的修改删除合并等实践今天主要针对在项目版本控制器Git的使用中遇到的一些和提交历史操作相关的常见问题，进行实践总结。在项目开发中经常会需要修改提交commit信息，合并多个提交commit，甚至放弃当前修改回退至某一历史提交的需求，那我们到底该如何操作呢，本篇一一阐述。前言假如，当前我们处在需求分支feature-test，进…
如何一步步打造基于 React 的移动端 SPA 框架作者简介喻珍祥，携程港澳研发高级经理，2004年接触互联网开发，见证前端开发从美工到全栈开发的全过程。2014年加入携程，主要负责永安旅游APP移动前端架构和研发。 *本文首发于GitChat，转载请注明* 现今前端新技术井喷一样层出不穷，且各有特点和使用场景，交互变得前所未有的复杂，那么，在众…
【调整JavaScript抽象的迭代方案】即使还没有读过我的文章《在处理网络数据的 JavaScript 抽象的重要性》，你也很有可能已经意识到代码的可维护性和可扩展性很重要，这也是介绍 JavaScript 抽象的目的。详见（来自：iKcamp ）
【20171216 前端开发日报】使用vue解决复杂逻辑；CSS Flexbox详解；[翻译] 理解 CSS 布局和块级格式上下文；Parcel+vue 入门实战；vuejs 水波纹框架；three.js深入浅出；CSS3 box-shadow 内外阴影效果；Github分享：精心收集的48个JavaScript代…详情→
〔总结〕容易遗忘的JS知识点整理1.hasOwnProperty相关为了判断一个对象是否包含自定义属性而不是原型链上的属性，我们需要使用继承自 Object.prototype 的 hasOwnProperty方法。hasOwnProperty 是 JavaScript 中唯一一个处理属性但是不查找原型…