基于vue的海量数据tree组件(20w+)；开源 | 12306 购票助手，支持集群、多账号、多任务购票以及 Web 页面管理；JavaScript进阶-内存机制(表情包初探)；前端面试必备 | 5000字长文解释千万不能错过的原型操作方法及其模拟实现（原型篇：下）；Vue中的$attrs 爷孙传值；JavaScript 那些写出来会被同事揍的骚操作；JS原生实现连续滚动文字；Vue 原生右键菜单组件
-
基于vue的海量数据tree组件(20w+) elementUI 里的 tree 组件在数据量为 1k+ 的的时候卡顿。 没有找到基于 vue 的海量(20w+) tree 插件。 1. 为啥卡顿。 简单分析说下为啥卡顿( 具体查看参考文章 )： elementUI 递归实现 tree，dom 量大。 海量的 data 会被依赖收集，内存开销大，会卡顿，甚至提示内存不足浏览器奔溃。 2. 实现方案 …
-
开源 | 12306 购票助手，支持集群、多账号、多任务购票以及 Web 页面管理 免费加入「头条君的圈子」 项目介绍 功能 多日期查询余票 自动打码下单 用户状态恢复 电话语音通知 多账号、多任务、多线程支持 单个任务多站点查询 分布式运行 Docker 支持 …
-
JavaScript进阶-内存机制(表情包初探) 距离上一次更《 JavaScript 进阶系列》的文章已经一个月了, 抱歉请原谅我最近工作是有那么点小忙:sweat_smile:, 而且主要是去写 《全网最详bpmn.js教材》 系列了. 并不是我三心二意哈:flushed:, 而是想着自己在捣鼓 bpmn.js 这东西的时候累死累活的, 所以捣鼓完之后就急切的想出一系列教材来降低大家的 脱发率 … …
-
前端面试必备 | 5000字长文解释千万不能错过的原型操作方法及其模拟实现（原型篇：下） 这篇文章主要讲解原型的查找、变更、判断和删除，附带着对原型的作用方式做一下回顾。 instanceof instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。 即通过下面的操作来判断： object.__proto__ === Constructor.prototype ? object.__proto__.__proto__ === Constr…
-
Vue中的$attrs 爷孙传值所谓的$arrts其实就是多级组件中的props，它就像一个中间件，用来传递爷组件给孙组件的数据，使用的时候只需给父组件中的孙组件配置v-bind=”$attrs”,然后再爷组件中传入孙组件所需要的数据，孙组件正常接收即可。…
-
JavaScript 那些写出来会被同事揍的骚操作 曾经，我接手了一份大佬的代码，里面充满了各种“骚操作”，还不加注释那种，短短几行的函数花了很久才弄懂。 这世上，“只有魔法才能对抗魔法”，于是后来，翻阅各种“黑魔法”的秘籍，总结了一些比较实用的“骚操作”，让我们装X的同时，提升代码运行的效率（请配合健身房一起使用）。 正文 位运算 …
-
JS原生实现连续滚动文字 前言：最近在工作中遇到，文字在大屏中，出现底部有留白导致不连续的现象，很奇怪，故写这篇文章细究其原因 关键字： offsetTop scrollTop offsetHeight 首先贴个效果图 来看下代码怎么做到的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or…
-
Vue 原生右键菜单组件vue-contextmenujs Vue 原生实现右键菜单组件, 零依赖 项目地址 [链接] 在线演示 快速安装 npm 安装 {代码…} CDN {代码…} 使用 测试中使用的是element-ui图标 {代码…} {代码…} 参数说明 Menu 属性 描述 …
-
临近2020，如何让前端工作得到尊重？ 下面有个高赞回答：「 想要尊重，题主就得去那些会被前端决定生死的公司。你可以找找什么软件一旦变丑或者操作渲染出bug就会导致客户退钱，然后就去那干 。」 赞同之余，小刘也顺便补充一下我的看法： 哥们，看问题，要懂得透过现象看本质。 「如何让前端开发得到尊重」，隐藏在这个问题下面的内在诉求是， 如何在…
-
Vue如何实现双向绑定(上) Vue的双向绑定特性一直广受人们欢迎，但是大家知道实现双向绑定的原理吗？这篇文章将给大家介绍实现双向绑定的原理。 原文戳我 为什么会出现MVVM 什么是MVC MVC即Model-View-Controller的缩写，就是模型-视图-控制器 , 也就是说一个标准的Web 应用程序是由这三部分组成的。 Model：管理数据。 V…
-
web端嵌入界面的常用方法 前言：最近遇到一个大屏嵌入云词图的场景，所以写篇文章记录下，你都遇到了哪些嵌入页面的方法，可以评论区探讨 场景 大屏上某一块区域，展示动效的云词图，云词图内容可以通过数据请求获取 方法 在对应的模板中嵌入脚本，脚本像这样 <script type="text/javascript"> function getInnerH…
-
前端多语言编译处理解决方案, 支持Vue, React, Angular, TypeScript 基于webpack4 AST分析多语言生成插件, 支持Vue, React, Angular 自动管理语言配置, 在编译期后直接生成多语言拆分, 无需在客户端重新渲染 项目打包后根据配置的多语言数量生成多分具有单一语言的文件. 例如使用zh-cn, en则最后输出将会有 /dist/zh-cn /dist/en 复制代码 :clap::clap:安装 npm install webpack …
-
TS in JS 实践指北 不知道有多少 TS 爱好者哀叹过这个问题：虽然我很想用 TS，奈何老大只让用 JS。今天我，告诉你，在 JavaScript 中也可以很流畅的使用 TypeScript ，而且你的老大不会找你的麻烦。 写在前面 往期文章：《ts安利指南》 很多同学在看了《ts安利指南》后，评论说道："TS 虽然香，奈何我们老大没兴趣…
-
从实现讲解vue的原理 首先我们上一张图 由图可知,MVVM是由两大块构成， Observer 劫持监听响应式 以及 Compile 指令解析。 下面我们就从这两方面来组合实现Vue。 响应式 Observer的实现 class Vue { constructor(options) { this.$options = options this.$data = options.data this.observ…
-
我们如何抛弃了 Redux 而选用 MobX 在 Skillshare 我们拥抱改变；不仅因为把它写在公司的前景宣言中很酷，也因为改变确实有必要。这是我们近期将整个平台迁移至 React 并利用其所有优势这一决定背后的前提。执行这个任务的小组仅仅是我们工程师团队的一小部分。尽早做出正确的决定对于让团队其他成员尽可能快而顺畅地切换平台来说至关重要。 顺畅的开发…
-
前端工程化下一站: IDE “我们期望能通过 IDE 项目，凝聚合力，形成生态环境，借助集体的力量，一步一个脚印迭代完成从轻量级研发到主要研发模式的逐步替换，形成未来日常工作的基础设施。”
-
实战精髓，项目级登录鉴权方案及权限跳转【Node vs Vue】 不管是企业项目，还是个人项目，一个优秀的系统必须具有鉴权的能力，何为 鉴权 ，是指验证用户是否拥有访问系统的权利。 前端鉴权的方式也很多，例如 HTTP Basic Authentication 、 session-cookie 、 OAuth（开放授权） 、 JWT ··· 本章通过 node.js vue 为框架，模拟出一套较为完整的前…
-
StateofJS：2019年JavaScript生态圈报告出炉 最近，一年一度的The State of JavaScript发布了最新的调查报告，这份报告收集了来自超过20000名工程师的反馈问卷，所以这份报告对于了解过去一年的JavaScript生态圈的情况非常有参考意义，可以帮助到你了解到哪些技术是未来的趋势，哪些技术是明显的坑。 在这篇文章，我会总结这份报告的精华部分和未来趋势，同时提供…
-
JS跳出循环的三种方法(break, return, continue) break语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch语句。 由于它是用来退出循环或者switch语句的, 所以只有当它出现在这些语句的时候, 这种形式的break语句才是合法的。 如果一个循环的终止条件非常复杂, 那么使用break语句来实现某些条件比用一个循环表达式所有的条件容易得多。 for(let i …
-
Vue的组件通信之Provide与Inject机制 Vue中父组件到子组件的通信主要由子组件的props属性实现。但是在一些情况下，父组件无法直接向子组件的props传值。比如子组件通过父组件的slot进入父组件，父组件根本不知道子组件是谁，更不用说用子组件的props了。这时应该怎么办呢？Vue在2.2.0版本引入了provide与inject，正好适合处理这一情况。 什么是provide与inj…
-
你的web应用支持离线访问和策略缓存吗？ 沉醉在生命的优美。看着星，想象你自己跟它们在奔驰。——哲学家，马克·奥勒留 微信公众号 《 JavaScript全栈 》 掘金 《 合一大师 》 Bilibili 《 合一大师 》 性能始终在时间与空间上相互权衡取舍，计算机系统的优化需要借助各种缓存策略，从CPU到内存，从接口到外设。如果有一天，硬件成…
-
从 React 历史的长河来聊如何理解虚拟 DOM最近我发现很多面试题里面都有「如何理解虚拟 DOM」这个题，我觉得这个题应该没有想象中那么好答，因为很多人没有真正理解虚拟 DOM 它的价值所在，我这篇从虚拟 DOM 的诞生过程来引出它的价值以及历史地位，帮助…
-
基于webpack的应用治理 随着应用的不断迭代，webpack应用最常见的两个问题就是： 构建速度慢 构建体积大 有一个很简单的划分方式，就是以构建（build）为分界线，分成前向治理和后向治理： 前向治理：提升构建速度 后向治理：保证构建结果质量 我们的治理方向，就是围绕前向治理和后向治理。 2.前向治…
-
Nodejs + Websocket 指定发送及群聊 通过nodejs + ws (Websocket) 实现点对点发送及群聊发送 项目搭建直接跳过，这里列举一下用到的插件 yarn add ws 复制代码 WebSocket 话不多说，直接上码 对比上一篇文章 << Nodejs+MongoDB 搭建服务( demo ) >> server.js 主要是增加了ws的引用， webSocket 点对点也好，群聊也好，主…
-
Nodejs调用百度AI接口实现人脸识别 百度AI提供了非常强大的AI接口，可以非常容易实现诸如图片识别，语音识别，文字识别，人脸识别等功能。 下面以人脸识别为例，说明下如何通过Nodejs调取百度AI接口，实现识别人脸的位置、年龄、性别、颜值、情绪等信息。 1. 项目创建 首先使用Express的脚手架创建一个项目。 对于Express不熟悉的同学可以先看看这篇…
-
Git 工程化最佳实践 1. 本文导读 本文对应的 git-standardize 项目地址 https://github.com/vimerzhao/git-standardize 1.1. 问题背景 大部分程序员对于Git的理解还停留在 git add . git commit -m “update” git pull git push 的阶段，但这在实际项目开发中是远远不够的。 举一个简单的例子…
-
React hooks 入门和进阶 React hooks可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性,它的出现提供了一种新型可复用组件间状态逻辑的途径,替换以往采用的HOC和Render Props的形式. 新增该特性的原由: https://zh-hans.reactjs.org/docs/hooks-intro.html#motivation …
-
你不需要 passport.js — node.js认证指南 诸如 Google Firebase，AWS Cognito 以及 Auth0 这样的第三方认证服务越来越流行，类似于 passport.js 这样的一站式解决方案也成为了业界标准，但是一个普遍情况是，开发者们其实并不清楚完整的认证流程到底涉及那些部分。 这一系列关于 node.js 认证的文章，旨在让你搞清楚一些概念，比如 JSON Web Token (JWT)、社交…
-
Vue的watch中的immediate与watch是什么意思immediate设为true后，则监听的这个对象会立即输出，也就是说一刷新页面就会在控制台输出，当然此时页面上的数据我们还没来得及手动让其发生变化，所以在控制台输出的newValue为我们在代码中默认设置的值，oldVal…
-
JavaScript 原型与原型链以及继承方式 ECMAScript 中描述了原型链的概念，并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么，假如我们让…
-
Object.freeze()提高Vue.js中大型列表的性能【翻译+解读】 文章链接： vuedose.tips/tips/improv… 这个网站主打，简洁快速的分享一些关于Vue的tips。每周更新，会发到邮件上。正文是翻译，解读是我自己的相关理解。 正文 在开发过程中，我们经常需要获取一些对象，像 users 信息，列表 items ，文章信息等等，但是我们不需要去修改这些信息。我们只是把这些信息展示出来…
-
Viz.js 之二分图 BiPartite（一） 本文对于 Viz.js 的二分图示例进行简单分析，并介绍图论中关于二分图的一些简单知识。 前置知识 图 在计算机科学中，图 Graph 是 顶点(Vertex) 集合及顶点间的关系集合(称为 边Edge ) 组成的一种数据结构。一个图 G 可表示为： 。 二分图 二分图是图论中一种特殊的图。二分图的顶点 V 可分成两个独立的集合…
-
是时候展现真正的JS数组去重技术了 在掘金上每过一段时间就会出现一次题材相似的讨论，例如面试，手写函数，而此题材也不例外——数组去重。我看到过论坛上出现过的一次次的数组去重的文章，但是个人觉得可能都不太完善，所以，我期望尝试对 JS 数组去重进行一次 “系统性” 的总结。 资料 4 种 JavaScript 中的相等性判断规则 lodashjs 的默认…
-
vue源码解读（一）Observer/Dep/Watcher是如何实现数据绑定的最近在学习vue和vuex的源码，记录自己的一些学习心得。主要借鉴了染陌同学的《Vue.js 源码解析 》 和DMQ的mvvm。前者对vue和vuex的源码做了注解和详细的中文doc，后者剖析了vue的实现原理，手动实现了mvvm。
-
原生JS事件委托的应用 大晚上，等方案，年底了，顺便传一篇总结，主要是第三部分，事件委托的应用。 一、fragment的使用 元素增加或者刷新后，能否被原addeventLister监听到–> 不能； 前者页面只重排一次，后者页面重排了100次；所以若遇到大模块添加dom时，最好使用fragment; appengChild 只能添加Dom元素,不能是文本形式的…
-
vue知识点归纳与总结(笔记)当前总结是本人在业余学习与实践过程后的总结与归纳,旨在检验自己的积累,也方便忘记时查阅,同时也希望能帮助那些这方面知识匮乏的同行门,总结是基于vue2.x,vue-cli3.x,主要记录些，vue常用的指令、事件，监听、数…
-
VS Code 调试 Node.js 代码 作为前端开发者，在日常工作过程中，我们已经习惯了使用 Chrome 等浏览器去调试代码。但是随着目前前端工作流越来越复杂，距离我们的代码运行在浏览器之前，会在本地进行一套复杂的构建过程，通常是运行在 Node 环境下的 JS 代码。如果这一过程出现了问题，我们需要找到一定的办法去调试代码，查找问题。另外当你去研究…
-
开源服务器监控解决方案，基于 Spring Boot + bootstrap 开发，对标业内 Zabbix 等 README.md WGCLOUD-v2.1 核心模块包括：服务器集群监控，ES集群监控，CPU监控，内存监控，数据安全监控，服务心跳检测。 1.采用服务端和客户端协同工作方式，更轻量，更高效，可支持数百台服务器在线监控。 2.server端…
-
从 Fetch 到 Streams：以流的角度处理网络请求 你不知道的 JavaScript：浏览器里的 Stream。
-
JS 对象的 “深入“剖析 Object.name Object 当属性key为非字符串时，系统将调用 toString() 方法将它转为字符串 let obj = {}; //Number obj = "Number 1"; obj === obj ; //true ,将 1 转化为 "1" //Object let number1 = { toString : function() { retu…
-
【webpack】你所不知道的sourceMap 通常，js代码出错，控制台会提示第几行第几列代码出错。但是 webpack 打包压缩后的代码，都被压缩到了一行，变量也变成了a,b,c,d。代码出错，控制台就没法正确的提示错误位置。 sourceMap 就可以解决这个问题。 sourceMap 就是一个信息文件，里面储存着打包前的位置信息。也就是说，转换后的代码的每一个…
-
express+websocket实现单点推送 WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。 它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，>是真正的双向平等对话，属于服务器推送技术的一种。 其他特点包括： 建立在 TCP 协议之上，服务器端的实现比较容易。 与 HTTP 协…
-
JS异步编程之Promise—— ES6基础总结（七） 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 基本用法 1.创建一个Promise实例 const promise = new Promise((resolve, reject) => { // … some asynchronous working if (/* fulfilled */){ return resolve(value) …
-
如何构建可伸缩的 Web 应用？ 为什么要构建可伸缩的Web应用？ 想象一下，你的营销活动吸引了很多用户，在某个时候，应用必须同时为成千上万的用户提供服务，这么大的并发量，服务器的负载会很大，如果设计不当，系统将无法处理。 接下来发生的就是，随机错误、缓慢的内容加载、无休止的等待、连接断开、服务不可用等问题。 …
-
JS 中为啥使用 JSON 来代替简单对象会更快？ 什么是简单对象？ 在 JavaScript 中，我们可以直接使用一对大括号来定义一个简单对象，比如： const obj = { foo: ‘hello world’, bar: { baz: , }, }; 复制代码 这产生了一个简单对象，并将其作为常量 obj 的值。这个简单对象包含了 foo 和 bar 两个字段，其中 foo …
-
webGL（ThreeJS）入门1 1、前言 最近闲啊，快闲了两个月了。估计要一直闲到年底去。 最近三个星期吧，都是在学习中。先学了react，等自己搭建起基本的脚手架模型了就不想写了。总感觉写到后面也就和vue差别不大了。 然后学c++，学了个基础，学完了指针和构造函数。发现我学C++暂时没有什么收益。虽然比较受用。而且对方教程很好。但是心中慢…
-
2020 前端智能化趋势：TensorFlow.js 生态 hi，大家好~我是shadow，一枚设计师/全栈工程师/算法研究员，目前主要研究方向是人工智能写作和人工智能设计，当然偶尔也会跨界到人工智能艺术及其他各种AI产品。 前端开发有哪些新的智能化趋势呢？今天重点整理tensorflow.js相关的内容。有非常多的基于tensorflow.js二次封装的js库，比如face-api.js、ml5.js等…
-
JavaScript引擎可视化 JavaScript很酷，但是计算机如何才能理解我们编写的代码？作为JavaScript开发人员，我们不必自己处理编译器。但是，一定要了解JavaScript引擎的基础知识，看看它是如何将我们编写的代码转换为机器可以理解的东西的！ 注意：这边文章主要是针对基于V8引擎的Node和Chromium 复制代码 HTML 解析器遇到 script 标签时，…
-
webpack模块异步加载原理解析 大多数情况下，我们并不关心 webpack 是怎么做异步加载的，但是作为前端开发工程师我们需要对异步加载有一定的了解。 原文链接 在讲解之前，先让我们搭建一个简单的 webpack 工程。 一、工程搭建 // package.json文件 { "name": "webpack-study", "version": "1.0.0…
-
动图学 JavaScript 之：事件循环（Event Loop）我们都知道 JavaScript 是一门 单线程 的语言：同一时间只能运行一个任务。通常情况下这没什么问题，但是如果你有一个任务需要耗费 30 秒的时间，那其他任务难道都要等它 30 秒么？（由于 JS 运行在浏览器的主线…
-
Javascript事件系统 本文内容 事件基础 事件监听方式 事件默认行为 事件冒泡与事件捕获 事件绑定与事件委托 事件基础 注意：本文不会深入探究Javascript的事件循环。 提到事件，相信每位Javascript开发者都不会陌生，由于Javascript是先有实现，后有规范，因此，对于大部分人来说，事件模块可以说是比较模糊的，本文将从…
-
WebRTC 联手 Node.js：打造实时视频聊天应用 (实时)时间就是金钱，那我就开门见山了。在本文中，我将带你写一个视频聊天应用，支持两个用户之间进行视频和语音通信。没什么难度，也没什么花哨的东西，却是一次 JavaScript —— 严格来说是 WebRTC 和 Node.js —— 的绝佳试炼。 何为 WebRTC？ 网络实时通信（Web Real-Time Communication，缩写为 WebRTC）是一项 …
-
【动画演示】：事件循环 形象深动(JavaScript)JS 是单线程的:一次只能运行一个任务。通常这没什么大不了的，但现在想象一下我们正在运行一个需要30秒的任务。在这个任务中，我们要等待30秒，然后才能执行接下来要做的事情(JS 默认运行在浏览器的主线程上，所…
-
抓紧面试前的宝贵时间 快速搞定前端初级JavaScript面试 第1章 课程介绍【说说面试的那些事儿】 本章会出几个面试题，分析每道题目设计的知识点，然后总结出一个完整的知识体系。让我们开始 “题目->知识点->解题” 的快乐之旅吧。 第2章 JS基础-变量类型和计算【不会变量，别说你会JS】 本章介绍变量的类型和计算的知识点和题目，包括值类型和引用类型区别，类型判…
-
深入浅出Node.js学习笔记（二） 模块机制 Web1.0时代，JavaScript脚本语言的两个主要功能： 表单验证； 网页特效； Web2.0时代，前端工程师利用JavaScript大大提升了网页的用户体验，经历了工具类库、组件库、前端框架、前端应用的变迁。 JavaScript的先天缺陷： 模块 。 高级语言的模块化机制： Java-类文件； Python-…
-
基于 HTML5 + WebGL 的无人机 3D 可视化系统近年来，无人机的发展越发迅速，既可民用于航拍，又可军用于侦察，涉及行业广泛，也被称为“会飞的照相机”。但作为军事使用，无人机的各项性能要求更加严格、重要。本系统则是通过 Hightopo 的 HT for Web 产品…
-
前端获取各种宽高window.innerHeight：浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
