20200610 前端开发日报

体验微前端(qiankun);总结一下使用JavaScriptVue一些简化代码的功能;跟着大佬学习vue的diff算法;看到赚到重读vue2.0风格指南,我整理了这些关键规则;JavaScript的小秘密;浅析 Vue 的双向绑定;Vue 3 响应式原理及实现;五.记一次用webpack搭建vue项目

  1. 体验微前端(qiankun)

    微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略,下面这张图来了解下。 qiankun qiankun 蚂蚁金服基于single-spa 的微前端解决方案,生产可用。 特性 基于 single-spa 封装,提供了更加开箱即用的 API。 技术栈无关,任意技术栈的应用均可 使用/接...

  2. 总结一下使用JavaScript和Vue一些简化代码的功能

    一、前言 现在也算上暂时闲下来了。算算已经好久没写文章了。这篇文章记录下我使用的一些前端小功能吧。如有错误,请及时指出。 二、vue数字滚动小组件 开发中要用到数字上下滚动的组件。在 github 上找了找这种功能。找到了一个 vue-digitroll 。周末花了一下午的时间研究了 vue-digitroll 的源码...

  3. 跟着大佬学习vue的diff算法

    本文旨在理一下vue中diff算法的主要逻辑和关键细节。 从一个简单的demo切入: p标签渲染一个items数组 <div id="demo"> <p v-for="item in items" :key="item">{{ item }}</p> </div> <script src="../vue-source/dist/vue.js"></scr...

  4. 看到赚到重读vue2.0风格指南,我整理了这些关键规则

    又是一个阳光明媚,风和日丽的周末,有人陪女神去逛街,有人陪女神去看电影,小编却默默的拿出电脑。哈哈哈,不是小编屌丝,女神正坐在旁边玩手机(感觉不是屌丝才怪)。 这两天小编重读了一遍vue2.0官网的风格指南,整理了这九条关键规则。 v-for设置键值 提到 v-for 需要设置键值,许多人第一反应会从 diff 算...

  5. JavaScript的小秘密

    JavaScript 中所哟变量都可以当作对象使用,除了两个例外 null 和 undefined。 false.toString(); // false .toString(); // "1,2,3" funciton Fun(){} Fun.num = 1; Fun.num; // 1 复制代码 一个常见的误解是数字的字面值不能当作对象使用。这是因为JavaScript解析器的一个错误,他试图将点操作...

  6. 浅析 Vue 的双向绑定

    Vue 中的双向绑定是指当我们改变 data 中的一个变量时,页面中该变量也会随之跟新,我们在页面中改变一个变量时,data 中变量的值也随之变化。 通常我们使用 v-model 来实现双向绑定,并且 v-model 只能在 input、selsect、textarea 元素和 component 中使用。 1. v-model 的原理 <input type="text"...

  7. Vue 3 响应式原理及实现

    从零开始实现你自己的响应式库,从零开始实现 Vue 3 响应式模块。本文完整内容见buid-your-own-vue-next 1. 实现响应式 响应基本类型变量 首先看一下响应式预期应该是什么样的,新建一个 demo.js 文件,内容如下...

  8. 五.记一次用webpack搭建vue项目

    前言:都2020年了,感觉是时候该学一波webpack了,趁着最近有时间,就学了一下,等把官网上的webpack结构和模块大概看了一遍之后,就感觉可以开始搭个项目实战一下了,从0开始,一步步记录下来 使用版本: webpack4.x 1.包含插件和loader * html: html-webpack-plugin clean-webpack-plugin * css: ...

  9. 互动直播中的前端技术 — 即时通讯

    在疫情期间,上班族开启了远程办公,体验了各种远程办公软件。老师做起了主播,学生们感受到了被钉钉支配的恐惧,歌手们开启了在线演唱会,许多综艺节目也变成了在线直播。在这全民互动直播的时期,我们来聊聊互...

  10. 10+个很酷的Vue.js组件,模板和demo示例

    众所周知, Vue.js 组件是Vue创建自定义元素的重要功能之一,同时,模板可帮助你避免从头开始创建网页设计。总之,这些工具对于希望其开发过程更快,更高效的任何Web开发人员都是必不可少的。 此外,在过去的几年中,Vue.js 变得非常流行,许多企业将其添加到他们的技术栈中。该框架的优点是它具有内置的数据绑定和M...

  11. webpack打包首页优化及路由懒加载

    最近做了一个小型的vue的h5项目,发现在手机上运行的时候,第一次进去的首页比较慢,然后同事提了下可以在生产环境用cdn,于是我尝试了下 生产环境开启cdn 1、 在 vue.congfig.js 里面加入 const isProduction = process.env.NODE_ENV == "production"; configureWebpack: (config) => { if (...

  12. 单个 Unicode 字符的 js 匹配规则

    最近接到一个需求,实现一个用户昵称的输入框,需要限制当前字数与最大字数,超过最大字数输入无效。 效果: 由于 JavaScript 用的是 UCS-2 编码方式(UTF-16 的子集),造成所有字符在这门语言中都是2个字节,如果是4个字节的字符,会当作两个双字节的字符处理。这就造成字符编码从65536开始的4个字节的...

  13. 前端错误监控sdk初步实践

    作为前端经常遇到线上报错却无法复现的情况,要是这个时候有错误监控能快速帮我们定位问题所在,再查找错误监控的相关资料尝试去实现一个自己的sdk。下面我以 错误监控 和 设备信息 两方面作为关注点去实现。 完整代码 错误监控 运行时报错 window.onerror = (msg,url,lineNo,columnNo,e) => { // ...上...

  14. vue3响应式系统流程分析与实现

    vue3 beta 版本已经发布快两个月了,相信大家或多或少都有去了解一些 vue3 的新特性,也有一部分人调侃学不动了,在我看来,技术肯定是不断更迭的,新的技术出现能够提高生产力,落后的技术肯定是要被淘汰的,五年前会JQ一把梭就能找到一份还行的工作,现在只会JQ应该很少公司会要了吧。刚好前两天尤大也发了一篇文章讲...

  15. 从零开始在NodeJs中使用node-schedule增加定时器任务

    java中直接使用定时器类就行了,但是在node中就没有这么简单了,只能使用setInterval或者setTimeout两个方法来实现,但是太繁琐了,搜索了之后发现 node-schedule 这个包,特意试用一下 版本 node版本12.16.2 koa2版> 2.7.0 1. 安装 npm insatll node-schedule -S 复制代码 2. 使用方法 2-1. 调用格式 // 任...

  16. Webpack(系列三):热模块更新和使用 Babel处理 ES6语法

    比如,我做了css样式的修改,当我想要在不刷新当前页面html的前提下,让样式渲染出来,就需要用到热模块更新了,相关配置: 在webpack.config.js文件中,对devServer和plugins进行配置 const webpack = require('webpack') // 移入webpack 在plugins中需要用到它的热模块加载方法 module.exports = { dev...

  17. JavaScript 中 15 种常见的数组操作

    点赞再看,养成习惯本文 GitHub [链接] 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。

  18. 原生canvas制作画图小工具的踩坑和爬坑

    最近在写一个类似截图里的简易画图的小工具,画线,画矩形,画圆,可以选择颜色,就像这样 写的过程中遇到了一些坑,还好爬出来了,也得到几位大佬的指点,稍微接触了一下zrender,在这里记录一下。 坑1,绘制过程的预览 用Canvas画线没什么问题,moveTo和lineTo就好了,来一段代码凑字数(:joy:) 鼠...

  19. 一份值得收藏的 Git 异常处理清单

    Git 作为一种分布式版本控制系统已经成为现在开发的宠儿,不仅应用在前端、后端、客户端等开发场景中,也成为各行业互联网企业分工协作的必备技能之一。

  20. vue错误runtime监控小结

    Manually capture an exception and send it over to Mustang ####入参 名称 | 类型 | 描述 | 备注 --- | --- ex | error | An exception to be logged | 必填 options | object | A specific set of options for this error | 可选 出参 名称 | 类型 | 描述 --- | --- Mustang | object | Mustang 对象自身 使用...

  21. 使用 JavaScript 实现一个高效的 LRU cache

    如何利用 JavaScript 类型化数组的强大功能,为固定容量的数据结构设计自己的低成本指针系统 假设我们需要处理一个非常大(比如几百 GB)的 csv 文件,其中包含需要下载的 url。 为了确保我们在解析整个文件的时候不会耗尽内存,我们逐行的读取这个文件: csv.forEachLine(line => { download(line.url); })...

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

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