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

使用vue全家桶搭建的vue小说阅读器，已部署到服务器可预览；舍弃Electron，使用HTML5 + Golang创建桌面应用程序；GitHub 寻宝指南；Vue.js — 注意事项和技巧；Vue.js 2.6尝鲜；再谈 JavaScript 函数式编程的适用性；复杂Vue组件的异步流程分析；JavaScript代码执行顺序和数据类型

使用vue全家桶搭建的vue小说阅读器，已部署到服务器可预览暑假实习了几个月辞职后，闲着无聊自己开发的一个vue小说阅读器链接 [链接]（由于域名需要备案用的是ip地址），里面的小说接口调用的是追书神器，然后我把里面的vip和收费章节做了处理加了个换源功能，里面需要收…
舍弃Electron，使用HTML5 + Golang创建桌面应用程序 Electron软件框架，允许使用JavaScript创建桌面GUI应用程序接口，并依赖于一个绑定的Chromium + Node.js运行时在大多数Linux桌面用户中名声不是很好，因为它的资源很重，不能很好地与大多数桌面集成，并且通常不被重视。对于那些喜欢使用Web标准来创建桌面GUI的人来说，现在有一种方法可以使用HTML5和Golang创建桌面应用…
GitHub 寻宝指南作为一个资深的咨询师、程序员，GitHub 是我用过的最好工具，因为 Google 并非总是那么用。GitHub 是一个宝藏库，可没有藏宝图，GitHub 一1亿的仓库也和你没有关系。这么一些年下来，也算是掌握了一定的技巧，写篇文章记录一下，也就顺其自然了。总结一句话便是：GitHub 来搜索 Google 搜索不到的。它们可以 work…
Vue.js — 注意事项和技巧 Vue.js 很棒。但是，当你开始构建大型 JavaScript 应用时，你将开始触及 Vue.js 的边界。实际上这些边界并不是框架的限制；相反，这些边界是 Vue.js 团队不断进步地重要设计决策。与 React 或 Angular 不同，Vue.js 迎合不同级别的开发人员。对于初学者它友好，易用，并且对于专家它同样灵活。它不会试图避开 DOM。相…
Vue.js 2.6尝鲜昨天Vue 2.6 "Macross" 发布了，同时也是Vuejs五周年~ 在这篇文章中，将会介绍新版本的新特性, 比如 slots 的新语法， Vue.observable() 等等 1. Scoped slots(作用域插槽)的新语法这是一个比较重大的改变，包含的有： v-slot新指令，结合了 slot 和 slot-scope 的功能 scoped slots 的…
再谈 JavaScript 函数式编程的适用性最近在 Udemy 上学 Stephen Grider 的课程 Machine Learning With JavaScript。由于是个人业余练习，课程中的代码我都用纯函数式编写。其中有一部分要解决这个问题：给定一个矩阵数据，例如 const data = , , , , ]; 复制代码要求…
复杂Vue组件的异步流程分析如果一个组件的状态，依赖于异步任务的执行，那么这个状态就是异步的，我们称之为异步状态。异步状态会引入不确定性，换句话说就是，代码执行结果的正确与否完全靠运气或者靠网速。更糟糕的是，这种不确定性会可能向外扩散向内渗透，进而影响到整个应用的稳定性。 NextTick让异步状态更加难以捉摸我们知道Vue关于数…
JavaScript代码执行顺序和数据类型浏览器解释代码是自上而下的，遇到script标签会直接解读js代码，下面的html元素就不会被解析，下面的html元素就获取不到，直到读取完毕。 src引入的图片资源/js资源，href引入的css资源，整个文档也需要加载，到资源加载完毕，就可以执行代码。 <!– 报错 –> <script> document.getElementByI…
webpack插件机制之Tapable 对于Webpack有一句话 Everything is a plugin ，Webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable。Tapable有点类似nodejs的events库，核心原理也是依赖与发布订阅模式。webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。下…
JS专题之垃圾回收前言在讲 JS 的垃圾回收（Garbage Collection）之前，我们回顾上一篇《JS专题之memoization》，memoization 的原理是以参数作为 key，函数结果作为 value, 用对象进行缓存起来，以内存空间换 CPU 执行事件。memoization 的潜在陷阱即是严格意义的缓存有着完善的过期策略，而普通对象的键值对并没有。用闭包进行缓…
#前端技术#【15 款精选的 CSS border 代码示例】详见：一些免费的 HTML 和 CSS border 代码示例的集合。
你可能不熟悉的JS总结只要块级作用域存在let命令，它所声明的变量就“绑定”这个区域，不再受外部的影响。这么说可能有些抽象，举个例子：
web页面录屏实现如果你的应用有接入到web apm系统中，那么你可能就知道apm系统能帮你捕获到页面发生的未捕获错误，给出错误栈，帮助你定位到BUG。但是，有些时候，当你不知道用户的具体操作时，是没有办法重现这个错误的，这时候，如果有操作录屏，你就可以清楚地了解到用户的操作路径，从而复现这个BUG并且修复。实现思路思路一…
Javascript异步编程：Callback、Promise、Generator了解javascript的同学想必对同步和异步的概念应该都很熟悉了，如果还有不熟悉的同学，我这里举个形象的例子，比如我们早上起床后要干三件事：烧水、洗脸、吃早饭，同步相当于我们先烧水，水烧开了再洗脸，洗完脸…
刷前端面经笔记（一）包含元素内容content、内边距padding、边框border、外边距marginbox-sizing:border-box;content-box;inherit;1) content-box:总宽度=margin+border+padding+width，即为标准模型；2) border-box:总宽度=margin+wi…
【20190209 前端开发日报】前端零基础 JS 教学第一天 01 – day 变量与数据类型；Vue.js — 注意事项和技巧；Javascript异步编程：Callback、Promise、Generator；JS专题之数组展开；用Java…详情→
JS专题之memoization 前言在计算机领域，记忆（memoization）是主要用于加速程序计算的一种优化技术，它使得函数避免重复演算之前已被处理过的输入，而返回已缓存的结果。 — wikipedia Memoization 的原理就是把函数的每次执行结果都放入一个对象中，在接下来的执行中，在对象中查找是否已经有相应执行过的值，如果有，直接返回…
HTTP/3 已经箭在弦上，你准备好了吗？去年的这个时候，国内的 web 网络环境开始普及和部署 HTTP/2. 时隔一年，HTTP/2 的普及程度有了显著提升，而各大CDN厂商普及的广度和速度一直走在行业前列。甚至有不少CDN厂商在直播以及部分HTTP场景还引入了 QUIC. 在拙文《当我们在谈论HTTP队头阻塞时，我们在谈论什么？》中，我们提到，HTTP/2 over QUIC 是…
会说话的数据：D3.js 折腾小记我一个写后端代码运维服务器的，怎么就去搞前端数据可视化了呢？接触 D3.js 纯属机缘巧合，但既然现在的工作跟数据打交道，数据的可视化总是不可避免的，学了总没什么坏处。由于是前端小白，所以不可避免的会掉入一些看起来很可乐的坑，因此随便写一篇小文章，记录一下自己折腾的过程。起 …
理解JS中的闭包此篇文章翻译自Sukhjinder Arora文章 Understanding Closures in JavaScript . 这篇文章结合了闭包，词法作用域，调用栈以及执行上下文来理解闭包。文章如有翻译不好的地方还望多多包涵。理解JS中的闭包闭包是每一个js开发者都需要知道和理解的概念。然而，它也是一个困扰着所有小萌新的概念。如果对于闭包有…
JS专题之严格模式 ECMAScript 5 引入了 strict mode ,现在已经被大多浏览器实现（从IE10开始）一、什么是严格模式顾名思义，JavaScript 严格模式就是让 JS 代码以更严格的模式执行，不允许可能会引发错误的代码执行。在正常模式下静默失败的代码，严格模式下就会抛出错误。二、为什么要过渡到严格模式严格模式下的代码在…
Vue 2.6 尝鲜昨天Vue 2.6 “Macross” 发布了，同时也是Vuejs五周年~ 在这篇文章中，将会介绍新版本的新特性, 比如slots的新语法，Vue.observable()等等 1. Scoped slots(作用域插槽)的新语法这是一个比较重大的改变，包含的有： v-slot新指令，结合了slot和slot-scope的功能 …
JS专题之继承前言众所周知，JavaScript 中，没有 JAVA 等主流语言“类”的概念，更没有“父子类继承”的概念，而是通过原型对象和原型链的方式实现继承。于是，我们这一篇讲一讲 JS 中的继承（委托）。一、为什么要有继承？ JavaScript 是面向对象编程的语言，里面全是对象，而如果不通过继承的机制将对象联系起来，势必会造…
用一张图总结web缓存策略1 浏览器缓存浏览器缓存机制有四个方面，它们按照获取资源时请求的优先级依次排列如下： 1.Memory Cache 2.Service Worker Cache 3.HTTP Cache 4.Push Cache 1.1 Memory Cache MemoryCache，是指存在内存中的缓…
【20190207 前端开发日报】条件 CSS；前端技术选型的遗憾和经验教训；前端 tree 组件，10000 个树节点，从 12.19s 到 0.49s；深入nodejs-搭建静态服务器（实现命令行）；Google JavaScript 风格指…详情→
【20190210 前端开发日报】复杂Vue组件的异步流程分析；JavaScript代码执行顺序和数据类型；JS专题之memoization；webpack插件机制之Tapable；JS专题之严格模式；Python Web 应用程序 Tornado 框…详情→
前端面试题及其总结 HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为所以，html5只有一种：<!DOCTYPE> 但是html4.01有三种，分别是strict（不包含展示性和弃用元素，不允许框架集）、transitional（包含展示性和弃用元素，不允许框架集）、frameset（允许框架集） 3、行内元素有哪些？块级元素有…
JavaScript中pipe原理实战 const pipe = (…fns) => x => fns.reduce((y, f) => f(y), x); 复制代码原理一行代码中信息量是非常丰富的，可以从以下几个方面来分析 (…fns) … 是ES6标准中的数组扩展运算符扩展运算符可以展开数组： Math.max(… ) 等价于 …
XML 与 JSON 优劣对比 | 从这些趋势中可以推断，JSON 的发展将统一 Web 的信息交换格式，XML 的使用率将继续降低。我相信 JSON 很快就会在 Web 开发中超过 XML。至于其他领域，XML 比 JSON 更好的情况并不多。 …
【20190211 前端开发日报】GitHub 寻宝指南；再谈 JavaScript 函数式编程的适用性；JS专题之垃圾回收；15 款精选的 CSS border 代码示例；20190210 前端开发日报；GitHub 寻宝指南作为一个资深的…详情→
JS 常用技巧 1. 类型强制转换 1.1 string强制转换为数字可以用 *1 来转化为数字(实际上是调用 .valueOf 方法) 然后使用 Number.isNaN 来判断是否为 NaN ，或者使用 a !== a 来判断是否为 NaN ，因为 NaN !== NaN ’32’ * 1 // 32 ‘ds’ * 1 // NaN null * 1 // 0 un…
CSS粘性定位是怎样工作的翻译：疯狂的技术宅原文：[链接] 本文首发微信公众号：jingchengyideng欢迎关注，每天都给你推送新鲜的前端技术文章浏览器对 CSS粘性定位有着非常好的支持，但很多开发者都没有用过它。究其原因有两个：第一，…
JS专题之数组展开首先什么是数组展开？假如现在有这样一个需求：将后台的一个多重 List 数据，展开成一个 List 后，并去重后排序；
Vue初体验之Element的使用 1、安装 vue-cli ，推荐在当前项目全局安装，同时确保vue ui正常使用。 npm install -g @vue/cli && vue ui # OR yarn安装会更快 yarn global add @vue/cli && vue ui 复制代码使用 yarn 安装完之后会自动启动 GUI ，也就是在图形界面下创建 vue 项目。为了快捷的操作，这里还是…
前端零基础 JS 教学第一天 01 – day 变量与数据类型本人记录使用的工具是xmind 要是不会的小伙伴可以百度下很简单每天的课程下面都会有实战案例的演示Demo 学习目标：掌握基础编程语法训练程序思维（用代码实现业务的思维）复制代码电脑基本介绍：软件共分为两类：系统软件，应用软件应用软件：放到系统软件里面去运行 cpu 相当于人的大…
【20190208 前端开发日报】Vue.js 2.6尝鲜；使用vue全家桶搭建的vue小说阅读器，已部署到服务器可预览；20190207 前端开发日报；vue全家桶项目教程vue小说项目器vue移动端项目，已部署到服务器可访…详情→
vue全家桶项目教程vue小说项目器vue移动端项目，已部署到服务器可访问预览暑假实习了几个月辞职后，闲着无聊自己开发的一个vue小说阅读器链接 [链接]（由于域名需要备案用的是ip地址），里面的小说接口调用的是追书神器，然后我把里面的vip和收费章节做了处理加了个换源功能，里面需要收…
「前端面试题系列5」ES6 中箭头函数的用法对于即将到来金三银四的求职季，相信不少同学都在默默地做着准备。本系列旨在梳理前端庞杂的知识点，并尽可能通俗易懂地表述出来，也希望能帮到有需要的同学。
Webpack 4 的故事以及如何用正确的方式去最终配置它【更新版】特别提醒：没有正确的方式。#justwebpackthings 原图： www.instagram.com/p/BhPo4pqBy… 这篇博文最后一次更新在 2018 年 12 月 28 日，适用于 Webpack v4.28.0 版本。 2018 年 06 月 23 日更新：我收到了许多关于如何使其工作和如何改进的评论。感谢你们的反馈！我已经尽力的去考虑每一条评论！某种…
node js，golang，socket服务返回hello world性能对比初次接触node js 时，看到node js 异步io 性能很高，并发很强，当时就认为很强，用了一段时间，，后来某天又看到以性能著称的golang，于是又学习了一波，，并对两者进行了性能对比，，果不其然，node js败下阵来。。后来对并发产生了浓厚兴趣，于是自己使用unix系统的api写了个tcp服务，来测试并发，然而水平有限，分别…
Python Web 应用程序 Tornado 框架简介 | 在比较 Python 框架的系列文章的第三部分中，我们来了解 Tornado，它是为处理异步进程而构建的。 …
Vue 源码中一些util函数 JS中很多开源库都有一个util文件夹，来存放一些常用的函数。这些套路属于那种常用但是不在ES规范中，同时又不足以单独为它发布一个npm模块。所以很多库都会单独写一个工具函数模块。最进尝试阅读vue源码，看多很多有意思的函数，在这里分享一下。 Object.prototype.toString.call(arg) 和 String(arg) 的区别？ …
前端开发中最常用的JS代码片段学好，并熟练的运用这门编程语言真的很难吗？本篇文章为大家总结了一些前端开发中最常用的JS代码片段，希望能对大家的学习以及工作上都能有所帮助，有所收获。 HTML5 DOM 选择器 javascript 代码 // querySelector() 返回匹配到的第一个元素 var item = document.querySelector(‘.item’); console.log(item…
Webpack性能优化整理开发环境推荐： cheap-module-eval-source-map 生产环境推荐： cheap-module-source-map （这也是下版本 webpack 使用-d命令启动 debug 模式时的默认选项） //webpack.config.js module.exports = { //… entry: { app: ‘./src/index.js’, }, mode: ‘development’, devtool: ‘cheap-…
用JavaScript实现功能齐全的单链表用JavaScript实现了个单链表，通过LinkedList构造函数可实例化一个单链表数据结构的对象，所有的方法放到LinkedList构造函数的原型对象上，写了暂时能想到的所有方法
Vue 中组件使用中的细节点is标签如何使用is标签解决渲染中可能会出现的小bug {代码…} 正常渲染一个组件这样写没有啥问题，但是在table中会有点小bug，如下图正常来说3个tr应该在tbody里面，而现在和table同级了，这是怎么回事呢？在h…
关于Socket，看我这几篇就够了(三)原来你是这样的Websocket 关于Socket，看我这几篇就够了(一) 关于Socket，看我这几篇就够了(二)之HTTP 关于Socket，看我这几篇就够了(三)原来你是这样的Websocket 在上一篇中，我们介绍了HTTP协议。HTTP协议是一种无状态、无连接的协议。在HTTP 1.1 版本之前，客户端到服务器的TCP/IP连接是使用完毕便断开的，而服务器的TCP/I…
利用ES6进行Promise封装总结promise简单说就是一个容器，里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果，从语法上来说，Promise是一个对象，从它可以获取异步操作的消息，Promise提供统一的API,各种异步操作都可以用同样的方…
《当fetch遇到302状态码，会发生什么？》我仅仅用koa写了一个小例子来测试fetch的302状态码。在后端，当接口 /bait 接受一个请求，会设置一个302状态码并且在响应头中增加重定向的位置信息：/gotcha。（by 众成翻译 – 涯丨角）
ES6、7、8常用新特性总结(超实用)ES6常用新特性 1. let && const {代码…} 2. 解构赋值 {代码…} 3. 箭头函数 {代码…} 4. …操作符 {代码…} 5. iterable类型 {代码…} 6.类 {代码…} ES7常用新特性 1. Array.prototype.includes…
从零实现Vue的组件库（十四）- RadioGroup 实现 RadioGroup 组件的难点在于： radio 与 radioGroup 之间的联动关系、数据绑定关系，使得 radio 可以单独使用或者组合；利用插槽可以方便扩展 radio 。 1. 实例代码 <!– 基础用法 –> <fat-radio v-model="otherValue" :value="1"> <fat-hove…
react中使用css的7中方式(应该是最全的)在正常的css中，比如background-color，box-sizing等属性，在style对象div1中的属性中，必须转换成驼峰法，backgroundColor，boxSizing。而没有连字符的属性，如margin，width等，则在style对象中不变。
Vue 动画的封装上面代码是非常简单的，显示隐藏效果，在项目中，可以会用很多地方会用到这种效果，那我们该如何实现封装呢？
HTTP/2 常见问题解答本文翻译自：《HTTP/2 Frequently Asked Questions》如有侵权请联系删除，仅限于学术交流，请勿商用。如有谬误，请联系指出。由于微信公众号不支持外链，可点击文末“阅读原文”以访问外部链接。 HTTP/2 常见问题解答以下是有关 HTTP/2 的常见问题解答。 …
刷前端面经笔记（七）优雅降级(graceful degradation)：一开始就构建站点的完整功能，然后针对浏览器测试和修复。渐进增强(progressive enhancement)：一开始只构建站点的最少特性，然后不断针对各浏览器追加功能。
【20190206 前端开发日报】Golang：优雅地读取 http 请求或响应的数据（续）；利用Dectorator分模块存储Vuex状态；这样学 React Native 最高效；19年你应该尝试的50款前端工具（中）；一个为了让co…详情→
Postgresql node.js实现函数计算由于工作需要，设计到了阿里云的弹性计算，这里便记录下来技术栈 node.js postgresql nodemailer controller + services 编写postgresql lib 不管异常还是正常都返回resolve，在resolve中处理结果，通过success字段去处理 …
一行js代码识别Selenium+Webdriver及其应对方案有不少朋友在开发爬虫的过程中喜欢使用Selenium + Chromedriver，以为这样就能做到不被网站的反爬虫机制发现。
JavaScript数据结构与算法——数组数据结构是指相互之间存在着一种或多种关系的数据元素的集合和该集合中数据元素之间的关系组成。常用的数据结构有：数组，栈，链表，队列，树，图，堆，散列表等，如图所示：
新的一年babel了解一下 Babel 是一个 JavaScript 编译器很多浏览器目前还不支持ES6的代码， Babel 的作用就是把浏览器不资辞的代码编译成资辞的代码。注意很重要的一点就是， Babel 只是转译新标准引入的语法，比如ES6的箭头函数转译成ES5的函数, 但是对于新标准引入的新的原生对象，部分原生对象新增的原型方法，新增的API等（如 Se…
仿造 Gson 的自制 json 解析器Maven : 3.3.9 (主要用作打包工具)IDE : idea 2018.3JDK : OpenJDK 11.0.1 (OracleJDK 8 以上即可)