如何构建可伸缩的 Web 应用？；Vue中的$attrs 爷孙传值；临近2020，如何让前端工作得到尊重？；2020 前端智能化趋势：TensorFlow.js 生态；如何进行 web 性能监控？；JS原生实现连续滚动文字；JavaScript引擎可视化；开源服务器监控解决方案，基于 Spring Boot + bootstrap 开发，对标业内 Zabbix 等
-
如何构建可伸缩的 Web 应用？ 为什么要构建可伸缩的Web应用？ 想象一下，你的营销活动吸引了很多用户，在某个时候，应用必须同时为成千上万的用户提供服务，这么大的并发量，服务器的负载会很大，如果设计不当，系统将无法处理。 接下来发生的就是，随机错误、缓慢的内容加载、无休止的等待、连接断开、服务不可用等问题。 …
-
Vue中的$attrs 爷孙传值所谓的$arrts其实就是多级组件中的props，它就像一个中间件，用来传递爷组件给孙组件的数据，使用的时候只需给父组件中的孙组件配置v-bind=”$attrs”,然后再爷组件中传入孙组件所需要的数据，孙组件正常接收即可。…
-
临近2020，如何让前端工作得到尊重？ 下面有个高赞回答：「 想要尊重，题主就得去那些会被前端决定生死的公司。你可以找找什么软件一旦变丑或者操作渲染出bug就会导致客户退钱，然后就去那干 。」 赞同之余，小刘也顺便补充一下我的看法： 哥们，看问题，要懂得透过现象看本质。 「如何让前端开发得到尊重」，隐藏在这个问题下面的内在诉求是， 如何在…
-
2020 前端智能化趋势：TensorFlow.js 生态 hi，大家好~我是shadow，一枚设计师/全栈工程师/算法研究员，目前主要研究方向是人工智能写作和人工智能设计，当然偶尔也会跨界到人工智能艺术及其他各种AI产品。 前端开发有哪些新的智能化趋势呢？今天重点整理tensorflow.js相关的内容。有非常多的基于tensorflow.js二次封装的js库，比如face-api.js、ml5.js等…
-
如何进行 web 性能监控？ 也许你有听过一个问题，你这款 web 应用性能怎么样呀？你会回答什么呢？是否会优于海量 web 应用市场呢？本文就来整理下如何进行 web 性能监控？包括我们需要监控的指标、监控的分类、performance 分析以及如何监控。但是，如何进行 web 性能监控本身是一个很大的话题，文中只会侧重一部分进行研究，某些内容不是很全面…
-
JS原生实现连续滚动文字 前言：最近在工作中遇到，文字在大屏中，出现底部有留白导致不连续的现象，很奇怪，故写这篇文章细究其原因 关键字： offsetTop scrollTop offsetHeight 首先贴个效果图 来看下代码怎么做到的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or…
-
JavaScript引擎可视化 JavaScript很酷，但是计算机如何才能理解我们编写的代码？作为JavaScript开发人员，我们不必自己处理编译器。但是，一定要了解JavaScript引擎的基础知识，看看它是如何将我们编写的代码转换为机器可以理解的东西的！ 注意：这边文章主要是针对基于V8引擎的Node和Chromium 复制代码 HTML 解析器遇到 script 标签时，…
-
开源服务器监控解决方案，基于 Spring Boot + bootstrap 开发，对标业内 Zabbix 等 README.md WGCLOUD-v2.1 核心模块包括：服务器集群监控，ES集群监控，CPU监控，内存监控，数据安全监控，服务心跳检测。 1.采用服务端和客户端协同工作方式，更轻量，更高效，可支持数百台服务器在线监控。 2.server端…
-
JS禁止打开控制台浏览宽高变化监测主要是监测浏览器可视区域的宽高：window.innerWidth / window.innerHeight（滚动条和内容区）和浏览器宽高：window.outerWidth / window.outerHeight（inner的基础上加上工具条的宽高）之间的差…
-
JS 中为啥使用 JSON 来代替简单对象会更快？ 什么是简单对象？ 在 JavaScript 中，我们可以直接使用一对大括号来定义一个简单对象，比如： const obj = { foo: ‘hello world’, bar: { baz: , }, }; 复制代码 这产生了一个简单对象，并将其作为常量 obj 的值。这个简单对象包含了 foo 和 bar 两个字段，其中 foo …
-
【webpack】你所不知道的sourceMap 通常，js代码出错，控制台会提示第几行第几列代码出错。但是 webpack 打包压缩后的代码，都被压缩到了一行，变量也变成了a,b,c,d。代码出错，控制台就没法正确的提示错误位置。 sourceMap 就可以解决这个问题。 sourceMap 就是一个信息文件，里面储存着打包前的位置信息。也就是说，转换后的代码的每一个…
-
前端工程师2019年总结 前端实习生2018年总结，这是我去年的总结。 最近换了工位，公司整个事业群的工位都要变动，坐在新的工位看着对面的联想，建筑下面的背阴处还有北京前段时间的雪还没化完，忽然意识到， 2019，结束了 。 19届应届生，双非大学，毕业半年。 本文是对自己2019年的回顾与总结。 毕业 上半年面临毕业设计、论文…
-
迄今为止，大前端各种多终端、跨端解决方案合集迄今为止，大前端各种多终端、跨端，解决方案合集 注：热度排名不分顺序，如还有其他的可在评论区评论，有空加上 Google：[链接] FaceBook：[链接][链接] 阿里巴巴：[链接] 腾讯：[链接][链接] 京东：[链接] 滴滴…
-
动图学 JavaScript 之：事件循环（Event Loop）我们都知道 JavaScript 是一门 单线程 的语言：同一时间只能运行一个任务。通常情况下这没什么问题，但是如果你有一个任务需要耗费 30 秒的时间，那其他任务难道都要等它 30 秒么？（由于 JS 运行在浏览器的主线…
-
微前端时代思考与实践 今天是12月31号，算上掘金推送的时差，就提前跨年了，祝大家元旦快乐，新的一年，我不祝你一帆风顺，我祝你乘风破浪。 前言 技术和架构方案不同，技术可以凭空出现突然爆火没有征兆。但方案或架构一定是为了解决某个问题而出现的，实践之前，请务必先要去搞清楚它是否可以解决当前问题，再者调研是否适合团队，考虑…
-
抓紧面试前的宝贵时间 快速搞定前端初级JavaScript面试 第1章 课程介绍【说说面试的那些事儿】 本章会出几个面试题，分析每道题目设计的知识点，然后总结出一个完整的知识体系。让我们开始 “题目->知识点->解题” 的快乐之旅吧。 第2章 JS基础-变量类型和计算【不会变量，别说你会JS】 本章介绍变量的类型和计算的知识点和题目，包括值类型和引用类型区别，类型判…
-
webpack原理解析（一）实现一个简单的webpack Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。webpack如此强大，其内部机制到底是怎样的，今天我们来一探究竟。 准备工作 新建一个目录，执行npm init -y 初始…
-
一周 GitHub 开源项目推荐：12306、腾讯、美团点评、陌陌 一周 GitHub 开源项目推荐 点击链接或图片即可阅读 喜欢请分享到朋友圈哦 12306 购票助手，支持集群、多账号、多任务购票以及 Web 页面管理 功能 多日期查询余票 自动打码下单 用户状态恢复 电话语音通知 …
-
前端获取各种宽高window.innerHeight：浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。
-
使用面向对象风格开发一个简单的贪吃蛇HTML5小游戏 基于面向对象编码风格的贪吃蛇 HTML5 小游戏的开发教程。这里实现的贪吃蛇可以穿墙。 代码 源码地址： https://github.com/F-star/html5-game 示例链接： https://f-star.github.io/html5-game/snake/ 模块设计 之所以使用了面向对象的风格去开发这个游戏，主要是为了让代码更加可扩展。但相比面向过程…
-
前端多语言编译处理解决方案, 支持Vue, React, Angular, TypeScript 基于webpack4 AST分析多语言生成插件, 支持Vue, React, Angular 自动管理语言配置, 在编译期后直接生成多语言拆分, 无需在客户端重新渲染 项目打包后根据配置的多语言数量生成多分具有单一语言的文件. 例如使用zh-cn, en则最后输出将会有 /dist/zh-cn /dist/en 复制代码 :clap::clap:安装 npm install webpack …
-
前端工程化的一些设想 最近几年前端工程化这个事情随着模块化标准（曾经的事实标准 commonjs，今天的 ES Module）的落地和工具链的成熟，大家普遍都在采用一体化的策略来完成工程从构建到发布的过程。 以我在外网的一些观察，以及自己曾经参与过的 IDE 项目的经历，今天就斗胆说一说自己的设想。 …
-
StateofJS：2019年JavaScript生态圈报告出炉 最近，一年一度的The State of JavaScript发布了最新的调查报告，这份报告收集了来自超过20000名工程师的反馈问卷，所以这份报告对于了解过去一年的JavaScript生态圈的情况非常有参考意义，可以帮助到你了解到哪些技术是未来的趋势，哪些技术是明显的坑。 在这篇文章，我会总结这份报告的精华部分和未来趋势，同时提供…
-
React Hooks 底层解析 原文：https://medium.com/the-guild/under-the-hood-of-reacts-hooks-system-eb59638c9dba 对于 React 16.7 中新的 hooks 系统在社区中引起的骚动，我们都有所耳闻了。人们纷纷动手尝试，并为之兴奋不已。一想到 hooks 时它们似乎是某种魔法，React 以某种甚至不用暴露其实例（起码没有用到这个关…
-
实战精髓，项目级登录鉴权方案及权限跳转【Node vs Vue】 不管是企业项目，还是个人项目，一个优秀的系统必须具有鉴权的能力，何为 鉴权 ，是指验证用户是否拥有访问系统的权利。 前端鉴权的方式也很多，例如 HTTP Basic Authentication 、 session-cookie 、 OAuth（开放授权） 、 JWT ··· 本章通过 node.js vue 为框架，模拟出一套较为完整的前…
-
分享 GitHub 上有趣的开源项目（第 45 期） 兴趣是最好的老师，HelloGitHub 就是帮你找到兴趣！ 简介 分享 GitHub 上有趣、入门级的开源项目。 这是一个面向编程新手、热爱编程、对开源社区感兴趣 人群的月刊，月刊的内容包括：各种编程语言的项目、让生活变得更美好的工具、书籍、学习笔记、教程等，这些开源项目大多…
-
Vue2.0源码阅读笔记（十）：指令 指令是带有 v- 前缀的特殊特性，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。 Vue2.0 内置了形如v-bind、v-on等指令，如果需要对普通 DOM 元素进行底层操作还可以使用自定义指令。 一、自定义指令 在 Vue2.0 中，可以通过自定义指令对普通 DOM 元素进行底层操作。一个指令定义对象可以提供…
-
【vue-进阶】你不知道的 vue-devtools vue-devtools 使用了很长一段时间了，使用过程中发现 vue-devtools 下的 vuex 面板功能很厉害，整个页面的状态可以任意切换到之前的一个时间节点，当时只知道时光穿梭这个概念，没有仔细研究，最近决定入坑研究下。 记的之前有个Vue项目的线上bug，因为是线上项目，不能直接使用 vue-devtools 来排查问题，经过探索…
-
窥探原理：手写一个 JavaScript 打包器 前言 之前好友希望能介绍一下 webapck 相关的内容，所以最近花费了两个多月的准备，终于完成了 webapck 系列，它包括一下几部分： webapck 系列一：手写一个 JavaScript 打包器 webpack 系列二：所有配置项 webpack 系列三：优化 90% 打…
-
Nodejs调用百度AI接口实现人脸识别 百度AI提供了非常强大的AI接口，可以非常容易实现诸如图片识别，语音识别，文字识别，人脸识别等功能。 下面以人脸识别为例，说明下如何通过Nodejs调取百度AI接口，实现识别人脸的位置、年龄、性别、颜值、情绪等信息。 1. 项目创建 首先使用Express的脚手架创建一个项目。 对于Express不熟悉的同学可以先看看这篇…
-
Javascript事件系统 本文内容 事件基础 事件监听方式 事件默认行为 事件冒泡与事件捕获 事件绑定与事件委托 事件基础 注意：本文不会深入探究Javascript的事件循环。 提到事件，相信每位Javascript开发者都不会陌生，由于Javascript是先有实现，后有规范，因此，对于大部分人来说，事件模块可以说是比较模糊的，本文将从…
-
前端递归思想（禁止套娃） 所谓递归，就是在程序中函数直接或间接地调用了自己，听起来好像会导致无限重复，但只要定义适当，就不会这样。一般来说，一个递归函数的定义有两个部分。首先，至少要有一个底线，就是一个临界条件，越过此处，则递归 那么如何写出递归呢，无非分以下几步： 写出递归公式 找到临界条件 举个:chestnut: Fibon…
-
vue源码解读（一）Observer/Dep/Watcher是如何实现数据绑定的最近在学习vue和vuex的源码，记录自己的一些学习心得。主要借鉴了染陌同学的《Vue.js 源码解析 》 和DMQ的mvvm。前者对vue和vuex的源码做了注解和详细的中文doc，后者剖析了vue的实现原理，手动实现了mvvm。
-
vue知识点归纳与总结(笔记)当前总结是本人在业余学习与实践过程后的总结与归纳,旨在检验自己的积累,也方便忘记时查阅,同时也希望能帮助那些这方面知识匮乏的同行门,总结是基于vue2.x,vue-cli3.x,主要记录些，vue常用的指令、事件，监听、数…
-
JavaScript 原型与原型链以及继承方式 ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么，假如我们让…
-
Object.freeze()提高Vue.js中大型列表的性能【翻译+解读】 文章链接： vuedose.tips/tips/improv… 这个网站主打，简洁快速的分享一些关于Vue的tips。每周更新，会发到邮件上。正文是翻译，解读是我自己的相关理解。 正文 在开发过程中，我们经常需要获取一些对象，像 users 信息，列表 items ，文章信息等等，但是我们不需要去修改这些信息。我们只是把这些信息展示出来…
-
爬虫很火？教你用大前端神器写一个热榜聚合站 不知大家有没有这种体验，为了知道最近发生了些什么热点事件，我们一次次 打开 、 切换 微博、知乎、各大社区、新闻站点……简直 累的不要不要 的，可作为程序员的我们怎么可以允许这么累自己呢？能用程序搞定的事就不要劳烦自己的双手啦：） 今天我们就来学习一下 怎么写一个热榜聚合 站(目测很火，很多朋友在做这种…
-
Vue的watch中的immediate与watch是什么意思immediate设为true后，则监听的这个对象会立即输出，也就是说一刷新页面就会在控制台输出，当然此时页面上的数据我们还没来得及手动让其发生变化，所以在控制台输出的newValue为我们在代码中默认设置的值，oldVal…
-
JavaScript 和 Node.js 中的“事件驱动”是什么意思？作者：Valentino Gagliardi翻译：疯狂的技术宅 原文：[链接] 未经允许严禁转载 事件驱动和发布-订阅 事件驱动架构是建立在软件开发中一种通用模式上的，这种模式被称为发布-订阅或观察者模式。 在事件驱动架构中…
-
开源 Web 前端导航 README.md fronted navigation frontend.microdba.com How to contribute? Contributions are welcome! Fork this reponsitory If you want add some website to this, just edit/asse…
-
收藏的关于Vue技巧or实践的文章刚开始学vue的时候用的是全家桶里的vue-resource，后来发现axios延展性更强。这篇文章简单梳理了axios的API，简洁清晰明了。
-
webGL（ThreeJS）入门1 1、前言 最近闲啊，快闲了两个月了。估计要一直闲到年底去。 最近三个星期吧，都是在学习中。先学了react，等自己搭建起基本的脚手架模型了就不想写了。总感觉写到后面也就和vue差别不大了。 然后学c++，学了个基础，学完了指针和构造函数。发现我学C++暂时没有什么收益。虽然比较受用。而且对方教程很好。但是心中慢…
-
使用Webpack对CSS文件进行单独打包有的CSS属性需要对不同的浏览器加上前缀，尤其在写CSS3动画代码时，原本只需要5-6行的代码，而针对不同浏览器却要写上10-20行的代码，代码量直接翻了几倍，不仅增加了开发成本，还会打断开发思路，甚至遗漏部分代…
-
寒冬下 Scott 的 31 岁前端年终总结 Scott 这个名字或许你听说过，对，他就是我，他今年初过了 31 岁生日，而立的第二年也即将用完。 10 年编程好时光，他花掉了前 9 年： 23 到 26 岁，他花在了阿里，从入门到职业迷茫 27 到 29 岁，他花在了创业，从热血到倒闭还钱 30 到 31 岁，他花在了小菜，从转型到…
-
es6Module与CommonJS模块化是指在解决某一个复杂问题或者一系列的杂糅问题时，依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理，可维护性更高的可管理的模块的方式。
-
是时候展现真正的JS数组去重技术了 在掘金上每过一段时间就会出现一次题材相似的讨论，例如面试，手写函数，而此题材也不例外——数组去重。我看到过论坛上出现过的一次次的数组去重的文章，但是个人觉得可能都不太完善，所以，我期望尝试对 JS 数组去重进行一次 “系统性” 的总结。 资料 4 种 JavaScript 中的相等性判断规则 lodashjs 的默认…
-
聊一聊 Node.js 错误处理 软件程序中， 我们可以将错误大致分为外部错误和内部错误两大类 。 外部错误是正确编写的程序在运行时产生的错误。它并不是程序本身的 bug，更多是一些外部原因导致的问题，比如请求超时、服务器返回 500、内存不足等。 而内部错误是程序里的 bug。比如传参类型错误、读取 undefined 的一个属性等。这类问题跟你选…
-
React Fiber 的优先级调度机制与事件系统 经典的事件系统分成两大块，绑定事件与分派事件，在浏览器中，分派事件很少人会直接dispatchEvent。因为创建一个DOM 事件是非常复杂的事情，不同的事件对象对应不同的事件构造器，传参也五花八门。因为分派事件基本上用户行为触发，比如我们点击了某个元素，恰逢在这上方绑定了点击事件，于是触发了。 React的绑定…
-
原生JS事件委托的应用 大晚上，等方案，年底了，顺便传一篇总结，主要是第三部分，事件委托的应用。 一、fragment的使用 元素增加或者刷新后，能否被原addeventLister监听到–> 不能； 前者页面只重排一次，后者页面重排了100次；所以若遇到大模块添加dom时，最好使用fragment; appengChild 只能添加Dom元素,不能是文本形式的…
-
CSS 定位之 sticky 定位及应用 CSS 有两个最重要的基本属性，前端开发必须掌握：display和 position。 display 属性指定网页的布局：flex 和网格布局 grid。本文介绍非常有用的 position 属性的 sticky 定位。 position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。 …
-
由/(w+)s(w+)/ 而感，一篇道尽js中的正则表达式 类别: 正则表达式 博客: blog.csdn.net/qtfying 掘金: juejin.im/user/577399… QQ: 2811132560 邮箱: qtfying@gamil.com 上面的这个正则表达是很简单，但是在谈这个问题之前呢，我还是想聊聊正则表达式，一来呢，增加文章的可读性，二呢，也能帮助读者循序渐进，更好的过渡和理解 正则基础 创建…
-
vue实例化都干了什么 本文将结合例子进行一步步讲解，例子也会从简单到复杂逐步提升，这样理解的更深刻 <div id="app"></div> 复制代码 const app = new Vue({ template: ‘<div>child</div>’, }) app.$mount(‘#app’); 复制代码 创建实例 首先先调用 new Vue 创建了一个实例，在 core/instanc…
-
由/(w+)s(w+)/ 而感，一篇道尽js中的正则表达式 类别: 正则表达式 博客: blog.csdn.net/qtfying 掘金: juejin.im/user/577399… QQ: 2811132560 邮箱: qtfying@gamil.com 上面的这个正则表达是很简单，但是在谈这个问题之前呢，我还是想聊聊正则表达式，一来呢，增加文章的可读性，二呢，也能帮助读者循序渐进，更好的过渡和理解 正则基础 创建…
-
2020年的前端资源 webpack – 打包项目 rollup – 打包 npm 库 parcel – webpack 竞品，但发展前景不乐观，再观察一段时间 @pikapkg/pack – 又一组件打包工具 systemjs – 针对一些特殊场景会比较有用，比如云 ide，支付宝小程序 IDE 等 microbundle …
-
基于 HTML5 + WebGL 的无人机 3D 可视化系统近年来，无人机的发展越发迅速，既可民用于航拍，又可军用于侦察，涉及行业广泛，也被称为“会飞的照相机”。但作为军事使用，无人机的各项性能要求更加严格、重要。本系统则是通过 Hightopo 的 HT for Web 产品…
-
Vue3 Composition-Api + TypeScript + 新型状态管理模式探索 Vue3的热度还没过去，React Hook在社区的发展也是如火如荼。 一时间大家都觉得Redux很low，都在研究各种各样配合hook实现的新形状态管理模式。 在React社区中，Context + useReducer的新型状态管理模式广受好评。 这篇文章就从Vue3的角度出发，探索一下未来的Vue状态管理模式。 vue-composition-api-rfc： vue-…
-
【动画演示】JavaScript 引擎运行原理JavaScript 很酷，但是 JS 引擎是如何才能理解我们编写的代码呢?作为 JS 开发人员，我们通常不需要自己处理编译器。然而，了解 JS 引擎的基础知识并了解它如何处理JS代码，并将其转换成机器能够理解的东西，绝对…
-
打造 Vue 技术栈中的“时间宝石“ 现代浏览器的功能越来越强大，前端需要处理的业务逻辑也越来越复杂，提供良好的交互是我们一直追求的事，而我们在做的可视化报表工具，有一个重要的提升用户体验的功能， 撤销 & 重做 ，这个功能给用户以安全感和保障，用户不会担心所做的操作以及交互会消失掉，不可追溯。 为了实现这个功能，我调研了一些实现…
-
从0到1，手写webpack的开发之路 今天就是2019的最后一天，提前祝大家元旦快乐， 这几年一路走来略有心得，从了编程，也不能荒废了爱写作的手艺，所以平时有空会写点文章，关于自己的职场、人生经验之谈。 今天发表下自己对手写webpack的见解（如有不对，欢迎评论交流） 若不是生活所迫，谁会把自己弄的一身才华。 正文 …
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
