20190421 前端开发日报

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

  1. 我为什么选择 Vue 而不是 React? 在前端三大框架的日趋成熟的今天,React 和 Vue 的“用户口碑”已经远远超过 Angular。在这篇文章中,我会解释:在这些框架中,我为什么会偏爱 Vue?在这过程中,我会尽力用客观的立场表达这些观点。 列表元素 | List Elements 在 web app 中,最常见的元素就是用后端给到的数组渲染出一个列表。让我们看看这在 Vue 和...
  2. [深入探索] VueJS Scoped CSS 实现原理 使用VueJS进行应用开发, 脱离不了对应用间的模块进行拆分, 将大块界面拆解为组件的过程. 我们可以很方便的在单文件中使用 <template> 块维护组件的视图, 使用 <script> 维护组件的逻辑部分, 使用 <style> 维护组件的样式. 在我们编写 VueJS 组件样式时, 不得忽略的一点就是样式污染. 样式污染产生...
  3. “寒冬中”三年前端社招面试经验 前言:16 年毕业的渣本程序员,毕业后一直在上海某云工作,小组氛围以及同事都非常 nice,但是业务线发展不好,年后回来后被砍了,不想内部转岗到其他部门,所以加入了找工作的大潮。这次的找工作经历对我来说很重要,它让我在准备的过程中突然对很多技术问题有所觉悟,想记录一下这次的经验。 基本都是在 Boss 直聘加...
  4. 《前端面试手记》之ES6重难点整理 内容速览 let和const Set和Map Generator和yield Promise、async/await介绍 Proxy代理器 ... 查看全部教程 / 阅读原文 let和const ES6新增了let和const,它们声明的变量,都处于“块级作用域”。并且不存在“...
  5. Elasticsearch 7.0 新特性之 Script Score query 首先这个特性处于实验阶段,在之后发布的release版本中可能会被移除,Elastic官方会尽最大努力去修复可能出现的各种问题,因为不受GA保护,所以前期大家尽量不要在生产环境中使用 1、介绍 script_score 是 function score 2.0版本, 允许用户在检索中灵活修改文档score,来实现自己干预结...
  6. Vue源码该如何入手? 这是一个对 Vue.js 源码解析的系列,会持续更新,欢迎关注;话不多说,下面我们就从怎么读 Vue.js 源码开始。 一. 源码目录 首先我们先看看 Vue.js 源码的项目结构: Vue.js源码GitHub 我们先了解一下 src 这个目录的各模块分工: src ├── compiler # 编译相关 ├── core ...
  7. RxJS: 避免 takeUntil 造成的泄露风险 原文链接: RxJS: Avoiding takeUntil Leaks 原文作者:Nicholas Jamieson;发表于2018年5月27日 译者: yk ;如需转载,请注明 出处 ,谢谢合作! 摄影:Tim Gouw,来自Unsplash 使用 takeUntil 操作符来实现 observable 的自动取消订阅是 Ben Lesh 在Don’t Unsubscribe 中所提出的一种机制...
  8. JavaScript对象详细讲解 学习面向对象时我们常说“万物皆对象”,当然在JavaScript中也不例外。不夸张地说:没有理解对象,就无法理解JavaScript。本文将向你展现对象的详细内容,希望对你有帮助。 1. 对象的定义 1.1 “万物皆对象”一探究竟 1.1.1 都是对象 布尔类型通过new Boolean()创建时是对象 数字类...
  9. 用 TypeScript 编写一个 React 服务端渲染库(1) 代码都甩在 Github 上面了,欢迎随手 star 😀 踩坑的过程大概都在 TypeScript + Webpack + Koa 搭建 React 服务端渲染 这篇文章里面 踩坑的 DEMO 放在 customize-server-side-render 我对服务端渲染有着深深的执念,后来再次基础上写了第一个版本的服务端渲染库 it-ssr ,但是为了区分...
  10. 11 个提升网页设计和前端开发技能的趣味游戏 自学网页设计与前端开发的途径很多,有人喜欢观看视频课程学习,有人则习惯阅读书籍和文章掌握相应的知识点。当然,玩学习类趣味游戏也是测试与提升技能的有效途径之一。 今天我们将分享 11 个有趣的在线小游戏,通过游戏化场景提升你的网页设计与前端开发技能。寓教于乐,其乐无穷。如果你正在学习相关知识,不妨...
  11. React 函数组件和类组件的差异 原文: https://overreacted.io/how-are-function-components-different-from-classes/ 在React.js开发中,函数组件(function component) 和 类组件(class component) 有什么差异呢? 在以前,通常认为区别是,类组件提供了更多的特性(比如state)。随着 React Hooks 的到来,这个说法也不成立了(通过hooks...
  12. key在Vue列表渲染时究竟起到了什么作用 Vue2+采用 diff 算法来进行新旧 vnode 的对比从而更新DOM节点。而通常在我们使用 v-for 这个指令的时候, Vue 会要求你给循环列表的每一项添加唯一的 key ,那么这个 key 在渲染列表时究竟起到了什么作用呢? 在解释这一点之前,你最好已经了解 Vue 的 diff 算法的具体原理是什么。 V...
  13. Node.js折腾记一:读指定文件夹,输出该文件夹的文件树 用来干什么:想干嘛干嘛 为什么写:写来玩,学习 node.js 文件系统相关api;树结构这种东西还是挺不错的,会用会造才是真的会 用了什么: fs.readdir(dir) , fs.stat(dir).isFile() , path 处理路径等 思路: 读取当前文件夹(不是文件夹的另作处理),获得其...
  14. 一文探究web实时通信方案并深入websocket原理与应用 在最近的项目中,有一个灯态数据展示的需求,要求是实时展示各组灯的灯色与倒计时。在技术层面就是延时要控制到非常低。 对于实时类信息获取,我们一般会有4种方案: 轮询,浏览器的定时器发起http请求 长轮询(Comet),http1.1支持的由浏览器发起的长轮询 websocket,浏览器与后端服务器建立websocket连接...
  15. 认识 rxjs 中的 BehaviorSubject、ReplaySubject 以及 AsyncSubject 原文链接: Understanding rxjs BehaviorSubject, ReplaySubject and AsyncSubject 原文作者:Luuk Gruijs;发表于2018年5月4日 译者: yk ;如需转载,请注明 出处 ,谢谢合作! Subject 的作用是实现 Observable 的多播。由于其 Observable execution 是在多个订阅者之间共享的,所以它可以确保每个订阅者...
  16. Vue $mount实战--实现消息弹窗组件之前的项目一直在使用Element-UI框架,element中的Notification、Message组件使用时不需要在html写标签,而是使用js调用。那时就很疑惑,为什么element ui使用this.$notify、this.$message就可以实现这样的功能?
  17. Webpack模块引用中还有什么坑? 大家都知道(如果暂时还不清楚的可以戳这里>>), umd 格式是跨平台的模块解决方案,node和浏览器的兼容写法,但直接在node中使用还是存在问题的: 问题复现 最近在引用自己写的一个插件的时候,偶然发现webpack下引用 node_modules 下的文件与直接引用文件夹中的文件表现不一致。文件内容都是由webpack打包出...
  18. 让前端监控数据采集更高效随着业务的快速发展,我们对生产环境下的问题感知能力越来越关注。作为距离用户最近的一层,前端的表现是否可靠、稳定、好用,很大程度上决定着用户对整个产品的体验和感受。因此,对于前端的监控不容忽视。
  19. 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...
  20. ES6入门之字符串的扩展Javascript 中允许采用 uxxxx的形式表示一个字符,其中xxxx表示字符的Unicode码点。如下
  21. 了解 Web 标准规范和组织】Web 标准是由各大标准组织制定,由浏览器和其他 Web 底层框架或工具来实现,再提供给开发者能以最小成本开发适用于多平台的 Web 应用,这些标准是我们能访问无数网站的前提。全文=&gt;   Web 标准是由各大标准组织制定,由浏览器和其他 Web 底层框架或工具来实现,再提供给开发者能以最小成本开发适用于多平台的 Web 应用,这些标准是我们能访问无数网站的前提。  学习标准的必要   最近在 MDN 上学习 Web Components,学习中有些疑惑在 MDN 上没有提及,最后通过查阅 Custom elements 标准...

    了解 Web 标准规范和组织
  22. 聊聊JS中的继承 继承来自面向对象语言,如果一个类B“继承自”另一个类A,就把这个B称为“A的子类”,而把A称为“B的父类”也可以称“A是B的超类(super)”。子类具有父类的属性和方法,达到代码复用的目的。继承是类三大特性(封装、继承、多态)之一,在ES6之前,JS中是没有类的概念的,包括ES6以后的class也是语法糖的实现。JS中的继承是依赖 ...
  23. JavaScript 变量提升详解 引擎会 在解释 JavaScript 代码之前首先对其进行编译。 编译阶段中的一部分工作就是找到所有的 声明,并用合适的作用域将它们关联起来。也正是词法作用域 的核心内容。 ReferenceError 同作用域判别失败相关,而 TypeError 则代表作用域判别成功了,但是对 结果的操作是非法或不合理的。 var a = 2 ...
  24. TypeScript 注解(下)引言 继上周的文章《TypeScript 注解(上)》,补充在最后未实现的属性注解。 本文可能需要扎实的JavaScript功底,我尽量给大家通俗地讲解。 实现 建立新项目 上周的项目建立的太不正规了,直接建个文件夹,然后写...
  25. Vue 匿名、具名和作用域插槽的使用 Vue 匿名、具名和作用域插槽的使用 :star:️ 更多前端技术和知识点,搜索订阅号 JS 菌 订阅 Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用,这篇文章简明扼要的介绍了三种插槽的用法。 :watermelon: 匿名插槽 子组件定义 slot 插槽,但并未具名,因此也可以说是默认插...
  26. web Socket和Socket.IO框架HTTP协议是无状态的,服务器只会响应来自客户端的请求,但是它与客户端之间不具备持续连接。● 我们可以非常轻松的捕获浏览器上发生的事件(比如用户点击了盒子),这个事件可以轻松产生与服务器的数据交互(比...
  27. redis简易教程以及使用nodejs连接redis 一直没机会学习 redis ,最近抽空学了一下,因为知道 reids 还是比较重要的,经常看到有人开发公众号因为没有对 access_token 进行缓存,判断是否过期,导致 access_token 的调用 api 次数超过限制而影响业务的情况,熟悉的人都知道使用 redis 基本上都是做缓存,因为他简单、速度快,可以说是个”快男...
  28. Babel手册 Babel是一个工具链,主要用于将ECMAScript 2015+版本代码向后兼容 Javascript 语法,以便可以运行到旧版本浏览器或其他环境中。 作为一种语言,JavaScript在不断发展,新的标准/提案和新的特性层出不穷。在得到广泛普及之前,Babel能够让你提前(甚至数年)使用他们。 Babel 的三个主要处理步骤分别是: 解析(parse...
  29. 从“智能”楼宇到“智慧”楼宇—ThingJS助力“智慧”升级基于ThingJS平台开发的智慧楼宇3D可视化系统,是以3D虚拟化技术为基础,以数字化、可视化智能化理念为目标,构建园区、楼宇、室内、智能设备的逐级可视;基于三维场景及集成的智能楼宇管理系统,以直观、动态的形...
  30. 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文件。 使...
  31. 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...
  32. TKoa:使用 TypeScript 重构的 Node.js Koa 开发框架 Tkoa是使用 typescript 编写的 koa 框架! 尽管它是基于 typescript 编写,但是你依然还是可以使用一些 node.js 框架和基于 koa 的中间件。 不仅如此,你还可以享受 typescript 的类型检查系统和方便地使用 typescript 进行测试! 安装 TKoa 需要 >= typescript v3.1.0 和 no...
  33. webpack4构建vue项目(二) 前言 距离上篇文章9102年webpack4搭建vue项目已经过了将近两个月了,一直没有时间写文章,公司项目比较多,这两个月一直在加班,最近大家一直在讨论996.icu,其实我想发表一点自己的看法,关于加班我的座右铭一直是:只要工资给到位,加班无所谓。尴尬的就是我们公司不给加班费,而且不让调休,哈哈哈,相信大多数公...
  34. 老菜鸟分析 Vue 的观察-订阅模式:数据变化之后是如何更新页面的呢? 假设 Vue 已经完成了页面初始渲染处于状态 A,现在进行了某些操作,调用了 changeMessage 方法,执行了 this.message = 'New Hello Vue'; 语句,对 message 属性重新赋值了。那么接来,Vue 究竟会做些什么来让我们在页面上看到最新的 New Hello Vue 结果呢?下面将详细分析并附上流程渣图。 场景如下: const app =...
  35. 如何删除 JavaScript 数组中的虚值falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值,比如:在条件语句或者循环语句中。 falsy 有时写作 f...
  36. VUE - MVVM - part12 - props 在上一步,我们实现 extend 方法,用于扩展 Vue 类,而我们知道子组件需要通过 extend 方法来实现,我们从测试例子来入手,看看这一步我们需要实现什么: let test = new Vue({ data() { return { dataTest: { subTest: 1 } } }, com...
  37. vue 组件发布 npm 最佳实践 前言 我们经常使用组件,二次封装或开发新组件,在团队内部使用; 可当我们想通过npm分享组件时,却没了之前的得心应手,本文旨在帮助大家在可以更轻松地发布组件 首先,把vue组件发布到npm这件事可以拆分成两个部分: 在npm上发布一个包 将vue组件打包 npm发包 ...

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

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

原文:20190421 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20190421.html)