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

TypeScript 在Vue中的实践；前端必懂之Sticky Footer(粘性页脚)；JavaScript 新语法详解：Class 的私有属性与私有方法；JS操作符拾遗；「JavaScript-指针问题」；Vue 实战：武装你的前端项目；JavaScript 原型的深入指南；Vue组建通信

TypeScript 在Vue中的实践类型检查, 拥抱es6，支持部分的esNext草案，直接编译到原生js、引入新的语法糖为什么用ts TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。 typescript不仅可以约束我们的编码习…
前端必懂之Sticky Footer(粘性页脚)写在最前：Sticky Footer是css的一种布局场景。页脚footer永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移，移动端特定布局…
JavaScript 新语法详解：Class 的私有属性与私有方法译者按：为什么偏要用#符号? 原文：JavaScript’s new #private class fields 译者：Fundebug 本文采用意译，版权归原作者所有 proposal-class-fields与proposal-private-methods定义了 Class 的私有属性以及私有…
JS操作符拾遗前言对于js操作符的一些特性和有趣题目的整理。逗号操作符逗号操作符有两个作用，一个是用于当你想要在期望一个表达式的位置包含多个表达式时，可以使用逗号操作符。这个操作符最常用的一种情况是：for 循环中提供多个参数。另一个使用逗号操作符的例子是在返回值前处理一些操作。如同下面的代码，只有最后一个…
「JavaScript-指针问题」不论是在工作还是学习中，相信大家都会被this指针问题锁困扰，此篇文章就是帮助大家解决this指向问题，希望可以帮大家对this指针有着更深入的了解 1, 定时器中的this指针问题在项目中，我们不可避免的会使用定时器，定时器也成为大家项目中的家常便客，但是在项目中大家会经常因为定时器this指针问题困扰，特别实在…
Vue 实战：武装你的前端项目本文项目基于Vue-Cli3，想知道如何正确搭建请看我之前的文章：「Vue实践」项目升级vue-cli3的正确姿势 1. 接口模块处理 1.1axios二次封装很基础的部分，已封装好的请跳过。这里的封装是依据JWT import axios from ‘axios’ import router from ‘../rout…
JavaScript 原型的深入指南不学会怎么处理对象，你在 JavaScript 道路就就走不了多远。它们几乎是 JavaScript 编程语言每个方面的基础。事实上，学习如何创建对象可能是你刚开始学习的第一件事。
Vue组建通信一般常见的组件之间的通信有以下几种情况，A和B，B和C，B和D之间都是父子关系，C和D之间是兄弟组件关系。常用的通信手段有两种： 1.ref：给元素或组件注册引用信息 2. children:访问父级组件和子组件的实例。这两种方式都是直接通过实例的方式获取的方式。示例如下： //comA组件A export default { data () …
React Router v4教程：为你的 React 应用创建路由翻译：疯狂的技术宅原文：[链接] 本文首发微信公众号：前端先锋欢迎关注，每天都给你推送新鲜的前端技术文章在这篇关于 React Router 的博文中，我将引导你搞懂 React 中路由的概念。你将看到以下主题：常规路…
使用Babel7+nodemon打造你的Node.js项目开发原文地址：Using babel7 with node(https://hackernoon.com/using-babel-7-with-node-7e401bc28b04) 原文作者：Will Willems 译者：Bangood复制代码想在你的Node.js项目中使用最新的js语法吗？想让你的项目具备热更新能力吗？本文的目标就是让你能够搭建起这样的一个基本项目。大家之前可能用过babel的其他低版…
基于vue-cli3.0构建功能完善的移动端架子css：sass支持、normalize.css、_mixin.scss、_variables.scss
this 是什么？JavaScript 对象的内部工作原理原文链接： What is this ? The Inner Workings of JavaScript Objects (需要梯子) 原文作者： Eric Elliott 译文永久链接：【译】什么是 this？JavaScript 对象的内部工作原理译者：士心翻译目的：函数动态绑定 this 的特性，经常让开发…
使用 Node.js 提供百万的活跃 WebSocket 连接仅使用消费级笔记本和一些 Wifi 资源便可提供大量的 WebSocket 服务通过最新发布的 TypeScript web 服务工程 uWebSockets.js ，我们看到它带来的不仅有提升的性能，还有提升的内存利用率。对 Node.js 使用者尤其如此，所以为了演示我想在实际使用环境中开展大规模的测试。我们计划使用我那购买了 6 年的笔记本电…
前端监控了解与简易实现从自测到QA测试以及上线前的Code Review ，进过层层检查，还是会有疏忽。代码上线后，我们更多的是通过用户反馈或者后台的数据统计、异常数据来分析，找问题、定位问题。那么前端是否也能弄用一套比较完善的代码异步监控？例子错误： src = img.getAttribute("src"); src.indexOf("http://XXX.com/&…
【多图警告】学会JavaScript测试你就是同行中最亮的仔（妹）一、几种概念（稍微了解一下） ATDD： Acceptance Test Driven Development（验收测试驱动开发）这是一种在编码开始之前将客户带入测试设计过程的技术。它也是一个协作实践，用户，测试人员和开发人员定义了自动验收标准。 ATDD有助于确保所有项目成员准确理解需要完成和实施的内容。如果系统未通过测试可提供快速…
使用 React + Koa 从零开始一步一步的带你开发一个 36kr SSR 案例（二）本来在上周就想写下这篇文章，但是在学习的过程中，越来越觉得之前的很多思路需要修改，所以就下定决心，等我重构完这个项目之后再写第二篇教程。先上代码仓库 github 看过我第一篇文章的朋友们应该已经大致了解了 react ssr 的基本思路了，如果没有第一篇文章的同学建议先看教程一，但是只是掌握这些还…
Vue 折腾记 – (19) 基于Antd Design Vue 封装一个符合业务的树形组件原型上有个权限分配的功能；仔细翻了下对应的文档( antd vue )，发现有那么一个树形控件，但是没有上面部分全局控制的功能。那么只能自己动手改造出一个符合业务的了，有兴趣的看官可以瞅瞅。效果图实现的思路首先先梳理下要实现的功能点要考虑默认值的传递以及产生的联动 …
webpack4.0入门指南（二）转换es7语法解析静态资源之前写了怎么转换es6的语法，如果在项目中用了es7的语法和样式，图片，字体该如何配置，下面就写一下配置。转换es7语法把之前demo3文件夹一份命名为demo4。修改demo4/src/index.js文件 let obj = {name: ‘lanpangzhi’}; let obj2 = {blog: ‘http://blog.langpz.com’}; let newObj = {…obj, …obj2}; // es7…
前端的性能优化（针对内容方面）1.尽量减少HTTP请求数　　80%的终端用户响应时间都花在了前端上，其中大部分时间都在下载页面上的各种组件：图片，样式表，脚本，Flash等等。减少组件数必然能够减少页面提交的HTTP请求数。这是让页面更快的关键。
typescript – 一种思维方式电影《降临》中有一个观点，语言会影响人的思维方式，对于前端工程师来说，使用 typescript 开发无疑就是在尝试换一种思维方式做事情。
Webpack book （developing） – Getting Started 这一部分是基础，后续内容都是在本章的基础上进行扩展。主要内容：启动并运行 webpack；安装 web-dev-server。在开始之前，请确保你使用的是最新版本的Node。应该至少使用最新的LTS（长期支持）版本。本书的配置考虑了 LTS Node 所包含的功能。同时你的终端还应该支持 node 和 npm 命令。也可以利…
Nuxtjs 2.0 升级爬坑当我在升级 Nuxt2.0 的过程，遇到了很多问题，逐一查找解决，废了不少时间。回头想想，真希望在升级的时候看到这样一篇文章，让我少走一些弯路。这篇文章的意义也在于此，希望对大家能有所帮助。一、为什么要从 Nuxt1.0 升级到 Nuxt2.0 ？我们来看看 Nuxt2.0 有哪些更新： 1.支持 …
微软员工和 GitHub 员工宣布支持 996.ICU 项目 Microsoft and GitHub Workers Support 996.ICU 微软员工和 GitHub 员工宣布支持 996.ICU 运动 Tech workers in China started a GitHub repository titled 996.ICU, a reference to the grueling and illegal working hours of many tech companies in China – from 9am to 9pm, 6 days a week…
用vue2.6实现一个抖音很火的【时间轮盘】屏保小DEMO 写在前面：前段时间看抖音，有人用时间轮盘作为动态的桌面壁纸，一时间成为全网最火的电脑屏保，后来小米等运用市场也出现了【时间轮盘】，有点像五行八卦，感觉很好玩，于是突发奇想，自己写一个网页版小DEMO玩玩，先看看效果：当然实现这个效果，前端的角度来说，有很多，这里介绍最简单的，达到这个效果纯…
[Vuex系列] – 细说state的几种用法 state 存放的是一个对象，存放了全部的应用层级的状态，主要是存放我们日常使用的组件之间传递的变量。我们今天重点讲解下state的几种用法，至于如何从头开始创建Vuex项目，请看我写的第一个文章。点击查看用法一：使用this.$store 我们还是以一个累加器的例子来看如何实现，具体实现代码如下：在state.js…
《微软新 Edge 有时会假扮成不同浏览器》新的 Chromium Edge 浏览器将会通过切换用户代理以伪装成其他浏览器，这使 Edge 能够利用为特定浏览器设计的网站功能。（by 开源中国）
webpack深入浅出系列–1–webpack深入浅出系列–1–
一步步使用 webpack 第三篇：使用 webpack 管理图片等资源文件前面两篇文章，从零开始配置 webpack，分别使用 webpack 完成了es6 代码的编译以及PostCSS 代码的编译。那接下来，我们就需要处理 js 、css 之外的资源文件，最常见的资源文件为图片，其他的资源文件还有字体、音乐、和 xml 数据文件等。版本说明本文使用的 webpack 的版本为： 4.30.0 开始搭建本文的目…
一步步使用 webpack 第二篇：使用 webpack 编译 PostCSS 代码在上一篇文章中，完成 webpack 的基础配置就可以完成 es6 的编译，本篇文章介绍如何使用 webpack 完成 PostCSS 的编译。想要了解 PostCSS 常用插件与语法介绍，点击这里查看。版本说明本文使用的 webpack 的版本为： 4.30.0 开始配置组件安装首先使用命令行完成 css loader 的安装： $ cnpm in…
#开源项目#【搜索 GitHub 项目插件：The Fucking GitHub】详见： The Fucking Github 是一个用于搜索、查看 GitHub 项目与已 Star 项目的浏览器的扩展。它支持通过图标、标签、项目的名字、作者、描述、语言等方式快速查询已 Star 项目，同时它也支持跨平台数据同步。
react-native+mobx的基础搭建 ReactNativeAppDemo是一个以react-native+mobx为基础搭建的app案例，旨在让初学者了解基本的RNApp的搭建与应用。教程包含基础框架搭建、路由封装、导航栏封装、service封装、全局报错处理封装、高阶组件封装、全局事件消息总线封装… 查看github地址支持平台 IOS Android 效果图 …
Django 使用 Channels 实现 WebSocket（下）希望通过对这两篇文章的学习，能够对Channels有更加深入的了解，使用起来得心应手游刃有余通过上一篇《Django使用Channels实现WebSocket–上篇》的学习应该对Channels的各种概念有了清晰的认知，可以顺利的将Channels框架集成到自己的Django项目中实现WebSocket了，本篇文章将以一个Channels+Celery实现we…
一步步使用 webpack 第一篇：使用 webpack 编译 es6 代码团队使用的 webpack 功能很强大，有时候会碰到编译失败的情况，总得找工具的作者解决问题，自己很少去追究原因，感觉对于 webpack 的认知总是一知半解。因此，从本篇文章开始，自己从零开始配置 webpack，认真体验一下配置过程。文章内容过于简单，如果有 webpack 使用经验的人，就不用往下看啦。版本说明本文使…
Nginx 失败重试中的 HTTP 协议幂等问题：non_idempotent Nginx通过反向代理做负载均衡时，如果被代理的其中一个服务发生错误或者超时的时候，通常希望Nginx自动重试其他的服务，从而实现服务的高可用性。实际上Nginx本身默认会有错误重试机制，并且可以通过proxy_next_upstream来自定义配置。如果不了解HTTP协议以及Nginx的机制，就可能在使用过程中遇到各种各样的坑。…
Flutter 中的 Redux 简介原文链接 Redux是一种单向数据流架构，可以轻松开发，维护和测试应用程序。在这篇文章中，我向你解释如何在Flutter中使用Redux架构编写移动应用程序。 Flutter是一项非常有趣的技术。在许多情况下，它被证明无论是对独立开发者还是软件公司来说都非常有用。Google目前正在使用它，所以未来可期。Flutter在…
（JS基础）Number 类型对于数字，我们再熟悉不过了。通过 let num = 123; 可以创建一个数字。通过 Number(thing) 可以将任何类型的数据转化成数字。通过 new Number(thing) 可以将任何类型的数据转化成 Number 类型的对象。数字直接量能直接使用 Number 对象上的属性和方法，如 100 (1) 。其实语言内部会临…