20190421 前端开发日报-前端开发博客

我为什么选择 Vue 而不是 React？；[深入探索] VueJS Scoped CSS 实现原理；“寒冬中”三年前端社招面试经验；《前端面试手记》之ES6重难点整理；Elasticsearch 7.0 新特性之 Script Score query；Vue源码该如何入手？；RxJS: 避免 takeUntil 造成的泄露风险；JavaScript对象详细讲解

我为什么选择 Vue 而不是 React？在前端三大框架的日趋成熟的今天，React 和 Vue 的“用户口碑”已经远远超过 Angular。在这篇文章中，我会解释：在这些框架中，我为什么会偏爱 Vue？在这过程中，我会尽力用客观的立场表达这些观点。列表元素 | List Elements 在 Web app 中，最常见的元素就是用后端给到的数组渲染出一个列表。让我们看看这在 Vue 和…
[深入探索] VueJS Scoped CSS 实现原理使用VueJS进行应用开发, 脱离不了对应用间的模块进行拆分, 将大块界面拆解为组件的过程. 我们可以很方便的在单文件中使用 <template> 块维护组件的视图, 使用 <script> 维护组件的逻辑部分, 使用 <style> 维护组件的样式. 在我们编写 VueJS 组件样式时, 不得忽略的一点就是样式污染. 样式污染产生…
“寒冬中”三年前端社招面试经验前言：16 年毕业的渣本程序员，毕业后一直在上海某云工作，小组氛围以及同事都非常 nice，但是业务线发展不好，年后回来后被砍了，不想内部转岗到其他部门，所以加入了找工作的大潮。这次的找工作经历对我来说很重要，它让我在准备的过程中突然对很多技术问题有所觉悟，想记录一下这次的经验。基本都是在 Boss 直聘加…
《前端面试手记》之ES6重难点整理内容速览 let和const Set和Map Generator和yield Promise、async/await介绍 Proxy代理器 … 查看全部教程 / 阅读原文 let和const ES6新增了let和const，它们声明的变量，都处于“块级作用域”。并且不存在“…
Elasticsearch 7.0 新特性之 Script Score query 首先这个特性处于实验阶段，在之后发布的release版本中可能会被移除，Elastic官方会尽最大努力去修复可能出现的各种问题，因为不受GA保护，所以前期大家尽量不要在生产环境中使用 1、介绍 script_score 是 function score 2.0版本，允许用户在检索中灵活修改文档score，来实现自己干预结…
Vue源码该如何入手？这是一个对 Vue.js 源码解析的系列，会持续更新，欢迎关注；话不多说，下面我们就从怎么读 Vue.js 源码开始。一. 源码目录首先我们先看看 Vue.js 源码的项目结构： Vue.js源码GitHub 我们先了解一下 src 这个目录的各模块分工： src ├── compiler # 编译相关 ├── core …
RxJS: 避免 takeUntil 造成的泄露风险原文链接： RxJS: Avoiding takeUntil Leaks 原文作者：Nicholas Jamieson；发表于2018年5月27日译者： yk ；如需转载，请注明出处，谢谢合作！摄影：Tim Gouw，来自Unsplash 使用 takeUntil 操作符来实现 observable 的自动取消订阅是 Ben Lesh 在Don’t Unsubscribe 中所提出的一种机制…
JavaScript对象详细讲解学习面向对象时我们常说“万物皆对象”，当然在JavaScript中也不例外。不夸张地说：没有理解对象，就无法理解JavaScript。本文将向你展现对象的详细内容，希望对你有帮助。 1. 对象的定义 1.1 “万物皆对象”一探究竟 1.1.1 都是对象布尔类型通过new Boolean()创建时是对象数字类…
用 TypeScript 编写一个 React 服务端渲染库（1）代码都甩在 Github 上面了，欢迎随手 star 😀 踩坑的过程大概都在 TypeScript + Webpack + Koa 搭建 React 服务端渲染这篇文章里面踩坑的 DEMO 放在 customize-server-side-render 我对服务端渲染有着深深的执念，后来再次基础上写了第一个版本的服务端渲染库 it-ssr ，但是为了区分…
11 个提升网页设计和前端开发技能的趣味游戏自学网页设计与前端开发的途径很多，有人喜欢观看视频课程学习，有人则习惯阅读书籍和文章掌握相应的知识点。当然，玩学习类趣味游戏也是测试与提升技能的有效途径之一。今天我们将分享 11 个有趣的在线小游戏，通过游戏化场景提升你的网页设计与前端开发技能。寓教于乐，其乐无穷。如果你正在学习相关知识，不妨…
React 函数组件和类组件的差异原文： https://overreacted.io/how-are-function-components-different-from-classes/ 在React.js开发中，函数组件(function component) 和类组件(class component) 有什么差异呢？在以前，通常认为区别是，类组件提供了更多的特性(比如state)。随着 React Hooks 的到来，这个说法也不成立了(通过hooks…
key在Vue列表渲染时究竟起到了什么作用 Vue2+采用 diff 算法来进行新旧 vnode 的对比从而更新DOM节点。而通常在我们使用 v-for 这个指令的时候， Vue 会要求你给循环列表的每一项添加唯一的 key ，那么这个 key 在渲染列表时究竟起到了什么作用呢？在解释这一点之前，你最好已经了解 Vue 的 diff 算法的具体原理是什么。 V…
Node.js折腾记一：读指定文件夹，输出该文件夹的文件树用来干什么：想干嘛干嘛为什么写：写来玩，学习 node.js 文件系统相关api；树结构这种东西还是挺不错的，会用会造才是真的会用了什么： fs.readdir(dir) , fs.stat(dir).isFile() , path 处理路径等思路：读取当前文件夹（不是文件夹的另作处理），获得其…
一文探究web实时通信方案并深入websocket原理与应用在最近的项目中，有一个灯态数据展示的需求，要求是实时展示各组灯的灯色与倒计时。在技术层面就是延时要控制到非常低。对于实时类信息获取，我们一般会有4种方案：轮询，浏览器的定时器发起http请求长轮询(Comet)，http1.1支持的由浏览器发起的长轮询 websocket，浏览器与后端服务器建立websocket连接…
认识 rxjs 中的 BehaviorSubject、ReplaySubject 以及 AsyncSubject 原文链接： Understanding rxjs BehaviorSubject, ReplaySubject and AsyncSubject 原文作者：Luuk Gruijs；发表于2018年5月4日译者： yk ；如需转载，请注明出处，谢谢合作！ Subject 的作用是实现 Observable 的多播。由于其 Observable execution 是在多个订阅者之间共享的，所以它可以确保每个订阅者…
Vue $mount实战–实现消息弹窗组件之前的项目一直在使用Element-UI框架，element中的Notification、Message组件使用时不需要在html写标签，而是使用js调用。那时就很疑惑，为什么element ui使用this.$notify、this.$message就可以实现这样的功能？
Webpack模块引用中还有什么坑？大家都知道(如果暂时还不清楚的可以戳这里>>)， umd 格式是跨平台的模块解决方案，node和浏览器的兼容写法，但直接在node中使用还是存在问题的：问题复现最近在引用自己写的一个插件的时候，偶然发现webpack下引用 node_modules 下的文件与直接引用文件夹中的文件表现不一致。文件内容都是由webpack打包出…
让前端监控数据采集更高效随着业务的快速发展，我们对生产环境下的问题感知能力越来越关注。作为距离用户最近的一层，前端的表现是否可靠、稳定、好用，很大程度上决定着用户对整个产品的体验和感受。因此，对于前端的监控不容忽视。
mocha配合babel7实现单元测试的一些注意事项安装在自己的项目上 yarn add mocha chai -D // 或 npm i –save-dev mocha chai 复制代码最终： "devDependencies": { "chai": "^4.2.0", "mocha": "^6.0.2" } 复制代码 babel7的安装 yarn add @babel/core @babel/cli @babel/preset-env @babel/r…
ES6入门之字符串的扩展Javascript 中允许采用 uxxxx的形式表示一个字符，其中xxxx表示字符的Unicode码点。如下
【了解 Web 标准规范和组织】Web 标准是由各大标准组织制定，由浏览器和其他 Web 底层框架或工具来实现，再提供给开发者能以最小成本开发适用于多平台的 Web 应用，这些标准是我们能访问无数网站的前提。全文=> 　　Web 标准是由各大标准组织制定，由浏览器和其他 Web 底层框架或工具来实现，再提供给开发者能以最小成本开发适用于多平台的 Web 应用，这些标准是我们能访问无数网站的前提。　学习标准的必要　　最近在 MDN 上学习 Web Components，学习中有些疑惑在 MDN 上没有提及，最后通过查阅 Custom elements 标准…
聊聊JS中的继承继承来自面向对象语言，如果一个类B“继承自”另一个类A，就把这个B称为“A的子类”，而把A称为“B的父类”也可以称“A是B的超类(super)”。子类具有父类的属性和方法，达到代码复用的目的。继承是类三大特性（封装、继承、多态）之一，在ES6之前，JS中是没有类的概念的，包括ES6以后的class也是语法糖的实现。JS中的继承是依赖 …
JavaScript 变量提升详解引擎会在解释 JavaScript 代码之前首先对其进行编译。编译阶段中的一部分工作就是找到所有的声明，并用合适的作用域将它们关联起来。也正是词法作用域的核心内容。 ReferenceError 同作用域判别失败相关，而 TypeError 则代表作用域判别成功了，但是对结果的操作是非法或不合理的。 var a = 2 …
TypeScript 注解(下)引言继上周的文章《TypeScript 注解(上)》，补充在最后未实现的属性注解。本文可能需要扎实的JavaScript功底，我尽量给大家通俗地讲解。实现建立新项目上周的项目建立的太不正规了，直接建个文件夹，然后写…
Vue 匿名、具名和作用域插槽的使用 Vue 匿名、具名和作用域插槽的使用 :star:️ 更多前端技术和知识点，搜索订阅号 JS 菌订阅 Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用，这篇文章简明扼要的介绍了三种插槽的用法。 :watermelon: 匿名插槽子组件定义 slot 插槽，但并未具名，因此也可以说是默认插…
web Socket和Socket.IO框架● HTTP协议是无状态的，服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接。● 我们可以非常轻松的捕获浏览器上发生的事件（比如用户点击了盒子），这个事件可以轻松产生与服务器的数据交互（比…
redis简易教程以及使用nodejs连接redis 一直没机会学习 redis ，最近抽空学了一下，因为知道 reids 还是比较重要的，经常看到有人开发公众号因为没有对 access_token 进行缓存，判断是否过期，导致 access_token 的调用 api 次数超过限制而影响业务的情况，熟悉的人都知道使用 redis 基本上都是做缓存，因为他简单、速度快，可以说是个”快男…
Babel手册 Babel是一个工具链，主要用于将ECMAScript 2015+版本代码向后兼容 Javascript 语法，以便可以运行到旧版本浏览器或其他环境中。作为一种语言，JavaScript在不断发展，新的标准/提案和新的特性层出不穷。在得到广泛普及之前，Babel能够让你提前（甚至数年）使用他们。 Babel 的三个主要处理步骤分别是：解析（parse…
从“智能”楼宇到“智慧”楼宇—ThingJS助力“智慧”升级基于ThingJS平台开发的智慧楼宇3D可视化系统，是以3D虚拟化技术为基础，以数字化、可视化智能化理念为目标，构建园区、楼宇、室内、智能设备的逐级可视;基于三维场景及集成的智能楼宇管理系统，以直观、动态的形…
mini-css-extract-plugin插件快速入门 webpack 4.0以前，我们通过extract-text-webpack-plugin插件，把css样式从js文件中提取到单独的css文件中。extract-text-webpack-plugin插件的优缺点：更多介绍请看移步： webpack.docschina.org/plugins/ext… webpack 4.0以后，官方推荐使用extract-text-webpack-plugin插件来打包css文件。使…
LeetCode 之 JavaScript 解答第69题 —— X 的平方根（Squrt(x)） Time：2019/4/17 Title: sqrt(x) Difficulty: Easy Author: 小鹿题目：sqrt(x) Implement int sqrt(int x) . Compute and return the square root of x , where x is guaranteed to be a non-negative integer. Since the return type is an integer, the decimal digits are tru…
TKoa：使用 TypeScript 重构的 Node.js Koa 开发框架 Tkoa是使用 typescript 编写的 koa 框架！尽管它是基于 typescript 编写，但是你依然还是可以使用一些 node.js 框架和基于 koa 的中间件。不仅如此，你还可以享受 typescript 的类型检查系统和方便地使用 typescript 进行测试！安装 TKoa 需要 >= typescript v3.1.0 和 no…
webpack4构建vue项目（二）前言距离上篇文章9102年webpack4搭建vue项目已经过了将近两个月了，一直没有时间写文章，公司项目比较多，这两个月一直在加班，最近大家一直在讨论996.icu，其实我想发表一点自己的看法，关于加班我的座右铭一直是：只要工资给到位，加班无所谓。尴尬的就是我们公司不给加班费，而且不让调休，哈哈哈，相信大多数公…
老菜鸟分析 Vue 的观察-订阅模式：数据变化之后是如何更新页面的呢？假设 Vue 已经完成了页面初始渲染处于状态 A，现在进行了某些操作，调用了 changeMessage 方法，执行了 this.message = ‘New Hello Vue’; 语句，对 message 属性重新赋值了。那么接来，Vue 究竟会做些什么来让我们在页面上看到最新的 New Hello Vue 结果呢？下面将详细分析并附上流程渣图。场景如下： const app =…
如何删除 JavaScript 数组中的虚值falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值，比如：在条件语句或者循环语句中。 falsy 有时写作 f…
VUE – MVVM – part12 – props 在上一步，我们实现 extend 方法，用于扩展 Vue 类，而我们知道子组件需要通过 extend 方法来实现，我们从测试例子来入手，看看这一步我们需要实现什么： let test = new Vue({ data() { return { dataTest: { subTest: 1 } } }, com…
vue 组件发布 npm 最佳实践前言我们经常使用组件，二次封装或开发新组件，在团队内部使用; 可当我们想通过npm分享组件时，却没了之前的得心应手，本文旨在帮助大家在可以更轻松地发布组件首先，把vue组件发布到npm这件事可以拆分成两个部分：在npm上发布一个包将vue组件打包 npm发包 …