玉伯：我的前端成长之路；前端面试每日3+1（周汇总2019.11.10）；vue与react哪个更香？；vue发送请求是应该在mounted还是在created生命周期；运行 JavaScript 代码片段的 20 种工具；开发一个高质量的前端组件，这些姿势一定要知道；深入理解JS设计模式 单例模式；深入理解JS迭代协议——手写迭代器
-
玉伯：我的前端成长之路 编者按：本文通过玉伯授权后发布 注：这是在阿里内部前端大学的一个分享，整理了一份对外的版本，希望分享内容能对你有所帮助。 今天跟大家分享下个人成长和带团队的一些感悟。我可能更偏向于写作型或阅读型，很少在对外分享中讲关于成长的话题。今天尝试下，希望…
-
前端面试每日3+1（周汇总2019.11.10）《论语》，曾子曰：“吾日三省吾身”（我每天多次反省自己）。 前端面试每日3+1题，以面试题来驱动学习，每天进步一点！ 让努力成为一种习惯，让奋斗成为一种享受！相信 坚持 的力量！！！
-
vue与react哪个更香？ 概述 Vue和React两个JavaScript框架都是当下比较受欢迎的，他们两者之间的区别有哪些，各自的优缺点是什么？ 我想多数初级的前端工程师都有这个疑问，也面临着去深度学习哪个框架更好一些的疑问，那么本文将介绍一下两个框架的区别以及各自优略。 相同点 都是属于MVVM框架 都有双向数据绑定 都是数据驱动性的u…
-
vue发送请求是应该在mounted还是在created生命周期 一个经常会被问到的问题： 为什么不在 created 里去发ajax？ created 可是比 mounted 更早调用啊，更早调用意味着更早返回结果，那样性能不是更高？ 首先，一个组件的 created 比 mounted 也早调用不了几微秒，性能没啥提高； 而且，等到异步渲染开启的时候， created 就可能被中途打断，中断…
-
运行 JavaScript 代码片段的 20 种工具 前端日常开发中，我们使用喜爱的 IDE 调试 JavaScript 代码，比如我喜欢的代码编辑器有两个， Sublime Text 3 和 VS Code ，前几年还使用过 Atom ，偶尔我们会遇到临时需要快速分享给同事或者朋友一段代码的场景，那么在线的 JavaScript 运行环境的重要性就体现出来了。 为了解决这样的问题，业界涌现出了很多很优秀…
-
开发一个高质量的前端组件，这些姿势一定要知道2009 年 11 月 8 日，在欧洲 JSConf 大会上，Ryan Dahl 第一次正式向业界宣布了 Node.js 的面世，使 JS 语言书写后端应用程序成为了可能。在随后的几年里，Node.js 受到了 JavaScript 社区的狂热追捧，前端行业也…
-
深入理解JS设计模式 单例模式 Javascript和其他语言一样，同样拥有着很多种设计模式，比如单例模式、代理模式、观察者模式，策略模式等，熟练运用设计模式可以使我们的代码逻辑更加清晰，并且更加易于维护和重构。 本文主要介绍JS的单例模式，涉及知识点较多，包括闭包，作用域链，立即执行函数等（如果有误欢迎指出） 正文 单例模式定义 单…
-
深入理解JS迭代协议——手写迭代器 可迭代协议允许 JavaScript 对象去定义或定制它们的迭代行为, 例如（定义）在一个 for..of 结构中什么值可以被循环（得到）。一些内置类型都是内置的可迭代类型并且有默认的迭代行为, 比如 Array or Map, 另一些类型则不是 (比如Object) 。 为了变成可迭代对象， 一个对象必须实现 @@iterator 方法, 意思是这个对象（…
-
Winter：前端团队的成长 想要了解更多不掺水的原创，请戳上方蓝色字体：政采云前端团队 关注我们吧～ 前言 <FDay>前端技术分享会，是政采云前端团队（ZooTeam）的月度分享会。2019 年的 10 月期，我们有幸邀请到了 Winter（程劭非） ，为我们的前端同学做了一期关于前端团队成长的主题分享。之前也邀请过其他大牛来…
-
现代 JavaScript 教程 — 逻辑运算符 逻辑运算符 JavaScript 里有三个逻辑运算符： || （或）， && （与）， ! （非）。 虽然他们被称为“逻辑”运算符，但这些运算符却可以被应用于任意类型的值，而不仅仅是布尔值。他们的结果也同样可以是任意类型。 让我们来详细看一下。 ||（或） 两个竖线符号表示了“或”运算： result = a || b; 复…
-
用初中数学知识撸一个canvas环形进度条周末好，今天给大家带来一款接地气的环形进度条组件vue-awesome-progress。近日被设计小姐姐要求实现这么一个环形进度条效果，大体由四部分组成，分别是底色圆环，进度弧，环内文字，进度圆点。设计稿截图如下：
-
前端项目优化（一） 一，本文分为两部分 普通项目优化 vue项目优化 防止XSS与XSRF（安全性） 二，普通项目优化: 页面加载阶段 页面渲染阶段 一、 页面加载 dns预解析 使用cdn 静态资源的压缩与合并 减少https请求 异步加载defer，async 服务端渲染ssr 多使用内存和缓存 二、 页面渲染 css放前面…
-
手写源码系列（二）：JSON.stringify和JSON.parse JSON数据格式在我们日常的开发中，使用频率非常的高。无论是请求后端接口，返回的数据，还是后端同学要求前端传参格式，都离不开JSON。 MDN定义 JSON 是一种语法，用来序列化对象、数组、数值、字符串、布尔值和 null 。它基于 JavaScript 语法，但与之不同： JavaScript 不是 JSON ， JSON 也不是 JavaScript…
-
可能是最透彻的JavaScript数据类型详解 接触写博客有一段时间了，都是边学边学着写，但总感觉写的凌乱，想起啥写啥。这几天在刷红宝书，收获还是蛮多的，决定结合自己的学习，写一个系列，我叫它「前端料包」，旨在巩固前端基础，努力提升自己，同时也乐于做一个分享者。这个系列包括但不限于下面脑图中的内容，目录和发文顺序暂且如下： 概述 …
-
Vue项目中使用jsonp抓取跨域数据在下载的jsopn中，jsonp（url，options，callback）这个是原生jsonp方法中的参数；
-
一份配置，轻松搞定Vue表单渲染 表单可以说是前端开发中最经常遇到的元素之一。在日常表单的开发中，存在着 v-if 条件渲染、满屏magic number枚举值，再加上表单之间的复杂的联动交互的情况，往往使得一个看似简单的表单变得愈加臃肿不堪。 表单的联动关系与状态重置往往散落在各个函数方法中，随着需求的不断扩充与变更，使得表单之间的耦合复杂度…
-
解密国内 BAT 等大厂前端技术体系：腾讯篇 解密大厂前端技术体系系列文章第三篇，腾讯作为国内唯二互联网巨头，一直都是低调赚钱，随着微信平台、腾讯云的崛起，其在跨平台、工程化、小程序等领域都有非常不错的积累，非常值得大家借鉴。
-
Js事件循环（Event Loop）机制Event Loop是计算机系统的一种运行机制，是个很重要的概念。而Javascript用这种机制来解决单线程运行带来的问题。理解很熟悉将会有利于我们更容易理解Vue的异步事件。
-
前端与算法 leetcode 189. 旋转数组把他当做一到简单的题来做,不要想太多了就好也可以不整那些花里胡哨的,直接旋转数组n次,我一开始也想到了这个办法,但是觉得太简单而且效率低下,想了很久也没想到合适的办法
-
说一说Angular“吊打”React和Vue的几个点 三种框架的重度用户，这里先列上我遇到的一些场景，后期会有Angular的对应各种场景的demo 场景一： 表单 动态表单(表单数据有时候是数组，或者，表单有时候是级联的) 表单校验 表单的异步校验（比如注册表单，当用户输入昵称的时候，异步从网络获取该昵称是否已经被注册，及时提示用户） 场景二：路由 …
-
骚年，你对前端模块化了解多少 不管是前端老司机还是刚接触前端的"菜鸟"。 模块化 想必在每天工作中，或多或少都会接触到。尤其针对一些针对 React 、 Vue 开发的同学来说，那就是每天都会脱口而出的一个必备术语。并且在很多技术文档中，都常常看到 AMD 、 UMD 、 COMMONJS 还有ES6中的 module 。 但是，模块化的本质是什么！前…
-
前端部署发展史 “随着 DevOps 的发展，前端部署越来越简单，可控性也越来越高，建议所有人都稍微学习一下 DevOps 的东西。”
-
为什么我们永远不要使用 JavaScript 的 new Array() Why never use new Array in Javascript javascript I love javascript, but sometimes it seems it doesn’t love me back. Take for instance the Array constructor function. var a = new Array(1,2,3,4,5); a // returns 1 a.length // returns 5 Wanna take a shot in what this returns? …
-
Vuex面试题汇总 参考答案 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，而更改状态的唯一方法是提交mutation，例 this.$store.commit(‘SET_VIDEO_PAUSE’, video_pause ， SET_VIDEO_PAUSE 为mutation属性中定义的方法 。 Vuex解决了什么问题？ 参考答案 解决两个…
-
从一道面试题中总结JS作用域，this 指向和箭头函数 最近小弟在网上看到一道面试题，题目虽然简单，但包含的知识点较多，有利于对 JavaScript 作用域，this 指向，call/apply，箭头函数的理解。在这里跟大家分享总结一下。 题目先睹为快 var a = 10 var obj = { a: 20, say: function() { console.log(this.a) } } obj.say() 复制代码 很明显答案是输出 20…
-
vue的provide / inject 有什么用？vue的父子组件通信用什么？：prop和$emit的组合。如果是爷孙组件呢？：那么就要用父组件来转发数据和事件了。如果是太爷爷和孙子组件呢？：当然是vuex啦emmm 好的，没我啥事了，我这就走。
-
jQuery 跨站脚本漏洞影响大量网站 Snyk 发布了 2019 年度的 JavaScript 框架安全状况报告 （PDF），除了最流行的 JS 框架 Angular 和 React 外，报告还观察了其它三个流行 JS 前端框架 Vue.js、Bootstrap 和 jQuery 的 安全漏洞 。jQuery 过去 12 个月的下载量超过了 1.2 亿次，是 Vue.js 的 4000 万次和 Bootstrap 的 7900 万次之和。Vue.js 发现了 …
-
推荐几篇最近看的，React的文章完全理解React Fiber 原文链接： [链接] React Fiber架构 原文链接： [链接] React hooks概览 原文链接： [链接] Stop Asking if React Hooks Replace Redux 原文链接: [链接] Mobx还是Redux 原文链接…
-
为了学好 React Hooks, 我抄了 Vue Composition API, 真香 前几篇文章都在讲 React 的 Concurrent 模式, 很多读者都看懵了，这一篇来点轻松的，蹭了一下 Vue 3.0 的热度。讲讲如何在 React 下实现 Vue Composition API (下面简称 VCA )，只是个玩具，别当真。 实现 ‘React’ Composition API？看起来很吊，确实也是，通过本文你可以体会到这两种思想的碰撞, 你可以深入学习…
-
Next.js部署web同构直出应用全指南（Mobx + Typescript） 有关Next.js、同构直出、SEO、SPA等相关介绍将不再赘述，本文主要针对Next.js配合typescript和mobx搭建一个完整的生产部署的前端工程进行核心代码的分析以及主要坑点的讲解，非Next.js入门课程，下面我将会列出本教程所需要的前置预备知识和能力： nodejs服务端编程基础 已至少阅读一遍Next.js官方文档 熟练使用…
-
精读《React Conf 2019 Day1》 “总的来看，React Conf 今年的内容视野更广了，不仅仅有技术内容，还有宣扬公益、拓展到移动端、后端，最后还有对 web 发展的总结与展望。”
-
超酷HTML5环形音乐播放器 带播放列表源码： 互联网的那些破事的微博视频
-
React SSR + express 构建简单服务端渲染Demo 服务器端渲染(ssr)：用户请求服务器，服务器上直接生成 HTML 内容并返回给浏览器。 ssr实现原理 – virtual Dom 的存在 在服务器端，判断是服务器环境，通过操作js对象，把virtual Dom通过renderToString 或 renderToStaticMarkup映射成字符串输出。通过url请求，在真实浏览器环境把virtual Dom映射成真实Dom,完成页…
-
19 个来自 2019 React Conf 的总结React Conf ⚛️已经正式结束。有很多精彩的演讲，人物，活动，当然还有美食。我还在整理整个活动，但是就这次会议而言，这是迄今为止我参加过的最好的活动。
-
Koa2 + Vue 从零开始搭建服务端渲染应用 最近公司要求做一个类似官网的应用，为了解决 SEO 的问题准备使用 node 做服务端渲染。也尝试了好几个现成的应用级框架，但是本着菜鸡需要学习的心情，准备从零开始鲁出来一个简单的服务端渲染应用，本次我选择 Koa 作为后端开发框架，首先试着 模版渲染 , 之后又尝试了 Vue SSR 一 项目跑起来 创建空的文件夹， n…
-
V8 的 JavaScript 执行管道 “V8 执行管道经过多次调整，本文只选取早期执行管道中较为关键的一个阶段。”
-
React 开发必须知道的 34 个技巧【近1W字】React 是前端三大框架之一,在面试和开发中也是一项技能;本文从实际开发中总结了 React 开发的一些技巧技巧,适合 React 初学或者有一定项目经验的同学;万字长文,建议收藏。 序列文章:Vue 开发必须知道的 36 个技巧…
-
前端与算法 leetcode 350. 两个数组的交集 II[TOC] 前端与算法 leetcode 350. 两个数组的交集 II 题目描述 给定两个数组，编写一个函数来计算它们的交集。 示例 1: {代码…} 示例 2: {代码…} 说明： 输出结果中每个元素出现的次数，应与元素在两个数组中…
-
NodeJS 内存泄漏检测与定位 最近解决了一个 Node.JS 应用内存泄漏 Bug，顺便学会了用 Chrome DevTools 去看 heapdump 文件。这里做一些简单的记录。 如何「优雅地」获得 heapdump 文件 由于我们所有应用都是以容器部署的，所以要去获得某个容器内的文件，并拷贝到本地难度还是比较大，也非常麻烦。考虑到调试时或许会需要下载非常多次的 snaps…
-
vue ssr服务端渲染小白解惑初学vue服务端渲染疑惑非常多，我们大部分前端都是半路出家，上手都是前后端分离，对服务端并不了解，不说java、php语言了，连node服务都还没搞明白，理解服务端渲染还是有些困难的；
-
Winter：前端团队的成长 想要了解更多不掺水的原创，请戳上方蓝色字体：政采云前端团队 关注我们吧～ 前言 <FDay>前端技术分享会，是政采云前端团队（ZooTeam）的月度分享会。2019 年的 10 月期，我们有幸邀请到了 Winter（程劭非） ，为我们的前端同学做了一期关于前端团队成长的主题分享。之前也邀请过其他大牛来…
-
vue-router 你可能忽略的知识点 vue-router相信大家都不陌生，并且很多都有实战经验。可能有很多你忽略的一些点。 1、丑陋的hash值 vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 const router = new VueRouter({ mode: ‘history’, routes: }) 复制代码 当你使用 hist…
-
前端与算法 leetcode 26. 删除排序数组中的重复项[TOC] 前端与算法 leetcode 26. 删除排序数组中的重复项 题目描述 26. 删除排序数组中的重复项 概要 一提到原地删除数组,就能立即想到双指针法,这道题本身也没什么难度,日常水题, 提示 双指针 解析 没有思路的时…
-
彻底搞懂 —— Vue SSR 服务端将Vue组件渲染为HTML 字符串，并将html字符串直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。 优点 更好的SEO， 由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面 更快的内容到达时间 缺点 开发条件受限。 （服务端只执行beforeCreated 和 created 生命…
-
桌面浏览器通知JS API 查看Chrome已经授权的通知站点 chrome://settings/content/notifications 如何设置通知? 兼容性:IE系列不行,手机浏览器不行,其余都可以 代码: <button id="notifyButton">Notification</button> <script> document.getElementById(‘notifyButton’).onclick = function () { if(…
-
构建大型 Vue.js 项目的10条建议 下面是我在开发大型 Vue 项目时的最佳实践。这些技巧将帮助你开发更高效、更易于维护和共享的代码。 今年做自由职业的时候，我有机会开发了一些大型 Vue 应用程序。我所说的这些项目，Vuex store 超过十个，包含大量的组件（有时候几百个）和视图页面。对我来说这是个很有益的经验，因为我发现了很多有意思的模式，可…
-
vue ssr服务端渲染-初学开发环境搭建网上有关ssr开发环境搭建的文章不算多，就算找到也是比较高级的，不太适合新手入坑；这篇内容只抽取了其中最重要的部分，实现最基础的开发环境搭建；所谓开发环境无非两件事：自动打包·自动刷新页面,叫法比较土，…
-
前端Javascript:babel 怎么把字符串解析成 AST，是怎么进行词法/语法分析的？ 什么是Babel? Babel 是我们知道的将 ES6、ES7等代码转译为 ES5 代码且能安全稳定运行最好的工具 同时它允许开发者开发插件， 能够在编译时期转换 JavaScript 的结构。 Babel概述： 我们需要知道3个Babel处理流程中的重要工具； 解析 Babylon 是一个解析器，它可以将…
-
vue中组件间的数据通信 一、属性传递 1、数据的传递 在父组件（parent）中通过绑定属性 <Son :counter="counter"></Son> 在子组件(son)中通过 props: {counter: {type: Number}} 来接受数据,接收后在子组件中可正常使用数据。 2、方法的传递（子组件使用父组件的方法） 在父组件（parent）中通过绑定属性 …
-
【Dmitri Pavlutin】详细介绍JavaScript的变量提升 翻译：道奇 作者：Dmitri Pavlutin 原文： JavaScript Variables Hoisting in Details 程序里的变量随处可见，数据和逻辑的交互使得应用程序有了生命， JavaScript 中处理变量时会会遇到一个重要的概念：变量提升。如果你正在找变量提升的详细介绍，那么你就来对地方了。 1.简介 变量提升是将变量的声…
-
14 个拷贝数组的 JS 技巧在项目开发过程中，企业会有很多的任务、需求、缺陷等需要进行管理，CORNERSTONE 提供敏捷、任务、需求、缺陷、测试管理、WIKI、共享文件和日历等功能模块，帮助企业完成团队协作和敏捷开发中的项目管理需求；更…
-
ThingJS平台怎样实现实时3D可视化的？ ThingJS 是一个先进的 PaaS 开发平台，开发者可以方便、安全地基于云端的各种工具组件随时随地进行开发。 ThingJS 界面概述 为了便于开发者在ThingJS下进行界面开发，ThingJS 提供的界面体系结构目录如下： 上述ThingJS界面体系中，进行3D场景可视化的区域，我们定义为3D容器，如下图所示： …
-
[LeetCode] 204. 计数质数：JavaScript 实现埃拉托斯特尼筛法 题目链接： leetcode-cn.com/problems/co… 看到这个题目，一般人很容易就能想到使用循环，通过暴力遍历的方式检查每一个数是否为质数，并进行计数。 但是这种方法的算法复杂度过高，对于小范围搜索还好，如果是从百万甚至千万的数字中找出所有的质数，这种方法的劣势将极其明显。那我们可以使用埃拉托斯特尼筛法进…
-
JavaScript 框架安全报告2019在此报告中，我们调查了 Angular 和 React 生态系统的安全状态。在这份报告种我们根本没有将它们作为竞争性框架进行比较。相反，我们把它们作为可行的构建 JavaScript 项目的前端生态系统的替代方案进行了审查，…
-
[springboot 开发单体web shop] 5. 用户登录及首页展示在之前的文章中我们实现了用户注册和验证功能，接下来我们继续实现它的登录，以及登录成功之后要在页面上显示的信息。接下来，我们来编写代码。
-
ZooTeam 前端周刊｜第 55 期上篇文章介绍了 Suspense, 那么这篇文章就讲讲它的好搭档 useTransition。如果你是 React 的粉丝，这两篇文章一定不能错过。 我们知道 React 内部做了翻天覆地的优化，外部也提供了一些紧凑的新 API，这些 API 主…
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
