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

2019年，Flutter 和 React Native 谁主沉浮?；如何使用Nodejs爬虫看漫画；Node.js官方文档：到底什么是阻塞(Blocking)与非阻塞(Non-Blocking)？；2019年前端笔试题；js异步从入门到放弃(实践篇) — 常见写法&面试题解析；谈谈前端代码规范管理；初学Vue（一） — Vue简单入门；如何将 Web 主页性能提升十倍以上？

2019年，Flutter 和 React Native 谁主沉浮?本文是帮助你了解这两个应用程序开发框架区别指南。咱们知道，几年前开发和维护iOS和Android的应用程序曾经是一项艰巨的任务(独立的代码库|独立的开发团队|开发成本也忒高)。
如何使用Nodejs爬虫看漫画追完动画，刚见到波波，战车这是咋了，啥是镇魂曲啊，怎么就完了，要等周六啊啊啊啊啊啊啊，act3附体，小嘴就像抹了蜜…… ヽ(。>д<)ｐ于是想到看漫画版，但网页体验较差，一次只能看一页，一页只有一张图，还不能存缓。 ╮(╯_╰)╭ 行吧，没缓存，我自己做。大致看了下该页面的结构，做的不错，结构清…
Node.js官方文档：到底什么是阻塞(Blocking)与非阻塞(Non-Blocking)？译者按：Node.js文档阅读系列之一。原文: Overview of Blocking vs Non-Blocking 译者:Fundebug 为了保证可读性，本文采用意译而非直译。这篇博客将介绍Node.js的阻塞(Blocking)与非阻塞(Non-Blocking)。我会提到Event Loop与libuv，但是不了解它们也不会影响阅读。读者只需要有一定的JavaScript…
2019年前端笔试题什么是web标准？WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML…
js异步从入门到放弃(实践篇) — 常见写法&面试题解析该系列下的前几篇文章分别对不同的几种异步方案原理进行解析，本文将介绍一些实际场景和一些常见的面试题。(积累不太够，后面想到再补)
谈谈前端代码规范管理戳蓝字「高级前端进阶」关注我们哦！作者：于是乎来源：前端小苑规范的代码是一个程序员基本的职业素养。首先，统一风格的代码可以提高代码的可读性，易于代码review，从而促进团队成员更好的合作。其次，使用lint工具进行代码规范，可以避免出现低级bug，提高代码质量，也更利于项目的维护。 …
初学Vue（一） — Vue简单入门vue – 国人开发制作的类似于 view 的发音 vue经过了几次大的版本波动 0.x 0.6版本 1.x 版本 2.x 版本 – 现在常用的为什么要介绍版本改动呢，因为不同版本语法和用法有差别，用起来比较麻烦 react 因为版权原因…
如何将 Web 主页性能提升十倍以上？最近，我们将 Universe.com 主页的性能提升了十倍以上。在本文中，我们将解析实现这一重大改进的具体技术手段。但在开始之前，让我们先对网络性能的重要意义进行一番论证（博文末尾提供相关案例研究链接）：用户体验: 糟糕的性能可能导致响应失败，从 UI 与 UX 的角度来看，这可能会引发用户的沮丧情绪。 …
Vue中高德地图的使用介绍: 该地图包含功能有: 点击地图自动获取定位和经纬度到文本框文本框输入地址失去焦点后自动获得经纬度 1. 在index.html中引入 <!–引入高德地图JSAPI –> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=你的Key值"…
一次失败的尝试，h5+Api 结合 react,webpack,同时生成android 、ios、h5端代码 vue 项目写多了，觉得不能一成不变，想去外面的世界看看。所以尝试了一把react开发，嗯~ o( ￣▽￣ )o 就在想做一个webApp吧，脚手架也自己搭一个吧。然后脚手架搭建完，项目可以正式开始了，自己又出幺蛾子，为什么不能打包成App呢，之前接触过cordova平台打包App,这次决定用HBuilder h5+api 开发一个同时打包多页面App…
typescript 高级技巧用了一段时间的 typescript 之后，深感中大型项目中 typescript 的必要性，它能够提前在编译期避免许多 bug，如很恶心的拼写问题。而越来越多的 package 也开始使用 ts，学习 ts 已是势在必行。
前端小纠结–Vue项目代码组织和风格约定代码组织是一个仁者见仁，智者见智的话题，没有银弹。不过不管怎么变化，指导思想还是不变的高内聚，低耦合。强烈推荐两篇文章，能够拓宽你的视野，带你走向新高度。用 Feature First 的方式管理前端项目复杂度代码组织的优雅，模块化才能够做好。分层按照职能的不同进行不同维度进行…
前端每日实战 169# 视频演示如何制作“数略词”交互动画（内含2个视频）效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 [链接] 可交互视频此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。视频1: …
Vuex学习（1）官方：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。个人理解：Vuex是管理应用程序的全局数据状态，这样任意组件都可以进行操作、修改、获取全局数据。二、创建vuexdemo项目实例 vue/cli3.x命令： vue cre…
JS异步开发总结众所周知，JS语言是单线程的。在实际开发过程中都会面临一个问题，就是同步操作会阻塞整个页面乃至整个浏览器的运行，只有在同步操作完成之后才能继续进行其他处理，这种同步等待的用户体验极差。所以JS中引入了异步编程，主要特点就是不阻塞主线程的继续执行，用户直观感受就是页面不会卡住。 2 概念说明 2-1 浏览…
《Firefox 和 Chrome 拼性能，结果……》Phoronix 网站今天发布了一份 Chrome 和 Firefox 的性能测试对比报告，以获取新版 Chrome 和 Firefox 的性能表现。测试对象是 Chrome 75 和 Firefox 67 的最新稳定版，以及 Firefox 68 的最新 beta 版。（by 开源中国）
这就是我的前端学习路线（大事件 + 时间轴倒序）（2016-7 至今）关于我本科在读，大三，16年开始自学前端，兴趣广泛，非常喜欢尝试新东西。博客 – 关于我：[链接] （比下方纯文字更美观） Github：[链接] 路线（倒序）【以下是我的前端学习路线，供后人参考！】 2019-6-7：…
js各种继承方式和优缺点介绍 function Parent () { this.name = ‘kevin’; } Parent.prototype.getName = function () { console.log(this.name); } function Child () { } Child.prototype = new Parent(); var child1 = new Child(); console.log(child1.getName())…
基于NodeJS和Redis的任务调度在uSTADIUM，我们使用任务调度系统发送成千上万个推送通知。起初，对任务队列和调度程序的需求并不明显。我们的服务器通过一个请求处理通知就能满足我们的需求。但随着时间的推移，系统开始承受不住负载。一开始我不确定能否解决这个问题，所以解决这个问题过程是一段有趣的经历。在本文中，我将讨论这个方案，我们如何…
Angular CDK Overlay 弹出覆盖物为什么使用Overlay？ Overlay中文翻译过来意思是覆盖物，它是Material Design components for Angular中针对弹出动态内容这一场景的封装，功能强大、使用方便，尤其在开发自己的组件库时，可以让你少写许多代码，可以说只要是弹出内容的场景基本都可以使用Overlay. 我们自己的组件库中弹出场景基本都已经使用Overlay…
掌握 Javascript 类型转换：隐式转换救救孩子在上一篇中我们聊过了 JS 类型转换的规则和我发现的一些常见书籍中关于类型转换的一些小错误，当碰到显示类型转换的时候大家可以按照这些规则去拆解出答案。但 JS 中存在一些很隐晦的隐式类型转换，这一篇就来谈…
Vue 2.x折腾记 – (21) CNZZ统计在引流页中的应用姿势因为单页面开发，所以统计代码的封装和考虑点是我们需要着手设计的(比如维护性）。 cnzz提供的js注入有四种方式，如下我这边用的是第一种，为了方便定位问题，采取问答式来写这篇水文。实现 cnzz js的注入最普通的就是我们直接去操作html的head，然后手动复制那么一段进去；若是我们要考虑下…
终于明白如何去写原生AJAX 首先我们根据文档进行相应的步骤分析。第一步：创建对象第二步：初始化 HTTP 请求参数第三步：发送请求第四步：监听请求状态，执行对应回调函数前置知识 onreadystatechange 每次状态改变所触发事件的事件。 responseText 从服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串…
Svelte 3 快速开发指南(对比React与vue)[每日前端夜话0x83] 每日前端夜话 0x83 每日前端夜话，陪你聊前端。每天晚上18:00准时推送。正文共：5686 字预计阅读时间： 13 分钟翻译：疯狂的技术宅来源： valentinog Svelte 3 Tutorial For The Impatient Developer (2019) 什么是Svelte？ Svelte 是由 Rich Har…
基于 ThinkJS 的 WebSocket 通信详解我们的项目是基于 ThinkJS + Vue 开发的，最近实现了一个多端实时同步数据的功能，所以想写一篇文章来介绍下如何在 ThinkJS 的项目中利用 WebSocket 实现多端的实时通信。ThinkJS 是基于 Koa 2 开发的企业级 Node…
Node.js 日志输出指南当你开始使用 JavaScript 做开发时，你可能学习到的第一件事情就是如何使用 console.log 将内容打印到控制台。如果你搜索如何调试 JavaScript，你会发现数百个博客文章和 StackOverflow 的文章都指向简单的 conso…
CSS没有边界的裁剪路径 – Clip Paths随着浏览器对shape-outside和clip-path等属性的支持增加，CSS Shapes越来越受到关注。有几种方法可以使用CSS Shapes，特别是clip-path属性，乍一看我们并不知道这个属性如何使用，下面就来详细的介绍它。
模拟 vue3.0 rfcs `createComponent` api 中的`props`类型推导rfc 中类型推导部分 Type Inference 预期想实现的效果 {代码…} String -> string 、 Number -> number 、 Boolean -> boolean 在 ts 中 String对应的类型是StringConstructor Number对应的类型是Numbe…
手把教你搭建SSR(vue/vue-cli + express)最近简单的研究了一下SSR，对SSR已经有了一个简单的认知，主要应用于单页面应用，Nuxt是SSR很不错的框架。也有过调研，简单的用了一下，感觉还是很不错。但是还是想知道若不依赖于框架又应该如果处理SSR,研究一下…
CSS :placeholder-shown伪类实现输入框浮动文字效果在这篇文章中，我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果，使用纯CSS实现。
新的 Vue Function-based API 当中的看到的 Clojure 的影子这次 Vue 大会看到了 Vue 新的 API 设计, 中间有一些觉得眼熟的写法,后面也看到了工业聚的一些解读, 大致知道是什么样的用法吧..当然现场演讲过 Vue 具体实现的优化是更复杂的, 比这个 API 要多..
使用 Enzyme 进行 React 组件测试进阶很早之前，写过一篇《使用enzyme 测试你的 React 组件》, 综合叙述了如何利用 Karma + Webpack + Enzyme 进行组件的测试，从而确保我们的质量。相对而言，这次会丰富一些，比如组件的 UI 事件以及 redux 引入后的测试。项目使用 yarn-react-webpack-seed 为案例，你可以在项目里找到源码。建立测试 …
为你的JavaScript库提供插件能力最近在做一个中台框架的设计开发，在做了主框架的基础能力后，思考在框架落实真实业务需求过程中，需要对主框架功能有非常多的定制化内容存在。如果在主体框架中做了哪怕一点业务改动，都可能会对后面的拓展性及灵活性有所限制。所以为了让主体框架做的更加灵活、扩展性更搞，在主框架有了基础能力后，就不再对主框架…
webpack4大结局：加入腾讯IM配置策略，实现前端工程化环境极致优化webpack，打包所有的资源不知道不觉，webpack已经偷偷更新到4.34版本了,本人决定，这是今年最后一篇写webpack的文章，除非它更新到版本5，本人今年剩下的时间都会放在Golang和二进制数据操作以及后端的生态上在…