20200424 前端开发周报

js、css对web页面解析、渲染的影响;了解 CSS min()/max()/clamp() 数学函数;前端面试·Vue.js;Web应用调试利器:queryObjects;深入 Nodejs 源码探究 CPU 信息的获取与利用率计算;JavaScript基础自检之原型和原型链;vue组件回调返回值,让你的代码更为简洁;从剖析Vue-cli源码出发完整的React业务脚手架实践(一)——脚手架架构基础搭建

  1. js、css对web页面解析、渲染的影响

    这张图描述了页面解析渲染的整体流程,但是凭这张图还看不出js、css具体如何阻塞页面解析和渲染的。 需要注意的是,这个流程是会执行很多次的,不是等到HTML全部解析完,css全部解析完再去合成渲染树、布局、绘制,一次执行完。根据这张整体流程图,有一种错误的认识是,css没有加载解析完,DOM树无法结合样式生成渲染…

  2. 了解 CSS min()/max()/clamp() 数学函数

    “min()/max()/clamp() 这 3 个数学函数是现代浏览器 2018 年底开始支持的,因此,如果你胆儿足够肥,是可以在实际项目中小范围使用的。”

  3. 前端面试·Vue.js

    Web界面由DOM树(树的意思是数据结构)来构建,当其中一部分发生变化时,其实就是对应某个DOM节点发生了变化, 虚拟DOM就是为了解决浏览器性能问题而被设计出来的。 如前,若一次操作中有10次更新DOM的动作,虚拟DOM不会立即操作DOM,而是将这10次更新的diff内容保存到本地一个JS对象中,最终将这个JS对象一次性attch到D…

  4. Web应用调试利器:queryObjects

    queryObjects 是Chrome 62新增的一个 Command Line API 。 官网这样介绍该API A new API for querying heap objects Call queryObjects(Constructor) from the Console to return an array of objects that were created with the specified constructor. For example: queryObjects(Promise). …

  5. 深入 Nodejs 源码探究 CPU 信息的获取与利用率计算

    在 Linux 下我们通过 top 或者 htop 命令可以看到当前的 CPU 资源利用率,另外在一些监控工具中你可能也遇见过,那么它是如何计算的呢?在 Nodejs 中我们该如何实现? 带着这些疑问,本节会先从 Linux 下的 CPU 利用率进行一个简单讲解做一下前置知识铺垫,之后会深入 Nodejs 源码,去探讨如何获取 CPU 信息及计算 CPU…

  6. JavaScript基础自检之原型和原型链

    这篇总结,主要是看了 一名【合格】前端工程师的自检清单 这篇文章,照着单子来整理总结下,这篇介绍的是「JavaScript中的原型和原型链」这个小结,是按着其中的问题进行归档整理的,其中参考了很多前辈总结的知识,在这里表示感谢! JavaScript基础自检之原型和原型链 JavaScript自检之变量和类型 …

  7. vue组件回调返回值,让你的代码更为简洁

    缘由 最近写公司业务代码的时候遇到这样一个需求,我写这块部分需要新增加一个弹窗,进行二次确认。使用的组件库是比较老的ant desgin vue 1.2.4。这个组件库是没有像elementUI的$confirm方式可以自定义html部分的。但是我的内容其实非常少。 如果用传统的直接写弹窗的二次确认方式 缺点1:业务代码会变得很多 缺点2…

  8. 从剖析Vue-cli源码出发完整的React业务脚手架实践(一)——脚手架架构基础搭建

    随着公司业务线增加了以后,基础脚手架已经满足不了需求,于是开始着手业务线的脚手架开发,我基于vue cli源码和自己的业务实践,吸取vue-cli插件模式的开发优势和业务结合,做一套关于React的项目脚手架。 写在前面 这是一篇长期持续更新的React脚手架实践,为的是吸取Vue Cli的脚手架经验,通过我们习惯的 插件-…

  9. Webpack上手指北

    近几年,打包构建工具层出不穷,前有Grunt、Gulp,后有Webpack、Rollup等,它们各有优势,均受到部分开发者的欢迎,本文聊聊Webpack的使用。 模块化 不论是新工具还是新技术,都是为了解决问题而存在,那么构建工具解决什么问题呢? 众所周知,最初的网页十分简单,没有多少交互,代码量也少,但随着技术的发展,J…

  10. 整理了一些常用的JS开发小技巧

    下面整理了一些js开发常用的小技巧,没有顺序之分,可以跳着看,会持续补充~~~ 一,数值型 求数字数组最小值 let list = let min = Math.min(…list) // 1 复制代码 二,字符型 字符串倒序 字符串倒序就是把字符串倒着排序,可以用下列方法 .split(”).reverse().join(”) let str = ‘abc’ le…

  11. 前端周刊:2020-5 期

    前端开发 结合项目来谈谈 Puppeteer Puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包,用来模拟 Chrome 浏览器的运行。 讨索 webpack5 新特性 Module federation 在腾讯文档的应用 详细扒了一遍webpack5对跨应用共享模块的解决思路。 第…

  12. web API(1) JS组成

    ECMAScript(JavaScript语法) DOM(页面文档对象模型) BOM(浏览器对象模型) Web APIs阶段 JS基础学习ECMAScript基础语法为后面做铺垫,Web APIs是JS的应用,大量使用JS基础语法做交互效果 API(Application Programing Interface应用程序编程接口):是一些预先定义的函数,目的是提供应用程序与开…

  13. 利用Docker挂载Nginx-rtmp(服务器直播流分发)+FFmpeg(推流)+Vue.js结合Video.js(播放器流播放)来实…

    原文转载自「刘悦的技术博客」 v3u.cn/a_id_75 众所周知,在视频直播领域,有不同的商家提供各种的商业解决方案,其中比较靠谱的服务商有阿里云直播,腾讯云直播,以及又拍云和网易云的有偿直播服务,服务包括软硬件设备,摄像机,编码器,流媒体服务器等。但是其高昂的费用以及较高的准入门槛让许多个人和小型企业望…

  14. JavaScript 的内存世界与原型链

    内存世界 上图我们可以简单的看作电脑内存,我们的JS代码就存放在代码区,变量存放在不知道什么区,而数据则专门存放在Stack(栈区),Heap(堆区)中。 stack与heap的区别 stack存放对象(string number booleans),顺序存放 heap存放非对象,随机存放 对象的篡改 var person = …

  15. [深入19] 手写Promise

    Hooks Nginx Docker 部署vue项目 gitlab-CI AST抽象语法树 Tapable 手写webpack – compiler简单编译流程 前置知识 一些单词 race:比赛,竞赛 Settled…

  16. 『字节跳动LeetCode联合周赛』–周赛185(JavaScript) | OFEII

    前言 :laughing: Hi! my name is OFEII, a Front-end Developer rookie…… :sweat_smile: Still 0 offer in this cold 2020 Spring. :grinning: 菜鸟 。大四前端菜鸟,20春招至今还是0 offer(下周好像有两个hr面了), 兴趣使然 地刷上了LeetCode,发现用js刷算法是一件很有趣的事,感受到数据结构和…

  17. PanDownload 不能用了,可是我发现它们上了 GitHub 热榜

    大家好,我是头条菌。 我的微信号:toutiaoio007,欢迎加我好友,拉你入群~ 几天前,PanDownload 作者因涉嫌提供侵入、非法控制计算机信息系统的程序、工具罪被逮捕。 随后,百度网盘官方也做了回应。毫无疑问,PanDownload 不能用了。 今天,头条菌打开…

  18. Angular学习前期准备

    Angular(通常是指 " Angular 2+ " 或 " Angular v2 及更高版本 ")是一个基于 TypeScript 的开源 Web 应用框架 由 Google 的 Angular 团队以及社区共同领导。Angular 是由 AngularJS的同一个开发团队完全重写的。 Angular 8 于2019年5月28日发布。特性包括:为所有应用代码进行差异化加载、针对惰…

  19. 目标是最完善的微前端解决方案:qiankun 2.0

    微前端框架 qiankun 正式发布 2.0 版本。

  20. Vue + TypeScript 项目放弃 TSLint,拥抱 ESLint

    prettier 用来做格式化工具配合我们的 ESLint 可以更大的发挥作用,首先安装相关依赖: npm i -d prettier eslint-config-prettier eslint-plugin-prettier eslint-config-prettier: 这个插件的作用是当 ESLint 和 prettier 配置冲突时优先 prettier eslint-plugin-prettier: 将 prettier 作为 ESLint 规…

  21. Vue Cli 3 打包配置–自动忽略 console.log 语句

    不过这时会有一个问题,就是在开发环境的时候编译会非常慢。例如修改了一个变量的值,我的电脑要编译 10 秒才能重新刷出来页面,一直卡在 92% chunk asset optimization。

  22. VolgaCTF 2020 Qualifier-Web

    首先大概一下浏览基本功能 登陆/注册 查看个人信息以及修改个人信息和头像 Report Bug将URL发送给admin进行xss 大概测试了一下,发现如下: 修改个人信息的地方会进行html实体编码没法xss,头像处试过传了下svg,发现不太行,网站对type做了限制,限制了svg以及xml等文件的上传,并且它是把网站上传…

  23. 解读 vue-class-component 源码实现原理

    使用过一段时间 class 来定义组件,要用 vue-property-decorator 提供定义好的装饰器,辅助完成所需功能,对这个过程好奇,就研究了源码。内部主要依靠 vue-class-component 实现,所以将重点放在对 vue-class-component 的解读上。 本文主要内容有: 装饰器作用在 class 定义的组件,发生了什么 解…

  24. 这道易错js执行顺序的题,隐藏的点你get到了吗?

    面试的时候经常碰到一些关于js执行顺序的题,涉及到Event-loop,微任务、宏任务、任务队列之类的,有的题比较简单,前段时间在交流群里,群友贴出来一题,我觉得蛮有意思,当时做了一下,给出了简单的解析 ,事后回想,解析的比较笼统,今天我们来扒衣扒皮,来我们直接上题, 上代码 console.log(‘script start’) …

  25. 图解javascript核心知识点—原型链

    要理解原型链,绕不开constructor、prototype、__proto__这几个核心的知识点,它们的关系如下: 上面的图是一个最简单的原型链,先有一个直观的认识。下面将围绕上面3个点一步步对原型链抽丝剥茧,最后在来总结究竟什么是原型链,自然就清晰了。 2. 课前预习 再正式进入主题之前,先了解几个知识点 2.1…

  26. Vue源码探秘(十二)(生命周期)

    回顾我们之前学习的内容,在创建一个 Vue 实例的时候需要经过一系列的初始化过程,比如设置 数据监听 、 编译模板 、 挂载实例到 DOM 、在数据变化时 更新 DOM 等。 同时在这个过程中也会运行一些叫做 生命周期钩子 的函数,这给了用户在不同阶段添加自己的代码的机会。 下面引用官网的一张图,这张图展示了…

  27. VueX的模块你知道多少?

    VueX的模块你知道多少? 为什么会出现VueX的模块呢?当你的项目中代码变多的时候,很难区分维护。那么这时候Vuex的模块功能就这么体现出来了。 那么我们就开始吧! 一、模块是啥? /* eslint-disable no-unused-vars */import Vue from ‘vue’import Vuex from ‘vuex’Vue.use(Vuex)export default new Vuex.St…

  28. 从零开始使用JavaScript制作自己的命令行(CLI工具)

    我们每天都使用CLI程序(例如Terminal,cmd,Powershell等)进行软件开发。你使用的每个工具本质上都是其他软件工程师的产品,我们也可以制作自己的CLI工具。 从零开始的简单CLI,让我们开始吧! 首先,让我们制作一个简单的CLI工具,该工具会打印“ HelloWord” 要制作CLI,您需要制作两个文件 package.json…

  29. Node.js v14 官方发布说明来了

    本文由Michael Dawson 和 Bethany Griggs撰写,同时 Node.js 社区委员会和 Node.js 技术指导委员会也提供了贡献。

  30. 前端人应该知道的网站和工具

    很早就想写一篇文章关于前端人的工具库了,因为我发现其实有了工具,才是成为工具人的基础。 01 前言 最近有很多初学者在后台留言说:“我是一个小白,怎么才可以快速入门前端呀?”。关于这个问题其实不太好回答,因为这个问题就好像说我是一个穷光蛋如何快速致富一样的道理。但是也不是…

  31. 飞猪微前端实践:统一运营工作台的解决方案

    “基于微前端与 SDK 化的一体化集成方案,完成 4 大场景 10 余个平台的接入和配置打通,并对数百处视觉和交互体验进行了优化 ,在后期体验度量和用户反馈跟踪能力接入后,整体已达可用状态。”

  32. 40.vue全解(起手式1)

    (类似完整版的jQuery),生产环境版本(类似mini版本的jQuery) 1.导入开发版本的vue.js 2.创建vue实例对象,设置el属性和data属性 3.使用简洁的模板语法把数据渲染到页面上 <div> {{message}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js…

  33. JavaScript中的异步模式,我知道的都在里面了

    @ 前言:JS是单线程的语言,这意味着它同一时间只能做一件事,当碰到比较耗时的事情的时候,所有后面等待执行的任务就都得原地等待,为了解决这一问题,出现了异步,而异步的执行机制是主线程发送一个异步请求给相应的工作线程,然后主线程去处理其他事情,等到工作现成完成后,浏览器内部的线程会把工作线程的回…

  34. JS 万字总结 重量级干货

    本篇文章属于 知识总结 型,归纳出许多比较零散的知识点,都是 干货 噢~ 如果你是小白那么这篇文章正好适合你,如果你是老手那么不妨巩固一下看看还有哪些边角料没补! 建议:适合 有js基础 的小伙伴观看, 篇幅较长 ,建议先 收藏 再慢慢浏览 整整花了一周时间总结了一些比较重点也有些比较偏的知识,希望各位…

  35. JavaScript 如何与 CSS 和 Sass 共享数据

    持续进步的同学都关注了 “ 1024译站 ” 这是1024译站的第 82 篇文章  来源:css-tricks.com 作者:Marko Ilic 编译:大道至简 JavaScript 与 CSS 已经相生相伴 20 年了,但是要在它们之间共享数据却非常困难。当然,这方面肯定有过一些尝试,不过我想到的是简单而又直观的做法:不需要做代码结构上…

  36. 防止 Git 泄漏的 5 种最佳做法

    之前看过几个新闻,说是因为程序员的疏忽,将公司服务器的密钥上传到 GitHub 上,导致公司数据丢失,造成了很严重的影响,恰巧最近看到一篇英文博客有介绍如何防止 Git 泄露,下面是我的翻译内容,原文来自于 5 Best Practices To Prevent Git Leaks ,如果有翻译不当的地方欢迎指正,希望能对你有所帮助。 …

  37. ES6—async, await, promise 综合例子

    ES6—async, await, promise 综合例子         new Promise(主线程代码).then(成功微任务, 失败微任务);         sync—替代promise         await—替代then 1. <div id="aa"></div> …

  38. 【3分钟技能get】js浮点数计算精度问题

    先看如下计算的输出: 0.1 + 0.2 显然是0.3。但是在javascript中,结果是什么呢? 0.30000000000000004 这是程序语言在数值计算中很容易出现的精度问题,如下图饿了么账单页金额显示。 问题产生的原因 先来看对Number类型数值二进制的表示,由3部分组成: 符号位 * 指数位 * 尾数位 由于js采用64…

  39. node.js通过Error.prepareStackTrace获取上层调用函数的文件名地址和行数位置

    node.js中可以通过 __dirname 获取当前文件的目前。 那么如何在被调用函数中获取调用者的文件地址和函数名以及行数位置? 可使用Error.prepareStackTrace来获取StackTrace数组对象,获取调用者文件信息。 var getCallerPath = function() { var orig = Error.prepareStackTrace; Error.prepareStackTrace = funct…

  40. Vue3.0 Beta–有牛优刘尤老师上课笔记

    小白:喂,Vue3.0我是放弃还是继续学习?你们一直到现在都还没有给我回电话。 牛老师:这个吧,大概4.21号晚上 9:00就能给你统一答复,你也不要着急,明白吧。 小白:你贵姓呀? 牛老师:我姓牛 小白:尤啊 哪个尤啊? 牛老师:牛 小白:优啊? 牛老师:牛! 小白:刘啊? 牛老师:牛!(逐渐暴躁) …

  41. Vue 的坑你踩过几个

    喜欢我的话,点击上方蓝色文字关注吧 不喜欢看文字的同学,点击下方绿色按钮,竖起耳朵听吧。 有时候我们踩坑,是因为一些知识点不知道,按照我们自己的逻辑思维,认为应该是这样,但结果并没有按照我们想要的输出,这个时候,我们就掉坑里了。 坑一 …

  42. 在现代前端项目中使用 Worker

    由于需要在 Browser 进行大量的(音频转解码)计算,所以吾辈开始尝试使用 webworker 分离 CPU 密集型的计算操作,最终找到了 comlink 这个库,但之前在 vue 中使用时发生了错误,目前看起来已经得到了解决,所以在此记录一下。 调研方案 web-worker-proxy :结合了 proxy/promise/webworker 的强大工具库,但…

  43. Gitflow 分支管理策略

    Gitflow存在两个记录项目历史的分支 Master分支:存储(官方的,正式的)项目发布历史记录的分支。 develop分支:充当功能的集成分支。 Develop分支将包含项目的完整历史记录,而master将包含简化版本。现在,其他开发人员应该克隆中央存储库,并为deve…

  44. Vue中通过vue-router实现命名视图的问题

    在用vue-router路由处理一些需求的时候 例如 有时需要 同时同级 展示多个组件 而不是嵌套展示 例如:创建一个布局 有侧导航和主内容两个视图 此时命名视图就派上用场了 在路由对象中 使用 components 属性 以使一个路径下可挂载 多个 子组件: 之后即可为每个要展示的组件指定一个名字 默认name为 defau…

  45. ESModule 和 commonjs module 混用

    在一些项目中,使用 webpack 打包,难免会有 ESModule 和 commonjs 混用的情况,当然,全部用 ESModule 是最好的,符合标准。但是,在不得已或偷懒情况下必须混用时,要注意混用时的一些模块逻辑。 babel 会将 ESModule 导入进行处理,也就是说 import 的目标文件是 module.exports 导出的 commonjs 文件是可以的。但是…

  46. JS事件总结

    1. 事件流(事件传播) 描述的是从页面接收事件的顺序。 IE事件流是事件冒泡流,NetScape是事件捕获流。 window: window document: document html: document.documentElement body: document.body div: document.getElementByID(‘div’) 2. 事件流阶段 (1)事件捕获阶段 (2)处于目…

  47. 带你一步一步配置Babel7

    有时间学习研究了一下 babel ,扒了官网和搜了很多的资料,没有一个资料写了很详细的实践,都偏重于理论。故整理一篇实践操作的 babel 配置,以供学习。 babel是什么? Babel 是一个 JS 编译器 Babel 是一个工具链,主要用于将 ECMAScript 2015+ (又可称为 ES6 , ES7 , ES8 等)版本的代码转换为向后兼容的…

  48. 理解 TypeScript 类型拓宽

    创建了一个 “重学TypeScript” 的微信群,想加群的小伙伴,加我微信 “semlinker”,备注重学TS。 本文是 ”重学TS系列“ 第 30 篇文章,感谢您的阅读! 一、类型拓宽 之前的文章,我们已经介绍了 TypeScript 的类型收窄,本文我们将介绍 TypeScript 的类型拓宽。在一些情况下,TypeScrip…

  49. 基于 HTML5 WebGL 的高炉炼铁厂可视化系统

    前言 在当今 工业4.0 新时代的推动下,不仅迎来了 工业互联网 的发展,还开启了 5G 时代的新次元。而伴随着带宽的提升,网络信息飞速发展,能源管控上与实时预警在工业互联网中也占着举足轻重的地位,而对于高炉炼铁的发展上来看,目前已完成国内260座高炉的数字化和智能化落地,并推动炼铁大数据平台在俄罗斯、越南…

  50. 手把手教你用原生JavaScript造轮子(五)——Collapse折叠面板

    Collapse 折叠面板 文档: Collapse 源码: tiny-wheels 如果觉得好用就点个 Star 吧~(〃’▽’〃) 效果 思路 每个面板折叠、展开的动画效果其实就是去控制 collapse-panel 的 height 变化,所以在一开始就需要记录下每个面板的原始高度,否则用户在折叠面板后,高度就变为 0 了,这时候计算出来的…

  51. JavaScript系列之作用域与闭包

    在进入作用域的讨论之前先明什么是作用域,通过一句话简单描述就是: 一组明确定义的规则,它定义如何在某些位置存储变量,以及如何在稍后找到这些变量 词法作用域 作用域的工作方式有两种占统治地位的模型。其中的第一种是最最常见,在绝大多数的编程语言中被使用的。它称为 词法作用域 ,我们将深入检视它。另…

  52. WebSocket学习总结

    本文随便写了点自己对WebSoket通讯协议理解,在两种框架上玩的Demo,然后踩了几个坑还有没填上的坑(欢迎评论指导一下)。 WebSocket是什么?使用WebSocket的原因? WebSocket是网络通讯协议的一种。 提到网络通讯协议,我第一个就想到了HTTP协议,但是HTTP协议的一些特性我想不用多说,大家也都是了解的,像无…

  53. 如何搭建自己的 GitLab 服务

    前言 GitHub、GitLab 以及 Bitbucket ,相信大家都已经耳熟能详,它们是目前最流行的三大代码托管平台 。我们使用 git 管理的项目,要想实现远程协作,就得依赖这类托管平台。 我们可以直接使用这三家提供的在线服务,也可以通过购买他们的付费服务或者开源服务搭建自己的私服,来托管团队项目…

  54. vue项目打包之减小包的体积

    默认情况下,凡是通过 import 方式引入的包,打包时都会被打包,这就会导致最后的包体积比较大,伴随而来的就是程序的加载速度慢 解决方法主要是两个 一个是使用CDN 一个是路由的懒加载 先说 CDN 核心思想就是将线上环境中用到一些依赖,比如 vue、vueRouter 、axios 等,使用 cdn 节点的方式引用,而不是打到…

  55. 看不懂 00 后的黑话缩写?没事,这款上了 GitHub 热榜的开源工具来帮你

    这些神奇的词汇你看懂吗?nss、zqsg、rs、xswl、nbcs、ky、dbq、ssfd 没事,「能不能好好说话?」 拼音首字母缩写翻译工具来啦! 项目介绍 社交平台上通过拼音首字母缩写指代特定词句的情况越来越多,为了让常人勉强能理解这一门另类沟通方式、做了这一个划词翻译油猴…

  56. JavaScript判断字符串是否为数字类型:Number.isInteger、isNaN、正则表达式比较

    JavaScript中有Number.isInteger可以判断一个字符串是否为整数。不过目前JS没有内置的函数来判断一个数字是否为包含小数的数字: Number.isInteger(0); // true Number.isInteger(1); // true Number.isInteger(-100000); // true Number.isInteger(99999999999999999999999); // true Number.isInteger(0.1); // fals…

  57. 备战-Vue篇

    说到Vue那么最开始我想说到的一个点就是他俩,用了这么久的Vue那么应该要知道他是MVVM软件架构设计模式。 MVC 从前端到后端交互,前端请求通过路由找到对应控制器拿到数据,数据交替是单向的。简单来讲就是前端负责页面后端负责数据。 MVVM 细化了MVC的前端部分,数据直接挂到框架上面直接渲染…

  58. 浅谈 Comet、SSE、WebSocket

    前端时空前端网红集结号,传递一线全栈技术,带你穿越前端时空。 前言 对于前端开发者,我们只做两件事,获取数据,和把数据展示出来。在不同业务场景下,我们需要不同的通信方式和后端交流。在最早的刀耕火种年代,那时候还没有Ajax,我们只能通过URL请求资源,表单提交数据。后来随着大前端的发展以及…

  59. 挑战全网最幽默的Vuex系列教程:第二讲 Vuex旗下的State和Getter

    先说两句 上一讲 「Vuex 到底是个什么鬼」 ,已经完美诠释了 Vuex 的牛逼技能之所在(纯属自嗨)。如果把 Vuex 比喻成农药里面的刘备,那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄,而且他打的枪还是双排量的,认识到这一点后,那么接下来就是要了解他到底是如何打枪的,是左手打,还是右手打,还是双…

  60. 再过几天,就是一名3年开发经验的前端了

    日子过的真快,还记得3年前自己刚刚从培训机构学了4个月出来找工作的样子。每天睁开眼以后就是投简历,等电话,去面试,如此循环往复。那个时候住在城中村,每月280块钱的房租,代价就是村里没有移动的信号,每天要坐公交去市图书馆等面试邀请,令人沮丧的是,面试公司不是培训机构就是我不满足人家条件,终于有一家公司…

  61. 如何给自己的vue组件做一个快乐的提示

    友情提示:本教程只提供vscode的提示方法!别的编辑器我不会搞! 用过 vscode 和 element-ui 组件的小伙伴一定会体验过,他的组件能够自动提示名称以及提示可传入 Attributes 下面是使用截图 附一张 el-dialog 组件传值说明图 可以看到,它提示的值基本都是能对应上的。不同于 …

  62. 【剑指offer:圆圈中最后剩下的数字】JavaScript实现

    题目描述:0,1,,n-1 这 n 个数字排成一个圆圈,从数字 0 开始,每次从这个圆圈里删除第 m 个数字。求出这个圆圈里剩下的最后一个数字。例如,0、1、2、3、4 这 5 个数字组成一个圆圈,从数字 0 开始每次删除第 3 个数字,则删除的前 4 个数字依次是 2、0、4、1,因此最后剩下的数字是 3。 示例: 输入: n = 5, m = 3 …

  63. 利用Github webhook 自动部署VUE项目之乞丐版

    用VUE写了个小项目,每次更新了都要在本地 build 好了后打包再上传到服务器上,再解压。 这就很麻烦,一开始想要的用 jenkins 来自动集成,但是操作起来很麻烦,且没必要。但是我注意到了 github 提供了一个 webhook 钩子,当 push 了代码后,github 会向指定的 Url 发起一个 POST 请求。 那么,我就想到了可以用 fl…

  64. 观察者模式(JavaScript实现)

    观察者模式中通常有两个模型,一个观察者( observer )和一个被观察者( Observed )。从字面意思上理解,即被观察者发生某些行为或者变化时,会通知观察者,观察者根据此行为或者变化做出处理。那么具体如何操作呢,下面:point_down:我们就用 JavaScript 代码实现一个观察者模式。 实现 观察者模式JS实现 let o…

  65. Vue 3.0 bate版尝鲜

    4月21日晚, Vue 作者尤雨溪在哔哩哔哩直播分享了 Vue.js 3.0 Beta 最新进展,也建议前端开发者们不要在大项目中使用,小项目是可以的,怀着激动心情,体验一下 3.0 版本,目前并未全局安装 vue-next 官方相关文档参考 composition-api.vuejs.org/#summary github.com/vuejs/vue-n… 1.新建文件夹,…

  66. 通天塔前端性能优化实践

    目标提升前端和Node中间层性能 通天塔是京东内部的一个快速搭建活动页面的平台,用户可以通过在可视化平台上选择需要的模板及配置对应数据,来生成对应的原生、H5及PC活动页面。模板样式丰富,操作灵活,在京东被大量使用,用户流量也呈现出了非常迅猛的增长。但随着项目的迭代,功能越来越复杂,模板越来越多,前端和…

  67. Vue的全局过滤器和私有过滤器的实现

    Vue允许自定义过滤器 可被用作一些常见的文本格式化 过滤器可以用在两个地方:mustache插值表达式 和 v-bind表达式 过滤器应被添加在JavaScript表达式的尾部 由“管道”符指示(管道符就是一个竖杠: | ) 一、全局过滤器 全局过滤器调用时的基本格式: 通过管道符 来进行过滤 例如 {{name | nameOpe}…

  68. 使用Go开发前端应用

    我们知道,在目前各种容器化盛行的时代,Go在开发容器化应用当中,成为大家首选的后端开发语言。目前,最流弊的容器化管理编排系统k8s,几乎每个大的云厂商都在使用。而k8s就是Google使用go语言开发出来的。而现在,go已经可以用来开发前端语言了,有种“一切可以用go语言实现的功能,最终都会用go语言实现”的感觉。这篇…

更多内容请关注公众号【前端开发博客】每日更新


关注我

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

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

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