20191019 前端开发日报

浅谈webpack,实现从零到一;js史上最精简防抖节流(你的比我精简,算我输);面试一定会问到的-js事件循环;写给新手前端的各种文件上传攻略,从小图片到大文件断点续传;Vue-cli3项目引入Typescript;TypeScript 基础精粹;前端初级新人,如何撕去菜鸟标签;Vue源码浅析之响应式系统(二)

  1. 浅谈webpack,实现从零到一 webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。 webpack 本身是基于node.js开发的 从 webpack v4.0.0开始,可以不用引入…
  2. js史上最精简防抖节流(你的比我精简,算我输) 前言 作为前端开发人员,相信大家对防抖和截流早已是十分熟悉了,初次听说这个玩意儿的时候我的第一反应是 防抖,防止抖动?节流,节约流水?? 于是乎百度了一波,终于弄懂。 就是,为了防止事件在短时间内被多次触发的两种解决方案。网上巴拉巴拉一堆说法, 总结: 防抖:你狂点按钮也没有,等你冷…
  3. 面试一定会问到的-js事件循环 最近在看js事件循环,事件循环是js运行的核心,js 是单线程的, js 的异步事件就是依赖于事件循环机制,网上找了些资料,发现腾讯云这篇 js事件循环 写的很详细,下文基于这一篇文章,外加上自己的一些总结。 事件循环 首先,我们来解释下事件循环是个什么东西: 就我们所知,浏览器的js是单线程的,也就是说,在同…
  4. 写给新手前端的各种文件上传攻略,从小图片到大文件断点续传 今年国庆假期终于可以憋在家里了不用出门了,不用出去看后脑了,真的是一种享受。这么好的光阴怎么浪费,睡觉、吃饭、打豆豆这怎么可能(耍多了也烦),完全不符合我们程序员的作风,赶紧起来把文章写完。 这篇文章比较基础,在国庆期间的业余时间写的,这几天又完善了下,力求把更多的前端所涉及到的关于文件上传的各…
  5. Vue-cli3项目引入Typescript 假设已经有一个通过 vue-cli3 脚手架构建的 vue 项目 命令行安装 Typescript npm install –save-dev typescript npm install –save-dev @vue/cli-plugin-typescript 复制代码 编写 Typescript 配置 根目录下新建 tsconfig.json ,下面为一份配置实例( 点击查看所有配置项 )。值得注意的是,默认情况…
  6. TypeScript 基础精粹原文地址地址:TypeScript 基础精粹 基础笔记的github地址:[链接] ,可以watch,也可以star。 类型注意事项 数组类型 有两种类型注解方式,特别注意第二种使用 TS 内置的 Array 泛型接口。 {代码…} 元组类型 元…
  7. 前端初级新人,如何撕去菜鸟标签 原文地址: github.com/ruizhengyun… 作为前端新人,我们常以菜鸟自居,主要是专业程度不高,还有就是自谦。其实,作为菜鸟的我们也想撕掉这类标签,我们也努力,可还是学不好前端,是真的不适合做这行还是方法不对,没人告诉我们?如果你觉得自己还处在菜鸟阶段的迷茫区,那可以看看本篇文章,希望看完之后你能得到想…
  8. Vue源码浅析之响应式系统(二) 在上一篇文章 Vue源码浅析之响应式系统(一) 中分析了 Vue2.X 版本中响应式系统的依赖收集与派发更新,这篇文章主要围绕响应式系统中的更新机制与侦听/计算属性的实现。 异步队列更新 首先我们观察一段代码: <template> <div> <div>{{number}}</div> </div> </templat…
  9. Vue 中 filters,computed, methods, watch 的总结(1)计算属性将被混入到 Vue 实例中, 即this 上下文自动地绑定为 Vue 实例,但是计算属性使用了箭头函数,则 this 不会指向这个组件的实例。(2)计算后的属性不需要在data中定义。(3)computed属性有依赖缓存…
  10. 解密HTTP/2与HTTP/3 的新特性HTTP/2 相比于 HTTP/1.1,可以说是大幅度提高了网页的性能,只需要升级到该协议就可以减少很多之前需要做的性能优化工作,当然兼容问题以及如何优雅降级应该是国内还不普遍使用的原因之一。
  11. Vue开发中怎么去处理多人协作开发(一) —- 路由篇 在项目开发中,很多时候不只一个人在开发项目,很容易发生文件冲突,覆盖代码的情况,这时候模块化的作用就体现出来了,怎么做到自己管理和维护好自己的文件,怎么样让项目耦合性低,维护成本低,是一个比较值得深入探索的问题。下面是我对于多人合作的一种想法,不足之处请大家多多包涵。如果有更好的解决方案,可以的…
  12. 【源码解析】创建Vue实例时干了什么? 在阅读本篇文章之前建议阅读 【源码导读 】在new Vue()之前,Vue是什么样子的? 。 未挂载状态的vue实例,挂载过程将在后面分析。 小提示:配合源码食用更佳美味。 vue构造函数 在new Vue()最开始只干了一件事,this._init() src/core/instance/index.js import { initMixin } from ‘./init’ function Vue (…
  13. React VS Vue:2020年选哪个更好?Javascript 框架以及 HTML 和 CSS 已成为每个现代软件项目前端开发的重要组成部分。 2020 年将会是为你的 Web 项目选择正确的 javascript 框架的又一个年头。
  14. 漫谈 Typescript 研发体系建设 TypeScript 自问世以来,由于其灵活的设计和强大的 IDE —— vscode 的支持,变得越来越普及。以下附 Github Javascript 与 TypeScript 的 PR 数量趋势图。 (黄线:Javascript;蓝线:TypeScript) 我们团队从两年前开始引入 TypeScript。TypeScript 给项目带来了诸多好处,但也可能带来额外的成本。例如广被…
  15. Lucene 读取索引 SegmentReader(二):html 本文承接SegmentReader(一),继续介绍生成SegmentReader的剩余的流程。 生成SegmentReader的流程图 图1: 获取段中最新的域信息FieldInfos FieldInfos描述了段中所有域的信息,它对应的是索引文件.fnm中的内容,在索引文件之fnm的文章中详细介绍了,这里不赘述。 在SegmentReade…
  16. Electron + Vue + Vscode构建跨平台应用(五)Electron-Vue项目源码分析 通过上面几篇文章我们已经基本了解了如何利用Electron-Vue来构建Vue项目,但是项目是这么运行的,初始项目代码之间有什么关系,我们还不太清楚,所以这篇我们将主要解决如下四个问题 1: 整个初始项目是怎么运行的 2: npm run dev背后做了什么 3: npm install到底根据什么策略去下载对应的依赖 4: 如何打包成跨平台的…
  17. Electron + Vue + Vscode构建跨平台应用(四)利用Electron-Vue构建Vue应用详解 这篇我们将正式开始跨端之旅,首先开始构建Vue项目 1: 用 electron-vue 如何创建Vue项目 vue init simulatedgreg/electron-vue ele-vue-learning 通过上述命令就可以创建一个electron-vue项目了,在输入上述命令之后,npm首先会下载对应的模板,这样就能保证项目产生的结构是一致的 模板下载完毕…
  18. 谈谈前端组件化 什么是组件化?不同的人对组件化有着不同理解,我理解的 组件化是一种编程思想,是一种拆分代码的方式 。对前端开发来说,大到一个页面,小到一个html标签都可以说是一个组件。组件化的概念并不难理解,难的是理解组件化的思想。 二、如何理解组件化 在理解组件化之前,我们得先说说我们为什么要有组件化的思想以及…
  19. Electron + Vue + Vscode构建跨平台应用(三)利用webpack搭建vue项目 1: 什么是Node.js应用,创建Node.js应用 既然Electron基于Chromium 和Node.js,那么我们还是稍微了解一下什么是Node应用,如何创建Node应用 1.1 Node.js 应用是由 哪几部分 组成的: 在我理解上Node.js应用就是驻扎在Server端的App,它主要由三部分组成 . 引入 required 模块 这个就跟java当中的import一样…
  20. Typescript type进阶这是一篇自己总结的 Typescript type相关的进阶文章,适合有一定ts基础,并在type编写方面感到迷惑、感到绝望的同学,也给那些入门Typescript已久,却无法更上一层楼的童鞋一个方向。如果是Typescript小白,建议…
  21. Electron + Vue + Vscode构建跨平台应用(一)知识点补充 开这个系列博客的主要目的: 学会使用 JavaScript, HTML 和 CSS 构建跨平台应用,这里我们将利用Vue.js语言进行页面开发,利用Electron来进行打包生成windows平台上的可执行文件 知识点补充 Chrome V8引擎介绍 是 Google 用于其 Chrome 浏览器的底层 JavaScript 引擎 其目的是解析和执行JavaScript脚…
  22. 【源码导读 】在new Vue()之前,Vue是什么样子的? 开始的开始,vue就是一个简单的函数。 src/core/instance/index.js function Vue (options) { this._init(options) } 复制代码 扩展功能 设计模式之混入模式,对Vue进行扩展,很值得学习的一种方式。 initMixin() 定义了_init方法,是入口函数,在new Vue()时第一时间执行的方法。 src/core/instance/init.js …
  23. SpringBoot 集成 WebSocket 实现前后端消息互传 WebSocket 协议是基于 TCP 的一种新的网络协议。它实现了浏览器与服务器全双工 (full-duplex) 通信—允许服务器主动发送信息给客户端。 为什么需要WebSocket? 大家都知道以前客户端想知道服务端的处理进度,要不停地使用 Ajax 进行轮询,让浏览器隔个几秒就向服务器发一次请求,这对服务器压力较大。另外一…
  24. 【JS 口袋书】第 7 章:JS 中的类型转换与比较作者:valentinogagliardi译者:前端小智来源:github 阿里云最近在做活动,低至2折,有兴趣可以看看:[链接] 为了保证的可读性,本文采用意译而非直译。 JS 中的基本类型 JS 有 7 种基本类型,分别如下: String…
  25. 如何使用 Proxy 来代理 JavaScript 里的类 Proxy 对象(Proxy)是 ES6 的一个非常酷却鲜为人知的特性。虽然这个特性存在已久,但是我还是想在本文中对其稍作解释,并用一个例子说明一下它的用法。 什么是 Proxy 正如 MDN 上简单而枯燥的定义: Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。 …
  26. 细述Javascript的加法运算符 JavaScript是一门了不起的语言。我喜欢它的灵活性:只需以你喜欢的方式做事:更改变量类型,动态的向对象添加方法或属性,对不同的变量类型使用运算符等等。 然而动态是要付出代价的,开发人员需要知道怎样处理对于不同操作符的类型转换:加号(+),等号(==和===),不等号(!=和!==)等等,许多运算符有自己处理类型转换的…
  27. Nodejs多核处理模块cluster cluster 是一个 nodejs 内置的模块,用于 nodejs 多核处理。 cluster 模块,可以帮助我们简化多进程并行化程序的开发难度,轻松构建一个用于负载均衡的集群。 环境: MacOS 10.14 Node v8.11.3 npm 6.4.0 实践 master 是总控节点, worker 是运行节点。然后根据 CPU 的数量,启动 worker 。 …

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

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


关注我

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

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

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