20181230 前端开发周报-前端开发博客

前端面试之道；2019 简易Web开发指南；你知道吗？2018年JavaScript主导了开源；使用JavaScript实现自己的Promises；前端模块化结构如何拆分；JavaScript数据结构之队列；力荐 35 个最好用的 Vue 开源库；免费的渐进式教程：Webpack4的16篇讲解和16份代码

【前端面试之道】面试是每个程序员都绕不开的坎，虽然这本小册不能帮你一夜之间技术一蹴而就，但能助你建立起完整的前端知识架构体系，探究知识的原理，深入了解大厂常考知识点。 #前端开发博客# #前端开发#
2019 简易Web开发指南2019年即将到来，各位同学2018年辛苦了。不管大家2018年过的怎么样，2019年还是要继续加油的！在此我整理了个人认为在2019仍是或者将成为主流的技术与大家分享，包括前端、后端和全栈相关。
你知道吗？2018年JavaScript主导了开源 GitHub以各种各样的方式对其开源码活动的年度Octoverse报告中的数据进行切片和切块，无论您采用何种方式，都会出现一个压倒性的主题:JavaScript规则。 GitHub之前报道过，JavaScript、Java和Python是其开发者平台上使用的主要编程语言，有3100万程序员使用这些语言，随后，GitHub对一种编程语言的流行原因进行了研究，…
使用JavaScript实现自己的Promises 本文翻译自Maciej Cieślar的文章： Implementing Promises In JavaScript 。这篇文章描述的是在作者了解了promises是如何使用之后，是如何尝试用TypeScript实现promises。文章如有翻译不好的地方还望多多包涵，有什么意见建议欢迎在下面的评论区留言。 implementing promises in JavaScript 在编程过程中我最爱的…
前端模块化结构如何拆分模块化结构将复杂的程序拆分成不同的文件夹或者文件不同的模块即独立又可以相互关联如何拆分具体的拆分规则针对不同的项目也不一样，这里列出一点建议，更主要的还是有自己的一个规范，物以类聚将具有相同特…
JavaScript数据结构之队列队列是一种特殊的线性表，特殊之处在于它只允许在表的前端（front）进行删除操作，而在表的后端（end）进行插入操作，和栈一样，队列是一种操作受限制的线性表。进行插入操作的端称为队尾，进行删除操作的端称为队首。队列的数据元素又称为队列元素。在队列中插入一个队列元素称为入队，从队列中删除一个队列元素称…
力荐 35 个最好用的 Vue 开源库无论是开发新手还是经验丰富的老手，我们都喜欢开源软件包。对于开发者来说，如果没有这些开源软件包，很难想象我们的生活会变得多么疲惫不堪，而且靠咖啡度日也会成为家常便饭。所幸的是，随着 Vue.js 和 Nuxt.js 社区的不断壮大，每天都会出现一些很好的软件包。在下文中，我们将推荐一些非常好用的 Vue 和 Nuxt 软…
免费的渐进式教程：Webpack4的16篇讲解和16份代码首先，没有标题党！这套教程确实是免费的，并且针对每节讲解准备了对应的代码，代码环境是 webpack4 。课程以常见的 webpack4 用法为主线，按照从易到难的顺序，逐步引导搭建，渐进式教程真香。截至公元 2018 年 12 月 26 日，此套开源教程已经在 Github 上收获了 189 Stars ，下方是截图 :point_down:…
面试官眼中的Promise 本文假设你有一定的Promise基础知识，不涉及api的讲解，但是对你深入理解Promise有一定益处。写在前面在公司顶过几天面试官，一道手写Promise就卡主了不少人（受困于这道题的人别打我。。。我是不会告诉你我就职的公司的），其实这道题的主要目的是考察对Promise的理解，顺便的才是考察js逻辑，写出来是加分项，能…
前端性能提升秘笈首先想问大家一个问题：假如现在有两个同样可以满足我们需求的网站，一个“Duang”的一下就加载出来了，一个纠结了半天才出来，你会选择使用哪一个？下面我们再来感受一下这张图片。响应速度对用户的影响（用等待时间来衡量）从图中可以看出来：前端性能，反应给用户最直观的方面就是…
前端该知道些密码学和安全上的事儿如题。
怎样尊重一个程序员周刊君本周看朋友圈刷到的一篇文章。虽是旧文，值得一读。
寒冬之下，被裁的那些人到底去哪了？相信这个冬天，大家都看到了各种被cai和别名为『优化调整』的新闻。自从我发表《终于，这个冬天，我也被cai了》文章后，很多媒体和记者，每天都在加我微信，表示想做一些访谈，关于被cai人员的生活实录。当然我没有应允，一个是没有这么多时间，二个是公号就是对外的窗口，有什么想聊的，或者分享的，也会第一时间在公号…
理解import、require、export、module.exportCommonJS和AMD都只能在运行时确定这些东西，commonJS模块就是对象，输入时需要查找对象属性
无依赖开发之封装DOM 在《抛开 Vue、React、JQuery 这类第三方js，我们该怎么写代码？》文章中提到了使用原生的web components技术来开发项目。开发中碰到了一些有挑战性的问题，这篇文章就来记录一下在封装DOM操作时碰到的问题以及解决方式。主流框架与数据绑关于DOM操作就不得不提到一个js库——JQuery。JQuery是成也DOM（…
2018 年读过的书从2018年开始一直坚持每月读2本书以上，庆幸自己坚持下来了，共读了38本书，也希望明年能够继续坚持。有些是实体书，有些是在微信读书上看的电子版，在手机app上看书确实会高效很多，今年有一半的书是在微信读书上看的，非常适合空闲时间阅读，以及像坐地铁、等地铁这种零碎的时间。下面是我今…
一个刚毕业前端的年度总结这是我在掘金的第一篇文章，也是看了最近很多总结之后，自己的一些思绪。 2018年对我而言，是以为意味深重的一年。今年，我从大学毕业，今年我从不清晰的职业方向中逐渐走向清晰，前后有两次工作变动。庆幸的是，我成功回到了开发岗。虽然工作、公司不尽如人意。这一切还得从头说起… 在17年职业道路的辗转反侧和迷…
2019年值得收藏的 15 个 JavaScript 和 CSS 动画库当我浏览网页寻找一个整洁的 Javascript 动画库时，我发现很多 “推荐” 的动画库都有一段时间没维护了。经过一些研究，我收集了 15 个最好的 Javascript 动画库，你可以放心在你的应用程序中使用。在文章最后我还添加了一些有用的库，但是有一部分很久没维护了。使用纯CSS 在深入研究这些库之前，不要忘记使用纯 …
大前端时代即将来临，后端该何去何从？缘起 “天下大事，合久必分，分久必合” 一直以来，前端都是“切图师”，仅有“特效师”一脉堪称翘楚。大家就这样安安分分过了几年，前端一直是js的天地，直到08年的一天，node.js 横空出世，开始不安分起来。一时间，暗流涌动，后端也开始发力。与此同时，也有 coffeescript 等相关的项目崛起，用…
Javascript高级面试原型异步一、什么是单线程，和异步有什么关系单线程：只有一个线程，同一时间只能做一件事原因：避免DOM渲染的冲突解决方案：异步为什么js只有一个线程：避免DOM渲染冲突浏览器需要渲染DOM JS可以修改DOM结…
Vue项目Webpack优化实践，构建效率提高50% 公司的前端项目使用Vue框架，Vue框架使用Webpack进行构建，随着项目不断迭代，项目逐渐变得庞大，然而项目的构建速度随之变得缓慢，于是对Webpack构建进行优化变得刻不容缓。经过不断的摸索和实践，通过以下方法优化后，项目的构建速度提高了50%。现将相关优化方法进行总结分享。 1、缩小文件的搜索范围 1.1、优化Lo…
Vue 的打包优化之路场景分析一个结构简单，依赖蛮多的可视化项目，用到的库有 1. Vue + VueRouter + Vuex + axios 2. ECharts + 全省份地图文件 + 中国地图文件 3. ElementUI 4. moment (后面被 date-fns 代替) 5. lodash + lodash-decorator (用到了装饰器) ECharts 的 JSON 地图文件占了很大…
Javascript中的复制粘贴功能复制、剪切、粘贴事件 copy cut paste 每个事件都有一个 before 事件对应： beforecopy 、 beforecut 、 beforepaste 。这几个 before 一般不怎么用，所以我们把注意力放在另外三个事件就可以了触发条件鼠标右键菜单的复制、粘贴、剪切使用了相应的键盘组合键，比如: command+c 、 command…
前端常用小工具移动端适配 rem & vw 计算工具 [链接] css兼容写法生成器 [链接] 渐变在线生成 [链接] 图片在线无损压缩 [链接] box-shadow ，text-shadow， text-stroke， transform在线生成 [链接]
老生常谈之CSS的垂直居中“44 年前我们就把人类送上月球了，但现在我们仍然无法在 CSS 中实现垂直居中。”——James Anderson([链接] status/358603820516917249)
React研习之旅（一）：React基础与核心作为一个寡言少语的人，一直在享受社区的文章分享和帮助，是它们让我不断成长，这种分享的热情是开源社区繁荣昌盛的根基。某虽不才，也有同样的心情，也想写点东西。不仅仅是个教程系列，也是一个研究学习的过程。近期一直研究React，将自己的一些思考摘录下来，分享一下，也欢迎有兴趣的读者留言发表自己的观点，互相探…
浅谈JavaScript的类型转换在 JavaScript 中，将一种值类型转换为另一种值类型，叫做类型转换，出于动态型语言的特性，类型转换发生在运行时阶段。这些转换在我们平时写的代码里无处不在，尽管我们没有注意，但是这些转换已经存在于我们的代码里了。像 if、for、while、==、===、+、- 等等语句中。而在 JavaScript 中，有两种转换风格：隐式强…
Vue 深入学习之组件通信组件通信的场景可以分为：父子组件通信、非父子组件通信。父子组件通信又可以分为单层父子组件通信和多层级父子组件通信。父子组件多层父子组件通信是在单层的基础上进行通信，先来看看单层父子组件通信的实现。按数据流向不同，把父子组件拆分为父组件向子组件通信、子组件向父组件通信两部分父组件向子组件通…
前端 CSS : 4# CSS 实现暖暖的小火堆介绍原文链接感謝 comehope 大佬的 [前端每日实战] 效果预览 github.io 浏览源代码地址 [链接] 代码解读 1. 首先是完成 html 结构 {代码…} 常规样式初始化 {代码…} 2. 天上的星星原文中星星是固定位置并且…
aotoo-hub：一体化的大前端架构方案年底了，开源一套我们的大前端架构 aotoo-hub ，小伙伴们都用得很爽的。 GITHUB — 听说star的人明年会发财文档 aotoo-hub 是一套正式上线的大前端解决方案。迭代的这2年多的时间，从webpack-1熬到了webpack-4，从纯前端脚手架到融合node端的整体方案，从繁复到精简，重构的次数不要太多。简单、易用…
【连载】前端个人文章整理-从基础到入门从最开始萌生写文章的想法，到着手开始写，再到现在已经一年的时间了，由于工作比较忙，更新缓慢，后面还是会继更新，现将已经写好的文章整理一个目录，方便更多的小伙伴去学习。
JS 总结之原型继承方式收录以一个父类为前提条件，列举 js 继承的继承方式： {代码…} 方式 1：原型链继承（不推荐） {代码…} 缺点：无法向父类构造函数传参父类的所有属性被共享，只要一个实例修改了属性，其他所有的子类实例都会…
实现一个简易的vue1./compiler ⽬目录是编译模版; 2./core ⽬目录是 Vue.js 的核⼼心(也是后⾯面的重点); 3./platforms ⽬目录是针对核⼼心模块的 ‘平台’ 模块; 4./server ⽬目录是处理理服务端渲染; 5./sfc ⽬目录处理理单⽂文件 …
从 React 到 Domcom：一个提供 DOM 部件的 Web 框架从React到Domcom：一个提供DOM部件的web框架 github.com/taijiweb/domcom 设计背景 ReactJS给前端Web应用开发的思路带来巨大转变，颠覆了很多以前的观念。我有多次机会接触和学习ReactJS，在理解它先进的理念的同时也发现它存在一些问题，最初主要集中在性能方面，比如重复生成部件的虚拟do…
从零实现Vue的组件库（四）- File-Reader实现实现一个File-Reader组件用来读取本地资源。概述：在用户手动上传一些资源的时候，需要分为两步，第一步是将其从本地读取出来，得到一个 file 对象，然后再上传至服务器。该组件用于第一步，然后可通过后续进一步封装程Upload组件。该组件的痛点在于： preventDefault 1. 实例代码 <!-…
前端如何配合后端完成RBAC权限控制关联上一篇 Vue 前端应用实现RBAC权限控制的一种方式，这篇写的比较懒，哈哈，还是谢谢支持的朋友。承蒙李杨的邀请，就写了这篇文章，平时写的不多，失误之处，请大家多多包涵。因为工作的原因要找一个管理端模板，用于开发一个网银系统的前端界面骨架，我就找到了 d2-admin ，看着十分对胃口，接着我就想…
js 实现上下改变父 div 的高度，左右上下动态分割孩子的宽高实现父 div 里面左右，上下动态分割 div，并上下改变父 div 的高度，并且宽和高都是按百分比（如图）。
超火js库: Lodash API例子（持续更新~~~）lodash.js是一款超火的js库，在npm上平均周下载量达到了惊人的12,374,096,github start36K!大量框架都用到了lodash,包括拥有123kstart的vue本文对比lodash英文文档，加上一些小栗子和个人的经验~~,希望能帮到你们
JS 总结之 class class 是 ES6 的新特性，可以用来定义一个类，实际上，class 只是一种语法糖，它是构造函数的另一种写法。 class Person { } typeof Person // "function" Person.prototype.constructor === Person // true 复制代码 :car: 使用用法和使用构造函数一样，通过 new 来生成对象实例 class Person { }…
用js实现快排 Quicksort通过从数组中选取一个元素并将其表示为基准点，把数组中的所有其他元素分为两类 – 它们小于或大于此基准点。然后把作为这一轮排序结果的两个数组（数组元素都小于基准点的数组和数组元素都大于基准点的数组）再进行相同的排序。即分别再选个基准点，然后基于基准点分成两个数组元素分别小于和大于基准点的数…
JS 总结之原型继承的几种方式在之前的总结中，我们详细分析了原型《JS 总结之原型》，原型很大作用用于模拟继承，这一次，我们来聊原型继承的几种方式。前提以一个父类为前提条件，列举 js 继承的继承方式： function Person (age) { this.age = age || 18 } Person.prototype.sleep = function () { console.log(‘sleeping’)…
面试官问：JS的this指向面试官出很多考题，基本都会变着方式来考察this指向，看候选人对JS基础知识是否扎实。读者可以先拉到底部看总结，再谷歌（或各技术平台）搜索几篇类似文章，看笔者写的文章和别人有什么不同（欢迎在评论区评论不…
用 Flask 和 Vue.js 开发一个单页面应用这篇文章会一步一步的教会你如何用 VUE 和 Flask 创建一个基础的 CRUD 应用。我们将从使用 Vue CLI 创建一个新的 Vue 应用开始，接着我们会使用 Python 和 Flask 提供的后端接口 RESTful API 执行基础的 CRUD 操作。最终效果：主要依赖： Vue v2.5.2 Vue CLI v2.9.3 Node v10.3.0 npm v6…
浅谈JavaScript正则表达式刚开始学习 JS 时，正则表达式一直是我不愿意面对的，每次读到有关正则表达式的时候，都会避而远之。可是，一次，当我打开 JQ 源码的时候，发现里面有大量的正则表达式。于是乎，自己就强迫自己学习正则，学习的过程还是蛮愉快的。最后，真香定律终于出现了。哈哈哈！！这篇教程我会由浅入深的来和大家分享正则表达式…
HTTP协议原理和深入HTTP1.1新增了五种请求方法：OPTIONS、PUT、PATCH、DELETE、TRACE 、 CONNECT
详解javascript拖拽（一）基础介绍拖拽成为一项标准也是近几年的事，属于HTML5中的一部分，作为一种交互行为，拖拽是被广泛应用再界面软件中的，例如桌面应用，word、QQ软件都有拖拽行为。在HTML5标准实施之前，拖拽也是被广泛使用的，web开发者将click、mouseover,mousemove组合起来实现拖拽逻辑，过程略显冗余和繁琐。一言蔽之，HTML5的出现让拖…