20191231 前端开发日报

Vue中的$attrs 爷孙传值;JS原生实现连续滚动文字;临近2020,如何让前端工作得到尊重?;前端多语言编译处理解决方案, 支持Vue, React, Angular, TypeScript;实战精髓,项目级登录鉴权方案及权限跳转【Node vs Vue】;Vue的watch中的immediate与watch是什么意思;webpack源码分析 – 调试;JavaScript 原型与原型链以及继承方式

  1. Vue中的$attrs 爷孙传值所谓的$arrts其实就是多级组件中的props,它就像一个中间件,用来传递爷组件给孙组件的数据,使用的时候只需给父组件中的孙组件配置v-bind=”$attrs”,然后再爷组件中传入孙组件所需要的数据,孙组件正常接收即可。…
  2. JS原生实现连续滚动文字 前言:最近在工作中遇到,文字在大屏中,出现底部有留白导致不连续的现象,很奇怪,故写这篇文章细究其原因 关键字: offsetTop scrollTop offsetHeight 首先贴个效果图 来看下代码怎么做到的 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or…
  3. 临近2020,如何让前端工作得到尊重? 下面有个高赞回答:「 想要尊重,题主就得去那些会被前端决定生死的公司。你可以找找什么软件一旦变丑或者操作渲染出bug就会导致客户退钱,然后就去那干 。」 赞同之余,小刘也顺便补充一下我的看法: 哥们,看问题,要懂得透过现象看本质。 「如何让前端开发得到尊重」,隐藏在这个问题下面的内在诉求是, 如何在…
  4. 前端多语言编译处理解决方案, 支持Vue, React, Angular, TypeScript 基于webpack4 AST分析多语言生成插件, 支持Vue, React, Angular 自动管理语言配置, 在编译期后直接生成多语言拆分, 无需在客户端重新渲染 项目打包后根据配置的多语言数量生成多分具有单一语言的文件. 例如使用zh-cn, en则最后输出将会有 /dist/zh-cn /dist/en 复制代码 :clap::clap:安装 npm install webpack …
  5. 实战精髓,项目级登录鉴权方案及权限跳转【Node vs Vue】 不管是企业项目,还是个人项目,一个优秀的系统必须具有鉴权的能力,何为 鉴权 ,是指验证用户是否拥有访问系统的权利。 前端鉴权的方式也很多,例如 HTTP Basic Authentication 、 session-cookie 、 OAuth(开放授权) 、 JWT ··· 本章通过 node.js vue 为框架,模拟出一套较为完整的前…
  6. Vue的watch中的immediate与watch是什么意思immediate设为true后,则监听的这个对象会立即输出,也就是说一刷新页面就会在控制台输出,当然此时页面上的数据我们还没来得及手动让其发生变化,所以在控制台输出的newValue为我们在代码中默认设置的值,oldVal…
  7. webpack源码分析 – 调试 webpack源码写的还是比较绕,各种回调,递归和异步跳来跳去,刚开始跟代码时容易迷失方向。console.log在处理复杂流程就稍显薄弱,调试简单的代码还行,但是遇到各种异步方法和递归调用时,只通过log打印出来的东西很难看得懂。看代码时有时候需要我们深入到各个子流程中,有时候又要忽略细节只看整体,所以灵活使用调试…
  8. JavaScript 原型与原型链以及继承方式 ECMAScript 中描述了原型链的概念,并将原型链作为实现继承的主要方法。其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。简单回顾一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么,假如我们让…
  9. Object.freeze()提高Vue.js中大型列表的性能【翻译+解读】 文章链接: vuedose.tips/tips/improv… 这个网站主打,简洁快速的分享一些关于Vue的tips。每周更新,会发到邮件上。正文是翻译,解读是我自己的相关理解。 正文 在开发过程中,我们经常需要获取一些对象,像 users 信息,列表 items ,文章信息等等,但是我们不需要去修改这些信息。我们只是把这些信息展示出来…
  10. Nodejs调用百度AI接口实现人脸识别 百度AI提供了非常强大的AI接口,可以非常容易实现诸如图片识别,语音识别,文字识别,人脸识别等功能。 下面以人脸识别为例,说明下如何通过Nodejs调取百度AI接口,实现识别人脸的位置、年龄、性别、颜值、情绪等信息。 1. 项目创建 首先使用Express的脚手架创建一个项目。 对于Express不熟悉的同学可以先看看这篇…
  11. StateofJS:2019年JavaScript生态圈报告出炉 最近,一年一度的The State of JavaScript发布了最新的调查报告,这份报告收集了来自超过20000名工程师的反馈问卷,所以这份报告对于了解过去一年的JavaScript生态圈的情况非常有参考意义,可以帮助到你了解到哪些技术是未来的趋势,哪些技术是明显的坑。 在这篇文章,我会总结这份报告的精华部分和未来趋势,同时提供…
  12. 是时候展现真正的JS数组去重技术了 在掘金上每过一段时间就会出现一次题材相似的讨论,例如面试,手写函数,而此题材也不例外——数组去重。我看到过论坛上出现过的一次次的数组去重的文章,但是个人觉得可能都不太完善,所以,我期望尝试对 JS 数组去重进行一次 “系统性” 的总结。 资料 4 种 JavaScript 中的相等性判断规则 lodashjs 的默认…
  13. 原生JS事件委托的应用 大晚上,等方案,年底了,顺便传一篇总结,主要是第三部分,事件委托的应用。 一、fragment的使用 元素增加或者刷新后,能否被原addeventLister监听到–> 不能; 前者页面只重排一次,后者页面重排了100次;所以若遇到大模块添加dom时,最好使用fragment; appengChild 只能添加Dom元素,不能是文本形式的…
  14. express+websocket实现单点推送 WebSocket 协议在2008年诞生,2011年成为国际标准。所有浏览器都已经支持了。 它的最大特点就是,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,>是真正的双向平等对话,属于服务器推送技术的一种。 其他特点包括: 建立在 TCP 协议之上,服务器端的实现比较容易。 与 HTTP 协…
  15. vue知识点归纳与总结(笔记)当前总结是本人在业余学习与实践过程后的总结与归纳,旨在检验自己的积累,也方便忘记时查阅,同时也希望能帮助那些这方面知识匮乏的同行门,总结是基于vue2.x,vue-cli3.x,主要记录些,vue常用的指令、事件,监听、数…
  16. webpack模块异步加载原理解析 大多数情况下,我们并不关心 webpack 是怎么做异步加载的,但是作为前端开发工程师我们需要对异步加载有一定的了解。 原文链接 在讲解之前,先让我们搭建一个简单的 webpack 工程。 一、工程搭建 // package.json文件 { "name": "webpack-study", "version": "1.0.0…
  17. JS 对象的 “深入“剖析 Object.name Object 当属性key为非字符串时,系统将调用 toString() 方法将它转为字符串 let obj = {}; //Number obj = "Number 1"; obj === obj ; //true ,将 1 转化为 "1" //Object let number1 = { toString : function() { retu…
  18. vue源码解读(一)Observer/Dep/Watcher是如何实现数据绑定的最近在学习vue和vuex的源码,记录自己的一些学习心得。主要借鉴了染陌同学的《Vue.js 源码解析 》 和DMQ的mvvm。前者对vue和vuex的源码做了注解和详细的中文doc,后者剖析了vue的实现原理,手动实现了mvvm。
  19. JS异步编程之Promise—— ES6基础总结(七) 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。 基本用法 1.创建一个Promise实例 const promise = new Promise((resolve, reject) => { // … some asynchronous working if (/* fulfilled */){ return resolve(value) …
  20. webGL(ThreeJS)入门1 1、前言 最近闲啊,快闲了两个月了。估计要一直闲到年底去。 最近三个星期吧,都是在学习中。先学了react,等自己搭建起基本的脚手架模型了就不想写了。总感觉写到后面也就和vue差别不大了。 然后学c++,学了个基础,学完了指针和构造函数。发现我学C++暂时没有什么收益。虽然比较受用。而且对方教程很好。但是心中慢…
  21. 深入浅出Node.js学习笔记(一) 设计高性能Web服务器的几个要点:事件驱动、非阻塞I/O。 考虑到高性能、符合事件驱动、没有历史包袱这三个主要原因,JavaScript成为了Node的实现语言。 2.2为什么叫Node Node可以构建服务器、客户端、命令行工具,Node发展为一个强制不共享任何资源的单线程、单进程系统,其目的是成为一个构建快速、可伸缩的网络应用…

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

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


关注我

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

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

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