20200317 前端开发日报

书到用时方恨少，一大波JS开发工具函数来了；无js 一个div实现饼图百分比效果动画；【建议】记录一次BAT一线互联网公司前端JavaScript面试；Vue脚手架实现试卷页面；7个简单但棘手的JavaScript面试问题；什么是WebSocket，它与HTTP有何不同？；ES6中的Promise使用总结；ECMAScript进化史(1):​话说Web脚本语言王者JavaScript的加冕历史

1. 书到用时方恨少，一大波JS开发工具函数来了在我们日常开发的时候，可能会遇到各种各样的需求，但是自己一时半会儿可能找不到合适的办法去解决。书到用时方恨少，下面的这些JavaScript的工具函数可能就会派上大用场了，我们可以进行复用，提高我们的工作效率。
2. 无js 一个div实现饼图百分比效果动画 是的没错！没有前言了，我们直接上正文。 首先我们来画一个简单的圆 .pie { width: 100px; height: 100px; margin: 50px auto; border-radius: 50%; background: yellowgreen; } 复制代码 …
3. 【建议】记录一次BAT一线互联网公司前端JavaScript面试前沿 置身世外只为暗中观察！！！Hello大家好，我是魔王哪吒！ 面试内容 你需要一些HTML和css的基础知识，掌握JavaScript和ES6的基本语法，对事物的好奇心。 初级JS面试题 JS Web API,开发环境，运行环境 原型，…
4. Vue脚手架实现试卷页面 将moduleA中的store模块化 在state中放入变量subjectList,通过mutations更新subjectList 在Home.vue中通过mapMutations激活mutations中的getSubjectList，从而更新subjectList import ‘@/mock’ export default { namespaced: true, state: { subjectList: [] }, mutations: { ge…
5. 7个简单但棘手的JavaScript面试问题如果您符合高级开发人员的资格，其工作涉及JavaScript，那么在编码面试中很有可能会被问到棘手的问题。
6. 什么是WebSocket，它与HTTP有何不同？HTTP和WebSocket都是客户端-服务器通信中使用的通信协议。文章用几个例子解释了两者的不同以及分别适用在什么应用场景。有些容易混淆的概念（比如说HTTP长连接）和待补充的概念我用斜体字注解到了文章中。
7. ES6中的Promise使用总结 One、什么是Promise? Promise是异步编程的解决方案，而它本身也就是一个构造函数，比传统的异步解决【回调函数】和【事件】更合理，更强大。 Two、Promise有何作用？ 作用：解决回调地狱 当我们在写逻辑函数时，可能函数内部会有另一个函数，而我们在处理一些比较复杂的操作的时候，有可能里面会嵌套十几二十个函数…
8. ECMAScript进化史(1):​话说Web脚本语言王者JavaScript的加冕历史 互联网起火-Web时代的来临 在行文之前，反手就安利一下《 浏览器史话中chrome霸主地位的奠定与国产浏览器的割据混战 》。 浏览器始祖NCSA Mosaic 在1993年1月发布(于1992年末由国家超级计算机应用中心—National Center for Supercomputing Applications开发)。Mosaic可以同时展示文字和图片，从此浏览器变得有趣…
9. Vue源码之双向数据绑定 近一年多都在做小程序开发， Vue 感觉都有写些生疏了，从今天开始阅读一下 Vue 的源码，了解其内部的工作机制，本文涉及的 Vue 版本为 2.6.11 ，我已经提前 fork 了一份到 github 上 双向数据绑定 提到 Vue ，自然会想到双向数据绑定，要说他的原理，你也能脱口而出，使用 Object.defineProperty 的 get 、 set …
10. 一个前端埋点任务引发的思考 最近接到一项任务，需要给组里面所有的前端项目进行前端埋点，上报 PV 数据给别的项目使用。由于以前没有接触过前端埋点，所以中间绕了一些弯路，但最后还是顺利完成了。整个过程下来，对前端埋点也有了一点简单的思考。 什么是前端埋点 前端埋点是实现前端数据监控的一种方式，通过前端埋点，我们可以获取并跟踪用…
11. CSS变量实现暗黑模式，我的小铺页面已经支持最近微信被苹果逼的开发了暗黑模式，越来越多的网站和应用开始支持了暗黑模式，许多人也喜欢为网站选择暗模式，也许他们更喜欢这样的外观，或者他们想让自己的眼睛免受疲劳。这篇文章将告诉你如何实现一个自动的 …
12. 记录基于promise实现图片懒加载优化性能 一、场景 项目最近要求对视频进行截图保存、查看，由于项目是公安方面的，导致一天一个控制台会生成很多图片，查看肇事图片的时候，页面一次加载过多导致全部渲染速度很慢，体验不好，于是基于网上现有资料和自己的实践，总结了在项目中的应用。 二、实现过程 1、首先先给img标签src 赋值为loading图片地址，然后…
13. 实现一个简单的VUE模板编译机制 vue原生的模板编译功能的作用是将模板生成AST，然后通过AST生成渲染函数，再执行渲染函数生成vnode，最后根据vnode进行渲染 今天来实现一个简单版的模板编译功能，通过节点筛选和指令解析来完成渲染； 在实现模板编译功能之前首先得有一个模板，同时还得要一个Vue类作为基础 <!– html –> <div id=&quot…
14. 从零开始实现一个vuex插件要想自己实现一个vuex插件，就必须先了解一下vuex插件的基本使用，我们在使用vuex的时候，通常会定义一个store.js文件，里面主要就是干了以下几件事:
15. Angular 微前端实践 之 Single-SPA 手把手教程（上） 最近自己在研究Angular的微前端实践，算是比较完整的从零走通了整个流程。了解到很多小伙伴也有这方面的需求，所以整理了一些内容希望对各位小伙伴有帮助。 各位看官时间有限，我们直接进入正题。 目标 一个container项目，两个微前端项目 container项目的展示页面同时加载两个项目 不同项目之间，资源…
16. Github Pages+Gridea搭建个人博客Github Pages可以用来托管个人网站，静态的，便于用来实现博客，可以在一个仓库的settings中开启：Gridea是一个静态博客写作客户端，所有文件都在本地，没有数据库，实现简单，支持Markdown。好了不多说开始动手。
17. Vue基础之非父子组件间传值 我们已经知道，从父组件向子组件传值可以通过在子组件中添加props实现，而子组件向父组件传值主要通过向外触发函数。 当我们的页面采用三层嵌套，颜色由浅到深并对应图中1，2，3。 那么如果我们想沿着蓝色的线传递值，是否需要将值从1-> 2-> 3这样;如果我们想沿着紫色的线传递值，是否要将值从3 -&g…
18. JavaScript实现图片合成下载最近项目一个功能需求，需实现将两张图片合成后下载的一个功能。分析完功能需求后，决定直接使用前端技术来实现。为提高效率，使用插件(html2canvas)配合编写此功能。有关插件(html2canvas)的介绍，这里不多说明…
19. vue源码分析-14-dom异步更新机制(nextTick) 我们通过响应式原理的分析得知，当数据改变之后，界面会跟着响应发生变化,Vue内部会再次执行_update方法，生成新的Vnode，比较新旧Vnode,然后进行更新dom的操作。 我们这里先定义同步更新 和 异步更新 同步更新：当数据发生变化后，立即执行_update方法，进行 生成新的vnode->dom更新的过程。 异步更新：数据发…
20. vue数据监测机制–observer vue的mvvm模型，解耦了视图和数据，为前端开发提供了极大的便利，而其中最重要的是数据变化检测，vue的data检测机制有以下几个特点： 检测数据为对象的时候，必须先声明属性 ，这个属性才是响应式的。 增加不存在的属性 不能更新视图 （vm.$set） 修改数组索引和长度 是不会导致视图更新的 数组里套对象 对象…
21. 探究 JavaScript Promises 的详细实现 写在前面： 这是一篇总结文章，但也可以理解为是一篇翻译，主体脉络参考自下面这篇文章： www.mattgreer.org/articles/pr… 若英文阅读无障碍，墙裂推荐该文章的阅读。 前言 在日常写代码的过程中，我很经常会用到 promises 语法。当我自以为了解 promises 详细用法时，却在一次讨论中被问住了：“你知道 prom…
22. 在angular中使用jquery以及其它依赖于jquery库的第三方插件的一种方法angular中使用了webpack做为依赖管理器，相较于以前在html中使用<script type=”text/javascript” src=”xxxx”的方式，使用webpack可以实现使在需要某些依赖的时候才进行加载。性能虽然好，但在使用一些历史的依…
23. JavaScript 从下载到执行（阻塞、defer、async）我们都知道在默认情况下，JavaScript 的下载和执行会阻塞 HTML 的解析，结果会导致从打开页面到显示出网页内容的过程耗时较长，用户体验不好。本篇文章主要介绍了 JavaScript 的下载和执行是如何阻塞 HTML 解析的…
24. JavaScript学习笔记（四）单线程和异步 JavaScript只在一个线程上运行，如果所有的任务都是同步（synchronous）任务，当有一个中间环节的任务需要等待一段时间才能执行完成时（例如ajax请求、静态资源加载等），会造成页面卡死。因此，这类需要等待的任务要通过一定的方式放在异步（asynchronous）任务队列中，并设置回调函数来处理异步任务执行完成之后进行何…
25. Javascript01JavaScript介绍 为什么要学JavaScript？ 网页三部分 html:控制网页的结构 css：控制网页的样式 js：控制网页的逻辑 最初的javascript 用于判断客户端的输入（表单校验） 后来一度被用作小广告 现在的JavaScript：…
26. Promise.then链式调用顺序 想用Promise异步实现一个递归调用的接口，用来做简单AI的动作序列。发现一开始接触这个then的时候，不是很清楚，参考了网上的一些写法，改成自己的有问题，所以先静下心来研究一下这个调用的顺序问题 例子 先看个例子，参考 new Promise((resolve, reject) => { console.log("promise") r…

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

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