20190811 前端开发周报

vue+vscode断点调试详解;基于 HTML5 WebGL 的加油站 3D 可视化监控;Vue.js 在复杂信息流场景下的最佳实践;vue在混合开发中应用的思考;你可能不知道的前端小技巧;JS中轻松遍历对象属性的几种方式;vue跨域方案指北;webpack4从零搭建vue项目

  1. vue+vscode断点调试详解 非开箱即用 ,仅作好奇心满足、复杂项目中自定义断点配置、下个项目中不求人不百度立即断点调试 涉及面较宽,需要一定经验,且各处均不会太深入(我也菜) 如果你到处搜索但始终解决不了: vscode无法连接上页面、提示未验证断点(灰空心圆)、断点漂移乱飞到其他行、断点实际中断时所在位置不对、单步跳过执行时去到…
  2. 基于 HTML5 WebGL 的加油站 3D 可视化监控 前言 随着数字化,工业互联网,物联网的发展,我国加油站正向有人值守,无人操作,远程控制的方向发展,传统的人工巡查方式逐渐转变为以自动化控制为主的在线监控方式,即采用数据采集与监控系统 SCADA。SCADA 系统的推广使用,大大提高了我国加油站的监控效率,本文所讲的则是通过对加油站的可视化建模,结合…
  3. Vue.js 在复杂信息流场景下的最佳实践 至此,我们的「Vue.js 在复杂信息流场景下的最佳实践」所需要的组件都已经给出来了,接下来就简单讲一下为什么要这么做。 需求是千遍万化的,一个组件无…
  4. vue在混合开发中应用的思考 我目前在做的一个项目,前端这块虽然说使用的是CS架构,但其实是 C# 提供了一层 Chrome 内核来运行app的。也就是混合开发的一种。现在的工作是将以前的 jquery 一把梭的开发模式转移到 vue 上来,这就带来了 vue 在混合开发中应用的思考。 二、混合开发 像 Android , WPF 和 IOS 等等这些原生(或桌面)应用…
  5. 你可能不知道的前端小技巧这篇文章主要记录一些我在开发工作中踩过的一些坑或者新学到的一些知识。主要分成‘事件’,‘浏览器调试小技巧’,‘其他‘三部分。==============================一.事件===========================1.先来看一个有…
  6. JS中轻松遍历对象属性的几种方式Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 。如果对象的键-值都不可枚举,那么将返回由键组成的数组。
  7. vue跨域方案指北 跨域是指违背了浏览器同源策略的限制 简单的说,我们通常使用的请求工具都是基于XMLHttpRequest对象构建的,它是严格遵守同源策略的,所以当需要跨域时,基于它的工具就无法工作了,我们需要一些额外的手段来解决这个问题 本文主要对已知的几种跨域方案进行实践和总结 一、jsonp jsonp虽然不是官方的跨域方案,但…
  8. webpack4从零搭建vue项目 新建一个项目文件夹 npm init -y 初始化package.json 安装webpack依赖包 npm install –save-dev webpack webpack-cli webpack-dev-server devServer: { contentBase: path.join(__dirname, ‘./dist’), host: ‘localhost’, // 可以设置0.0.0.0 ,这样设置你可以通过127.0.0.1或则localhost去…
  9. 从零开始,采用Vue的思想,开发一个自己的JS框架(三):update和diff 本章节我们的主题是update和diff,这一章节可能理论部分会比较多。在开始这一块内容前,我觉得有必要先大致看一下Vue和React实现这一部分的流程的:update->diff->patch->updateDOM。在开始更新后,会进行diff算法的比对,比对后会生成一个patch补丁包,然后再根据这个补丁包进行DOM的更新。补丁包中会通过id(…
  10. js 面试官想了解你有多理解call,apply,bind?函数原型链中的 apply,call 和 bind 方法是 JavaScript 中相当重要的概念,与 this 关键字密切相关,相当一部分人对它们的理解还是比较浅显,所谓js基础扎实,绕不开这些基础常用的API,这次让我们来彻底掌握它…
  11. 2019 谷歌 I/O 大会上提出的 JavaScript 新特性,你错过了吗? 本文总结了 2019 年谷歌 I/O 大会上 Mathias 和 Sathya 提出来的 JavaScript 新规范功能。 本文从对线程认识的简要刷新、事件循环、关于事件循环的常见问题和错误认识三个不同层面进行说明,进一步挖掘了 Node 的核心。 正则表达式 lookbehind 正则表达式( RegEx 或 正则表达式 )在任何语言里都是强大的功能。…
  12. 前端硬核面试专题之 HTML 24 问1. 前言 本文讲解前端面试的 HTML 的内容。 复习前端面试的知识,是为了巩固前端的基础知识,最重要的还是平时的积累! 注意:文章的题与题之间用下划线分隔开,答案仅供参考。 笔者技术博客首发地址 GitHub,欢…
  13. vue项目中使用百度地图(vue-baidu-map)在使用vue做项目的时候,有用到百度地图,使用了vue-baidu-map插件,包括拾取位置坐标,搜索位置等
  14. JS中函数式编程基本原理简介在做了一些研究之后,我发现了函数式编程的概念,比如不变性和纯函数。这些概念使你能够构建无副作用的函数,因此更容易维护具有其他优点的系统。
  15. Vue2.x全家桶的基础知识点整理 再此说明:这篇文章写的很粗糙,这都是我在学习Vue全家桶时写的学习代码,这麽粗那为什么还要写,因为我现在的公司在使用React栈,不太使用Vue,我不想再学习React的时候忘记了Vue,所以想隔段时间就拿出来看看,然后再优化这篇文章,因为这篇文章很基础,技术大佬请点击返回,不用浪费时间。 任何人,没有本人允…
  16. [LeetCode] 7. 整数反转:JavaScript 解法之溢出判断你真的考虑全面了吗? 题目链接: leetcode-cn.com/problems/re… 方法一:数学方法 看到整数反转这个题,最先联想到先对数值取绝对值,然后除十取余以对整数进行反转,之后再考虑是否需要取负数以及数值范围问题。 /** * @param {number} x * @return {number} */ var reverse = function(x) { let result = 0; let value =…
  17. vue生成canvas海报图一个通过 css 属性画 canvas 图片的轻量级的 vue 组件(A lightweight vue components use canvas draw image by css properties.)
  18. 从js讲解时间复杂度和空间复杂度今天有同事在检查代码的时候,由于函数写的性能不是很好,被打回去重构了,细思极恐,今天和大家分享一篇用js讲解的时间复杂度和空间复杂度的博客
  19. vue中的nextTick js的执行是单线程,基于事件循环(event loop),事件循环大致分为以下几个步骤: 所有的任务都会被放到调用栈(call-stack)等待主线程(main thread)执行, 主线程的执行过程就是一个 tick 。 JS调用栈采用的是后进先出的规则,当函数执行的时候,会被添加到栈的顶部,当执行栈执行完成后,就会从栈顶移出…
  20. 浏览器大战与 JavaScript 的诞生 “只要应用能用 JavaScript 编写,那么最后它就会用 JavaScript 编写。”——Atwood 定律,出自 Jeff Atwood 的一篇题为 “最小权力原理” 的博客文章,2007 年 7 月 17 日 浏览器大战 在 Android 设备或 iPhone 流行之前, 浏览器大战 的战场是桌面计算机平台。众多公司投入了数十亿美元投身这场战役,而他们的出发点就…
  21. vue移动端项目中使用fastclick及遇上的issue1、在vue项目中安装fastclick插件 {代码…} 2、在main.js中引入并绑定到body {代码…} 3、在项目中安装fastclick成功后测试会遇到以下问题: os input点击不灵敏 解决方法:vue项目中使用fastclick时ios input…
  22. Babel 你太美。。 Babel 的本意是 “通天塔”。 西方神话故事里,以前的人语言相同,决定建立有个能直达上天的塔,神后面惧怕人们语言相通就打乱它,让他们不能明白对方的意思,并把他们分散到各地。 为了解决上古时代浏览器对新语法不支持、不兼容情况下。发明了 Babel ,能够将 ES6 代码 转为 ES5 代码, 从而在现有环境执行。 安装环境…
  23. 详解Vue服务端渲染所谓服务端渲染就是将代码的渲染交给服务器,服务器将渲染好的html字符串返回给客户端,再由客户端进行显示。
  24. Nodejs监听日志文件的变化 最近有在做日志文件的分析,其中有一个需求:A服务器项目需要用Nodejs监听日志文件的变化,当项目产生了新的日志信息,将新的部分通过socket传输到B服务器项目。socket暂时不做分析。 这个需求很简单,通过分析我们开始撸码吧。 在撸码的过程中还能巩固所学Nodejs的API,何乐而不为呢? 所用的API fs.watchFile() …
  25. TypeScript内置对象内置对象是指根据标准在全局作用域(Global)上存在的对象。这里的标准是指 ECMAScript 和其他环境(比如 DOM)的标准。
  26. webpack打包原理和基本配置 webpack实际上是一个静态模块打包工具 webpack 处理项目时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 打包原理 识别入口文件 通过逐层识别模块依赖。(Commonjs、amd或者es6的import,webpack都会对其进…
  27. 基于 vue-skeleton-webpack-plugin 的骨架屏实战 目前正在做的项目,登录是需要跳转到别人的页面的,导致重定向很多,需要优化一下白屏时间,所以就用到了骨架屏,但是这次用的骨架屏不是自动生成的,还是自己敲的样式,一步步来吧,先从简单的用起 。 先上效果图: 什么是骨架屏 骨架屏,英文 Skeleton screen ,是指在页面开始渲染之前的白屏时间内…
  28. (译文)JavaScript中的执行上下文和执行栈 本文将深入探讨JavaScript中最重要的基础知识之一: 执行上下文 。通过对此篇文章的阅读,对以下几个方面的知识你将会有更加清晰的认识: 解释器的执行机制 为何函数和变量可以在声明前使用以及它们的值究竟是如何确定的 什么是执行上下文? 当代码在JS中运行时,代码的执行环境非常重要,JavaScript中…
  29. Nuxt.js实战和配置 前段时间刚好公司有项目使用了Nuxt.js来搭建,而刚好在公司内部做了个分享,稍微再整理一下发出来。本文比较适合初用Nuxt.js的同学,主要讲下搭建过程中做的一些配置。建议初次使用Nuxt.js的同学先过一遍官方文档,再回头看下我这篇文章。 一、为什么要用Nuxt.js 原因其实不用多说,就是利用Nuxt.js的服务端渲染能…
  30. 超简单实现web音频可视化 这几天想给自己的博客做个音乐播放器,收藏和分享喜欢的音乐,用来在 coding 的时候后台播放,但是想了想除了做个后台之外,前端的东西能做的太少了,于是想到为什么不能做个炫酷歌曲音频可视化呢? 主要思路 获取音频接口,得到音频数据 查阅 Mozilla 找到,web 的 audio API,可以生成音频对象,通过这一接口可以对其操作,…
  31. NodeJs 【加强版】实现跨域WebSocket 即时通讯原生WebSocket API使用起来不太方便,我们使用Socket.io,它很好地封装了webSocket接口,提供了更简单、灵活的接口,也对不支持webSocket的浏览器提供了向下兼容。
  32. 给大家介绍一个自己开发的JavaScript工具库 大家好。今天很高兴能向大家介绍一个全新的JavaScript工具库。它的名字是 webstorage-proxy.js 。这也是我第一次开发JavaScript工具库,期间遇到不少问题,当然更多的是收获。下面由我来为大家分享下这个js库的由来和使用,以及开发过程遇到的问题和总结的经验吧。 WebStorageProxy简介 引入webstorage-proxy.js,w…
  33. WebRTC:一个视频聊天的简单例子在前面的章节中,已经对WebRTC相关的重要知识点进行了介绍,包括涉及的网络协议、会话描述协议、如何进行网络穿透等,剩下的就是WebRTC的API了。
  34. 恕我直言,90% 的应用场景都不需要用 WebAssembly 本文阐述了 WebAssembly 诞生的背景,并从实践案例中分析了 WebAssembly 到底带来了多少性能提升。 背景:从 JavaScript 说起 JavaScript 占据着统治地位,不管是公开还是私有的项目、任何组织、世界任何地区,JavaScript 都是第一。 -GitHub 2018 年度报告 随着 JavaScript 的快速发展,目前…
  35. 深入解析 Node.js 事件循环工作机制 本文从对线程、事件循环、事件循环常见的问题和错误上分别进行说明,进一步探索了 Node 的核心工作原理。 每当人们谈论 Node.js 时,都会出现很多问题,比如它 究竟是什么 、这项技术有什么用、它是否 有未来 等等。 让我们尝试讨论第一部分。回答这个问题最简单的方法是列出 Node 在技术上的许多定义,如: …
  36. 深入理解 call, apply 和 bind(JS) 作者:一像素 链接:https://www.cnblogs.com/onepixel/p/6034307.html 在JavaScript 中,call、apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果。本文将对这三个方法进行详细的讲解,并列出几个经典应用场景。…
  37. 常见数据结构和Javascript实现总结做前端的同学不少都是自学成才或者半路出家,计算机基础的知识比较薄弱,尤其是数据结构和算法这块,所以今天整理了一下常见的数据结构和对应的Javascript的实现,希望能帮助大家完善这方面的知识体系。
  38. 检验原生JS功底的时候到了–纯JS实现贪食蛇 前言 以前读书学习C语言的时候,总是想着要完成贪食蛇这款游戏,但是那时候我的编程基础和编程思维还不够扎实和成熟,所以导致怎么折腾都写不出来,但是现在工作了,就想着要完成读书时候的小心愿,就开始动手写了,写着写着,就还真是写出来了,哈哈,看来我也是成长了不少。。。 贪食蛇这款游戏,相信大家一定都不…
  39. JavaScript变量定义和作用域的可视化指南(入门级) 我们常讨论var,let和const之间的作用域的差异。但更多的时候,我看到不少初学者仍然在尝试着理解这个观点。我认为这可能是因为这个概念很少被可视化。 让我们一起来看一看。并不是所有的作用域看起来都是一样的。 注意:我并不建议大家死记作用域变量定义和每种类型的作用域的值可见性规则。相反,你们可以试着找…
  40. Vuestic Admin:免费与美妙 Vue.js 管理模板 English | 简体中文 | 日本語 Vuestic Admin 免费与美妙Vue.js管理模板包括38以上个定制用户界面组件 由Epicmax开发。 由Vasili Savitski设计 演示版 | 文档 安装 首先确定ni安装所有的先决条件: Node.js (>=8.9…
  41. 前端硬核面试专题之 CSS 55 问前言 本文讲解 55 道前端面试的 CSS 的内容。 复习前端面试的知识,是为了巩固前端的基础知识,最重要的还是平时的积累! 注意:文章的题与题之间用下划线分隔开,答案仅供参考。 笔者技术博客首发地址 GitHub,…
  42. CSS 是如何影响浏览器元素在文档中的排列 之前在项目的过程中遇到了一个问题,某个div希望始终显示在最上面,而在之后的元素都显示在它之下,当时设置了z-index也没有效果,不知道什么原因,因此找了一下CSS相关资料,解决了这个问题的同时,也学习了很多知识,特此和大家分享一下。 屏幕是一个二维平面,然而 HTML 元素却是排列在三维坐标系中,x为水…
  43. js函数this理解?手写apply、call、bind就够了函数的内部属性,this引用的是函数据以执行的环境对象。也就是说函数的this会指向调用函数的执行环境。
  44. js中的二叉树以及二叉搜索树的实现及应用 接下来让我们一起来探讨js数据结构中的树。这里的树类比现实生活中的树,有树干,树枝,在程序中树是一种数据结构,对于存储需要快速查找的数据非有用,它是一种分层数据的抽象模型。一个树结构包含一系列存在父子关系的节点。每个节点都有一个父节点以及零个或多个子节点。如下所以为一个树结构:) 和树…
  45. React Native 性能优化指北 React Native性能优化指北 译注: 本文并没有详细的介绍具体的性能优化做法,作者给出的是一系列方法,需要我们自己根据实际情况,去采纳有用的一些点。 原文链接: https://blog.usejournal.com/getting-started-optimizing-a-react-native-app-1d7507c2d849 过去这一年,我都在持续地对一个业…
  46. React Hooks 入门React Hook 是React16.8提出来的一个新特性,其意义就在于我们可以让函数组件变得跟类组件一样有能力管理自己的状态,这意味着我们以后写的所有组件都可以是Function,对于初学者来说降低了学习成本(压根不用管t…
  47. nodejs selenium自动登录并且更新pages 上次文章留了个尾巴,免费版的码云gitee pages更新文件后,不会自动重新部署,只有pro版才支持。于是思考怎么自动更新网站。 travis部署github和gitee码云 没想到又一番折腾开始:sob: 思路 为了自动更新gitee pages,需要模拟用户登录后点击pages页面的“更新”按钮。 有2种方式: 抓包看登录、…
  48. 七个即将列入规范的JavaScript提案功能,以后肯定有用得到的 今天看到一个文章,说node12&chrome中7个新的提案功能。 如果在这里发表了这个文章有侵权嫌疑,请告知删除此文 我看了下,有几个肯定用的到,甚至还有 ?. ,玩ruby的同学是不是觉得很熟悉( &. )。 以下是看到的文章的 原文 。 JavaScript(或ECMA script)是一种不断发展的语言,有许多关于如何更好发…
  49. Vue.js 在复杂信息流场景下的实践 经常做业务的前端同学肯定遇到过这样的业务场景: 常见的 hybird 页面 常见的 UGC 类的 PC 网页 这类页面都会 承载着多个信息流列表 ,本文就针对这类复杂信息流页面进行梳理,给出我在做了无数次这类页面后的最佳实践总结。 你可以直接戳这个地址查看最终 demo 效果 (请在手机模式…
  50. 为什么会出现React Hooks?原文:[链接] 译者:前端技术小哥当你要学习一个新事物的时候,你应该做的第一件事就是问自己两个问题 1、为什么会存在这个东西? 2、这东西能解决什么问题? 如果你从来没有对这两个问题都给出一个令人信服的答案…
  51. 【源码解析】vue-create-api作者黄轶 在 README.md 中这样介绍的, 一个能够让 Vue 组件通过 API 方式调用的插件 。( vue-create-api 源码地址 ) 安装使用 目前提供两种安装,通过 npm install vue-create-api , 或者引入js静态资源文件。 在 README.md 中提供了使用示例,如下: import CreateAPI from ‘vue-create-api’ Vue.use(CreateAPI) V…
  52. 公网搭建 GitLab 安全拾遗 在公网搭建的 GitLab 频频遇到安全挑战,然而其实只需要做一两个简单的动作,维护成本就能够大大降低,并且还能避免未被许可的内容,被搜索引擎爬虫暴露的到处都是。 本篇文章,我们就来聊聊公网搭建的 GitLab 代码仓库的安全小细节。 写在前面 公网搭建 GitLab ,常见的攻击面主要…
  53. 如何实现 React Table 固定列、固定表头前段时间在研究并实现了如何实现表格的固定列(fixed column)功能,这里记录了思路和细节表格控件比较复杂,应用场景也很多,需要各种数据展示、统计、操作等特性
  54. webpack chunk相关分享 前端页面效果越来越酷炫、功能越来越复杂 而前端工程师们为了更方便的开发提高开发效率进行了一系列de探索 模块化思想的提出啊 将复杂的程序分割成更小的文件 这些年优秀的框架层出不穷react vue angular es6这种在javascript基础上拓展的新的语法规范 less sass css处理器等等等 所有的事物都是具有双面性的 有利有…
  55. AntdSite – 一个基于Ant Design和GatsbyJs的文档生成器AntdSite(Ant Design Of Site) 是一个基于Ant Design,由GatsbyJs驱动的一个网站生成器 (你可以完全不会这两项技术,只需要会 markdown 的基础知识,然后简单配置,就能搭建一个网站。当然,如果你会这两项技术那…
  56. 用纯 JavaScript 撸一个 MVC 程序我想用 model-view-controller 架构模式在纯 JavaScript 中写一个简单的程序,于是我这样做了。希望它可以帮你理解 MVC,因为当你刚开始接触它时,它是一个难以理解的概念。
  57. 页面可视化搭建工具技术要点》页面可视化搭建工具, 是互联网公司中常见的运营工具, 实现了运营人员快速生成和发布页面, 提升页面上线效率; 且无需开发人员介入, 节省开发人力。 (by 陈韩杰)

    页面可视化搭建工具技术要点
  58. 基于golang的koa: 一个基于中间件的web框架goa koajs 相信绝大部分使用nodejs的开发者都知道 koa ,甚至每天都在跟koa打交道。 goa 最近因工作需要从nodejs转到go,因此开发了一个koa for golang的web框架–goa。 几乎一样的语法,一样基于中间件。 github地址: goa demo: package main import ( "fmt" "time" "github…
  59. 玩转webpack之loader开发 前言 webpack提倡一切皆模块,所有类型的文件都可以经过文件加载器处理变成我们可加载的模块,那么这个文件加载器便是loader。 那么我们如何开发一个webpack loader呢,让我们一起探索探索吧~ 一、loader执行顺序 在开发loader之前,我们先了解一下webpack loader的执行顺序。 webpack是支持loader的链式调用的,即…
  60. Fastjson 安全漏洞原理简析 近期爆出的fastjson低版本(<=1.2.47)的安全漏洞,在修复上线之后简单的对其原理做下分析。 开篇前先说下这次漏洞的修复方案跟测试相关的内容: 1.  方案一:升级 fastjson 的版本,最新版本是1.2.582.  方案二:使用其它序列化技术如: fastxml jackson,gson,时间成本较大,建议先修复问题,后续作为…

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

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


关注我

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

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

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