20200216 前端开发周报

用Vue3(Vue-Composition API) 写一个疫情查询小工具;vue使用的血泪心得;深入理解JavaScript的作用域和作用域链;JavaScript优雅写法及骚操作;大前端之路 -webpack 速成(二);vue前端动态路由实现用户权限过滤;前端图片压缩上传(压缩篇):可能是最适合小白的前端图片压缩文章了;vue-router实现原理及两种模式分析

  1. 用Vue3(Vue-Composition API) 写一个疫情查询小工具 线上地址 git地址 因为疫情太过严重,只能呆在家,所以前几天用 React + Antd 写了一个疫情查询小工具:React 版本,也算为疫情的防控做了一点点贡献。这两天呢,看见 Vue3-Alpha 版本都出到 v3.0.0-alpha.4 了,如图: 在这个版本中,主要的工作就只剩下处理服务器端渲染了,所以Vu3真的是指日可…
  2. vue使用的血泪心得 vue.js使用的人越来越多了,大多数的公司也在使用vue框架进行开发自己公司的产品。虽然vue.js语法比较简单,官网文档也比较详细,但是越简单的东西,越容易让人忽视细节,从而容易导致代码水平参差不齐,风格各不相同。 对于初学者,感觉一般不怎么会花时间去查看官网文档,不知道把视点落在何处。只有日后自己上班的时…
  3. 深入理解JavaScript的作用域和作用域链(一)作用域是什么了解作用域之前先看一下变量和函数,变量和函数都有一定的访问权限,就是必须满足条件或者在某个范围之内才能访问,这个范围就是作用域。
  4. JavaScript优雅写法及骚操作 昨天看权威指南的时候看到一个个人觉得很优雅的写法,便想着记录一下(我的梦想就是写一手富有诗意的优雅代码)在Js世界中,有些操作会让你无法理解,但是却无比优雅。如有错误,欢迎批评指正!(看前先点赞,养成好习惯哈哈哈) 1、 判断为空 直白写法 if(a == undefined) a = []; if(params.success)…
  5. 大前端之路 -webpack 速成(二) 当引入一个模块的时候,只引入 我们使用过的代码,那些没引用过的代码,我们就不打包了 另外 tree shaking 只支持 es module ,import模块的引入。 不支持 common js 的引入。 如果是生产模式 mode: ‘production’, 复制代码 那么这个tree shaking 默认就是打开的。 另外要注意 要在package.json 这边 额外添加 …
  6. vue前端动态路由实现用户权限过滤 在后台系统这类的项目中,用户角色和权限的区分是不可分割的一部分需求。常见的用户权限区分形式有两种,一是前端请求接口拿到后台配置的用户权限信息;另一种是直接由前端来定义每种用户角色的权限页面,然后在生成对应的路由。今天我们来了解前端配置路由权限的方式。 角色权限页面配置 在配置角色对应的路由页面时…
  7. 前端图片压缩上传(压缩篇):可能是最适合小白的前端图片压缩文章了 如果您只是为了copy代码实现功能,建议您不要看这篇博客了。如果您是copy了代码实现了功能,想回来了解具体的实现流程、实现原理以及部分科普,我觉得本篇博客能给你带来不小的收获。 2. 任务背景 最近的项目有一个技术场景,简单来说就是用户需要上传图片至服务器。就是这么一个简单的技术场景,但是用户是不可控的…
  8. vue-router实现原理及两种模式分析 之前用Vue开发单页应用,发现不管路由怎么变化,浏览器地址栏总是会有一个’#’号。 当时检查自己的代码,没有发现请求的地址带’#’,当时也很纳闷,但是由于没有影响页面的渲染以及向后台发送请求,当时也没有在意。最近看了一下vue-router的实现原理,才逐渐揭开了这个谜题。 vue-router 的两种…
  9. 字节跳动面试官:请说一下vuex工作原理(重点就几行代码而已啦) 不知为何掘金的文章最近都流行以 "字节跳动面试官" 作为开头,不蹭一波都不好意思说逛过掘金了。23333 最近是真到了面试的季节,那么就说一下 Vuex 的源码吧。看完你会发现,Vue和Vuex的实现原理主要就那么几行代码。 Vue双向绑定 要说 Vuex 的双向绑定那么必须先从 Vue 的双向绑定开始 Vue 的双…
  10. 5分钟看懂系列:HTTP缓存机制详解HTTP 缓存可以说是HTTP性能优化中简单高效的一种优化方式了,缓存是一种保存资源副本并在下次请求时直接使用该副本的技术,当 web 缓存发现请求的资源已经被存储,它会拦截请求,返回该资源的拷贝,而不会去源服…
  11. THREE.js探索基础篇 公司的一个新项目要求做仿真,所以探寻了一番找到three.js来做,本来公司就是做gis相关业务的,所以迟早都要接触three.js。(来了公司还要求学习openlayer、cesium,唉感觉时间都不够用!) 好了,言归正传上干货,用three.js画一个简单的正方体。 正文 1.环境搭建三种方式: 1)、直接cdn引入一个在线three…
  12. 2020 前端面试 | 第一波面试题总结 先介绍一下自己的情况吧 内蒙古呼和浩特某大学毕业,专科,计算机多媒体专业毕业 16年出来工作,工作经验四年,之前主要做平面相关,自己喜欢瞎折腾,从17年开始研究前端,然后公司内部转岗到开发部门工作,算下来前端经验也快三年之久。 年底由于种种原因想换一份工作,但由于太忙,没认真搞简历,也没怎么复习基础…
  13. 如何验证JavaScript是单线程? 最近虽疫情严重,但是春天马上就要到来,面试季也要拉开序幕,大家在跳槽之前一定要努力复习,以免错过心仪的公司。 言归正传 今天逛技术论坛看到了这么一个问题,"如何用代码验证JS是单线程的?"。作为一个两年工作经验的前端工程师,虽然知道JS是单线程的,但是确实没有深入研究过。 于是查翻资料,夯…
  14. vue源码剖析思维导图(一) 趁这个“难得”的假期,学习了一下vue源码,说实话,对我这种小菜鸟来说非常难啃,但还咬咬牙坚持了下来,一遍看不懂的我就看两遍三遍甚至更多,通过查资料看书看视频,发现第一遍看不懂的地方在两三遍过后还是有点效果的,窃喜!就此记录一下我的小小成果,若有不对的地方还请指正 ! 这个图包含了从new…
  15. 7 个基础 JavaScript 函数 原文链接: 7 Essential JavaScript Functions ,by David Walsh 译者:翻译过程中,对于原文的叙述做了部分修改。 debounce 防抖函数英文名叫“debounce function”,它通常是作为频发事件的回调使用的。对于 scroll 、 resize 、 key* 这类事件,如果不使用防抖函数处理,那么由于事件的频繁发生,触发…
  16. Vue之事件总线什么是事件总线? 有一个全局EventBus 所有事件都订阅它 所有组件也发布到它,订阅组件获得更新 所有组件都能够将事件发布到总线,然后总线由另一个组件订阅,然后订阅它的组件将得到更新 预知详情可点这里,看这…
  17. vue源码阅读复盘-watcher模块 先彻底理解了一下 VUE的简介 ,并写出了一份建议书。关键词有渐进式、自底向上逐层应用、声明式开发、组件化。 之后了解了 观察者模式 ,观察者模式的初衷是建立低耦合的通信机制,定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新。 记得以前看过一本…
  18. Vue 中如何让 input 聚焦?(包含视频讲解)点赞再看,养成习惯本文 GitHub [链接] 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。
  19. JavaScript中闭包的概念、原理、作用及应用闭包:有权访问另一个函数作用域中的变量的函数;一般情况就是在一个函数中包含另一个函数。从官方定义我们知道闭包是一个函数,只不过这个函数有[超能力],可以访问到另一个函数的作用域。为什么说这个叫做[超能…
  20. 如何快速搭建一个 Node.JS 项目并进入开发? 了解:如何快速搭建一个项目并进入开发? 在此不概述 Node.JS 的历史以及发展过程。 因为之前接触过通过 Java 开发语言,所以明确地知道一个服务器所需的文件,以及一个服务器所需要的操作。 那么,我们细分一下,所有的服务器都至少需要什么呢? 静态文件访问 路由分发 数据库连接 这三者是最…
  21. 如何在 Vue 中使用 JSX 以及使用它的原因点赞再看,养成习惯本文 GitHub [链接] 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。
  22. 一文带你实现vue-router 本文将带你手写一个vue-router,实现router-view,实现hash模式,嵌套路由等主要的功能,history模式建议自行看源码,原理就是利用 history.pushState API 来完成 URL 跳转而无须重新加载页面,但是需要后端做配合,没有hash直接上手使用来的方便简单,所以本篇将主要将hash的实现,关于history的有兴趣的可以看这里 vue…
  23. vue2.x+vue-cli3.0地图demo踩过的坑 一、前言 1、背景 最近在做数据可视化的学习,从网上找了一下,没有相关的学习资料,打算结合自己的摸索和学习,记录一下踩过的坑,便于后续查阅以及供大家参考学习。 2、版本包 nodejs:12.14.0 vue:2.6.10 vue-cli:3.0.1 echarts:4.6.0 二、地图项目实战 1、项目初始化 打开cmd命令窗口,进入本地某…
  24. JavaScript 中的无穷数(Infinity)点赞再看,养成习惯本文 GitHub [链接] 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。
  25. 再看 JavaScript 继承 学完了整个 JavaScript 基础篇章之后,发现自己对继承的理解有了好几次了翻天覆地的变化(扶额),于是就写了这样一篇文章阐述目前自己对继承的看法。其实是初到掘金,复制了一篇之前自己写的文章(笑)。 本文将着重讨论基于原型的继承,也会简单写一下如何用 class 继承。 Key Points 在 JavaScript 中, 函…
  26. Promise 原理解析与源码实现(遵循 Promise/A+ 规范) new Promise 时,需要传递一个 executor 执行器,执行器立刻执行(同步执行),executor 接受两个参数,分别是 resolve(成功) 和 reject(失败)。 promise 有 3 个状态: – pending:初始状态,既不是成功,也不是失败状态。 – fulfilled:成功状态,意味着操作成功完成。 – rejected:失败状态,意味着操作失败。…
  27. 前端三大React vs Vue vs Angular React 起源于 Facebook 的内部项目 优点: 跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。 单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。 缺点: React本身只是一个V而已,并…
  28. 前端 P5 最基本应该掌握的代码实现疫情无情人有情,在去年经历互联网一系列的风波之后,我相信大家有很多的小伙伴想在今年金三银四的面试季中为自己的未来找一个好一点的公司。那么今天我们来讲解一下身为 P5 工程师需要知道的一些原理及其如何亲自…
  29. 对 babel polyfill 的一些理解前言 为了支持业务中少量的es6+的高级特性,最近在研究了一下babel的垫片,现将此整理为文字,如下。 babel 和 babel ployfill 的关系 1、先来理解下 babel 到底是做什么的? 简单来讲,babel解决语法层面的问题…
  30. [推荐] node.js 内存泄漏的秘密 每日前端夜话第276篇 翻译:疯狂的技术宅 作者:Giovanny Gongora 来源:nodesource 正文共:3955 字 预计阅读时间:10分钟 一直以来,跟踪 Node.js 的内存泄漏是一个反复出现的话题,人们始终希望对其复杂性和原因了解更多。…
  31. CSS 故障艺术什么是故障艺术?我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻的感觉,看起来具有闪烁、震动的效果,很吸引人眼球。
  32. 前端高级面试题-彻底掌握JS事件循环原理因为这道题涉及了很多知识点:同步任务、异步任务、宏任务、微任务、任务队列、执行栈、js运行机制、EventLoop,所以想整理一下,写一篇文章,希望对小伙伴们有所帮助!
  33. [推荐] 网易严选前端工程化实践 前端日益发展,从最初的 HTML、CSS、JavaScript 三大基础,到后来的jQuery、Backbone、AngularJS,再到现在的 Angular、React、Vue 三大框架流行,技术的演进既带来了更多的可能,也带来了一些问题。例如:团队如何高效合作、项目如何统一维护、代码如何规范等等。前端工程化的出现,就是为了解决这些日益突出的问题。它…
  34. 2020年你应该关注这50款前端热门工具,JavaScript插件篇(一) 前端之所以有趣,就是每年有比较多新奇的插件和工具让我们去探索和研究。我们在开发前端应用时,自然少不了去找一些第三方插件帮助我们提高开发效率。本文给大家介绍的这50款新工具,都是相当的新,都是去年的新项目,时间不会超过1年,希望通过我的介绍,你能找到适合的工具,应用到项目中。 1、autoComplete.js …
  35. 初级前端 Vue 高频基础面试题自学前端在刚入门时面试是最艰难的阶段,本章内容都是从各大平台网站汇总过来的,不包含各种源码知识,不至于出现不懂的内容。
  36. 从零开发一套完整的vue项目开发环境不管是工作需要还是面试加分,vue技术栈已经成为了前端开发工程师必备的技术点。接下来,我将从零开发一套完整的vue项目开发环境,提供给需要的同行小伙伴观看也方便自己以后复习。
  37. 手摸手带你使用Vue-Cli3搭建前端开发环境vue-cli搭建前端开发环境指南 一、vscode编辑器配置 1、ESLint拓展安装 ESLint 应用商店搜索安装ESLint 添加保存文件时自动修复代码格式功能 {代码…} ctrl+s操作触发当前文件修复 Prettier – Code formatter 应…
  38. 《HelloGitHub》第 46 期 兴趣是最好的老师,HelloGitHub 就是帮你找到兴趣! 简介 分享 GitHub 上有趣、入门级的开源项目。 这是一个面向编程新手、热爱编程、对开源社区感兴趣 人群的月刊,月刊的内容包括:各种编程语言的项目、让生活变得更美好的工具、书籍、学习笔记、教程等,这些开源项目大…
  39. 使用webpack搭建pixi.js开发环境本文介绍怎么使用webpack搭建pixi.js游戏的开发环境,怎么配置babel将ES6+代码最终转换为ES5,怎么利用gulp将webpack和其他脚本粘合一起优化项目并最终发布项目。
  40. mixins设计模式以及在js中的使用 在《Javascript设计模式》一书中介绍了一种设计模式-Mixin 模式。在一些著名的组件库中,Mixins也是十分常见的关键字。但,菜狗的我在日常的开发中好像没怎么用过mixin。 看来我和大佬之间的第一个差距就是mixins的使用了(笑) 那到底什么是mixins ,以及怎么使用呢? 初识Mixins 在《Learning JavaScript Design Patt…
  41. swiper.js简单快速实现轮播滑动(兼容PC端、移动端)swiper是一款免费以及轻量级轮播滑动的js框架,适用于PC端跟移动端,官方地址:([链接] 效果演示: PC端 移动端(在浏览器将设备切换为手机,这里切换为iphone),swiper支持移动端触控左右滑动 代码部分(复制粘…
  42. Vue.js渐进式JavaScript框架点击蓝色 “达达前端” 关注我哦! 加个 “星标” ,每天一篇文章,一起学编程 ​ 2020年02月09日 什么是vue.js? vue.js是一款渐进式的JavaScript框架。 什么是渐进式? 渐进式就是指可以由浅入深的,由简单到困难的一…
  43. 今天,我们来聊一聊WebSocket原理 WebSocket = “HTTP第1次握手” + TCP 的“全双工“通信 的网络协议。 主要过程: 首先,通过 HTTP 第一次握手保证连接成功。 其次,再通过 TCP 实现浏览器与服务器全双工( full-duplex )通信。(通过不断发 ping 包、 pang 包保持心跳) 最终,使得 “服务端” 拥有 “主动” 发消息给 “客户端” 的能力。…
  44. 7天用Go动手写/从零实现Web框架Gee大部分时候,我们需要实现一个 Web 应用,第一反应是应该使用哪个框架。不同的框架设计理念和提供的功能有很大的差别。比如 Python 语言的 django和flask,前者大而全,后者小而美。Go语言/golang 也是如此,新框…
  45. swiper.js loop 小坑swiper.js 是一款强大的插件,也是我最喜欢的开源插件之一。它可以轻松实现轮播、tab 标签以及各种风骚的页面滑动效果。
  46. Go 语言编写的一个轻量、高性能的 HTTP Router README.md CleverGo CleverGo is an enhanced version of julienschmidt/httprouter which provides extra useful features. Contents Motivation Features Usage Difference…
  47. Angular 多模块项目构建两个月前,已存在录题系统,需要构建出题系统,且两套系统存在公用的实体、组件以及服务,如何在构建新系统的同时复用原系统的代码成为了项目难点。
  48. 前端构建工具webpack入门 ​ 说到项目构建工具(依赖管理、环境配置管理、打包、测试、发布),我们Java工程师最熟悉的莫过于 Maven 或 Gradle ,Maven是当下Java岗位最流行的项目构建工具,而Gradle以最简洁的DSL语法成为了最受欢迎的构建工具,较早是受Android工程师欢迎,现在在Java服务器端技术广泛使用,比如我们常用的 Spring Boot …
  49. 【webpac篇】HMR热加载配置了热更新之后,会new HotModuleReplacementPlugin实例进入plugin里
  50. [推荐] BigPipe 和微前端 你可能听说过 BigPipe,这是一个十多年前的技术,而 BigPipe 通常都会跟“性能优化”同时被提起。微前端也是一个很早被提出的技术,但是最近几年才开始比较流行。而目前微前端能够解决的最大的问题恐怕就是遗留系统改造。我们可以将新技术构造的系统和旧技术构造的系统完美融合到一起,彼此构建,发布,运行等不受干扰。 …
  51. JavaScript 库一旦安装几乎不会更新CDNJS 是在网页上包含 JavaScript 和其他前端资源的一种非常流行的方式。在 CDNJS 小组的许可下,我们从 CDNJS 请求中收集了匿名和汇总的数据,这些数据用于了解人们如何建立 Internet。今天,我们的分析集中在一…
  52. 【速查表】HTTP状态码总结状态码 说明 释义 200 OK 请求成功。一般用于GET与POST请求 201 Created 已创建。成功请求并创建了新的资源 202 Accepted 已接受。已经接受请求,但未处理完成 203 on-Authoritative Information 非授权信息。请…
  53. 2020 年的八个 Web 开发技术新趋势「本月最佳话题」 导读:即使2020开局有一些变化 ,但请保持精进。 是的,Web开发人员需要在不断发展的环境中成长,需要适应技术的变化,跟得上和学得进去新技术。 软件开发行业,其实与其它行业一样,紧跟最新出现的重要趋势和技术,避免学习不成熟或未就绪的技术也很重要。 在这里,我们总结一份清单,列出2020年以及之后主导的技…
  54. iOS 今天我们来聊一聊WebSocket WebSocket = “HTTP第1次握手” + TCP 的“全双工“通信 的网络协议。 主要过程: 首先,通过 HTTP 第一次握手保证连接成功。 其次,再通过 TCP 实现浏览器与服务器全双工( full-duplex )通信。(通过不断发 ping 包、 pang 包保持心跳) 最终,使得 “服务端” 拥有 “主动” 发消息给 “客户端” 的能力。…
  55. 初探 Node.js 框架:eggjs (环境搭配篇) eggjs 是一个优秀的 Node.js 框架 概述:为什么标题上说 eggjs 是一个优秀的 Node.js 框架(可跳过)? 换言之,我们为什么选择 eggjs 进行开发而不是之前初学时使用的 Express 框架呢? Express 是最著名的 Node.js 框架,它甚至是官方唯一推荐过的(目前) 但是根据实际开发,我觉得它的配置相当冗长,比方说…
  56. Webpack源码分析 – loader及优化 loader解析文件是Webpack中重要的一环,之所以能一切皆模块就是因为有许多强大的loader提供的支持。了解它的工作原理可以让我们从容地为项目选择合适的配置,还可以更有目的性的针对性能瓶颈分析优化,更好地做一个合格地Webpack配置工程师。 如果要了解loader内部执行原理,可以看这篇文章loader-runner loader基础…
  57. 如何使用TypeScript编写Vue应用 都2020了,本小姐姐还没开始在项目中用上ts,趁着在家闲的慌,初尝ts。下面我将展示如何使用Vue CLI 构建一个Vue + TypeScript应用 初始化项目 Vue create ts-vue 复制代码 选择 Manually select features 我这里选择了Babel, TypeScript, Router, Vuex,CSS Pre-processors,Linter / Formatter 然…
  58. Taro Next 发布预览版:同时支持 React / Vue / Nerv自 Taro 2.0 起,我们将会启动对整个 Taro 系统架构的革新,这次革新我们将其称之为 Taro Next。Taro Next 革新完成之后,Taro 本身的拓展性、稳定性、可维护性都会大幅提高,相应地,使用 Taro 的开发者也会获得…
  59. 开箱即用的JS干货助力金三银四2019已经过去,在疫情没有消去,居家远程办公之际,整理一些工作上常用的JS代码给大家做下分享,一方面为大家更好地理解和巩固知识,一方面也为金三银四助力,喜欢的大佬们可以给个小赞。
  60. Node.js实战–资源压缩与zlib模块nodejs 的 zlib 模块提供了资源压缩功能。例如在 http 传输过程中常用的 gzip,能大幅度减少网络传输流量,提高速度。本文将从下面几个方面介绍 zlib 模块和相关知识点:
  61. WebSocket 双端实践(iOS/ Golang) 级别:★★☆☆☆ 标签:「WebSocket」「Starscream」「Golang」 作者:  647 审校: 沐灵洛 上一篇: 《今天我们来聊一聊WebSocket》 主要介绍了WebSocket的原理、应用场景等等。 本篇将介绍WebSocket的双端实战( Client 、 Server )。 分为两部分: 1.Client:使用 Starscream(swift) 完…
  62. 事件循环 — JSConf分享 原文链接 对于浏览器而言,有多个线程协同合作,如下图。具体细节可以参考 一帧剖析 。 对于常说的JS单线程引擎也就是指的 Main Therad 。 注意以上主线程的每一块未必都会执行,需要看实际情况。 先把 Parse HTML -> Composite 的过程称为渲染管道流 Rendering pipeline 。 浏…
  63. 面向前端开发人员的rails教程 app/views/layouts/sample_layout.html.erb 复制代码 一个通常的布局文件会包含以下block. …<head>… <%= yield :extro_styles %> </head> … <body> … <%= yield :extro_scripts %> </body> 复制代码 如此我们可以在具体的页面使用如下方式引入外部样式和脚本或者嵌入…
  64. Git fork 指南:fork别人的仓库并作为贡献者提交代码流程总结A 克隆项目,增加代码 在 Github 上 fork 想要参与的项目仓库 Qingtong/pinghu_project, fork后会生成自己的项目 pinghu_project git clone 自己的项目 git add XX,git commit -m “” 进行更新,提交 git…
  65. jjencode|JS混淆手工解析编码过程以及自定义混淆变体改装此前发布过关于aaencode的混淆编码,此篇文章继续说同作者的jjencode混淆编码的具体过程。
  66. 基于vue的tab-list类目切换商品列表组件 在大多数电商场景中,页面都会有类目切换加上商品列表的部分,页面大概会长这样 每次写类似场景的时候,都需要去为类目商品列表写很多逻辑,为了提高开发效率我决定将这一部分抽离成组件。 实现 1.样式 所有tab栏的样式和商品列表的样式都提供插槽,供业务自己定制 2.变量 isTabFixed: …
  67. 剑指offer – 字符串的排列 – JavaScript 题目描述:输入一个字符串,打印出该字符串中字符的所有排列。你可以以任意顺序返回这个字符串数组,但里面不能有重复元素。 本题和 Leetcode 中的 No.47 全排列 II 类似。 题目描述 输入一个字符串,打印出该字符串中字符的所有排列。你可以以任意顺序返回这个字符串数组,但里面不能有重复元素。 本题和 …
  68. 从架构入手轻松读懂框架源码-以jQuery,Zepto,Vue和lodash-es为例 不知道有没有朋友有这种经历。雄心勃勃的打开一个开源框架的源码,开始看,一行一行的看下去,看了几行就感觉,“我艹,这什么玩意儿”,然后就看不下去了。如果你有类似的经历,可以看看本文,本文会讲解几种常见的开源框架的代码架构,从架构出发,帮你轻松读懂框架源码。记住以下两个要点: 不要试图一行一行的往…
  69. 基于 H5 与 WebGL 的风力发电场 3D 展示风能是一种开发中的洁净能源,它取之不尽、用之不竭。当然,建风力发电场首先应考虑气象条件和社会自然条件。近年来,我国海上和陆上风电发展迅猛。海水、陆地为我们的风力发电提供了很好地质保障。正是这些场地…
  70. 基于 React、Redux、Webpack 和 React-Router 的轻量级前端框架 基于 React 、 Redux 、 Webpack 和 React-Router 的轻量级前端框架。 特性 快速上手 ,没有其它cli这么多概念,只要会React、Redux、Webpack、React-Router,快速搭建中后台管理平台。 路由匹配 ,包含url输入、js跳转、菜单切换。 Action ,不需要重复定义action,比如等待Action、成功Actoin、失…
  71. 前端监控进阶篇 ——Sentry 监控 Next.js 项目实践 上一篇相关文章介绍了 Sentry 的基础篇 —— 本地安装,本篇文章以实际项目进使用 Sentry 进行前端监控实践。实践案例选择 Next.js 项目,具体项目地址 next-sentry-easy 。 上一篇: 前端监控基础篇 —— Docker + Sentry 搭建前端监控系统 开源社区存在很多搭建 Sentry 的文章,但是关于相关细节配置使用的实践文章…
  72. 剑指offer – 数组中重复的数字 – JavaScript 题目描述:找出数组中重复的数字。在一个长度为 n 的数组 nums 里的所有数字都在 0 ~ n-1 的范围内。数组中某些数字是重复的,但不知道有几个数字重复了,也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。 题目描述 找出数组中重复的数字。 在一个长度为 n 的数组 nums 里的所有数字都在 0 ~ n-1 …
  73. 一文读尽前端路由、后端路由、单页面应用、多页面应用缺点:使用浏览器的前进,后退键的时候会重新发送请求,没有合理地利用缓存。单页面无法记住之前滚动的位置,无法在前进,后退的时候记住滚动的位置
  74. Webpack优化实践,合理分包,降低白屏时间 webpack打包过程中,经常出现app.js一个文件好几兆的情况,这偏偏又是网页最先加载的文件,由于从上到下的执行顺序,前面的脚本在加载时会阻塞页面渲染,白屏时间由此而来。那么我们如何提高网页渲染速度呢?办法之一就是 合理的分包策略 。 项目简述 源码戳 GitHub ,预览 戳这里 一个简单的博客项目,项目本…
  75. 建议改成: 读完这篇你还不懂Babel我给你寄口罩 建议改成: 读完这篇你还不懂Babel我给你寄口罩 前言 最近在学习webpack, 发现了webpack中一个重要的功能点 babel-loader , 于是就想着学习了解一波 Babel . 我们在做一件事, 学习一个知识点的时候, 都应该是抱有一个目的去做的. 在你花了大把时间大把精力去学习这个知识的时候, 它能带给你什么 ️ ? 能帮助…
  76. vue-cli创建的项目中的gitHooks原理解析 在使用 vue create my-app 创建项目的时候,Vue 会自动帮我们做好一些预配置,你可以不使用它,但是一旦需要的时候,突然发现,咦~原来它已经帮我做好准备工作了,只需要按自己的需求配置一下就可以了,就会觉得 vue-cli 很贴心啊,帮我们节省了很多时间。 在 package.json 文件中会发现 gitHooks 、 lint-staged 等…
  77. JavaScript中的this原理及6种常见使用场景 一、this原理 this是JavaScript的一个关键字,函数调用时才会出现; 因为函数是在一定的环境中运行的,调用函数时肯定需要知道是 ?就用到了this进行指向; 那么this到底指向的是什么? this 既不指向函数自身,也不指函数的词法作用域,而是调用函数时的对象! 二、使用场景 (一)普通函数的调用…
  78. ZooTeam 前端周刊|第 69 期——本文是对之前同名文章的修正,将所有webpack3的内容更新为webpack4,以及加入了笔者近期在公司工作中学习到的自动化思想,对文章内容作了进一步提升。 原文链接:imweb.io/topic/5b6fd… 0.引言 作为互联网项目…
  79. 「硬核JS」深入了解异步解决方案 Javascript语言的执行环境是 单线程 (single thread,指一次只能完成一件任务,如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推) 这种模式的好处是实现起来比较简单,执行环境相对单纯,坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行,常见的浏览器无…
  80. 大前端之路-vuex 速览 个人理解 就是单页应用中 多个组件之间 共享数据的 状态机通用管理机制。有点类似于java中的观察者模式,在android中类似的有eventbus。中大型应用应该都会用到。 如果你跟我一样是有移动开发经验的前端新人,那么最好还是学习一下这个东西,以后遇到类似问题就可以直接哪来用了。 当然了,不要滥用vuex,能用参数传…
  81. 基于dom的一些前端漏洞 最直接的xss —-dom xss function trackSearch(query) { document.write(‘<img src="/resources/images/tracker.gif?searchTerms=’+query+’">’); } var query = (new URLSearchParams(window.location.search)).get(‘search’); …

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

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

‘;
?>


关注我

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

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

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