20190418 前端开发日报-前端开发博客

（JS基础）操作表单；面试官：你使用webpack时手写过loader，分离过模块吗？；jQuery+CSS3搞一个动画简历；前端代码质量管理（一）；Vue 折腾记 – (17) 基于Ant Design Vue 封装一个配置式的表单组件；前端异步解决方案-3（Promise）；搞定JavaScript算法系列–快速排序；JS事件循环机制初探

（JS基础）操作表单 <form> 元素对应的时 HTMLFormElement 类型，继承自 HTMLElement ，因而拥有与 HTMLElement 相同的默认属性。 <form> 元素内部还需要"内容"，而填充"内容"的元素有 <input> 、 <button> 、 <textarea> 、 <select> 、 <option&g…
面试官：你使用webpack时手写过loader，分离过模块吗？前言大家好，之前出了一篇面试篇webpack入门，这篇文章继续介绍接下来更深入东西。概览如何载入自己的loader 使用loader-utils，schema-utils 编写自己的loader 扩展如何载入自己的loader 讲道理大家都是直接import一个loader或者使用webpack内置的loader的。如果调试自己的loader，应…
jQuery+CSS3搞一个动画简历在线预览（移动端慎入） github 又到了一年一度躁动不安的季节，跳槽升职加薪当然需要一份很nice的简历啦，作为一位在本圈刚出道的前端小白，当然需要一份很nice的简历啦！图片展示设计粗糙，原谅一个理科生（理科都还没学好）的审美介绍页技能清单页经历页作品…
前端代码质量管理（一）相信编码规范对于大家来说不算是陌生，如果在 9102 年再次聊起这个话题，恐怕耳朵会起茧，但编码规范从制定到落地是一个艰难的旅程，特别是对于不同成员的编码习惯，还有棘手的祖传代码。无论你是老司机还是新手不妨了解一下。如何制定编码规范？这是一个永恒的话题，甚至出现过开发者按照自己的习惯和想法不停的去修…
Vue 折腾记 – (17) 基于Ant Design Vue 封装一个配置式的表单组件实现思路和功能基础的功能直接配置上来渲染，而上传组件就不大合适了；所以选择了 slot 来实现,如何保证传入的 form-item 的布局一致，则是拿 slot-scope 我这边选型用的是 vue 2.6 + 的版本，所以直接用的是最新的写法而且作为表单组件，校验这些肯定需要考虑，所以数据的构造改造了下，对于校验规…
前端异步解决方案-3（Promise）又有好些天没有动笔了，这几天一直在断断续续的学习Promise和generator，今天终于能够把着两个玩意结合起来了解决异步问题了。今天我先把promise相关的用法和对异步的处理分享给大家。老样子，还是先模拟一个Prom…
搞定JavaScript算法系列–快速排序快速排序快速排序是由东尼·霍尔所发展的一种排序算法。在平均状况下，排序n个项目要O(n*logn)次比较。在最坏状况下则需要O(n2)次比较，但这种情况并不常见。事实上，快速排序通常明显比其他O(nlogn）算法更快，因为它的内部循环(inner loop)可以在大部分的架构上有效地被实现出来。快速排序使用分治法策略…
JS事件循环机制初探 js的事件循环机制，在我理解起来就是执行上下文，对函数的出栈和入栈的一个过程。都知道js的一大特点是单线程，这也是这个语言的核心特征。试想一下，如果js是个多线程的语言，同时存在两个线程，一个线程是在某个Dom上添加节点，而另一个线程却是删除节点，这个时候浏览器就会产生错乱，而我们关心的js事件循环机制，正…
js的继承方法小结（prototype、call、apply） js的原型继承 — prototype 先说下什么是prorotype？ js中，俗话说“一切皆对象”。用 new 出来的都是函数对象；否则就是普通对象函数对象都有 prototype （原型对象）；而普通对象则只有 __proto__ （原型指针）函数对象的一个特点：可以实现不同类之间的方法继承函数的子类可以共享父类的方法…
vue的数据劫持以及操作数组的坑 vue是构建用户界面的渐进式框架。所谓的渐进式： vue + components + vue-router + vuex + vue-cli 可以根据需要选择相应的功能。来串命令 mkdir vue-apply;cd vue-apply;npm init -y;npm i vue 。来一个html文件如下，浏览器瞄下~，浏览器控制台 vm.msg=0 再看下 <div id="app"&…
数据结构与算法–排序(JS实现) 复习数据结构的时候发现都是以JAVA为例，虽然JS的算法用的比较少，很多时候基本上也用不到。但还是趁有空折腾一下吧，主要实现内排序的算法。排序分类根据排序过程中借助的主要操作，我们将内排序分为：插入排序类：直接插入排序，希尔排序选择排序类：简单选择排序，堆排序交换排序类：冒泡排…
《HTTP/2 基础教程》读书笔记最近粗线了不少 HTTP2 相关的帖子和讨论，感觉新一轮的潮流在形成，所以最近找了本 HTTP2 相关书籍做知识储备，刚好记成笔记以备后询 ~
前端面试基础知识整理（持续更新）w3c盒模型：content + padding + border + margin。元素宽高(css)等于content的宽高。
Vue 组件间通信方法汇总除了使用 Vuex 方法外，vue 提供了各种各样的组件间通信的方案。文章整理一下父子组件、兄弟组件、祖先后代组件间是如何通信的。
Redux 打怪记录（一）单一数据源，只有唯一一个store state是只读的，唯一改变state的方法就是触发action 使用纯函数来执行修改 flux Redux并没有dispatcher的概念，原因是它依赖纯函数来替代事件处理器 Redux设想你永远不会变动你的数据。 Elm …
【JS基础】从JavaScript中的for…of说起(下) – async和await在上一篇文章中，梳理了javascript中的两个重要概念：iterator和generator，并且介绍了两者在异步操作中的应用。
js运行机制浅析众所周知，js是一门单线程的语言。主要同他的用途有关，同一个时间只能做一件事儿，作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM，这决定了它只能是单线程，否则会带来很复杂的同步问题。 js事件循环由于javaScript的资源加载是按序进行的，javaScript的单线程决定只有一个任务结束才可…
回到基础：用循环优化 JavaScript 程序对于提高 JavaScript 程序的性能这个问题，最简单同时也是很容易被忽视的方法就是学习如何正确编写高性能循环语句。本文将会帮你解决这个问题。
#前端技术#【前端工程师必备：前端的模块化】详见：这篇文章作者概述了前端模块化的理解，涉及基本概念的理解，以及模块化规范的理解等内容，供参考。（作者：木头房子）模块化的理解什么是模块？将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起；块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信；一个模块的组成数据—>内部的属性；操作数据的
如何优雅的自配Vue2.6.10+webpack4.29.6？ webpack4与vue2.6已经出来一段时间了，忙于业务一直没有时间做升级，cli又不能满足业务上的需求，决定抛弃脚手架手撸一个最新的基于vue的webpack项目。 1.首先先创建一个文件夹，输入命令 npm init 复制代码 2、下载webpack4 与 webpack CLI 一系列操作之后，package包出现了，我们先下载关于webpack的依赖包，…
css3元素出现动画实例css3中实现动画一般有两种方式，一个是transition过渡，一个是animation动画。最主要区别就是transition需要条件触发，通常会用hover来触发，而animation则更灵活，可以自动播放，也可以通过条件触发。
webpack4配置(3)-打包css/js/图片等资源 webpack可以使用各种不同loader来预处理不同格式的资源。在项目目录下添加文件：编写测试代码 // src/index.html <!DOCTYPE html> <html> <head> <meta charset=’utf-8′> <meta http-equiv=’X-UA-Compatible’ content=’IE=edge’> <title>Page…
Next.js 入门当使用 React 开发系统的时候，常常需要配置很多繁琐的参数，如 Webpack 配置、Router 配置和服务器配置等。如果需要做 SEO，要考虑的事情就更多了，怎么让服务端渲染和客户端渲染保持一致是一件很麻烦的事情，需…
用Type驯化JavaScript 好多大厂都在使用 TypeScript，总感觉这玩意不看看都不配做前端了:joy:，看完文档后就梳理了一下。本文来自我的博客这个想法不一定对系列，so，这个想法不一定对:wink: TypeScript 具有类型系统，且是 JavaScript 的超集。它可以编译成普通的 JavaScript 代码。TypeScript 支持任意浏览器，任意环境，任意系统并且是…
React Native 常用的 15 个库本篇 React native 库列表不是从网上随便找的，这些是我在我的应用中亲自使用的库。这些库功能可能跟其它库也有，但经过大量研究并在我的程序中尝试后，我选择了这些库。
Angular+nodeJS+redis前端自测开发模式这段时间在开发一个较大的项目，后台前期的准备时间会比较长，后期开发很快，而前台的前期开发会比较快，后期开发也需要等比例的时间，在进度上存在不协调的情况，后台的接口格式已经给出，虽然可以直接mockjson返回，但是在诸多（比如说新增，删除，修改）这些需要有响应的操作面前也显得十分无力，需要一个简易后台，…
「前端面试题系列9」浅拷贝与深拷贝的含义、区别及实现（文末有岗位内推哦~）前言这是前端面试题系列的第 9 篇，你可能错过了前面的篇章，可以在这里找到：数组去重(10 种浓缩版) JavaScript 中的事件机制（从原生到框架）理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法伪…
基于 Jenkins、Gitlab、Harbor、Helm 和 Kubernetes 的 CI/CD（一）上节课和大家介绍了Gitlab CI结合Kubernetes进行 CI/CD 的完整过程。这节课结合前面所学的知识点给大家介绍一个完整的示例：使用 Jenkins + Gitlab + Harbor + Helm + Kubernetes 来实现一个完整的 CI/CD 流水线作业。其实前面的课程中我们就已经学习了 Jenkins Pipeline 与 Kubernetes 的完美结合，我们利用 Kub…
JS版数据结构第一篇(栈) 前端入行门槛低,人员参差不齐前端就是写页面的前端的人都不懂数据结构和算法背景相信大家在社区经常会听到类似以上的话由于前端上手比较快,而且平时开发时大部分写的都是业务逻辑以及交互,常常导致我们被一些后端人员’ 鄙视 ‘,这无疑是对我们前端开发人员是不公平的,前端技术更新迭代很快,而…
Node.js 内部是如何捕获异步错误的？一、背景众所周知，由于 JavaScript 特殊的 EventLoop 机制，由 Promise 异步产生错误是没有办法使用try…catch的： try { Promise.reject() } catch(err) { // 这里啥都 catch 不到 console.log(err) } 为了解决这个问题，我们必须在每一处产生异步的地方使用.catch()（或者用as…
封装一个原生js的ajax请求,支持IE9CORS跨域请求前言关于纯js的ajax请求，我之前有文章写过， https://www.haorooms.com/post/js_ajax_chun , 关于CORS跨域资源共享，我也有文章写过， https://www.haorooms.com/post/cors_requestheaders，但是在IE8和IE9中，cors跨域是无效的。针对这个，其实IE有个另类的CORS请求，仅仅在IE8和IE9中存在，IE10就废弃了，…
Node.JS中用concat和push连接两个或多个数组的性能比较 JavaScript中连接两个数组成一旧新数组，常用concat方法，比如： var arr1 = var arr2 = var arr = arr1.concat(arr2) 借用apply方法，push、splice也可和来连接数组。因为push没有创建新数组，如果想要保挂原对象的引用，…
【负载均衡在分布式架构中是怎么玩起来的？】全文=> 　　什么是负载均衡（Load balancing）　　在网站创立初期，我们一般都使用单台机器对台提供集中式服务，但随着业务量越来越大，无论性能还是稳定性上都有了更大的挑战。这时候我们就会想到通过扩容的方式来提供更好的服务。我们一般会把多台机器组成一个集群对外提供服务。然而，我们的网站对外提供的访问入口都是…
说说CORS与jsonp 浏览器出于防止潜在安全风险的考虑，使用了同源策略，这一方面保证了我们数据的安全，另一方面却又限制了我们的手脚，基于此，开发者们与标准制定组织提供了不同的解决方案，这里主要说说CORS与jsonp。什么是同源策略同源指的是两个域需要协议，子域名，主域名与端口号都保持一致，四者有一个不同，即属于跨域…
nodejs检测因特网是否断开方案最近在用Electron开发一款应用，其中有涉及到检测因特网是否断开的需求。Electron基于Chromium和Node.js，让你可以使用HTML、CSS和JavaScript构建应用。所以Electron提供nodejs、浏览器两套运行环境。笔者最先考虑到的方案HTML5提供的online/offline网络连接事件。 window.addEventListener(‘online’, …) window….
写了一个chrome插件：拦截ajax请求并修改返回结果这个插件可以拦截页面上的 ajax 请求，并把返回结果替换成任意文本。它对 mock 数据、排查一些线上问题等会有很大帮助。（当然 chales 等抓包软件也可以做到，然而使用起来比较繁琐，做成 chrome 插件的形式会方…
用 WebAssembly 为 Web 应用提速20倍（案例研究）在本文中，我们将探讨如何通过用已编译的 WebAssembly 替换 JavaScript 来加速 Web 应用。
为什么会有那么多Script Error错误错误监控作为开发日常的工作保证，但却经常在错误平台看到的是这种莫明其妙，少得可怜的错误信息，让人无从下手 TL;DR 1、引出 Script Error 错误，是由于浏览器的同源策略，对于跨域的脚本捕获的错误，只会输出如此简短一句； 2、既然是同源策略，就祭出 CORS 宝典，给 JS 请求返回 Access-Control-Allo…
理解JavaScript概念系列–继承什么是JavaScript继承？怎么实现JavaScript继承？ JavaScript继承原理是什么？面向对象编程(OOP)语言面向对象编程(OOP)语言的三个个主要特性分别是“封装”，“继承”和“多态”。封装：将属性和方法放到一个“类”中的过程。继承：让子类拥有父类的属性和方法的过程。多态：多种（使用）形态，主…