20200314 前端开发日报

Vue 2020 年路线图，Vue 3.0 计划于 Q2 发布；从两段代码来理解js运行机制；未来魔法校的微前端实践；JS中时间格式化的三种方法；重新定义代理的扩展性：WebAssembly 在 Envoy 与 Istio 中的应用；vue动态渲染svg、添加点击事件；计算机技术|前端自动化构建工具Gulp.js；JavaScript 原型、对象

1. Vue 2020 年路线图，Vue 3.0 计划于 Q2 发布昨天 Vue 团队更新了 2020 年的路线图，里面包含了很多 Vue 3.0 的信息。建议大家一定要看原文，地址在：[链接]。下面我结合自己的理解翻译一下：
2. 从两段代码来理解js运行机制 js是单线程的，但是浏览器和node是多线程的。为了解决js单线程引起的阻塞问题，当js引擎遇到网络请求等宏任务 时，会将异步事件注册到事件表里，当完成指定的任务或满足一定的条件后会将异步事件的回调函数注册到事件队列。主线程内所有任务完成后，主线程会读取事件队列，事件队列中的任务依次进入主线程执行。 setTim…
3. 未来魔法校的微前端实践魔法校是tob起家，众所周知tob业务很容易做成巨石应用，近两年来魔法校飞速发展，我们的某个主要的前端项目遇到了瓶颈，那就是项目太大了。
4. JS中时间格式化的三种方法 时间字符串格式化： let time = ‘2020/3/11 14:10:0’; 把上面类型的时间日期字符串转化为我们想要的格式 =>"2020年03月11日 14时10分00秒" 一、正则处理（优） (proto => { function formatTime(template = ‘{0}年{1}月{2}日 {3}时{4}分{5}秒’) { let a…
5. 重新定义代理的扩展性：WebAssembly 在 Envoy 与 Istio 中的应用 原文：https://istio.io/blog/2020/wasm-announce/ 作者：CRAIG BOX, MANDAR JOG, JOHN PLEVYAK, LOUIS RYAN, PIOTR SIKORA (GOOGLE), YUVAL KOHAVI, SCOTT WEISS (SOLO.IO) 译者：陆培尔 编者按 Istio的架构在1.5版本中发生了翻天覆地的变化，控制平面从微服务回归单体，pilot、citadel、gall…
6. vue动态渲染svg、添加点击事件 欢迎关注 ，阅读更多原创技术文章 业务需求(vue项目中) 1.v页面展示svg内容 2.监听svg内部的点击事件 3.动态改变svg内部元素的属性和值 html标签 经多次实验，用embed、img等标签改变src属性的方式，均无法实现上述全部功能（尤其是svg内部点击事件），最终采用 Vue.extend() 方…
7. 计算机技术|前端自动化构建工具Gulp.js 欢迎点击「算法与编程之美」↑关注我们！ 本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。 问题描述 gulp 是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说， gulp 就是用来打包项目的。 解决问题 1 安装 Nodejs 进入 http://nodejs.or…
8. JavaScript 原型、对象 原型与原型链 原型：构造函数的prototype 属性的值。 原型链：通过一个对象的__proto__可以找到它的原型对象，原型对象也是一个对象，，就可以通过原型对象的__proto__,一直往上找，直至Object.prototype(null)。 原型的作用：实现资源共享。（所有实例共享的属性和方法。） 原型 function Person(name)…
9. Webpack 静态模块打包器介绍 本质上，webpack 是一个现代 JavaScript 应用程序的【静态模块打包器】(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webp…
10. 原生JavaScript实现无缝轮播效果 轮播图的动画效果，图片按照规定的方向（从右往左），不停滚动以展示每一张图片，同时还可以通过点击以改变原本的展示顺序。实现有一下几点： 不做点击操作，图片自行滚动（这里我们规定自右向左滚动）； 点击左右箭头，实现图片翻页； 点击提示圆点，显示不同图片； 自动循环： JavaScript…
11. 构建微服务：使用Node.js和DDD、CQRS以及Event Sourcing – 第二部分 概览 构建微服务要求整体思维。理解微服务架构及其适用规则很重要。这是什么意思呢？思考的一种方式是理解给定应用程序里的所有域，以及服务边界的细分。 微服务必须完全和表示给定域的关联上下文匹配——应该是松耦合高内聚的。 在第一部分，我们讨论了示例项目中使用的DDD，CQRS以及event sourcing模式。希望你…
12. 一文搞定前端包管理工具 //安装nvm前请提前卸载原有的node。 //下载地址：https://github.com/coreybutler/nvm-windows/releases nvm // 会提示nvw下的相关命令 nvm ls // 查看已安装node版本 nvm list 也行 nvm install vXX // 安装对应vXX版本的node eg:nvm install v13.9.0 nvm uninstall vXX // 卸…
13. 基于vue-cli3/cli4解决前端使用axios跨域问题 vue-cli4项目中使用 axios 请求后端接口时，浏览器出现跨域报错 一、什么是跨域 1.1 跨域 指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。 1.2 同源策略 是指协议，域名，端口都要相同，其中有一个不同都会产生跨域，在请求数据时，浏览…
14. JavaScript 中的内存管理是如何工作的 作者 | Andréas Hanss 来源 | JS IN PLAIN ENGLISH 链接 | How memory management works in JavaScript 老实说，我是在阅读整个文档之前尝试做些事情的人……大多数情况下，这样做都没什么问题，如果遇到问题，我会重新查看文档来寻找答案。 但是最近，我在使用 React 应用程序尝试 JavaScript 引用时…
15. 使用vue-cli3搭建Vue+TypeScript项目 npm install -g @vue/cli # OR yarn global add @vue/cli 复制代码 安装好，之后，可以使用 vue –version 查看下版本 二、搭建项目及其配置 vue create 【项目名称】 项目名称不要包含大写字母 vue create name 复制代码 如果是第一次使用3.0 版本，第一个选项可以忽略，只看后面两个 d…
16. WordPress站点恶意JS注入漏洞分析 Sucuri的安全研究人员检测到攻击者利用Wordpress插件的漏洞进行攻击活动。该攻击活动中有超过2000个WordPress网站被黑，并重定向受害者到含有浏览器通知订阅、假的问卷调研和假的Adobe Flash下载活动的垃圾邮件站点。 JS注入 该漏洞被利用后，攻击者可以注入JS脚本到站点的主体，JS脚本可以从admarketlocation c…
17. JS中URL参数处理的三种方法 queryURLParams：获取地址栏中问号传参的信息 ‘ www.xxxxxxx.cn/?lx=1&n… ‘ 解析问号和井号后面的值，最后得到一个包含信息的对象 {HASH: "video", lx: "1", name: "JS", from: "baidu"} 一、常规正则处理 (proto => { …
18. JavaScript异步机制知识整理 写这篇文章主要是帮助自己梳理知识点，文章的大部分内容来源于其他关于异步和事件循环的文章，文章末尾附上链接。 如何理解javascript是单线程语言 什么是单线程？我理解的单线程是这样的，现在有A事，B事，C事需要做完，但是只有甲这一个人做，而多线程就是除了甲，还有乙可以做这些事。 再看看js的通常行为，比…
19. 为什么学习javascript 一、你知道，为什么JavaScript非常值得我们学习吗？ 所有的主流浏览器都支持javascript 大部分网页都使用javascript 它可以让网页呈现出各种动态效果 作为一个web开发师，如果你想提供漂亮的网页，拥有让我用户满意的上网体验，js必不可少。 二、javascript入门槛低，易学 学习环境无处不在，只要有文…
20. JavaScript内部原理：浏览器的内幕点赞再看，养成习惯本文 GitHub [链接] 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎Star和完善，大家面试可以参照考点复习，希望我们一起有点东西。
21. webpack优化实践(遇到很奇葩的问题) 2、优化背景 webpack 的构建过程太花时间 webpack 打包的结果体积太大 作者的项目是webpack 2的老项目（项目已上线很久，不太敢突然的升级webpack版本，以防有意想不到的问题） 3、优化操作 1. 用include或exclude来避免不必要的转义 module: { rules: [{ test: /.js$/, use:…
22. js数组去重(最优方法)笔记 资料: js 世界-数组去重到底最快的是谁？ Remove duplicate values from JS array 大致思路 遍历数组的各个项并判断某项是否重复。时间复杂度往往是 O(n^2) 优化：通过object，或者set，借助散列表查找的优秀性能来降低复杂度 下面记录几种方法 去重的是单一基础类型（number）可以用 遍历…
23. 使用vue实现HTML页面生成图片 随着网络的发展，越来越多的网络平台应运而生。如何获得更多的流量，吸引更多的眼球已经成为网络平台生存、发展的必要条件。现在网络平台最常见的一种宣传方式就是人邀人。 我最近就接到一个需求，做一个 海报页面，并且能保存到手机 ，方便用户分享给朋友，希望能够达到人邀人的效果。 给人第一感觉这…
24. 简单通俗的理解Vue3.0中的Proxy目录 Proxy Vue 2.0 使用 Object.defineProperty()实现数据响应 Vue 3.0 使用 Proxy Proxy的其他应用 Proxy 什么是代理呢，可以理解为在对象之前设置一个“拦截”，当该对象被访问的时候，都必须经过这层拦截。意味…

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

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