关于webpack4的14个知识点,童叟无欺；GraphQL + Apollo + Vue 牛刀小试；《阿里云前端技术周刊》第五期；Javascript即将到来的3个新特性；由Vue中三个常见问题引发的深度思考；中级前端工程师必须要掌握的 27 个 JavaScript 技巧；JavaScript 同步和异步(执行机制)；vue项目前端错误收集之sentry
-
关于webpack4的14个知识点,童叟无欺 没有什么比时间更具有说服力了，因为时间无需通知我们就可以改变一切。 最近工作中用到了nuxt,才发现,如果webpack学的6,nuxt基本不需要学习,没什么学习成本的,因此,这篇重新记录下webpack4的一些基础知识点, 下一篇将会配置一个优化到极致的react脚手架 ,也希望大家能够持续关注,配置webpac…
-
GraphQL + Apollo + Vue 牛刀小试 GraphQL 这门新技术在去年就开始火热起来，今年也在很多技术周刊、论坛上看到关于这门新技术的研究和讨论。因此作为一名前端开发，紧跟技术潮流是必须的 ，周末便花了点时间对 GraphQL 进行了相关学习，学习过程中写了一些简单的 demo，在此过程中发现这玩意是真的香啊，所以决定要开篇博客来记录下这个过程。 什么是 …
-
《阿里云前端技术周刊》第五期作者：雏恬校对：染陌 知乎：阿里云中台前端/全栈团队专栏Github：阿里云前端技术周刊 给我们投稿：传送门参与交流：传送门 前端速报 GitHub Package Registry 发布！你依旧是那个我们所爱的 GitHub！更多 Google…
-
Javascript即将到来的3个新特性 1、Optional Chaining(可选链式调用) const data = { user: {}, }; console.log(data.user.address.street); // Uncaught TypeError: Cannot read property ‘street’ of undefined 这是我们现在 ES6 中会遇到的问题，原因是 user 中没有 address 对象，然后我们这样判断： const street = data && data…
-
由Vue中三个常见问题引发的深度思考 工作中我们通过搜索引擎或者官方文档很容易就会知道一个语法怎么使用，但是你知道其中的原理吗？我想有一部分同学应该做不到清楚的说明其实现原理。众所周知，如今技术更新迭代速度很快，据 Vue 作者尤雨溪表示 Vue3.x 会在今年的下半年发布正式版本，视频地址在这里 VUE CONF 杭州之 3.0 进展 。如果你在使用 Vue 或者…
-
中级前端工程师必须要掌握的 27 个 JavaScript 技巧 使用 Object.prototype.toString 配合闭包，在保证判断数据类型的准确性时，同时能让这个函数非常灵活，通过传入不同的判断类型来返回不同的判断函数（注意传入 type 参数时首字母大写） 2. ES5 实现数组 map 方法 值得一提的是，map 的第二个参数为第一个参数回调中的 this 指向，如果第一个参数为箭头函…
-
JavaScript 同步和异步(执行机制) 首先我放在文章的开头，重点说两点： JavaScript 是一门单线程语言。 Event Loop（事件循环）是JavaScript 的执行机制。 好了，那么我们开始这篇文章的主要内容，既然说js 是单线程，那就是在执行代码的时候是从上往下执行的，我们来看一段代码吧： setTimeout(function(){ console.log(‘定时器开始…
-
vue项目前端错误收集之sentry sentry简介 Sentry 是一个开源的错误追踪工具，可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web来展示输出错误。 sentry官网： https://sentry.io/ sentry安装 sentry 是一个开源的工具…
-
一见不知可钟情 npm script 本文已同步在我的博客: ruizhengyun.cn/blog/post/7… 在看的各位都是老司机或者即将成为老司机的鲜肉们都知道 package.json 了（别皮了，别说不知道啊），不过老司机的我还是要说下如何科学用它。如果你是科学用的可以跳过本章。 快速创建项目 npm script 依赖于文件 package.json。npm 为我们提供了快速创建 …
-
（JS基础）Proxy 对象 2019年05月26日 阅读 6 （JS基础）Proxy 对象 Proxy 意为" 代理器 "，用于修改目标 对象的成员 之前进行"拦截"，外界对该对象的成员的访问，都必须先通过这层拦截。其中，成员包括未定义的，即访问或设置不存在的属性，也会触发相应的代理函数。 …
-
前端中台系统常见问题剖析与解决方案 干货高能预警，此文章信息量巨大，大部分内容为对现状问题的思考和现有技术的论证。 感兴趣的朋友可以先收藏，然后慢慢研读。此文凝结了我在中台领域所有的思考和探索，相信读完此文，能够让你对中台领域的常见业务场景和解决方法有着全新的认知。 此文转载请注明出处。 在2019年5月11日的那个周末，我在FD…
-
JS核心知识点梳理——异步，单线程，运行机制学习javascipt的时候，经常听人说，javascipt即是异步的，又是单线程的。究竟什么是异步,什么是单线程？javascript在浏览器中的运行机制是怎么样的？什么是eventloop,task queue?怎么写异步函数？相信读完这篇文…
-
javaScript 常用 API 实例讲解 new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例 this this 用法实例讲解 当构造函数没有返回值时： function Animal (name, age) { this.name = name; this.age = age; this.speak = ‘汪汪’ } Animal.prototype.color = ‘red’; Animal.prototype.say = function …
-
vue cli3.0 引入eslint 结合vscode使用 它的目标是提供一个插件化的javascript代码检测工具。官网地址 最近一个项目里，最开始使用 cli3.0 搭建的时候没有默认选用 eslint ，导致现在有的人使用其他编辑器，就会出现格式错乱的情况。所以引入 eslint 做代码检测 第一步 （安装） npm install eslint eslint-config-airbnb-base eslint-plugin-import…
-
Vue + Echarts + 百度地图 实践 npm install echarts@3.0.0 –save 如果需要在线定制适合自己项目的echarts包，可以使用 <script> 引入。建议开发环境使用 echarts.js <script src="echarts.min.js"></script> 在调用echarts的组件内引入，也可以在mian.js里面全局引入 import echarts from ‘echarts’ 如…
-
从底层看JS执行机制 先从一个简单的例子出发（先不涉及异步），看看自己是否大致了解浏览器的执行机制： console.log(a); var a=1; function foo(a){ console.log(a); var a=2; console.log(a); } foo(a); 复制代码 执行结果： undefined 1 2 如果你的预测结果不一样，那你可以看看下面几个常见的误区： var a=1…
-
React Hooks：没有魔法，只是数组 React Hooks: 没有魔法，只是数组 原文链接： https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e 我是React新特性Hooks的粉丝。但是，在你使用React Hooks的过程中，有一些看上去 很奇怪的限制 。在本文里，对于那些还在为了理解这些限制而苦苦挣扎的同志，我尝试通过一…
-
关于 Git 的 20 个面试题翻译：疯狂的技术宅原文：[链接] 本文首发微信公众号：前端先锋欢迎关注，每天都给你推送新鲜的前端技术文章 我在工作中很喜欢 Git 。 Git 在许多开发团队中扮演着重要的角色。 关于 Git 面试的第一个问题必须是…
-
Vuex概念浓缩版记录 读取store的字段值,通过this.$store.state访问 const Counter = { template: `<div>{{ count }}</div>`, computed: { count () { return this.$store.state.count } } } 复制代码 mapState 辅助函数 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗…
-
如何成为一个bilingbiling的前端炼金师前端的技术点众多，其中不乏抽象且晦涩的知识点，它们用文字无法很直观的表述出来，所以众多开发者对这些知识点的理解都是是而非，如果我们通过图画来展示，就会很容易理解。因此Diagram项目希望开发者能通过这种…
-
Canvas 文字碰撞检测并抽稀一般在做地图相关的需求是才会用到文字抽稀，我也是在为公司的地图引擎实现一个功能时才实现了该方法，在这里将其简化了，就在普通的 Canvas 上进行操作，并没有引入地图概念
-
每日前端进阶第五题：防抖(debounce)函数的作用是什么？有哪些应用场景，请实现一个防抖函数 防抖是什么？防抖就是防止抖动，例如小朋友喜欢多动，停不下来，然后做家长的打一顿，让小朋友安静下来，这种行为就叫做防抖。 (～o￣3￣)～ 抖个机灵，哈哈哈~ 抖动是一个很常见的控制函数在一定时间内执行多少次的技巧，其实就是确定了函数执行的最小间隔，如果还在这个间隔内触发函数，则重新计算。 …
-
【前端面试分享】- 寒冬求职下篇 越来越多的公司都在面试前加入了笔试环节。 有的甚至会根据你的笔试答题情况来决定是否进入面试环节。 当然，进入面试环节，也会时不时的出几道算法或者其他类型的相关的题目让你写出来。 所以不仅要会说，还要会写。 关于手写面试题的文章也有好多，实现 call,apply,bind 之类的，也都最好要掌握。 总结了一…
-
vue全家桶+Echarts+百度地图，搭建数据可视化系统（【续】接口篇） 接上篇 vue全家桶+Echarts+百度地图，搭建数据可视化系统 1 前 言 1.1 业务场景 实现数据监控的系统。有线图、柱状图、地图，并具有定时刷新的功能。 1.2 业务分析 上一篇分析的步骤大致有： vue-cli vuex vue-router 上一篇介绍了 1-6 部分。本篇将介绍一下剩下的 7-10 部分。 :joy::joy: 主…
-
原生js实现each方法 jquery里面有个each方法，将循环操作简化、便捷。 随后es出了个forEach方法，两个虽然用法相近，但是不能处理对象类型。且无法通过return true达到continue效果。 此外还有个every方法，该方法虽然可以实现continue效果，但是在处理类数组与对象类型时，完全无用。 在不使用 jquery 的 each 方法时，该如何处理；或者…
-
Monorepo——大型前端项目的代码管理方式最近我接手了一个项目，代码量比较大、有点复杂。仓库 clone 下来代码有 50+ MB，npm install 安装完体积飚到了近 2GB …… 熟悉了一下，这个项目比较复杂，采用了 monorepo 的方式进行代码的管理。折腾几天后，对 …
-
理解：javascript中DOM0,DOM2,DOM3级事件模型 参考原文： cloud.tencent.com/info/ad9898… javascript中的事件 javascript程序使用的是事件驱动的设计模式，为一个元素添加事件监听函数，当这个元素的相应事件被触发那么其添加的事件监听函数就被调用：事件是javascript和HTML交互基础, 任何文档或者浏览器窗口发生的交互, 都要通过绑定事件进行交互; 所…
-
CSS 中 z-index 的工作原理解析 原文地址: https://blog.logrocket.com/how-css-works-creating-layers-with-z-index-6a20afe1550e 原文作者: Benjamin Johnson 介绍 这篇文章是”How CSS workd”系列文章中的第三篇(深入探讨CSS基本构建模块的系列文章，这些基本构建模块有时会让人感觉像是黑魔法)。无论你如何编写你的css代码…
-
Vue引入echarts使用教程 本文将介绍如何在vue project中引入echarts，在引入echarts之前首先需要添加echarts的依赖包。 vue2.0框架添加方法。 npm install echarts 复制代码 vue3.0框架添加方法。 npm add echarts 复制代码 全局引入 在全局引入，需要在main.js文件中，引入echarts。 全部引入 import …
-
9102了，快来了解webpack4 在当今的前端开发中，我们使用的打包工具可能会有很多种，当然webpack就是其中一种，那么webpack中的配置实际上是很多的，所以今天来整理下常用的配置以及它的作用。 如何开始 我们创建一个空的文件夹，然后使用 npm init webpack-demo ，下面一路回车,然后他会在我们的文件夹下创建一个 package.json 这样的…
-
手摸手入门webpack4 0配置 webpack4现在是支持0配置的 基本概念 entry output loader plugins mode file module chunks compiler complilation tapable事件流 2.从0开始配置 初始化项目 npm init git init 新增 .gitignore文件 src目录(index.js) webpack.config.js 安装webpack npm install -D webpack webpac…
-
JavaScript-CORS 跨域 在web浏览器中， 同源策略 限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。 如果两个页面的 1. 协议 2. 端口 （如果有指定） 3. 域名 三者都相同，则两个页面具有相同的源。 举例说明…
-
【JS进阶】你真的掌握变量和类型了吗变量和类型是学习JavaScript最先接触到的东西，但是往往看起来最简单的东西往往还隐藏着很多你不了解、或者容易犯错的知识，比如下面几个问题：
-
React 项目结构和组件命名规范React 作为一个库，它没有规定项目的整体结构。这很好，因为它给了我们自由去尝试不同的方法，并适应更适合我们的方式。另一方面，这可能会给React领域的开发人员带来一些困惑。
-
Vuex使用(实战记录) Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能 多个视图依赖于同…
-
JavaScript instanceof 运算符深入剖析 instanceof 运算符简介 在 JavaScript 中，判断一个变量的类型尝尝会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 "object"。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似…
-
[Vue.js进阶]从源码角度剖析vue-router（二） 在上篇中主要叙述了 vue-router 的注册和实例化过程，以及如何生成 $router, $route 对象 在本篇中会讲述： $route 对象生成的时机 路由守卫的原理 路由懒加载的原理 文中的源码截图只保留核心逻辑 完整源码地址 vue-router 版本： 3.0.2 $route 对象生成的时机 在上篇中解释了在…
-
浅析 JS 中的 EventLoop 事件循环（新手向）Event Loop 这个概念相信大家或多或少都了解过，但是有一次被一个小伙伴问到它具体的原理的时候，感觉自己只知道个大概印象，于是计划着写一篇文章，用输出倒逼输入，让自己重新学习这个概念，同时也能帮助更多的…
-
HTML5的5种存储方式详解 引言 本篇文章主要介绍了前端HTML5几种存储方式的总结 ，主要包括本地存储localstorage，本地存储sessionstorage，离线缓存（application cache），Web SQL，IndexedDB。有兴趣的可以了解一下。 正文开始~ 总体情况 h5之前，存储主要是用cookies。cookies缺点有在请求头上带着数据，大小是4k之内。主Domain污…
-
复习webpack4之提升Webpack打包速度的方法 之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。 这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好…
-
用 Vue 写个移动 SPA 应用 最近看了 Vue 的文档，想着应该写点什么加深下印象，能力有限，就照着葫芦画下吧:joy:，这次的葫芦是图灵社区 移动端页面 Github: github.com/Jimzjy/itur… 预览: jimzjy.github.io/ituring-mob… 前端新手，CSS / TS / JS 写的很烂，望见谅 准备工作 使用 vue-cli 创建项目，我的配置是 vue-…
-
Web技巧(07) 在这一期中咱们一起来聊聊HTML5中的表单。说到HTML，可能很多同学会说，HTML5有什么好聊的，不就是一些HTML的标签吗？事实上并非如此，就拿HTML中的表单中的 input 元素为例吧， input 元素及其相关属性和类型的支持情况都会因为浏览器的不同而存在较大的差异。甚至在支持特定功能的各个浏览器之间，它们的行为也会有所…
-
前端小白写的Vue+Koa2+Mysql移动商城 大家好！本人前端新手，最近费劲脑汁撸了个vue移动端商城，请大佬们帮忙点评一下。 目前实现的功能有： 注册登录、购物车、搜索、收货地址 预览地址 (⊙▽⊙) Github地址是： github.com/lyfan13/Vue… 若觉得还可以的话希望给个star呀，谢谢大佬们 ~(～￣▽￣)～ 如果只运行前端vue的话在vue里npm run serve就可…
-
nodejs使用express构建graphql接口项目教程 之间折腾过一篇使用springboot构建graphql接口项目的博客传送门 这篇博客来折腾一下nodejs中使用express构建graphql接口项目的用法 hello world mkdir graphql-js-demo cd graphql-js-demo npm init yarn add express express-graphql graphql 创建文件 server.js 添加下面代码 const express = require(&quo…
-
大型项目前端架构浅谈 大型项目前端架构浅谈 目录： 1、综合 1.1、使用场景 1.2、核心思想 1.3、切入角度 1.4、其他 2、基础层设计 2.1、自建Gitlab 2.2、版本管理 2.3、自动编译发布Jenkins 2.4、纯前…
-
JavaScript(ES6)知识点备忘 JavaScript的知识点备忘 Object.values/Object.keys/Object.entries() Object.keys:对Object中的索引进行循环 Object.values:对Object中的值进行循环 Object.entries:对Object中的每个项进行循环 Array map() map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。 const n…
-
vue读取本地的excel文件并显示在网页上我想实现读取一个本地的xlsx文件(task_list.xlsx)然后显示在网页上, 一开始选择的方法是建个express server, 通过发送axios请求来实现, 但是觉得只是读取一个本地文件还要搞个server太复杂了, 最终还是通过”xlsx”…
-
原生JS实现data方法 在开发中经常会在DOM上存储一些自定义数据，我们可以通过setAttribute方法来实现。但是当数据为引用类型时，存储后的数据却无效。这里将用原生的JS对data方法进行实现。 使用setAttribute: <div id="test-data"></div> <p class="test-data-list"></p> <p class=&qu…
-
WebViewJavaScriptBridge深入剖析 前一篇文章中，我们大致的讲述了一下JavaScriptCore这个库在iOS开发中的应用。在文中最后的阶段，我们提到了 WebViewJavaScriptBridge 这个库。提到这个库，可能有一些人就要说了，现在都什么时代了，谁还会用这个库啊？全是坑！不错，早在三年前，这个库有过一段辉煌的时光，在苹果除了WKWebView之后，渐渐的使用这个库…
-
ES6 Class 与 ES5 构造函数对比（Babel编译） User 类被编译以后转化为构造函数。被编译后生成了 _classCallCheck , _instanceof 方法。 class User{ } const user = new User(); console.log(user); // {} //↑↑↑↑↑↑↑↑↑↑↑↑↑ ES6 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑ //↓↓↓↓↓↓↓↓↓↓↓↓↓ ES5 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓ "use strict"; function _instanceof(left, right) { if…
-
2019-我的前端面试题2019的5月9号，离发工资还有1天的时候，我的领导亲切把我叫到办公室跟我说：’阿郭，我们公司要倒闭了，钱是没有的啦，为了不耽误你，你赶紧出去找工作吧’。听到这话，我虎躯一震，这已经是第2个月没工资了。
-
Node.js 多进程处理CPU密集任务 大家都知道 Node.js 性能很高，是以异步事件驱动、非阻塞 I/O 而被广泛使用。但缺点也很明显，由于 Node.js 是单线程程序，如果长时间运算，会导致 CPU 不能及时释放,所以并不适合 CPU 密集型应用。 当然，也不是没有办法解决这个问题。虽然 Node.js 不支持多线程，但是可创建多子进程来执行任务。 Node.js 提供了 …
-
移动Web深度剖析随着前端技术的急速发展，随着互联网行业的日益发展，HTML5作为一种比较新型的开发技术早已经被很多大的企业所应用，通过HTML5语言可以开发适用于任何设备上的酷炫网站页面，所以HTML5的发展趋势可想而知。话说HT…
-
webpack4手动搭建Vue开发环境实现todoList项目（2） 在上篇教程中，我用webpack4手动搭建了Vue的开发环境，包括了生产环境和开发环境，不知道能否帮助到大家学习（捂脸）。。。 拖更很久，不好意思，最近辞职了忙于找工作，生活还是有点烦躁的，但是在这里就没必要把负能量传给你们了！！ 好了，按照约定，这篇文章我会用上次搭建好的Vue开发环境去实现todoList项目，…
-
还学不会webpack？看这篇Webpack已经流行好久了，但很多同学使用webpack时还是一头雾水，一下看到那么多文档、各种配置、各种loader、plugin立马就晕头转向了。我也不例外，以至于很长一段时间对webpack都是一知半解的状态。但是想要继续…
-
【Vue项目总结】组件通信处理方案 Vue组件之间的通信是我们在项目中常常碰到的，而选择合适的通信方式尤为重要，这里总结下作者在实际项目中所运用到的通信方案，如有遗漏，请大家见谅。文章代码具体见 DEMO ；文章首发于 imondo.cn 父子组件 Vue中常见的是 父与子 组件间的通信，所要用到的关键字段是 props 和 $emit 。 props 接受父组件传给…
-
借助CSS来管理js事件CSS是一门很神奇的语言，很多和它不相干的功能却能起到很显著的效果，有些在js看起来实现都有一定的工作量，CSS一句属性就能轻而易举的解决，下面来看几个例子（主要和js事件相关）。
-
渐进式配置webpack4单页面和多页面(二) 使用包的版本 webpack ->4.3.0 babel-loader ->8.0.5 npm ->6.4.1 webpack-cli ->3.3.1 复制代码 每个章节对应一个demo 模块化拆包1 参考代码 demo8 什么是模块化拆包。比如我们在项目里面需要引入echarts、xlsx、lodash等比较大的包的时候。如果不做代码拆包，都会打包到一个js文件里面。如果…
-
JavaScript：十大排序的算法思路和代码实现本文内容包括：(双向)冒泡排序、选择排序、插入排序、快速排序(填坑和交换)、归并排序、桶排序、基数排序、计数排序(优化)、堆排序、希尔排序。大家可以在这里测试代码。更多 leetcode 的 JavaScript 解法也可以…
-
Vue项目引入CreateJS的方法（亲测） 1 前 言 1.1 CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具。 基于这些库，可以非常快捷地开发出基于HTML5的游戏、动画和交互应用。 A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTM…
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
