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

JavaScript 进阶之深入理解数据双向绑定；阿里巴巴即将开源Angular组件库NG-ZORRO；ReactNative学习笔记十一之FlatList；在 Node.js 中使用 MySQL & MySQL JavaScript 客户端；分享8款最新HTML5/CSS3功能插件及源码；JavaScript 骨骼动画 (DragonBones) 在 iOS 端截屏功能；几点建议帮你写出简洁的JS代码；使用 JSON.stringify() 的小技巧

JavaScript 进阶之深入理解数据双向绑定本文来自作者：小青年在 GitChat 上精彩分享，「阅读原文」看看大家与作者交流了哪些问题前言谈起当前前端最热门的 js 框架，必少不了 Vue、React、Angular，对于大多数人来说，我们更多的是在使用框架，对于框架解决痛点背后
阿里巴巴即将开源Angular组件库NG-ZORRO Angular社区重大利好：来自阿里的小伙伴们即将开源他们的Angular组件库NG-ZORRO，后面简称Zorro（佐罗）。目前阿里内部的开源审核流程已经通过，30天内就可以跟大家见面了。Zorro的外观设计由Ant-Design团队担纲，而且和其它组件库共
ReactNative学习笔记十一之FlatList 之前使用的组件是ListView，当时要添加一个下拉刷新，上拉加载的功能，所以对ListView做了一些封装，但是后来看官方文档，不建议再使用ListView，因为效率问题，做过Android的朋友都知道，Android的ListView如果不自己处理一下，也
在 Node.js 中使用 MySQL & MySQL JavaScript 客户端 NoSQL 数据库最近一段时间都是很受追捧的，也许已经是 Node.js 应用程序的首选后端了。不过，你不应该只是根据潮流来选择拿什么技术构建下一个项目，使用什么数据库类型要取决于项目的特定需求。如果你的项目涉及到动态表的创建，实时的插入等等，那么 NoSQL 就是不错的技术路线，而另一方面，如果项目中要处理复杂的查…
分享8款最新HTML5/CSS3功能插件及源码上周我向大家分享了许多新鲜有趣的HTML5/CSS3应用，其中也有利用jQuery的，新的一周即将来临，小编继续向大家分享8款最新HTML5/CSS3功能插件及，一起来看看吧。 1、HTML5/CSS3鬼脸表情下拉菜单超级可爱之前我们分享过很多CSS3菜单了，但是看了下面这款CSS3菜单，你会觉得这款菜单超级可爱，超级有意思。这款HTML5/…
JavaScript 骨骼动画 (DragonBones) 在 iOS 端截屏功能需求背景：使用 DragonBones 在 Webview 中绘制骨骼动画，并对当前的骨骼页面进行图层截取，实现保存本地和分享功能。问题：使用 DragonBones 制作骨骼动画时遇到一个问题，使用 WKWebView 加载骨骼动画正常，再对 WKWebView 的父容器 view （控制器 view ）进行截图是出现空白。解决思路及方案一：通过…
几点建议帮你写出简洁的JS代码译者按: 规范的代码可以有效避免代码bug，fundebug才会报警少一点！原文: Tips for Writing Cleaner Code 译者: Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。…
使用 JSON.stringify() 的小技巧深度使用 JSON.stringify() 按照 JSON 的规范，使用 JSON.stringify() 做对象序列化时，如果一个属性为函数，那这个属性就会被忽略。 const data1 = { a: 'aaa', fn: function() {
ES6中的模块——Module Module 1.ES6在语言标准的层面上，实现了模块功能，成为浏览器和服务器通用的模块解决方案，完全可以取代 CommonJS 和 AMD 规范，基本特点如下：
JavaScript数据结构（2）：栈与队列翻译：疯狂的技术宅英文：https://code.tutsplus.com/art…说明：本文翻译自系列文章《Data Structures With JavaScript》，总共为四篇，原作者是在美国硅谷工作的工程师 Cho S. Kim 。这是上本系列的第二篇。 …
Virtual-DOM在Vue中的实现–snabbdom源码解读 vue在2.0版本中引入了virtual-DOM，其实现复刻了开源库 snabbdom ，最近看了一下snabbdom的源码。snabbdom从0.6.0版本开始使用了TypeScript，本文使用的是0.5.4使用JavaScript的版本。 VNode的定义 module.exports = function(sel, data, children, text, elm){ var key = data === undefined ? undefine…
React ES5 到 ES6 转化列表 ES6 and beyond is very popular. JS is also unlike any other language
常用Webpack2优化要点基于webpack自身配置的优化，不涉及到happypack和DLL. 总述 webpack自身是单进程的。优化的总思路是，时间上，小范围，扫描次数少；空间上，能分离即分离，能不打包不打包，在http请求数与文件大小之间找到平衡。 1.entry 根据指定目录下动态生成entry对象，可根据不同场景区分entry中的数量。间接提高开发…
构建渐进式 Web 应用入门指南原文地址：A beginner’s guide to making Progressive Web Apps 原文作者：uve
Epii.js：一个极其简单的 JS 模板引擎 Epii.js 简约而不简单的JavaScript模板引擎项目地址 https://github.com/epaii/epii.js 极低门槛，拿来即用，别忘记star 特性一个轻量级模板引擎，可快速实现数据与ui绑定（数据变动，UI自动变动），快速实现事件绑定和处理，不依赖任何第三方库,仅仅8k。可快速应用于web开发,native+webapp开发,h5微网页开发,不与其…
【文件各种上传，离不开的表单】全文=> 阅读目录利用表单实现文件上传表单异步上传（jquery.form插件）模拟表单数据上传（FormData）分片上传使用HTML5 拖拽、粘贴上传上传插件（WebUploader）总结作为程序员的我们，经常会要用到文件的上传和下载功能。到了需要用的时候，各种查资料。有木有…
Node.js 快速开发 cli 应用攻略 – 坑篇「哇夭寿拉，文章都按照上下章来写啦」因为一直找不到时间写，上次匆匆做完了介绍，所以开个下集谈谈几个库遇到的坑。 commander commander 的 bug 确实挺多的，所以下一个坑准备试试 yargs 这个库（差点就准备自己写了 OTZ）。 argument ‘domain’ (and probably others) cause naming collision …
webpack入门及结合react进行开发 webpack入门及结合react进行开发重要提示（2017年7月26号更新）本文介绍的是最新版的3.4.1，并且其中又跟React结合的例子！写在前边前端技术更新太快，从几年前的jquery、djto、Prototype到react、vue、angular，自动化工具也是这样从之前的grunt、requireJs到现在的gulp、webpack、jspm、包管理工具也…
Angular 中自定义 Debounce Click 指令在这篇文章中，我们将介绍使用 Angular Directive API 来创建自定义 debounce click 指令。该指令将处理在指定时间内多次点击事件，这有助于防止重复的操作。对于我们的示例，我们希望在产生点击事件时，实现去抖动处理。接下来我们将介绍 Directive API，HostListener API 和 RxJS 中 debounceTime 操作符的相关知…
【关于技术趋势，写给奋斗中的程序员们】在计算机性能足够快的时候，语言本身大部分情况下不再是性能瓶颈，服务端普遍的性能瓶颈在IO；全文=> 作者：张寻Van 硬件计算机CPU在09年左右就在性能上没有太大进步，几近物理极限；在CPU停止进步的时候，机械硬盘存储空间从百G变成了百T，存储变得足够大足够便宜；固态硬盘的使用在速度上快了十倍以上；网络从3G到4G再到5G；手机端CPU在性能和省电之间做了很多处理，电池容量缓慢增加…
Git各种错误操作撤销的方法概述在平时工作中使用git难免会提交一些错误的文件到git库里，这时候，撤销吧，怕把正确的文件删除了，不撤销重新改又很麻烦，下面，我就从提交的三个阶段，来讲解如何撤销错误的操作。 Git Add了一个错误文件 …
《HelloGitHub》第 16 期兴趣是最好的老师，HelloGitHub 就是帮你找到兴趣！简介分享 GitHub 上有趣、入门级的开源项目。这是一个面向编程新手、热爱编程、对开源社区感兴趣人群
创建前端平移动画为何 translate() 优于 top/right/bottom/left前言研究这个问题的起因，源于我在阅读作曲家与听众这篇文章时，看到的这样一句话。例如，我对很多开发者（不管新手还是老手）仍然使用 CSS 的 top 和 left 而不是 transform 创建平移动画感到震惊，尽管只要你…
CSS入门指南-3：定位元素这是《CSS设计指南》的读书笔记，用于加深学习效果。前一篇CSS入门指南-2：盒子模型、浮动和清除介绍了css盒子模型、浮动和清除，这一篇介绍 css元素的定位。定位（position） CSS 布局的核心是 position 属性，…
webpack模块化原理-commonjs 我们都知道，webpack作为一个构建工具，解决了前端代码缺少模块化能力的问题。我们写的代码，经过webpack构建和包装之后，能够在浏览器以模块化的方式运行。这些能力，都是因为webpack对我们的代码进行了一层包装，本文就以webpack生成的代码入手，分析webpack是如何实现模块化的。 PS: webpack的模块不仅指js，包括cs…
使用tika将pdf转为html序 tika是个功能强大的项目，这里展示下如何使用tika来将pdf转为html。 maven {代码…} 转换 {代码…} 小结效果对比的话，pdfDom的效果好一点。
预加载系列一：DNS Prefetching 的正确使用姿势发现很多人都知道现代浏览器都支持 DNS 的预解析，学名：DNS Prefetching。用法也很简单，就是在html代码里加入这样的 link 标签 {代码…} 我们之前的用法是在 Head 为2个静态资源服务器的域名和日志图片的…
用Next.js快速上手React服务器渲染新前端时代的服务端渲染也提了很久了，各种技术演进层出不穷。带你领略一下基于React和Nodejs架构的服务端渲染技术，让你快速上手，开发Next服务端渲染的项目。本文参考官方文档，做精简总结，用一些小例子，让你快速理解Next.js项目的
RxJS 进阶技巧: 使用 RxJS Marbles 测试竞争条件原文链接: https://blog.nrwl.io/rxjs-advanced-techniques-testing-race-conditions-using-rxjs-marbles-53e7e789fba5本文为
JS中client/offset/scroll等的宽高解释眼花缭乱 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerHeight获取整个浏览器窗口的高度（单位：像素），包括侧边栏