20200513 前端开发日报

记一次ts全栈开发(前端篇);Vue 中,如何将函数作为 props 传递给组件;前后端分离那些事–Vue;从最简单的斐波那契数列来学习动态规划(JavaScript版本);js的变量提升与in操作符;webpack+vue学习一:配置webpack(分离开发和生产环境),并实现vue页面输出;秒懂js的垃圾回收;某条前端面试题–实现一个封装的ajax器

  1. 记一次ts全栈开发(前端篇)

    主要页面 购物车页面 登录注册页面 个人中心页面 首页 网站截图 环境配置 cnpm i react react-dom @types/react @types/react-dom react-router-dom @types/react-router-dom react-transition-group @types/react-transition-group react-swipe @types/react-swipe antd qs @types/q…

  2. Vue 中,如何将函数作为 props 传递给组件

    Vue 新手经常问的一个常见问题。可以将字符串、数组、数字和对象作为props传递。但是你能把一个函数当作一个props来传递吗? 虽然可以将函数作为props传递,但这种方式不好。相反,Vue 有一个专门为解决这问题而设计的功能,接下来,我们来看看。 向组件传入函数 获取一个函数或方法并将其作为一个prop传递给…

  3. 前后端分离那些事–Vue

    话说"天下大事 合久必分分久必合", WEB开发也是如此; 从过去的JSP、PHP到现在的vue+后端、react+后端、angular+后端… 前后端分离的开发模式已经有好多个年头了,在此期间诞生了很多优秀的前端框架、后端框架、开发模式; 然而,现在服务端渲染又再次被很多人提起,应用在各种项目中;相信伴随硬件技术和网络的…

  4. 从最简单的斐波那契数列来学习动态规划(JavaScript版本)

    前言 斐波那契数列是一个很经典的问题,虽然它很简单,但是在优化求解它的时候可以延伸出很多实用的优化算法。 它的概念很简单,来看一下 LeetCode 真题里对他的定义: 斐波那契数,通常用 F(n) 表示,形成的序列称为斐波那契数列。该数列由 0 和 1 开始,后面的每一项数字都是前面两项数字的和。也就是: …

  5. js的变量提升与in操作符

    今天看了 tom大叔的一篇文章 还有 司徒正美的文章 ,其中讲到一些关于javascript的小技巧的题,比较有趣,都有一些绕,不过很好理解。 但是只有一道题让我琢磨半天,并不是很难,但是从一开始分析方向就错了,所以记录下来分享。 if (!("a" in window)) { var a = 1; } console.log(a) 复制代码 …

  6. webpack+vue学习一:配置webpack(分离开发和生产环境),并实现vue页面输出

    webpack的应用很广泛,就算不深入使用,还是需要了解一番的。 本文并没有详细描述每一步的安装组件步骤和一些概念等,因为webpack官网已经写得很详细了,网上学习webpack的文档也有很多,但是我在学习的过程中,没有找到vue和webpack结合来讲的文档,并且学习配置中也遇到了很多问题,因此,本文旨在记录完整的配置,…

  7. 秒懂js的垃圾回收

    js具有自动垃圾回收机制,换句话说,执行环境会管理代码执行过程中使用的内存。 js垃圾回收的原理 执行环境会找出那些不再继续使用的变量,然后释放其占用的内存。 js垃圾回收的策略 标记清除 当变量进入环境时,就将这个变量标记为“进入环境”,而当变量离开环境时,则将其标记为“离开环境”。 标记变量方式看具体…

  8. 某条前端面试题–实现一个封装的ajax器

    实现一个封装ajax器,功能有 限制一次同时发送的ajax请求数量m个 timeout限制 重试n次 解题思路 强调下,我的想法和代码只是尝试回答面试问题,并不能直接在正式的业务场景里使用,但希望也能给你们带去思考。另外,我的解决方案是基于promise完成的。 首先,限制条件1在我的理解中,发送的请求还有m个…

  9. Vue 自适应高度表格

    示例版本为 Element-ui 2.13.1 + Vue 2.6.11 本人是做后台开发的,由于公司业务要求需要将前后台模块进行分离,两年前选择使用 vue-element-admin 项目进行前台的开发,该框架集成了很多功能,特别适合对 Vue 很陌生的新手,公司项目组成员接受程度普遍较高。 在使用过程中 表格 是必不可少的一个控件…

  10. 彻底搞懂React源码调度原理(Concurrent模式)

    自上一篇写关于diff的文章到现在已经过了二十天多,利用业余时间和10天婚假的闲暇,终于搞懂了React源码中的调度原理。当费劲一番周折终于调试到将更新与调度任务连接在一起的核心逻辑那一刻,忧愁的嘴角终于露出…

  11. js数据类型很简单,却也不简单

    最近脑子里有冒出“多看点书”的想法,但我个人不是很喜欢翻阅纸质书籍,另一方面也是因为我能抽出来看书的时间比较琐碎,所以就干脆用 app 看电子书了(如果有比较完整的阅读时间,还是建议看纸质书籍,排版看起来更舒服点)。考虑到平时工作遇到的大部分问题还是 javascript 强相关的,于是我选择从《Javascript权威指南…

  12. AST 和 babel、vue、prettier 的编译原理

    本文概要 本文将通过以下几个方面对AST进行学习: 1. 为什么要了解AST,简要说明AST在开发中的重要性; 什么是AST,对AST有一个直观的认识; AST是如何生成的,分析将代码解析成AST的原理; AST的具体应用,通过…

  13. 小品 JavaScript Proxy

    Proxy 是一个 ES6 特性,可以用来监控给定对象的访问方式。比如说,我们有一个对象 alice ,它包含关于 Alice 的一些信息,诸如生日、年龄、身高、体重以及 BMI 值。 const alice = { birthdate: ‘2000-04-06’, age: 20, height: 170, weight: 65, bmi: 22.5, }; 复制代码 对象中的属性可以像这样来读取…

  14. 实际项目中关于 JavaScript 中 Promises 的 5 种最佳实践

    在学习了 Promise 的基本用法后,本文希望可以帮助你在实际项目中更好地使用 Promise。 使用 Promise.all,Promise.race 和 Promise.prototype.then 来改善代码质量。 Promise.all Promise.all 实际上是一个 Promise,接收一个 Promise 数组(或一个可迭代的对象)做为参数。然后当其中所有的 Promise 都变为 reso…

  15. 通过10个实例小练习,快速入门熟练 Vue3.0 核心新特性

    Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了。 GitHub 博客地址: [链接] 环境搭建 {代码…} 下载完成之后打开代码, 开启 sourceMap : tsconfig.json 把 sourceMap …

  16. 2.jQuery简单实现get()和eq()和add()和end()方法

    # jQuery选择元素 – 1.get() 从jQuery对象中获取某个指定的元素,返回原生的dom对象,所以不能再次链式调用jQuery对象的方法,但是可以使用原生的方法,或者再次封装为jQuery对象 “`js $(‘demo’).get(0). $($(‘demo’).get(0))//再次封装为jQuery对象 “` – 2.eq() 从jQuery对象中…

  17. 从 0 到 1 搭建前端异常监控系统

    本篇文章读后,你将GET的技能: ●收集前端错误(原生、React、Vue) ●编写错误上报逻辑 ●利用Egg.js编写一个错误日志采集服务 ●编写webpack插件自动上传sourcemap ●利用sourcemap还原压缩代码源码位置 ●利用Jest…

  18. JS端实现图片、视频时直接下载而不是打开预览

    项目中的附件列表,通常情况都需要提供下载、删除的功能,功能本身没有什么要说的,都是基本功能,使用浏览器的的下载功能,也都是用window.open(url),或者window.location.href=url的方式,url即为附件下载接口,浏览器自动解析,如果是图片、视频、txt等格式的会直接预览文件,而不是像docx、xlsx一样直接下载,项目…

  19. HTTP之强缓存和协商缓存

    关于强缓存和协商缓存的理论知识和express.js下的实践,政采云前端团队的这篇文章已经非常详尽了:图解 HTTP 缓存 强缓存和协商缓存流程图 图来自图解 HTTP 缓存 刚好我最近也在对这一块的内容做补充和总结,受到…

  20. 踩坑记之基于Vue+Element+Koa实现云上存储

    前言 最近在做项目等时候,需要处理图片,表格,文本等多种格式的文件到数据库,用传统等方法进行处理既繁琐又比较麻烦,所以第一次尝试使用云上存储等方式来实现。比较了阿里云和腾讯云之类的网站之后,最终选择七牛云来进行实战,在七牛云上个人注册并且实名认证成功后可免费使用储存空间10GB,这个容量相对来说已…

  21. 深度:从零编写一个微前端框架

    写在开头: 手写框架体系文章,缺手写vue和微前端框架文章,今日补上微前端框架,觉得写得不错,记得点个关注+在看,转发更好 对源码有兴趣的,可以看我之前的系列手写源码文章 微前端框架是怎么导入加载子应用的…

  22. 进来看看ES6 Promise最全手写实现

    这几天看到有些技术群在发 Promise 相关的一些实现,自己最近也在看 ES6 的一些内容,于是打算自己也整理一下,提升一下理解; 本文适合一些了解并使用过 Promise 的人,如果你没有了解或使用过 Promise ,建议先看一下 阮一峰 ECMAScript6 入门 之Promise 。 什么是 Promise Promise 特点 对…

  23. 用思维模型去理解 React

    我了解到,掌握了某种语言、框架或工具的人与没有掌握的人之间的最大区别在于他们所使用的思维模型(Mental Model)。前者拥有清晰而先进的思维模型,而后者则没有。

  24. Android WebView与JS的交互方式总结

    具体原理 Android和JS通过webview.addJavascriptInterface(new JSKit(),"mjs")方法形成对象映射,JS中的mjs对象就可以调用Android中的JSKit对象中的方法了。 具体使用 步骤1:在Android里通过WebView设置Android类与JS代码的映射 public class MainActivity extends AppCompatActivity { WebView mWebV…

  25. 移动WEB开发-flex布局

    移动web开发——flex布局 1.0传统布局和flex布局对比 1.1传统布局 兼容性好 布局繁琐 局限性,不能再移动端很好的布局 1.2 flex布局 操作方便,布局极其简单,移动端使用比较广泛 pc端浏览器支持情况比较差 IE11或…

  26. 移动WEB开发-流式布局(百分比布局)

    移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。

  27. CSS3-选择器、2D转换,动画,3D转换,浏览器私有前缀

    主要内容: CSS3 属性选择器 CSS3 结构伪类选择器 CSS3 伪元素选择器 CSS3 2D转换 CSS3 动画 CSS3 3D转换 浏览器私有前缀 一、现状 浏览器支持程度差,需要添加私有前缀 二、 CSS3 属性选择器 类选择器、属性选择…

  28. Taro图片素材不显示?–Taro下的webpack配置

    最近遇到 Taro 下图片素材没显示的小问题,解决完顺藤摸瓜了解了下前端领域 webpack 及其 Loader 的一些原理。 本文只是简单作个记录,涉及 Taro 下一些 webpack 的配置,可以为刚好遇到类似问题的人提供可能的助益。 文末也简单讨论了图片素材转变成 base64 编码这种处理方式。 场景和问题解决 使用 …

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


关注我

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

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

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