20200626 前端开发日报

this — Javascript基础探究篇(8);NodeJS全栈开发一个功能完善的Express项目(附完整源码);【进击的Vue三】使用这些让你快速开发;Vue_手把手入门就那个不谈;对象 — Javascript基础探究篇(2);原生函数 — Javascript基础探究篇(3);《编程时间简史系列》JavaScript 模块化的历史进程;不是大佬,也得知道,Vue的一些小操作(一)

  1. this — Javascript基础探究篇(8)

    this 应该是js中最为复杂的机制之一。搞懂 this 某种程度上意味着一次重生。 我们先通过一段代码来看看 this 有多么让人琢磨不透: function foo(num) { console.log(`foo: ${num}`); this.count++; } foo.count = 0; foo(1); foo(2); console.log(foo.count); // ? 复制代码 此时的 foo.count 的值是多…

  2. NodeJS全栈开发一个功能完善的Express项目(附完整源码)

    一. 前言 Node.js 对前端来说无疑具有里程碑意义,与其越来越流行的今天,掌握Node.js技术已经不仅仅是加分项,而是前端攻城师们必须要掌握的一项技能。而Express基于Node.js平台,快速、开放、极简的Web开发框架,成为Node.js最流行的框架,所以使用Express进行web服务端的开发是个不错且可信赖的选择。但是Express…

  3. 【进击的Vue三】使用这些让你快速开发

    本文主要讲以下内容,会尽可能的通过简短的例子以更清晰的方式展示出来。 使用less预编译语言代替传统css mixin注入使用 axios封装 vue-router懒加载、路由拦截 filter过滤器 bugfix: 修复loadEnv.js中导出的环境参数在webpack.config.js中异常问题。 Less less是一门css扩展的预编译语言,…

  4. Vue_手把手入门就那个不谈

    Node.js概述 2008年,google的Chrome发布,随后就以极快的速度占领市场,超过IE成为浏览器市场的主导者。 2009年,Ryan Dahl在在谷歌的Chrome V8引擎基础之上,打造了基于事件循环的异步IO框架:Node.js。 基于事件循环的异步IO 单线程运行,避免多线程的变量同步问题 js可以编写后台代码前后台同一编程…

  5. 对象 — Javascript基础探究篇(2)

    js中万物皆对象?其实这并不是完全正确的,js中的简单基本类型( string , number , boolean , undefined , null , symbol )本身并不是对象。但对象确实是js的基础。 js还有很多特殊的对象子类型,我们可以称之为复杂基本类型。如常见的函数和数组就是对象的子类型。它们的本质和普通的对象一样,只有多了…

  6. 原生函数 — Javascript基础探究篇(3)

    除了我们能自定义函数外,js中还具有一些原生函数,如 String , Number , Boolean , Object , Function , Array , Date , RegExp , Error , Symbol 等。可以看到有些内置类型和简单基本类型名字和很相似。 使用这些原生函数构造出来的对象,对其使用 typeof 时返回的都是 object 。 const str…

  7. 《编程时间简史系列》JavaScript 模块化的历史进程

    目前中文网络上充斥着大量互相“转载”的内容,基本是某一个技术问题的解决方案(what?, how?),却不涉及为什么这么做和历史缘由(why?, when?)。比如你要搜 “JavaScript 有哪些模块化方案?它们有什么区别?”,…

  8. 不是大佬,也得知道,Vue的一些小操作(一)

    ❝ 你一定要好好赚钱,那样我和他才会 * 福 —— 网络圣人 ❞ 写代码的时候经常会神游天外,写着写着又不知道自己准备干什么来着了,这个时候我尝尝想要看一眼自己的注释(正经人谁写注释啊)。回看一眼发现,哇哦,我!@#¥#@。继上一次老板娘看到我发的 《这样写离线存储,老板娘再也没有让我加过班。localForage …

  9. lhs和rhs查询 — Javascript基础探究篇(7)

    引擎在执行代码时,如 var a = 2 。会通过查找判断它是否已经被声明。查找有两个类型: LHS(Left-Hand Side) :通常出现在 = 的左边。查询会试图找到变量的容器本身 RHS(Right_Hand Side) :通常出现在 = 的右边。查询会试图找到该变量的值 这里的 L 或者 R 是相对于 = 而言。 var a =…

  10. 揭秘webpack插件的工作原理

    通过插件我们可以扩展webpack,在合适的时机通过Webpack提供的 API 改变输出结果,使webpack可以执行更广泛的任务,拥有更强的构建能力。本文将尝试探索 webpack 插件的工作流程,进而去揭秘它的工作原理。同时需…

  11. 可能是你见过最好的 React Hooks 库

    点击上方“前端技术砖家”关注 ahooks 是由蚂蚁 umi 团队、淘系 ice 团队以及阿里体育团队共同建设的 React Hooks 工具库。ahooks 基于 React Hooks 的逻辑封装能力,提供了大量常见好用的 Hooks,可以极大降低代码复杂度,提升开发效率。 ahooks 致力成为和 antd/fusion 一样的 React 基础设施,帮助开发…

  12. 原型链和继承 — Javascript基础探究篇(9)

    js不同于传统的面向对象的语言,它并没有类的概念(即使ES6中已经有 class 关键字)。所以js的面向对象编程采用了一种特殊的方式,这种方式就是原型链。原型和原型链是js的核心,保证了函数或对象中的方法或属性能够被子类复用。 原型链 我们先从一个简单的例子看看什么是原型链,我们在浏览器直接输出对象 a (假…

  13. React Native 的常见 Bug(二)

    原文: https://blog.logrocket.com/co… 2020.1.31 翻译: 祝坤荣(时序) email: zhukunrong@yeah.net URI versus URL in the image element(图像标签的URI和URL) 当在图像标签中显示远程图片时,你需要将原对象命名为URI,就像这样: <Image source={{ uri: ‘https:/…

  14. 基于prerender-spa-plugin的Vue.js预渲染实践

    最近公司基于vue-cli3.0搭建的老项目要做SEO优化,并且路由是hash模式;服务端渲染改造成本很大,看了一些文章后决定试一下预渲染,搭配vue-meta-info定制meta信息达到预期效果。 改造内容 1.路由模式 路由模式切换为history模式,去除URL中的# const router = new VueRouter({ mode: ‘history’, rou…

  15. 运用 Three.js 开发 3D 版 2048 小游戏

    最近在捣鼓 Three.js 相关知识,同时觉得微信小游戏是个不错的试错场呢。来个 2048 小游戏踩踩坑。 先来一张 场景图 乍一看,感觉就是 2D 的么,与 Three.js 没半毛线关系。请仔细看,有阴影,有透明度,有立体感,一切都在细节中,3D 的没错。 抢先体验请扫码 这里吐槽一哈,微信部分版本…

  16. 如何通过 HTTP 协议访问指定版本的 SVN 库内容

    在汇总晨检报告时,有同事反馈提交的内容被覆盖了,需要从某个指定版本中取出被覆盖的内容。 然而我在跳板机上只能通过HTTP协议用浏览器访问SVN仓库,默认访问的是最新版本内容。 那么要如何通过HTTP协议访问指定版本的内容呢?经过一番搜索,在 http://beerpla.net/2010/02/20/how-to-view-a-specific-svn-revisi…

  17. 浅析Vue批量更新原理

    ) 首先看这个例子中,连续3次触发了mutation,那么watch中的cb会被执行几次呢? 答案是一次。 那么为什么会是一次呢?本文会围绕着这个问题的解释来粗浅地讨论一下Vue中批量更新的原理。 首先要知道,msg这个key,是通过Object.defineProperty被监听了的,Vue通过这个api实现在key被set的时候(也就是this.msg =…

  18. 如何判断JS类型

    JS的基本类型共有七种:bigInt(bigInt是一种内置对象,是处symbol外的第二个内置类型)、number、string、boolen、symbol、undefined、null。复杂数据类型有对象(object)包括基本的对象、函数(Function)、数组(Array)和内置对象(Data等)。 (二)判断JS的类型 方法一、typeof方法 基本数据类型除了null外都…

  19. 类型和值 — Javascript基础探究篇(1)

    js中有七种内置类型: null , undefined , boolean , number , string , object , symbol (es6新增)。除了对象外其他统称为基本类型。 我们可以使用 typeof 查看值的类型: console.log(typeof undefined); // undefined console.log(typeof true); // boolean console.log(typeof 1); // number cons…

  20. canvas画图(矩形虚实框、数字填充矩形、填充三角形)

    大背景:试卷拆录图片识别功能,需要根据后端返回的数据实现识别框: 识别框: 1)显示在图片中,奇数框为实线、偶数框为虚线。识别框不可调整大小及位置; 2)框的左侧显示当前题的编号,编号从1开始,按照从上至下,从左至右的顺序递增; 这是UI设计的题目编号,如下图: 拿到需求之后细化一下功…

  21. NextJS 预渲染时 Axios 转发元数据

    背景 现在很多网站都使用了前后端的分离的架构,前后端可以不在一台服务器上,前端为了保证 SEO,必须使用预渲染,SSG 或 SSR 技术。而我的站点则使用了 NextJS 的 SSR 技术。在渲染端预渲染页面时首先会调用 Axios 实例去请求接口。但是有一个问题。在渲染端请求的头部永远是渲染端本身的 User-Agent 和 IP,并不能获…

  22. 学习Vue的SSR,这可能是最好的教程

    为了追求更好的用户体验,很多公司的业务页面都会采用SSR进行渲染,将渲染的结果返回给浏览器,浏览器能够不经过实例化Vue,直接解析HTML代码展示,这样可以减少首屏时间,提高用户体验。 0.Server Side Render使用 0.1上手SSR ​ Vue 提供一个 npm 包叫做 vue-server-renderer ,它是在 vue 源码中的 server 目录…

  23. 值类型和引用类型 — Javascript基础探究篇(4)

    let a = 2; let b = a; b++; console.log(a, b); // 2, 3 复制代码 值类型的数据是不可变的,在内存中占有固定大小的空间,它们都会被存储在栈(stack)中。 上述代码在内存中的存储过程如下: a 所持有的值是值类型,所以当执行 b = a 时, b 会持有 2 的一个副本。所以 b 改变时, a 并未受到影响。…

  24. 一网打尽JS中的循环和遍历

    JS中的循环和遍历提供给我们一种简单快速的方法去做一些重复的事情.学会在不同的场景中使用不同的方法能够帮助我们有效的编写各类代码.在这里整理了一些常见的方法,今天就让我们大家一些来学习一波. for for循环有3个表达式 声明循环变量 判断循环条件 更新循环变量 其中,三个表达式都是可以省略的,但是两…

  25. 强制类型转换 — Javascript基础探究篇(5)

    js中的值可以从一种类型转换为另一种类型,这种行为被称为强制类型转换。 抽象操作规则 所有的规则以es6为准,和其他文章的es5版本规则稍有不同,详情请查看 es6语言规范 主要介绍强制类型转换最常用的4种抽象操作:转换为基本类型 ToPrimitive ,转换为字符串 ToString ,转换为数字 ToNumber ,转换为布尔值 …

  26. 从Node.js的事件触发器到Vue的自定义事件

    Node.js中的事件触发器所引发的思考 今天在看 Node.js 文档的时候讲到事件触发器,其中的 emit 方法让我想到了 Vue 中的自定义事件,借此我对 Vue 又有了新的理解,所以将我的理解记录下来,留作学习笔记。 Node.js中的事件触发器 Node.js 为我们提供了一个事件模块:EventEmitter,我们可以用它来处理事件 c…

  27. 作用域和闭包 — Javascript基础探究篇(6)

    我们的程序之所以能够实现足够复杂的功能,很大程度是因为程序能够记住运行的状态。比如运行过程中变量的值,函数的声明等等。如果没有状态,程序的功能性将会受到很大的限制。程序查找状态的规则就叫做作用域。 速览编译原理 尽管我们将javascript归为动态语言或者解释性语言,但是javascript在运行前也需要编译。通…

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


关注我

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

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

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