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

从项目的 GitHub 星星数看 2018 年 JavaScript 生态圈；优秀 JavaScript 开发人员应掌握的9个技巧；JS每日一题: 说说你对前端模块化的理解；纵观JS对象的“简”与“繁”（上）；Vue添加数据视图不更新问题；天天都在使用CSS，那么CSS的原理是什么呢？；（译）2019年前端性能优化清单 — 上篇；聊一聊Vue组件模版，你知道它有几种定义方式吗？

从项目的 GitHub 星星数看 2018 年 JavaScript 生态圈开源最前线（ID：OpenSourceTop）整编链接：https://risingstars.js.org/2018/en/#section-compiler 第三年 JavaScript Rising Stars 统计结果出来了，该排行通过对比各项目过去12个月在GitHub上新增 Star 数量，来评估其在 2018 年度的受关注程度，进而选出2018年度JavaScript领域…
优秀 JavaScript 开发人员应掌握的9个技巧 Photo by Andrew Worley on Unsplash 原文链接： 9 Tricks for Kickass JavaScript Developers in 2019 原文作者：Lukas Gisder-Dubé 译者：JintNiu 推荐理由： JavaScript 已经成为了当今使用最为广泛、最受欢迎的语言之一，掌握一些使用技巧不仅可以提高开发效率，更有利于思维转换。 …
JS每日一题: 说说你对前端模块化的理解 CommonJS 扩展了JavaScript声明模块的API, 通过CommonJS，每个JS文件独立地存储它模块的内容（就像一个被括起来的闭包一样）。在这种作用域中，我们通过 module.exports 语句来导出对象为模块，再通过 require 语句来引入如： function myModule() { this.hello = function() { return ‘hello!’; } } mod…
纵观JS对象的“简”与“繁”（上） JS这门语言，曾被不少开发者视为玩乐的语言，没有厚度和技术含量的语言，但发展到现在，想必没有人敢再这么说，它能做的事越来越多，所以，这门语言看似知识结构简单，但却在代码的行与行之间藏着很多细节和玄机。 “对象”在JS中是个很有意思的东西，它随处可见，说简单可以很简单，但也可以复杂到让人头皮发麻。 …
Vue添加数据视图不更新问题当我们把一个数据传给Vue实例data属性完成视图更新时，经过一番操作发现并没有更新。 console 打印发现数据只是JavaScript普通对象数据。原因是因为Vue想要完成视图响应必须把JavaScript普通对象数据转为具有 getter/setter 的属性对象数据。当调用 setter 被调用时Vue捕获数据从而完成响应组件更新。 Vue.js – 深…
天天都在使用CSS，那么CSS的原理是什么呢？开篇，我们还是不厌其烦的回顾一下浏览器的渲染过程，先上图：正如上图所展示的，我们浏览器渲染过程分为了两条主线：其一，HTML Parser 生成的 DOM 树；其二，CSS Parser 生成的 Style Rules ；
（译）2019年前端性能优化清单 — 上篇写在译前：首先介绍一下我自己，一个跨行业的、完全非科班生的文科单身狗。因为生计，走上了自学前端的荆棘之路，然后经过一路的摸爬打滚终于算是入了前端的这个门，自己也知道在前端这条道路上还有很长的路要走。平常生活中喜欢跑步，欢迎有同样爱好的大佬一起交流切磋。这篇译文是在掘金Limin组织的2019年度开发者…
聊一聊Vue组件模版，你知道它有几种定义方式吗？前端组件化开发已经是一个老生常谈的话题了，组件化让我们的开发效率以及维护成本带来了质的提升。当然因为现在的系统越来越复杂庞大，所以开发与维护成本就变得必须要考虑的问题，因此滋生出了目前的三大前端框架 Vue、Angular、React。那今天我们就来看看 Vue 中有哪些定义组件模版的方式以及他们之间的一些差别…
js 冒泡算法// 排序算法时间复杂度o(n^2);// 两两比较相邻的排序码；发生逆序则交换；// 两种方式，小的冒泡到前面去，大的冒泡到后面去；
用gorilla websocket 搞一个聊天室这个demo实现了: 消息广播心跳检测通过命令行来进行聊天具体逻辑都在 websocket.go 这个文件里这里的核心就是 aliveList 这个全局变量, 负责把消息分发给各客户端, 事件用channel来传递, 减少阻塞单个链接会在 aliveList 中注册, ConnList 就是所有活跃的链接 // AliveList …
前端进击的巨人（五）：学会函数柯里化（curry)代码例子会用到 apply/call ，一般用来实现对象冒充，例如字符串冒充数组对象，让字符串拥有数组的方法。待对象讲解篇会细分解析。在此先了解，两者功能相同，区别在于参数传递方式的不同， apply 参数以数组方式…
【手把手带你配 webpack】第一步, 做一个高级前端工程师曾经, 领导说. 判断一个前端是不是的水平怎么样只需要看他会不会配 webpack 就可以了. 然后… 一顿操作猛如虎, 然而 "有的时候, 不能一场排位就定段呀" —– 我去年买了个打包工具的前世今生 webpack 顾名思义, web 应用的 pack(打包) 工具. 举个栗子, 假如你出门旅行需要携带各…
（译）2019年前端性能优化清单 — 中篇在 2005 年，Google推出了 Brotli ，一个新的开源无损数据压缩格式，现在已经被所有的现代浏览器所支持。实际上，Brotli 比 Gzip 和 Deflate更有效。压缩速度可能会非常慢，但这取决于设置信息，可是缓慢的压缩过程会提高压缩率。它仍然可以快速解压缩，并且您还可以估算您网站的Brotli压缩成本。只有当用户通…
学习 PixiJS — 粒子效果你如何创造火，烟，魔法和爆炸等效果？你制作了许多小精灵，几十，几百，甚至上千个精灵。然后对这些精灵应用一些物理效果，使它们的行为类似于你尝试模拟的元素。你还必须给他们一些关于它们应该如何出现和消失…
2019 前端性能优化年度总结 — 第二部分让 2019 来得更迅速吧~你正在阅读的是 2019 年前端性能优化年度总结，始于 2016。 2019 前端性能优化年度总结 — 第一部分 2019 前端性能优化年度总结 — 第二部分 2019 前端性能优化年度总结 — 第三部分 2019 前端性能优化年度总结 — 第四部分 2019 前端性能优化年度总结 — …
JS每日一题: web安全攻击手段有哪些？以及如何防范定义: 指攻击者在网页嵌入脚本，用户浏览网页触发恶意脚本执行 XSS攻击分为3类：存储型（持久型）、反射型（非持久型）、基于DOM 如何防范: 设置HttpOnly以避免cookie劫持的危险过滤，对诸如 <script>、<img>、<a> 等标签进行过滤编码，像一些常见的符号，如<>在…
前端技术周刊 2019-01-21：跨端开发的三条路线微软 Edge 开发者意图为 Chrome 实现 HTML Modules，该规范用来替代之前的 HTML Imports。其优点是基于 ES Modules，可以避免全局对象污染、脚本解析阻塞等问题。
原生es5封装的Promise对象前一阵看了一些关于JS异步操作的文章，发现 Promise 真是个好东西，配合 Generator 或者 async/await 使用更有奇效。完美解决异步代码书写的回调问题，有助于书写更优雅的异步代码。花了几天时间研究了 Promise 的工作机制，手痒痒用es6语法封装了一个 Promise 对象，基本实现了原生 Promise 的功能，现在，用es5语法再…
nodejs入门之连接mysql 最近工作项目有调整，需要熟悉一些前端的内容，就顺便看看node，同时边学习边总结一下。这篇文章主要总结node链接mysql相关的各种问题。示例Demo 准备环境： ➜ 1 mkdir node-mysql ➜ 1 cd node-mysql ➜ node-mysql tnpm install mysql npm WARN saveError ENOENT: no such file or d…
编写函数式的 JavaScript 实用指南原文地址： A practical guide to writing more functional JavaScript 原文作者：Nadeesha Cabral 本文永久链接： github-heyushuo-blob 译者：heyushuo 一切皆为函数函数式编程很棒。随着 React 的引入，越来越多的 JavaScript 前端代码正在考虑 FP 原则。但是我们如何在我们编写的日常…
深入学习Vue SSR服务端渲染用Nuxt.js打造CNode社区 SSR意为 server-side rendering（服务端渲染）,目的是为了解决单页面应用的SEO的问题。服务器端渲染(SSR)和客户端渲染(CSR) 服务器端渲染(SSR) 浏览器先请求HTML文档，服务器端先将html页面(或页面组件)，生成为html字符串，再返回给浏览器，最后直接渲染到页面上。客户端渲染(CSR) 浏览器先请求H…
JavaScript是如何工作的：深入类和继承内部原理+Babel和 TypeScript 之间转换这是专门探索 JavaScript 及其所构建的组件的系列文章的第 15 篇。如果你错过了前面的章节，可以在这里找到它们： JavaScript 是如何工作的：引擎，运行时和调用堆栈的概述！ JavaScript 是如何工作的：深入V8引擎&编写优化代码的5个技巧！ JavaScript 是如何工作的：内存管理+如何处理4个常见…
JavaScript 的工作原理：解析、抽象语法树 + 提升编译速度 5 个技巧这是专门探索 JavaScript 及其所构建的组件的系列文章的第 14 篇。如果你错过了前面的章节，可以在这里找到它们： JavaScript 是如何工作的：引擎，运行时和调用堆栈的概述！ JavaScript 是如何工作的：深入V8引…
前端书籍推荐书籍 HTML 与 CSS 《Head First HTML与CSS(第2版)》–豆瓣评分 9.3。入门真的是经典书籍，手把手教学，丰富的案例让你从 0 开始学前端。《CSS权威指南(第三版)》–豆瓣评分 8.5。这本书也是非常的经典了，2007 年的书了，但是无不影响这本书作为 CSS 的经典著作，把原理讲得非常的通透，除了 w3c 标准…
【20190123 前端开发日报】“计算机之子”winter：我的前端学习路线与方法；给2019前端的5个建议；js的三种异步处理学习笔记；精读《如何编译前端项目与组件》；一套闲置的前端算法字帖，有需要的吗…详情→
理解 JavaScript 中的原型 JavaScript 中的原型一直是我很惧怕的一个主题，理由很简单，因为真的不好理解，但它确实是 JavaScript 中很重要的一部分，而且是面试的必考题，就算现在不懂，以后迟早有一天要把它弄懂，不然的话永远都没办法把自己的技术能力往上提高一个层次，所以今天就来讲讲 JavaScript 中的原型。本文是这系列的第四篇，往期…
JS每日一题: Call，Apply，Bind的使用与区别，如何实现一个bind？ Call，Apply，Bind的使用与区别，如何实现一个bind？相同点: 都是使用于方法借用及明确this指向场景第一个参数都是this要指向的对象都可以利用后续参数传参不同点: 参数传递方式不同 call,apply是立即调用,bind是动态调用基本使用: Array.prototype.slice.call(obj,0,1,2)…
web开发中，必须要了解的HTTP相关知识本文主要记录与HTTP相关的具体概念和知识，关于HTTP协议的诞生和历史发展，不多做介绍，自己但是既然是写HTTP，顺带说两句，上下文也能衔接的上。
js数组的方法{代码…} {代码…} {代码…}
(译）函数式 JS #3: 状态 photo by on 上一篇我们讨论了一些与函数式编程相关的术语。你现在了解了高阶函数，一等公民函数以及纯函数等概念 – 我们下面就看看如何使用他们。我们会看到如何使用纯函数来帮助我们避免与状态管理相关的Bug。您还将了解（最好是 – 理解）一些新的词汇：副作用(side effects) …