20170902 前端开发周报-前端开发博客

明白 JS 模块化；JavaScript 函数式编程术语大全；MVVM开发总结——vue组件（你所需要知道的）；JavaScript 之银弹の技法；Node.JS循环递归复制文件夹目录及其子文件夹下的所有文件；应用canvas获取video的缩略图；30 多年的软件经验，总结出 10 个编写出更好代码的技巧；深入理解 Node.js Stream 内部机制

明白 JS 模块化模块化就是将一个大的功能拆分为多个块，每一个块都是独立的，你不需要去担心污染全局变量，命名冲突什么的。

那么模块化的好处也就显然易见了

解决命名冲突
依赖管理
代码更加可读
提高复用性
JavaScript 函数式编程术语大全函数式编程(FP)有许多优点，它也越来越流行了。然而，每个编程范式都有自己独特的术语，函数式编程也不例外。通过提供的这张术语表，希望使你学习函数式编程变得容易些。
MVVM开发总结——vue组件（你所需要知道的）随着模块化开发的理念越来越被开发者所重视，如何快速高效的开发项目成为了开发中所要注意的重点。在vue.js中组件系统作为一个重要的概念，它提供的组件可以独立、重复的使用来构建大型的应用。组件可以扩展HTML元素，封装可重用的HTML代码，我们可以将组件看作自定义的HTML元素。
JavaScript 之银弹の技法博主入行前端写JavaScript时候，因为需要兼容IE低版本，时常需要在繁杂冗长的DOM操作夹杂的代码中，尽可能巧妙地节省代码了，保持代码清洁和逼格，久而久之，在维护前辈旧代码和新功能开发时积累了一套代码书写的奇技淫巧，你也可以把它看作是抖机灵，不过它的确是丰盈了我的codeの时光，让我们不至书写业务那么枯燥。
Node.JS循环递归复制文件夹目录及其子文件夹下的所有文件在Node.js中，要实现目录文件夹的循环递归复制也非常简单，使用fs模块即可，仅需几行，而且性能也不错，我们先来实现文件的复制
应用canvas获取video的缩略图发布视频时候，经常需要上传同时上传视频的缩略图，近日，应产品经理的的要求，需要做一个发布视频动态的功能，我第一反应就想到了H5的标签vidio和canvas，在这里记录下我完成该功能的过程：
首先，整体思路是创建一个vidio，然后创建一个canvas和一个画笔，调用画笔的drawImage方法，将vidio作为参数，就会画出该视频的缩略图。
30 多年的软件经验，总结出 10 个编写出更好代码的技巧　　好代码可以定义为易读、易懂、易调试、易改，最重要的还要少缺陷。显然，要想敲出一手好代码，是要花不少时间，但这在长久来看是有意义的，因为你可以花更少时间及精力去维护和复用你的代码。

　　事实上，我们可以将好代码等同于可复用的代码，这也是下面提到的重要原则之一。代码可能只是完成了编程工作中短期目标的特定功能，但如果没人（包括你自己）愿意复用你的代码，这代码在某种程度上可以说是不足且有缺陷的。要么太复杂、要么太具体、要么在不同情况下极有可能崩掉，或者其他程序员可能不相信你的代码。
深入理解 Node.js Stream 内部机制相信很多人对 Node.js 的 Stream 已经不陌生了，不论是请求流、响应流、文件流还是 socket 流，这些流的底层都是使用 stream 模块封装的。如果你了解生产者和消费者问题的解法，那理解 stream 就基本没有压力了，它不仅仅是资料的起点和落点，还包含了一系列状态控制，可以说一个 stream 就是一个状态管理单元。
Nodejs 进阶：使用 DiffieHellman 密钥交换算法 Diffie-Hellman（简称DH）是密钥交换算法之一，它的作用是保证通信双方在非安全的信道中安全地交换密钥。目前DH最重要的应用场景之一，就是在HTTPS的握手阶段，客户端、服务端利用DH算法交换对称密钥。

下面会先简单介绍DH的数理基础，然后举例说明如何在nodejs中使用DH相关的API。
《JavaScript 立即执行函数表达式 ( IIFE ) 用例》最近，我写了一篇关于syntax of JavaScript’s IIFE pattern的文章来解释为什么用现在的方式来写立即执行函数表达式。少数读者批评文章过时了，都争论在ECMAScript 2015中介绍的块级作用域变量使IIFE变得过时了。（by 众成翻译）
25个最基本的JavaScript面试问题及答案
读书笔记：锋利的JQuery 本文首发于我的个人博客：cherryblog.site/ 最近开启了阅读源码之旅，有兴趣的童靴可以持续关注，这几天再看 Zepto.js 的源码，估计博文过几天就会出来~另外，买的十几本书陆陆续续的在看，立志每本书都写一本读书笔记（相当于这本书的浓缩版 + 个人见解）前一段在当当和京东上趁着打折买了十几本编程的书，励志要…
HTTP中GET与POST的区别 99%的错误认识本篇文章分两部分，第一部分可以列为初为新人的装逼失败模式，第二部分列为修炼低调模式。装逼失败模式：99%的人对GET和POST的认识修炼低调模式：1%不知道的进阶认识 GET和POST，在我们日常WEB开发中，是最常用的…
从0开始写一个自己的VuexVuex从0开始学习源码前言尝试从0开始，写一个Vuex(主要是copy vuex的源代码)，从中学习下vuex的源代码.先来看下列子中是怎么使用store的。 {代码…} 开始第一步 Vuex作为一个插件先得实现install方法。同时…
基于webpack的几种静态资源的引入方案基于webpack && html引入静态资源的几种方法 GitHub博客 github.com/asd0102433/… 喜欢的start，长期更新我们需要在页面插入图片: index.html 因为这个图片webpack并没有被加载进来，会得到404的结果。通常的做法是在对应的js中 require …
浅谈JavaScript中的异步处理整理于互联网在 JavaScript 的世界中，所有代码都是单线程执行的由于这个“缺陷”，导致 JavaScript 的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现异步操作会在将来的某个时间点触发一个函数调用主流的异步处理方案…
如何免费地让网站启用 HTTPS 今天，我把CoolShell变成https的安全访问了。我承认这件事有点晚了，因为之前的HTTP的问题也有网友告诉我，被国内的电信运营商在访问我的网站时加入了一些弹窗广告。另外，HTTP的网站在搜索引擎中的rank会更低。所以，这事早就应该干了。现在用HTTP访问CoolShell会被得到一个 301 的HTTPS的跳转。下面我分享一下启用HT…
【为什么你只是一个小码农】全文=> 　　作者：咖喱py 　　每个码农的心里都有一个大神梦，别急着否认这一点，先想想你为什么不是大神？　　一，你不是大神，是因为你没有珍惜时间。　　生命对于我们唯一的公平，可能就在于她的唯一性。然而生命又是如此的不公，你永远无法知道这唯一的一次还有多久就要结束了。因此，剩下的时间对于我…
vue开发项目的坑
使用JavaScript搭建神经网络——Synaptic.js 目前神经网络方面用得最广的无疑是Python，但搭建Python的环境还是一个问题，因为本身Python就有版本2和版本3的区分，又有各个依赖包（所以，需要使用conda配置各个Python环境）。但JavaScript则不存在这个问题，只需要有node和浏览器就可以进行学习和使用。而且随着技术的发展，未来智能是要嵌入到各个设备、并且需…
读Zepto源码之Ajax模块
vue-easytable：强大的基于 vue2.x table 组件介绍基于 vue2 的组件。API文档以及实例主要功能自适应，可以随着浏览器窗口改变自动适应固定列，表头固定列宽拖动（默认支持）排序，支持单个、多个字段排序自定义列、自定义单元格样式、loading效果等自带分页组件安装 np…
css知识点：IE浏览器的hasLayout，IE低版本的bug根源什么是hasLayout？ hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout…
一道Javascript面试题引发的血案文章首发于 szhshp的第三边境研究所，转载请注明先来看几道面试题，公司的开发们都尝试做了一下，然而基本没有人能够全部答对。覆盖的考点很多，也有一些难度，题目挺有意思建议手动执行一边玩玩。 Question 1 for (var i = 0; i <5 ; i++) { setTimeout(function(){ console.lo...
2017 年 8 月：15 个有趣的 JS 和 CSS 库炎热的 7 月已经过去，秋天的脚步更近了。在本月，Tutorialzine 依旧为大家带来了一些有趣、实用的前端库，看看有哪些适合你的项目呢？ 1. Titanic 这是一组自带悬停动画的精致 SVG 图标。但与大多数 Web 图标不同之处在于 – 它的动画是基于 JS 的，需要你使用 bodymovin 库将动画效果导出为 SVG 格式…
npm scripts : 每个前端开发都应知道的一些使用提示 npm 不仅是 JavaScript 的包管理工具，它还可以用于你代码库相关的配置工具，如 Linters(代码检查工具)、transpilers(代码转译工具)、testing(测试工具)和servers(本地服务器)等。这些都可以根据软件包的说明进行配置并运行。基本用法也很简单。你可以在 package.json 主对象中的 scripts 属性中指定 scripts ，然后…
Three.js 现学现卖三维计算机图形和二维计算机图形的不同之处在于计算机存储了几何数据的三维表示，其用于计算和绘制最终的二维图像。—— 《3D computer graphics》随着 WebGL 标准的快速普及，越来越多团队尝试在浏览器上推出可交互式的 3D 作品。相较于二维场景，它更能为用户带来真实和沉浸的体验。然而 OpenGL 和 WebGL（基于 O…
JavaScript小结——常见DOM知识前言本篇文章以介绍常见的DOM节点知识、DOM元素操作方法为目的，其中也对一些比较容易忽略的问题进行简要说明。才疏学浅，如有纰漏之处或建议欢迎留下评论。 Node节点首先，简单看看Node节点。有三个属性个人认…
JavaScript入门学习书籍到阶段书籍入门：《深入浅出JavaScript》《JavaScript DOM编程艺术》重要的是对知识深浅度把握的很好,html/js/css/dom各个方面都把握在一个合适的度《JavaScript DOM高级程序设计》《javascript-55个javascript常用代码》《JavaScript从入门到精通》《Javascript基础教程(文字版,代码可复制)》《…
2017-08-27 前端日报2017-08-27 前端日报精选如何合理地设计Redux的State深入了解一个超快的 CSS 引擎: Quantum CSS (也称 Stylo) ★ Mozilla Hacks全面了解JS作用域Zepto源码分析（二）奇淫技巧总结整理下《前端江湖面试》对自己有…
Vue.js依赖收集写在前面因为对Vue.js很感兴趣，而且平时工作的技术栈也是Vue.js，这几个月花了些时间研究学习了一下Vue.js源码，并做了总结与输出。文章的原地址： github.com/answershuto… 。在学习过程中，为Vue加上了中文的注释 github.com/answershuto… ，希望可以对其他想学习Vue源码的小伙伴有…
JavaScript正在吞噬着这个世界 NodeJS，一个基于Google Chrome V8 JS引擎的服务器端JavaScript运行时，曾经被认识只是一个赶时髦的技术，有谁会想到，它正在吞噬着我们的软件世界。NodeJS成为构建Web应用最为常用的环境之一，而且正在试图进入企业领域。 Anthony Delgado 列出了五个巨头公司，他们在高流量的生产环境中使用了这项“时髦”的服务器端Java…
javaScript命名空间的实现大型项目中－javaScript如何解决命名冲突要解决命名冲突，即必须保证，本模块的变量不会被其他模块污染，为了保证命名空间的整洁，希望能够在全局把这些变量用一种规范的方式组织起来。命名空间的实现在全局管…
翻译连载 |《你不知道的JS》姊妹篇 |《JavaScript 轻量级函数式编程》- 引言＆前言原文地址：Functional-Light-JS 原文作者：Kyle Simpson　－　《You-Dont-Know-JS》作者译者团队（排名不分先后）：阿希、blueken、brucecham、cfanlife、dail、kyoko-df、l3ve、lilins、LittlePineapple、Matil…
【开发者必读的十大经典书籍】本文总结了业界的十本经典书籍，我们来一一探索吧。全文=> 　　快速迭代的信息社会，技术前进的速度远超人类历史上的任何时期，技术攫取呈现出碎片化的特征，开发者更倾向于通过网络搜素寻求问答。然而，这种浅尝辄止的阅读方式，会给人深沉的浮躁感，难以做到为自己切实所用。　　新语言、新工具持续更替，让人目不暇接，学习过程中必定伴随着各种琐碎的问题。事实上，许多…
web性能优化——http首部可能很多人不知道http头部有什么作用，甚至一看到这些密密麻麻的头部信息，赶紧敬而远之。同学~你知道你犯了多大的错误吗？了解http头部，可以让你网站的性能得到很大的提升。现在开始还来得及，赶紧往下看吧~ H…
前端小团队如何培养技术积累？前端是个挺特别的岗位，一方面它的技术栈更新几乎是软件开发领域中最快的，但另一方面它的不可替代性相对而言却并不算高。

并且，虽然多数企业都有相对独立的前端团队，但团队多半都有不少业务负担，加上前端较高的迭代速度，一线业务同学的成长多少容易遇到些瓶颈：需求都做不完了，还有时间读源码解析吗？
Webpack 3，从入门到放弃原文首发于：Webpack 3，从入门到放弃 Update (2017.8.27) : 关于 output.publicPath、devServer.contentBase、devServer.publicPath的区别。如下： output.publicPath: 对于这个选项，我们无需关注什么绝对相对…
Redux 的副作用处理与 No-Reducer 开发模式众所周知，React只是一个用于构建UI的JavaScript库，并非完整的框架，在代码的整体结构与组件间的相互通信——这两块大型Web项目开发中最关键的痛点——选择了留白。然而值得庆幸的是，Facebook给出了一个官方的半成品解决方案——Flux。说它是半成品，是因为早在2014年 Facebook 就提出了 Flux 架构的概念，但其后…
Vue写一个Markdown编辑器这是最近用Vue写的一个Markeddown编辑器, 主要目的是扩展 Vue-Manager 的编辑器功能。核心功能引入了 Marked 插件,将Markedown文档解析为html。样式基本沿用了，并增加了多种主题选择的功能。项目已经打包上传到npm，欢迎使用。预览地址 luosijie.github.io/vm-markdown… …