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前端日报 订阅精彩文章

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

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