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

一周 GitHub 开源项目推荐：腾讯、12306、Vue、面试……；常见的三个 JS 面试题；十个超级实用的 JS 特性；js跨域问题总结；前端培训-中级阶段（14）- HTTP 首部字段和状态码（2019-09-05期）；Vue常见面试题精讲【持续更新】；面试官: 聊一聊Babel；9 行 JavaScript 代码计算圆周率一百万位

一周 GitHub 开源项目推荐：腾讯、12306、Vue、面试…… 一周 GitHub 开源项目推荐点击链接或图片即可阅读喜欢请分享到朋友圈哦 TubeMQ：腾讯开源的万亿级分布式消息中间件 TubeMQ 是腾讯在 2013 年自研的分布式消息中间件系统，专注服务大数据场景下海量数据的高性能存储和传输，经过近 7 年上万亿的海量数据沉淀，目前…
常见的三个 JS 面试题本文不是讨论最新的 JavaScript 库、常见的开发实践或任何新的 ES6 函数。相反，在讨论 JavaScript 时，面试中通常会提到三件事。我自己也被问到这些问题，我的朋友们告诉我他们也被问到这些问题。
十个超级实用的 JS 特性你可能刚上手 JavaScript，或者只是曾经偶尔用过。不管怎样，JavaScript 改变了很多，有些特性非常值得一用。这篇文章介绍了一些特性，在我看来，一个严肃的 JavaScript 开发者每天都多多少少会用到这些特性。
js跨域问题总结
前端培训-中级阶段（14）- HTTP 首部字段和状态码（2019-09-05期）前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（…
Vue常见面试题精讲【持续更新】v-if 是条件渲染指令，控制的是组件是否创建(渲染)，值为true则渲染该组件，值为false则不渲染该组件，对应Html元素则不会存在于浏览器的html文档中，即打开浏览器调试工具找不到该组件对应的渲染结果。v-show控…
面试官: 聊一聊BabelBabel 是现代 JavaScript 语法转换器,几乎在任何现代前端项目中都能看到他的身影,其背后的原理对于大部分开发者还属于黑盒,不过 Babel 作为一个工具真的有了解背后原理的必要吗?
9 行 JavaScript 代码计算圆周率一百万位原文： A Million Digits of Pi in 9 Lines of Javascript 作者：Andrew Jennings BigInt 已经可以在 JavaScript 中使用了，至少在 Firefox 和 Chrome 中如此。对于高精度计算，我最喜欢做的就是计算圆周率，使用最简单的方法，也就是说只使用加减乘除。你可以找到很多计算圆周率的公式，但我最喜欢的是这个…
纯手写Promise，由浅入深在我的上一篇文章里着重介绍了async的相关知识,对promise的提及甚少,现在很多面试也都要求我们有手动造轮子的能力，所以本篇文章我会以手动实现一个promise的方式来发掘一下Promise的特点.
JS 系列五：深入 call、apply、bind JS 系列暂定 27 篇，从基础，到原型，到异步，到设计模式，到架构模式等。本篇是 JS 系列中第 5 篇，文章主讲 JS 中 call 、 apply 、 bind 、箭头函数以及柯里化，着重介绍它们之间的区别、对比使用，深入了解 call 、 apply 、 bind 。一、Function.prototype.call() call() 方法调用一…
VUE基础实用技巧 Vue以前听说过，有了解过一点。当时还在热衷于原生JavaScript去写一些方法的封装，不是为啥，就感觉这样很帅，后面多多少少接触了一些JQuery的用法，到现在为止，JavaScript原生封装的一些方法，该忘的都忘了。上一家公司需要用到Vue，所以就利用下班的时候学习Vue。有次公司部门的培训，一位大佬总结的实用技巧，感觉不…
前端面试每日 3+1 —— 第163天今天的知识点 (2019.09.26) —— 第163天 [html] xpath和dom有什么区别？ [css] position跟margin collapse这些特性相互叠加后会怎么样？ [js] 怎样在JavaScript中创建一个worker线程？ [软技能] 移动端的性能优化…
透过现象看本质: 常见的前端架构风格和案例所谓软件架构风格，是指描述某个特定应用领域中系统组织方式的惯用模式。架构风格定义一个词汇表和一组约束，词汇表中包含一些组件及连接器，约束则指出系统如何将构建和连接器组合起来。软件架构风格反映了领域中众多系统所共有的结构和语义特性，并指导如何将系统中的各个模块和子系统有机的结合为一个完整的系统 …
说说JS中的沙箱其实在前端编码中，或多或少都会接触到沙箱，可能天真善良的你没有留意到，又可能，你还并不知道它的真正用途，学会使用沙箱，可以避免潜在的代码注入以及未知的安全问题。
重磅：硬核前端面试开源项目汇总（进大厂必备）建立最好的面试地图。目前的内容包括js、网络、浏览器相关、性能优化、安全性、框架、git、数据结构、算法等。
在Vue中使用Tinymce5遇到的问题记录安装并使用官方的 vue集成组件 $ npm install @tinymce/tinymce-vue 加载组件 import Editor from ‘@tinymce/tinymce-vue’; 使用组件 <editor api-key=”API_KEY” :init=”{plugins: ‘wordcount’}”></editor> 其他配置参见官方文档加载用户自…
从 HTTP/1 到 HTTP/2，以及即将到来的 HTTP/3如今的生活中已经离不开互联网，智能家居、在线支付、网上购物都需要互联网的支持。互联网切切实实地给生活带来了诸多便利。有了互联网，我们可以呆在空调房里，一边刷着微博，一边等透心凉的西瓜送到手上，安安…
浅析Vue.nextTick()原理1、为什么用Vue.nextTick() 2、什么是Vue.nextTick() 3、怎么用 4、小结 1、为什么用Vue.nextTick() 首先来了解一下JS的运行机制。 JS运行机制（Event Loop） JS执行是单线程的，它是基于事件循环的。所有同步任…
前端一键打印解决方案首先我来介绍下业务背景：我们在做一款类似于中介工作的软件，为了帮助用户快速办理各种业务，获得各种证件。为了能够最高效的解决用户懒得做的工作。我们业务的核心就是:机器能去做的事情绝不要让人去做。为此我们做下如下努力：1打通业务流程2puppteer流程化机器人3快速生成材料申报下面我将介绍前端一…
NodeJS有难度的面试题，你能答对几个？ Node中，每个文件模块都是一个对象，它的定义如下： function Module(id, parent) { this.id = id; this.exports = {}; this.parent = parent; this.filename = null; this.loaded = false; this.children = []; } module.exports = Module; var module = new Module(filename, parent); 复制代码所有…
CSS3 3D线条变换进度条动画源码：互联网的那些破事的微博视频
HTTP3过去现在和未来(译)在去年的HTTP3″生日周”期间,我们Cloudflare宣布了对Web的新标准QUIC和HTTP3(或当时称为”HTTP over QUIC”)的初步支持,从而可以更快,更可靠,更安全地connect到网站和API.我们还让客户加入wait list,只要相关应用开…
领略原生 JavaScript ES6~ES10 的魅力作为前端开发工程师，盲目追逐框架似乎有点舍本逐末，要知道基本功才是硬核。JavaScript 的语法这几年一直在更新，不管我们是框架的核心开发者还是业务重塑者，学习下最新的 JavaScript 语法和能力是非常有好处的…
HTML5 Canvas金色漩涡动画源码：互联网的那些破事的微博视频
纯CSS3实现的六边形加载动画源码：互联网的那些破事的微博视频
JavaScript 工具怎么就这么烂 JavaScript 工具确实超级难用，但这并不是大家的错。如果大家点进来看了，就证明各位肯定对此抱有同感。哈哈，我也这么觉得。我的日常工作就是跟 JavaScript 工具打交道，而我的观点是，这些工具至少可以做得更好。毕竟“无视问题，就是作恶”。但不少朋友可能也并不认同我的观点，别担心，其实我自己也并不完全认同…
【20190925 前端开发日报】彻底搞懂Vue中keep-alive的魔法(上)；前端自动化解决QA重构对比测试难题；TypeScript 完全手册；学习webpack一个案例就够了；Github 上 36 个最实用的 Vue 开源库；JS进…详情→
10 分钟上手 Vue 组件 Vue-Draggable
学习写一个babel插件 babel作为现代前端项目的标配，工作中经常会用到。但是，很少人会去研究它的底层实现和设计。这篇文章是日常工作中实践总结，将会由浅入深地和大家一起学习下babel的一些基础知识，以及编写属于自己的babel插件，并在项目中使用。 AST简介抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是…
jQuery手风琴样式的图片切换组件源码：互联网的那些破事的微博视频
使用nuxt前，需要了解的vue ssr基础更好的 SEO 更快的内容到达时间 SSR方案的权衡之处开发条件所限涉及构建设置和部署的更多要求更多的服务器端负载 Vue SSR基本使用一个最简单的示例（官方） const Vue = require(‘vue’) const server = require(‘express’)() const renderer = require(‘vue-server-renderer’).createRenderer() …
前端String那些事儿 js中的String其实不仅仅是"foo"这样的字面量字符串。 Blob构造函数的入参array，数组元素可以是USVString，到底什么是USVString让我很困惑。除了String外，其实还包括以下几种类型的String。工作中除了String.prototype上的那些好用的方法，es6的模板字符串等等，貌似也没有其他常用字符串的地方了。这里…
React16.8+Next.js+Koa2 开发 Github 项目总结当我们使用 React 开发系统的时候，常常因为需要配置很多繁琐的参数，如 Webpack 配置、Router 配置和服务器配置等，如果需要做 SEO，要考虑的事情就更多了，那么怎样让服务端渲染和客户端渲染保持一致是一件很麻烦很麻烦的事情，需要引入很多第三方库。针对这些问题，Next.js 提供了一个很好的解决方案，使开发人员可…
前端资源治理（一）本文探讨了前端资源治理的含义以及要解决的问题，并介绍了实现前端资源治理的思路。
学习webpack：基础配置上一篇博客起了个头，介绍了为什么要用webpack，用webpack可以做什么，以及最简单地配置。这篇博客将结合实际需求，一步一步的引入一些配置，所有内容基于实际需求出发。 entry和output 上一篇博客说到，entry是webpack打包的入口文件，webpack会从这个入口文件开始，寻找该入口文件的依赖模块，以及递归的寻找依赖…
JS的字符串插值，变量长文本换行苦逼的PHPer要写前端作为一个PHPer，经常需要在html中写js jq来解析数据，形成列表、选项等等。（谁让我们PHPer还要兼顾页面呢？？又不会Vue，只能这样子讨讨生活。）那么就经常遇到Html代码拼接，或者字符串拼接，可能是这样子的问题 let html = ""; for(…){ html += "<li> "…
webpack配置-优化篇针对没有AMD/CommonJS的源代码，通过配置noParse忽略webpack对其进行递归解析和处理，提高构建性能。比如jq，庞大又没有采用模块化标准，让webpack去解析是没有意义的。 noParse: /jquery/, 复制代码 IgnorePlugin 忽略第三方包指定模块，使其不被打包进去。比如moment.js这个日期处理库，引用时会将所有的locale文件…
Javascript进阶1–作用域和闭包从今天开始，我打算将我学到的js知识进行分享，欢迎大家的讨论和补充，有任何不足之处，尽情地提出来吧～:grin: 作用域介绍作用域是什么？本质上是一套规则，用于确定在何处以及如何查找变量（标识符）。何处？作用域是可以嵌套的，引擎从当前作用域开始查找，如果找不到，就会向上一级继续查找，当抵达到最…
JavaScript-你可能不了解的块级作用域 for (var i = 0; i < 5; i++) { console.log(i); } 复制代码我们在for循环中直接定义了变量i，通常我们只想在循环体内部的上下文环境中使用i，但是事情并不是向着我们希望的发展，i会被隐式的绑定到外面的作用域（函数作用域或者是全局作用域）。 1.2 var a = true; if (a) { var b = a * 2; b = …
《JS 服务器推送技术 WebSocket 入门指北》最近在工作中遇到了需要服务器推送消息的场景，这里总结一下收集整理WebSocket相关资料的收获。（by SHERlocked93）
jQuery大屏图文切换时间轴可循环播放源码：互联网的那些破事的微博视频
基于nodeJS从0到1实现一个CMS全栈项目（中）（含源码）今天给大家介绍的主要是我们全栈CMS系统的后台部分，由于后台部分涉及的点比较多，我会拆解成几部分来讲解，如果对项目背景和技术栈不太了解，可以查看我的上一篇文章基于nodeJS从0到1实现一个CMS全栈项目（上）这篇文章除了会涉及node的知识，还会涉及到redis（一个高性能的key-value数据库），前端领域的java…
正则(2) 及 JS盒子模型在不加全局修饰符 g 的时候，两者功能是一样的加上 g 之后，match可以把所有的大正则匹配的内容都捕获到，但是会丢掉小分组的捕获 splice ：可以结合正则使用，可以直接把正则写着split的括号中 var str = ‘a-3_34+rgdfv=gegd?terdgdf’ str.split(/ /) 把字符串中的字母和数字拆出来 replace 替…
vue全家桶开发的一些小技巧和注意事项用vue全家桶开发一年多了，踩过不少坑，也解决了很多的问题，把其中的一些点记录下来，希望能帮到大家。以下内容基于最新版的vue + vuex + vue-router + elementUI，vue脚手架是vue-cli3。 css的scoped属性 vue 为了防止 css 污染，当组件的 <style> 标签有 scoped 属性时，它的 css 只作用于当前组件中的元…
如何编写全栈 JavaScript 应用我们的 GitHub 仓库最近在 GitHub 上获得了 10,000 颗星。它在 HackerNews、GitHub Trending 上排名第一，并在 Reddit 上获得了 2 万个赞。这篇文章是我这一段时间以来一直想写的，随着我们的仓库快速上升，我认为现在是写它的最佳时间。我是自由职业者团队的一员，我们使用 React/React Native、Node.js、G…
vue自动化router 相信很多小伙伴在写项目的时候会有很多的路由，简直恶心的要死，不论是分层管理还是统一入口，都会有一大堆路由要去维护，当页面出现问题的时候，还得一个个去查找，才能找到相应路由页面。在写一个后台管理系统的时候有几十上百个页面，我实在忍受不了这么维护了，写了个webpack plugin 动态生成router，后台管理一下爽…
CSS3发光线条旋转Loading加载动画源码：互联网的那些破事的微博视频
爱上Javascript数组Array（一）——基础介绍本文属于原创文章，转载请注明–来自桃源小盼聊技术 Javascript，一门神奇的语言，它的数组也同样独特。我们要去其糟粕，取其精华，把常用的最优实践总结出来。如有错误，请指出。 javascript数组是一种类数组的对象，拥有对象的特性。当属性名是小而连续的整数时，应该使用数组，否则，使用对象。数组来源所有的…
React 遭遇 V8 性能崩溃的故事本篇文章主要讲述 V8 如何选择 JavaScript 值在内存中表现形式的优化方式，以及解释 React core 在 V8 中出现的性能断崖。
Vue中 render 函数应用因为最近接手维护一个基于 ivew 的项目, 新增模块中包含很多自定义功能, 所以大量使用到了 render 函数; 故对其做一下总结…关于 render 函数, 官方文档也做了比较详细的介绍: render 函数: [链接] ; 一般组件我…
前端精准测试探索：覆盖率实时统计工具随着业务增长, 随之而来的前端需求激增, 如何在有限的时间内保证前端代码的质量.通过测试同学单方面的保障, 还是免不了前端线上问题, 存在回归不到位或者测试遗漏的地方, 同时测试质量的高低没有客观数据可量化.&…
JavaScript-this绑定的优先级理解this绑定优先级的前提是理解this的绑定规则，理解绑定规则之前，我们先来了解一下函数"调用位置"。通常来说，要想找到调用位置，最重要的是分析调用栈（在有的编程模式下，真正的调用位置可能被隐藏起来了，通过调用栈来分析调用位置最为直接）。来个梨子： function baz() { // 当前调…
前端工程实践之可视化搭建系统（一）背景随公司业务不断发展，营销活动、广告、页面改版等需求日益倍增，靠纯人工撸代码已经无法跟上需求增长速度。加班？招人？显得不够明智，也不够前端，提效也就成为了关键。如何提效？从何入手？那不得不提的就是前端提效神器 —— 搭建系统，下文将从多个方面，向大家简单介绍政采云前端团队 ZooTeam 的可视…
nodejs（十）Koa使用教程使用koa搭建http服务器很简单，只需要如下三步，即可 //demo01.js const Koa = require(‘koa’) const app = new Koa() app.listen(3000) 复制代码然后使用node命令运行该文件即可 node buildHttp.js 复制代码打开浏览器，我们输入 http://loaclhost:3000访问，页面显示Not Found，这是因为我们并没有告诉Koa应该…
JavaScript：V8编译过程众所周知 ECMAScript 语言类型分为： Undefined ， Null ， Boolean ， String ， Symbol ， Number ，和 Object 。我们常说前六种数据类型为基础类型， Object 为引用类型或者说复杂类型数据。那么我们有想过为什么说 Undefined ， Null ， Boolean ， String ， Symbol ， Number 为基础类型，而 Object 为引用类型？…
《JS 引擎 V8 如何与 Lite 模式两开花？》V8 团队近日发表了一个文章，就详细分享了在构建 V8 Lite 的过程中将一些关键的优化部分带到现有 V8 上的过程，以及在实际工作负载中对 V8 性能表现的影响。（by 开源中国 – h4cd）
细说webpack 6. Babel的使用在 webpack 中编写 JavaScript 代码，可以使用最新的 ES 语法，而最终打包的时候，webpack 会借助 Babel 将 ES6+语法转换成在目标浏览器可执行 ES5 语法。所以 Babel 是一个重要的知识点需要掌握。
vue自动化路由解放双手，从此不用配置路由。当你看到项目中大批量的路由思考是拆分维护业务路由还是统一入口维护时，无需多虑，router-auto是你的最优选择，它帮你解决路由的维护成本，你只需要创建相应的文件夹，路由就能动态生成，路由拦截你可以在main.js中去拦截他，总之比你想象的开发还要简单。 router-auto github地…
新手前端不要慌给你✊10根救命稻草放假了特意给大家坐火车打发时间写了这篇工具收集类的小文, 让大家轻轻松松学知识, “铁皮饭盒”祝大家十一快乐, 吃开心玩开心!
#前端技术#【React 开发者指南】详见：这是一个详细、全面的 React 开发者指南，旨在帮助你选取适合的学习路径及你想学习的库，从而成为一名 React 开发者。