再看 2019 大前端技术趋势，Web OS 概念正落地；那个三本的“家伙”自学前端五个月经历了什么？；Js高级程序之旅 ： 前端架构初体验(一)；前端20个灵魂拷问 彻底搞明白你就是中级前端工程师 【中篇】；打造vuecli3+element后台管理系统（三）优化路由和vuex仓库，给router和store分模块；个人总结的一些写JS代码的基本规范；使用 Vue 实现一个虚拟列表；可能是你见过最完善的微前端解决方案
-
再看 2019 大前端技术趋势，Web OS 概念正落地 “前端三大框架已趋于平稳，标准化，向 Web Components 看齐；强运营背景下，移动端以前端开发为主，已成定局；5G 时代快来了，互联网的长期在线情况有可能会被打破。终上所述，未来浏览器会越来越重要，Web OS 的概念正在慢慢落地。”
-
那个三本的“家伙”自学前端五个月经历了什么？ 标题中所说的那个“家伙”就是我，我就是小鹿，转眼间，从安卓转到前端这五个月，到孤身一人来到北京找实习，这期间我经历了什么？仔细回顾一下，想想有时候真的是不要命了，这五个月，有很多要和大家分享的，仔细回顾这五个月，也算是我大学四年最值得纪念的，也是最疯狂的，我们从回到五个月前时光说起。 迷茫期 就…
-
Js高级程序之旅 ： 前端架构初体验(一) 以前自己做的一些Web应用，基本上都是按照非常传统的方式： 服务器端渲染模板； 利用jQuery的ajax进行异步数据交换。 所以首次接触前端架构类的东西，难免有点无从下手。 经过几天的奋战，以及参阅国内外大牛们的各种Tutorial之后，终于拨开迷雾，缕了些头绪，自己也试着从传统的方式过渡（重构）出了所谓的架…
-
前端20个灵魂拷问 彻底搞明白你就是中级前端工程师 【中篇】前端20个灵魂拷问，彻底搞明白你就是中级前端工程师 上篇 感觉大家比较喜欢看这种类型的文章，以后会多一些。 欢迎加入我们的前端交流二群 目前一群人数有点多 所以开放了二群 ～ 欢迎加入 里面很多小姐姐哦～～…
-
打造vuecli3+element后台管理系统（三）优化路由和vuex仓库，给router和store分模块 我们在做后台系统的时候，经常会有比较多的功能页面，每个页面或多或少都会有需要存储在vuex中的数据，一般情况下我们会在state下定义不同的object，但是当功能一多，全部字段和action、mutations都定义在一个文件里，难免会使文件变得很难维护。全部页面的路由都定义在一个路由文件里也会使文件代码变得比较多，后期维…
-
个人总结的一些写JS代码的基本规范 平时工作中虽然有eslint这些工具帮助我们规范一下基本的代码，但更多的还是需要我们自身去注重一下代码质量，以下是我个人的一些经验总结笔记，应该还有很多不足和优化的地方，希望大家多多指教哈，多讨论 1.不要用var，能使用const不用let 2.避免隐式转换，使用全等（===）进行判断 3.不要写冗余判断，比如 flag ：…
-
使用 Vue 实现一个虚拟列表 因为 DOM 性能瓶颈，大型列表存在难以克服的性能问题。 因此，就有了 “局部渲染” 的优化方案，这就是虚拟列表的核心思想。 虚拟列表的实现，需要重点关注的问题一有以下几点： 可视区域的计算方法 可视区域的 DOM 更新方案 事件的处理方案 下面逐一分解说明。 可视区域计算 可视区域的计算，就是使用当前…
-
可能是你见过最完善的微前端解决方案 Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks. — Micro Frontends 前言 TL;DR 想跳过技术细节直接看怎么实践的同学可以拖到文章底部，直接看最后一节。 目前社区有很多关于微前端架构的介绍，…
-
记一次 JS 偶发性加载失败的经历前段时间，偶尔会有同事反映某页面会崩溃。几率极低，且毫无规律！我自己尝试了一下，果然！没有任何问题！问题无法重现，也就没当回事。
-
8 道高频出现的 Vue 面试题及答案前言 本文讲解 8 道高频出现的 Vue 面试题及答案。 复习前端面试的知识，是为了巩固前端的基础知识，最重要的还是平时的积累！ 注意：文章的题与题之间用下划线分隔开，答案仅供参考。 前端硬核面试专题的完整版…
-
重学JS：async/await 前言 异步操作一直是JS中不可或缺的一环，从最开始回调函数，到后面的Promise，再到ES2017引入的async函数，异步操作逐渐进化，变得越来越简单方便，接下来就仔细看看在ES2017引入了async函数后，异步操作产生了哪些变化。 有什么用 以往我们使用异步函数，都是async/await一起用的，但是这回我准备拆开看，分别介…
-
JS防抖技术和节流技术在监听窗口进行resize、scroll等调用函数频率很高的操作时，如果每次都做相应的处理，则会加重浏览器的负担，导致渲染延迟，甚至是假死，这样会给用户带来非常糟糕的体验。为此我们必须在特定场景下限制调用频率…
-
从零开始实现一个Vue级联组件本文实现的是一个省、市、县…多级联动组件，当组件渲染完成后默认会加载出所有的省名称，当用户点击某个省的名称后，右边会自动添加一列显示该省下对应的市名称列表，当用户点击某个市后，右边又会自动添加一列…
-
开发者必备 — Web 无障碍手册 KendoReact 团队无障碍优化之路的一个阶段性总结。
-
面试被问到Vue?想进一步提升?那就停下来看一下吧Vue作为最近最炙手可热的前端框架，其简单的入门方式和功能强大的API是其优点。而同时因为其API的多样性和丰富性，所以他的很多开发方式就和一切基于组件的React不同，如果没有对Vue的API（有一些甚至文档都没提…
-
Vue实战—购物车详情页面的实现（11）上次我们为商品分类菜单添加了显示购物数量，这篇我们继续推进项目，来实现购物车的详情页面，在开始之前我们先看它在页面中的样子：
-
CSS实现镂空遮罩 前一阵子面试被问题到这个问题，突然懵逼了，脑子一片空白，以前知道这种效果，比如什么值得买的改版引导页面： 当时再紧张也应该打出一种实现方法，就是什么值得买这种使用图片实现 它首先加了一个半透明的黑色蒙层（ background-color: rgba(0,0,0,.8) ）然后添加提前制作好的图片作为子元…
-
css3效果大集合（1）1、背景渐变色效果 {代码…} 2、三角形效果 {代码…} 3、圆环效果 {代码…} 4、div上下跳动 {代码…} 5、加载loading效果 {代码…} 文章链接
-
Vue中keepalive的深入理解和使用 在平常开发中，有部分组件没有必要多次初始化，这时，我们需要将组件进行持久化， 使组件的状态维持不变 ，在下一次展示时，也不会进行重新初始化组件。 也就是说， keepalive 是 Vue 内置的一个组件，可以 使被包含的组件保留状态，或避免重新渲染 。也就是所谓的 组件缓存 基本用法 //被keepalive包含的组…
-
使用 Flutter for web 构建了 100+ Widget 实时预览示例使用 Flutter 开发已经接近一年时间了，但是在学习 Flutter 一些 Widget 的时候不能像前端那样有能直接在网站上实时看到效果，每次接触到一个新的 Widget 时都需要花费不少时间才能看到效果，所以我基于 Flutter …
-
一步一步搭建前端监控系统：如何监控资源加载错误？摘要： 资源加载失败会破坏产品功能以及用户体验…. 作者：一步一个脚印一个坑 原文：搭建前端监控系统（三）静态资源加载监控篇 Fundebug经授权转载，版权归原作者所有。 一步一步搭建前端监控系统系列博客： …
-
基于Vue/React项目的移动端适配方案 本文的目标是通过下文介绍的适配方案，使用vue或react开发移动端及H5的时候，不需要再关心移动设备的大小，只需要按照固定设计稿的px值布局，提升开发效率。 下文给出了本人分别使用create-react-app搭建的react（create-react-app）项目和使用vue-cli 2.x 搭建的vue项目中的 亲测可用 配置方案。 px2rem或…
-
一步步带你实现web全景看房——three.js canvas画2d相信大家都很熟悉了，但3d世界更加炫酷。我们直接从three.js入手。下面我们从0开始来摸索一下3d世界 1. 基本概念 在THREEjs中，渲染一个3d世界的必要因素是场景（scene）、相机（camera）、渲染器（renderer）。渲染出一个3d世界后，可以往里面增加各种各样的物体、光源等，形成一个3d世界： …
-
Promise由浅入深 在Promise出现以前，处理一个异步网络请求，大概如下 // 请求 代表 一个异步网络调用。 // 请求结果 代表网络请求的响应。 请求1(function(请求结果1){ 处理请求结果1 }) 复制代码 乍一看，好像没什么问题，但现在需求变了，需要在第一个请求的基础上，去执行第二个网络请求，代码如下。 请求1(function(请求结果…
-
vue父子组件之间通信的十种方式 编写时间：2019-08-20 更新时间：2019-08-20 作者：鬼小妞 备注： 本文 转载 了 Vue.js 父子组件之间通信的十种方式 状态： 已完成、待整合 2019-08-20 这篇文章介绍了Vue.js 父子组件之间通信的十种方式，不管是初学者还是已经在用 Vue 的开发者都会有所收获。无可否认，现在无论大厂还是小…
-
VueCli3 MPA 多页面配置 Vue Cli 3 多页面应用搭建 -DEMO 创建项目, 然后采用默认配置 项目结构 html 模板文件 index.js (每个页面的入口文件) 5. vue 模板文件 6 更改vue.config.js 多页面其实就是指定多个入口,并且指定每个入口js文件的挂载点, …
-
非常规：VUE 实现特定场景的主题切换 实现页面皮肤切换，常见的方案有几种：替换 css 链接、替换 className、改变 css 原生变量值、使用 less.modifyVars、props 参数下发等；不同的业务场景，我们一般会选择不同的方法来实现目标。最近在公司运营活动平台上的主题功能的实现 ，我们尝试了一种新的解决方案，实现了页面主题的切换，目标是为了提高项目的可维…
-
一个被忽视的 webpack 插件 如今的前端开发，有可能会面对复杂的环境，所以工程化思维几乎是专业前端工程师必备的。让同一套代码，在不同的环境中运行时，如何让它以最优的方式（尽可能小、尽可能快）加载和执行，是我们需要考虑的问题。 假设我们需要在开发环境中输出额外的调试信息，而在线上环境中不输出，我们可以定义环境变量： …
-
本地启动 Vue.js 打包之后的项目 首先这里是 Vue.js 构建之后的代码，通常是产出 dist/ 目录，如： dist ├── favicon.ico ├── index.html ├── robots.txt └── static ├── css │ └── app.c5a945a32210cf54269cf07a007f46a7.css ├── fonts │ └── icomoon.731abad.woff ├── img │ └── a.a517b7d.png └── js …
-
纯前端JS zip打包文件并下载 byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8885 本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。 一、事情的起因 之前做了个SVG Sprites还原工具（上传合并好的SVG Sprites文件，分解成独立的小SVG），然后经用户反馈，希望增加个打包下载功能。 …
-
javascript中为什么我们不能直接使用export?相信很多人最开始时都有过这样的疑问假如我的项目目录下有一个 index.html, index.js 于是我像这样写
-
手摸手教你用canvas实现给图片添加平铺水印类似这样的效果首先想到的是用canvas完成这种功能，因为我之前也没有接触过canvas，所以做这个功能的时候，就是一步一步的摸索中学习，过程还是挺nice的，接下来跟我一步步来实现这个功能以及发现一些canvas的坑吧。
-
Vue.js 3：面向未来编程（function-based API） 原文： Vue.js 3: Future-Oriented Programming ，by Taras Batenkov —— function-based API 是如何解决逻辑重用问题的 如果你在使用 Vue.js，那么可能知道这个框架的第 3 版就要出来了（如果你是在本篇文章发布后的一段时间看到这段话的话，我希望我的说法还是中肯的:wink:）。新版本目前正在积极开发…
-
图解JavaScript 继承 可能有很多人知道实现继承的方法，却对实现继承的原理不明所以。就像我，在不理解实现原理的情况下，就记不住并且不能正确使用这部分知识。一做题或者一面试，就会各种不坚定，各种懵逼树上懵逼果懵逼树下你和我。后来发现，把这继承画一画，对学习这方面的知识帮助很大。于是想记录一下。（吸收了各路知识，转化成了自…
-
前端该如何准备数据结构和算法？据我了解，前端程序员有相当一部分对“数据结构”和“算法”的基础概念都不是很清晰，这直接导致很多人在看到有关这部分的内容就会望而却步。
-
你了解Promise吗？（这可能是讲述promise最完整的专栏） 在异步编程中，Promise扮演了举足轻重的角色，它解决了ajax请求过程中的回调地狱的问题，令代码更具可读性。下面的介绍中，笔者会通过一些片段代码，加上一些其自己的理解带大家一起重新温故一下Promise为编程所带来的便利。 Promise是抽象异步处理对象以及对其进行各种操作的组件； Promise很重要！很重要！很重要！对…
-
Vue.js中最重要的角色-组件 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级…
-
javascript之作用域一（理解作用域） 网上关于JS的变量和作用域的文章有很多，但真正能讲清楚，能深入理解的文章很少。在阅读了很多人的文章以后，我决定综合起来，结合实际代码，会不断丰富提炼总结更新，希望能够以一个比较清楚完整的方式让大家真正理解。直接撸起袖子,开始干吧。 一、JavaScript 作用域 1. 作用域是可访问变量的集合 在 JavaScript …
-
来一个老生长谈的话题，Javascript 中，数组如何去重？ 关于如何去除一个给定数组中的重复项，应该是 Javascript 面试中最常见的一个问题了，最常见的方式有三种： Set 、 Array.filter 以及 Array.reduce ，对于只有简单数据的数组来讲，我最喜欢 Set ，没别的，就是写起来简单。 const originalArray = …
-
ReactNative之iOS原生和JavaScript的交互 在 ReactNative 开发中, 在 JavaScript 语法无法实现的时候会涉及到一些原生开发, 既然是混合开发就会涉及到一些 iOS 和 ReactNative 之间通讯的问题, 这里就涉及到两种方式: RN 调用原生的方法, 给原生发送数据 原生给 RN 回传数据, 或者给 RN 发送通知 下面就简单记录下这两种方式的实现 JS调用…
-
想学Node.js，stream先有必要搞清楚流的英文stream，流（Stream）是一个抽象的数据接口，Node.js中很多对象都实现了流，流是EventEmitter对象的一个实例，总之它是会冒数据（以 Buffer 为单位），或者能够吸收数据的东西，它的本质就是让数据流动起…
-
从一个日常bug看Vue的列表key及vnode更新策略 之前在做h5活动的时候，遇到了一个关于vue中列表渲染的bug。当然，bug是我自己写的，和vue没有半毛钱关系。不过在解决bug的过程中，对vue的patch diff的过程进行了一番研究。 在探究过程中，涉及到了vue列表渲染的key的研究，以及vue渲染函数及生命周期的执行过程分析。 bug的由来及重现 场景是这样的： 1. 用vue…
-
Git常用套路（04）分支开发前提：常见的分支策略有两种，一种是所有人在一个开发分支上开发，另一个种是每个需求都会从新拉取一个新分支
-
深度揭秘Vue的事件机制 这个系列讲到这里，Vue基本核心的东西已经分析完，但是Vue之所以强大，离不开它提供给用户的一些实用功能，开发者可以更偏向于业务逻辑而非基本功能的实现。例如，在我们日常开发中， @click=*** 用得飞起，但是我们是否思考，Vue如何在后面为我们的模板做事件相关的处理，自定义事件的原理和原生dom事件有不同的地方吗…
-
JavaScript正则表达式一瞥 正则表达式是一门强大的技术，尤其在处理文本上颇有卓效，本文是在阅读诸多资料后，写给自己的正则入门资料，主要参考的 老姚的《正则迷你书》 ，非常感谢大佬的无私奉献，十分推荐去看原书，本人只是拾人牙慧，另外注入了自己对正则的一些理解，适合入门看 正则表达式语法 正则表达式从匹配形式来说， 要么匹配字…
-
React hooks实战总结react 于19年2月份在16.8版本中新增了hook这一特性，已经过去了半年多了，社区的各种文章解析页汗牛充栋，本文将结合自己的项目实践，对react hooks做一个全面的讲解，俗话说没吃过猪肉，还没见过猪跑吗？确实，…
-
积极使用解构赋值以及箭头函数提升 Javascript 表现力 本文列举了一些日常会使用到的 Javascript技巧，可以明显提升代码的表现力。 解构赋值 首先，我们来看一下下面这段代码： const animal = { type: { mammal: { bear: { age: 12 }, deer: { age: 4 } } } } console.log(animal.type.mammal.bear) // 输出：{ ag…
-
JS脱机版：图片压缩工具 最近项目中对图片的要求比较高，经常会进行图片压缩和修改分辨率的操作，久而久之就觉得自己写一个吧，于是花了一天的功夫完成了这个脱机版图片压缩工具，无需服务器，本地即可运行。 参考了张鑫旭大佬的两篇文章，链接放在文章的最下方，感兴趣的可以深入了解下。 效果展示 首先看看图片上传的效果： …
-
前端模块化解决方案的前世今生 美好的一天从 npm run dev 开始，对于现在的前端而言从百家争鸣到逐渐统一的辅助开发工具对前端效率的提升有着不可替代的作用，这一切都必须依赖前端的模块化。在前端还处在刀耕火种的年代想实现模块化只能通过闭包也就是 IIFE ，而如今 ES6 Modules 可能是前端最常用的模块解决方案，那么本篇从 IIFE 来开始归纳前端模…
-
【重学前端学习笔记】关于类型，有哪些你不知道的细节 在学习《关于类型，有哪些你不知道的细节》一章节中，讲到了 javascript 内置了 Symbol.toPrimitive 属性，可自定义类型转换操作。 typeof 我们最常使用 typeof 来进行类型检测，对于基本类型使用 typeof 能得到我们想要的结果 console.log(typeof ‘123’) //’string’ console.log(typeof 1…
-
JavaScript数据结构之栈学习 什么是栈？ 是一种遵从后进先出(LIFO)原则的有序集合。新添加的或待删除的元素都保存在栈的 末尾，称作栈顶，另一端就叫栈底。在栈里，新元素都靠近栈顶，旧元素都接近栈底（你可以想象成是一堆摞在一起的盘子）。栈通常是用在编程语言的编译器和内存中保存变量方法调用等 下面我们用JS实现一个栈 我们创建一…
-
为什么webpack配置中常常用path库处理路径 我们常常发现在webpack中或一些对于路径相关的配置文件中常常使用path库进行处理 像是下面这样 entry: { bundle: , }, output: { path: path.resolve(__dirname, ‘../dist/c…
-
Webpack的几点性能优化 Webpack的性能优化主要从打包时间和打包出来的包的大小来考虑 减少 Webpack 打包时间 优化 Loader 对于打包来说，loader越多说明代码需要转换的越多，则效率就越低，因此在优化loader的时候，可以选择loader的搜索范围。 module.exports = { module: { rules: [ { // js 文件才使用 babel …
-
setTimeout 或者 setInterval，关于 Javascript 计时器：你需要知道的一切都在这里先来回答一下下面这个问题：对于 setTimeout(function() { console.log(‘timeout’) }, 1000) 这一行代码，你从哪里可以找到 setTimeout 的源代码（同样的问题还会是你从哪里可以看到 setInterval 的源代码）？
-
JavaScript 深拷贝与浅拷贝 对于很多初次接触JavaScript的读者来说，想要实现对象的拷贝/复制，就是单纯的使用赋值语句(=)来实现需求。但是，这样的方式是不全面的，这样的方法对于简单类型的数据来说是没有问题的，但是如果是对于像对象这样的复杂的数据类型来说，这样的实现方式有就会给你带来意想不到的问题。那么，如果不能简单的用赋值语句实…
-
Webpack4配置之基础篇 WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 2. webpack核心概念 Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。 Module：模块，在 W…
-
JavaScript：作用链、作用域函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这…
-
用 ESLint 管理 JavaScript 的代码风格 安装全局 ESLint > npm i -g eslint 。 在项目根目录下放置文件 eslintrc.json 。 导航到项目根目录，在控制台中输入 eslint <js 文件路径> ，可以看到输出的问题，如果为空，那么就没有问题。 要检查项目下所有 js 文件，可以输入 eslint . 。 配置项目下的 ESLint 在项目下执行 > npm i…
-
大规模应用TypeScript「2019 JSConf -Brie Bunge」（上） 这是一个由simviso团队进行的关于Airbnb大规模应用TypeScript分享的翻译文档，分享者是Airbnb的高级前端开发Brie Bunge 视频链接： 大规模应用TypeScript「2019 JSConf -Brie Bunge」（上） 或点击文章底部阅读原文观看视频 视频翻译文字版权归 simviso所有，未经授权，请勿转载！！！ 本次参与翻译人…
-
threejs 学习之 主要内容： 使用 threejs 创建 20×20 的网格，鼠标移动时，方块跟随移动，点击时在网格任意位置放置方块，按 shift 时，删除当前位置方块。 流程如下： 创建网格 创建一个与网格同样尺寸的平面 创建一个方块 mesh_1 与网格同样的尺寸 一个与网格同样的方块 geometry_2 ， 不加入 scene 中 三个事件： …
前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多
