20181027 前端开发日报

1分钟熟悉webpack;【前端面试题】2018 各大公司最近面试题;深入理解JavaScript函数执行—调用栈,事件循环和任务等;升级 Node.js 版本遇到的 co 和 pm2 问题解析;手摸手教你使用WebSocket[其实WebSocket也不难];实例入门 Vue.js 单元测试;可复用的 React Hooks Library;ECMAScript 6入门类继承笔记

  1. 1分钟熟悉webpack随着业务发展和前端人员的增加,搭建一个通用框架以及制定统一规范就成了必然。对于选型这方面,一开始好像就没考虑其他框架,直接选了webpack。webpack的优点就不多说了,可扩展性,强大的npm插件库,说干就干。
  2. 【前端面试题】2018 各大公司最近面试题【前端面试题】2018 各大公司最近面试题 阿里 使用过的koa2中间件 koa-body原理 介绍自己写过的中间件 有没有涉及到Cluster 介绍pm2 master挂了的话pm2怎么处理 如何和MySQL进行通信 React声明周期及自己的理解 …
  3. 深入理解JavaScript函数执行—调用栈,事件循环和任务等 Web 开发者,或者前端工程师(我们更喜欢别人这么称呼)现如今几乎能做所有的工作,从扮演一个浏览器内部交互性的角色,到制作电脑游戏、桌面控件、跨平台手机应用,甚至还可以把它写在服务器端(最流行的是node.js)和数据库连接——作为一个脚本语言,实现却近似无所不在。因此弄明白JavaScript的内部机制非常重要,这有…
  4. 升级 Node.js 版本遇到的 co 和 pm2 问题解析 nodejs 4.x 的项目, 需要升级到6.9.5(当时最新的稳定版本)以改善性能和可靠性. 业务中使用到了co, 进程使用 pm2 管理. 升级nodejs版本 确保构建脚本能够使用nvm安装nodejs 6.9.5, 本地运行基本ok 从 co 的问题开始 UnhandledPromiseRejectionWarning: Cannot read property ‘done’ of undefined 复制代码 服…
  5. 手摸手教你使用WebSocket[其实WebSocket也不难]在本篇文章之前,WebSocket很多人听说过,没见过,没用过,以为是个很高大上的技术,实际上这个技术并不神秘,可以说是个很容易就能掌握的技术,希望在看完本文之后,马上把文中的栗子拿出来自己试一试,实践出真…
  6. 实例入门 Vue.js 单元测试 作为一个以 文档丰富 而广为人知的前端开发框架,Vue.js 的官方文档中分别在《教程-工具-单元测试》、《Cookbook-Vue组件的单元测试》里对 Vue 组件的单元测试方法做出了介绍,并提供了官方的单元测试实用工具库Vue Test Utils;甚至在状态管理工具Vuex 的文档里也不忘留出《测试》一章。 那是什么原因让 Vue.js 的…
  7. 可复用的 React Hooks Library A set of reusable React Hooks. Hooks are a new feature proposal that lets you use state and other React featu
  8. ECMAScript 6入门类继承笔记Son.prototype.__proto__ === F.prototype 实现了上下辈分的继承
  9. Vue SPA 项目webpack打包优化指南 最近一个小伙伴问我他们公司的Vue后台项目怎么首次加载要十多秒太慢了,有什么能优化的,于是乎我打开了他们的网站,发现主要耗时在加载vendor.js文件这个文件高达2M,于是乎我就拿来他们的代码看看,进行了一番折腾。最终还是取得了不错的效果。 优化思路 对于网
  10. 当我们谈论Promise时,我们说些什么 各类详细的 Promise 教程已经满天飞了,我写这一篇也只是用来自己用来总结和整理用的。如果有不足之处,欢迎指教。 为什么我们要用Promise JavaScript语言的一大特点就是单线程。单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。 为了解决单线程的堵塞问题,现在,我们的任务…
  11. 显微镜下的webpack4:路径操作 对于打包工具来说,最简单也是最复杂的操作莫过于路径的安排了,原本都在src下的资源,想要打包到dist目录下,但是打包出来的文件路径甚不如人意。明明想要分门别类地放置文件文件,然后却像大杂烩一样js,html,css甚至图片都混在了一起。虽然打包之后运行没什么
  12. Webpack3.X升级到4.X多页面实战和构建优化 Webpack4.x出来也有一段时间了,网上已经有很多关于Webpack4.x原理和新特性的介绍,比如零配置等,这边就不重复了。 最近将之前基于Webpack3.x写的一个 多页面 项目升级到4.x,记录和总结Webpack3.x升级到4.x遇到的问题以及解决方案。 项目预览gif: 在线查看:webpack.czero.cn 区分3.x和4.x…
  13. VUE的总结(2)用到的代码: [链接]vue.js API传送门: [链接] v-on指令 {代码…} 点击按钮产生了随机数,v-on:可以用@代替。 点击按钮,数字自增 {代码…} 点击按钮数字增加 但是有时候我们是要传参数的 {代码…} 这样就是…
  14. 身为前端开发工程师,你需要了解的搜索引擎优化SEO.网站url网站创建具有良好描述性、规范、简单的url,有利于用户更方便的记忆和判断网页的内容,也有利于搜索引擎更有效的抓取您的网站。网站设计之初,就应该有合理的url规划。
  15. JS 发布订阅模式首先声明,本文并非原创。原文请点击这里,本文是在原文的基础上加入一些自己的一些东西,方便以后自己理解与查看。
  16. vue笔记-vue项目中对象数组数据变化,但视图未更新的解决方案(待项目细节描述)? 前言 在负责的后台管理系统中,我的添加人员与编辑人员两个功能共用了一个组件,但是遇见一个问题.同样是用v-for去渲染一些标签,在使用编辑人员功能时,删除对象数组元素,对应的标签在页面上也会消失.但是在使用添加人员功能时,删除对象数组元素,对应的标签却不会在页
  17. 有人考了我一道 CSS 题目 确实是一道有趣的 CSS 题目,可以边读边思考。
  18. 10个有趣的JSCSS库(2018.10) Tutorialzine每月都会给我们精心挑选优秀的web开发资源,这些资源可以帮助我们解锁最新和最炫酷的网络开发姿势。前端er,让我们一起先睹为快吧! WatermelonDB WatermelonDB是用于构建React和React Native应用程序
  19. 笔记:React 中关于 key 的一点总结 为什么要使用 key ? Motivation When you use React, at a single point in time you can think of the render() function as creating a tree o
  20. Vue中使用MouseMove事件 获取鼠标坐标频率降低或事件卡顿 当我们使用Vue进行项目开发时,因为Vue的简介和易用性使我们可能会忽略,Vue的生命周期这件事儿。 尤其是在使用事件时,稍有不意就会造成意外发生! 本文章使用常见的拖拽为案例。 当拖拽一个div元素时,很明显会造成鼠标快速滑动时div跟随卡顿 共通代码: <script> export default { data() …
  21. JavaScript 倒计时踩坑集锦 前阵子,项目中加了个倒计时的需求,接手的时候 啪啪啪三声,搞定,送测 let countdown = 100000; // ms 服务器返回的倒计时剩余时间 function startCountdown() { setTimeout({
  22. js闭包实例展示准确来说,闭包是基于正常的垃圾回收处理机制下的。也就是说,一般情况一个函数(函数作用域)执行完毕,里面声明的变量会全部释放,被垃圾回收器回收。但闭包利用一个技巧,让作用域里面的变量,在函数执行完之…
  23. 前端错误日志收集方案 前言 公司的项目上线出现问题后难以定位错误,研究过现存的错误监控方案,受限于特殊条件只能定制自己的错误收集方案。 基于以上背景我撸出来一个错误日志收集方案 – Ohbug。 欢迎各位大佬 star ~ 监控错误 说起错误的捕获,首先想到的是 try catch
  24. React v16.7 "Hooks": What to Expect 其实 hooks 就是一系列特殊的函数,让 functional component 内部能够”钩住“ React 内部的 state 和 life-cycles,开发者更轻松地复用组件逻辑。
  25. 第二届 VueConf VueConf 日程一睹为快。第二届 Vue.js 开发者大会由 Vue.js 官方联合 w3ctech、前端圈共同举办,将于 2018 年 11 月 24 日在杭州开启。
  26. Angular 网络连接状态组件 在开发 Web 应用程序时,有时候我们需要获取当前的网络状态,然后根据不同的网络状态显示不同的提示消息或显示不同页面内容。对于原生应用、混合应用或提供 JS-SDK 的第三方平台来说,我们可以通过相关的 Network API 来获取当前的网络连接状态。但对于 Web 应用来说,虽然也有相关的 Network Information API ,但兼…
  27. TypeScript基础入门之Javascript文件类型检查(四) 继续上篇文章【 TypeScript基础入门之Javascript文件类型检查(三) 】 @param 和 @returns @param使用与@type相同的类型语法,但添加了参数名称。 通过用方括号括起名称,也可以声明该参数是可选的: // Parameters may be declared in a variety of syntactic forms /** * @param {string} p1 – A string p…
  28. 从Promise的实现来看有限状态机 写在前面 有限状态机在我读研的时候是一门必修的课程,也就是大部分CS研究生都要接触的一门课程。这门课说简单也蛮简单的,但是其中内含的内容以及应用实在是太多了。 有人说为什么这么简单的一个东西要用看起来很复杂的数学模型来表示呢?因为我们平时接触到的很多编程相关的

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流