20190221 前端开发日报

关于JS隐式转换的那些小事儿；NodeJS express 框架核心原理全揭秘；成为自信的node.js 开发者（二）；尤雨溪：TypeScript 不适合在 Vue 业务开发中使用吗？；js 真的是一步一步手写promise；成为自信的node.js开发者（一）；面试官问我：什么是JavaScript闭包，我该如何回答；vue模仿新年集福活动（移动端）

1. 关于JS隐式转换的那些小事儿 JavaScript 是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。这也意味着你可以使用同一个变量保存不同类型的数据： var foo = 42; // foo is a Number now foo = "bar"; // foo is a String now foo = true; // foo is a Boolean now 复制…
2. NodeJS express 框架核心原理全揭秘 介绍 express框架大家都已经都很熟悉，是NodeJS最流行的轻量web开发框架。他简单易用，却功能强大。最近一个月来一直反复研究调试express框架，深究其源码不觉为之惊叹，不论是原理与代码都非常简单，很容易理解也很受用，觉得有必要写个文章分享一下。本系列分2部分全面介绍express。上篇讲express框架主要原理和…
3. 成为自信的node.js 开发者（二） 这一章，我们来学习一下event_loop, 本文内容旨在厘清浏览器（browsing context）和Node环境中不同的 Event Loop。 首先清楚一点：浏览器环境和 node环境的 event-loop 完全不一样。 浏览器环境 为了协调事件、用户交互、脚本、UI渲染、网络请求等行为，用户引擎必须使用 Event Loop 。 event loop 包含两类：…
4. 尤雨溪：TypeScript 不适合在 Vue 业务开发中使用吗？ 必须要承认的是，2.x 的 TS 支持显然跟 React 和 Angular 是有差距的，这也是为什么 3.0 要加强这一块。 关于目前 2.x 跟 TS 的整合，通常需要基于 vue-class-component 来用基于 class 的组件书写方式。虽然对于默认的对象书写方式有类型推导支持，但里面的实现绕了很多弯。问题的本质其实很简单：因为当初 …
5. js 真的是一步一步手写promise 前端异步一直是老生常谈，promise更是绕不过去的话题，那么除了会使用promise之外，能否尝试自己封装一个promise呢？网上关于这个的封装实现有很多，不过还是想一步一步的封装一下。 目录 从简单使用着手 添加异步处理和实例多次调用then 链式调用的实现 温习promise的简单使用 先来看一下promise…
6. 成为自信的node.js开发者（一） 这个博客是我最近整理了过去的文章。 适合阅读的同学 想更进一步深入理解node的同学，如果你已经稍微了解一点点node, 可以用node做一些小demo，并且想更深一步的了解，希望这篇文章可以帮助到你。 不太适合阅读的同学 不太熟悉基本的javascript 语法，比如说回调函数 对node有深入理解的同学，比如说…
7. 面试官问我：什么是JavaScript闭包，我该如何回答闭包，有人说它是一种设计理念，有人说所有的函数都是闭包。到底什么是闭包？这个问题在面试是时候经常都会被问，很多小白一听就懵逼了，不知道如何回答好。这个问题也有很多朋友在公众号给李老师留言了，问题表…
8. vue模仿新年集福活动（移动端）自己随便写着玩的一个“集福”活动，没有后端配合，只是前端的一个效果展示，没有写入缓存，刷新后数据就没有了，主要功能有抽卡，点击卡片查看介绍，集齐之后合成卡片，增加抽卡次数，直接获取稀缺卡，增加稀缺卡…
9. Vue 后台管理类项目兼容IE9+ 最近项目进入到了第三方集成的环节，集成第三方监控非要用IE，咋办？老板让我将后台管理系统的框架兼容下IE，一直都是在chrome下开发的，也不知道IE下是什么鬼。 目前后台管理系统前端搭建方式 目前系统是用vue-cli@2.0生成的，UI框架使用的是iview,ajax请求使用的是axois,此外就没有什么特殊的npm包了。 需要解决…
10. 前端项目如何管理在一个项目内，当有多个开发者一起协作开发时，或者功能越来越多、项目越来越庞大时，保证项目井然有序的进行是相当重要的。
11. JavaScript对象概述 JavaScript JavaScript 一个属性的名称如果不是一个有效的 JavaScript 标识符（例如，一个由空格或连字符，或者以数字开头的属性名），就只能通过方括号标记访问。 2.Symbol ES6 为什么引入了Symbol？ ES5 的对象属性名都是字符串，这容易造成属性名的冲突。比如，你使用了一个他人提供的对象，但又想…
12. 如何使用 vue + typescript 编写页面 （Vue生命周期函数） 每一个mvvm框架，生态周期显得格外重要，vue有哪些生态函数，可以看一下，和使用方式 Vue生命周期函数简单罗列 详细解答可以参照选项 / 生命周期钩子 1. beforeCreate 模块创建之前，this指向的为对象本身，并没有任何实际操作 2. created 所有的getters，data，等等被观测完成，此时可以获取到data内容 …
13. 【JS面试向】选择排序、桶排序、冒泡排序和快速排序简介 新年伊始，又到了金三银四的时候了。面对前端越来越多的算法面试题，我简单的整理了一下几种比较常见的数组排序方式，分别介绍其基本原理和优劣势。（ps：才疏学浅，希望大家可以在issues下面指出问题） 选择排序 原理 选择排序从数组内遍历出最大值，加入新数组，将最大值从原数组中删除，重复上述操作，最后得出…
14. Vue源码探究-生命周期 本篇代码位于 vue/src/core/instance/lifecycle.js 初步探索完了核心类的实现之后，接下来就要开始深入到Vue实现的具体功能部分了。在所有的功能开始运行之前，要来理解一下Vue的生命周期，在初始化函数中所有功能模块绑定到Vue的核心类上之前，最先开始执行了一个初始化生命周期的函数 initLifecycle(vm) ，先来看…
15. Vue.js 你需要知道的 scopedSlots 面试官：Vue如何在 Jsx 中使用 scopedSlots ? 自己先想一分钟。 早先我在 Vue.js 你不知道的一些小技巧 一文中简单介绍过 scopedSlots 的使用场景，但不是很详细。群里也有好多同学问关于 scopedSlots 如何使用，当然自己也有点小生疏。今天借此机会重新梳理下，以便日后学习之用。文笔有限，有不对或阐…
16. 重构之路：webpack区分生产环境和开发环境 我们现在的配置都是写在一个webpack.config.js文件夹里，但是实际上，我们在开发环境和生产环境中使用的配置是不一样的，比如生产环境中我们需要包的体积不能很大，不然在线上响应会变慢。所以我们需要将生产环境和开发环境分开来。 cross-env 在node里，我们有一个process对象，它里面包括了node的一些信息，env和…
17. angular7.0使用指南 脚手架安装：npm i -g @angular/cli 新建项目：ng new my-app 如果安装脚手架报错，强制清理npm缓存后重新安装 组件与模板 当你下载好官方案列后，你可能对目录都不太熟悉，不过不用关心 理解模板表达式上下文 ==组建实列==就是模板表达式的上下文对象(Expression context) 表达式中的上下文变量是…
18. WebSocket 协议第十二章——使用其他规范中的WebSocket协议 本文为 WebSocket 协议的第十二章，本文翻译的主要内容为如何使用其他规范中的 WebSocket 协议。 有兴趣了解该文档之前几章内容的同学可以见： 【译】WebSocket 协议——摘要（ Abstract ） 【译】WebSocket 协议第一章——介绍（ Introduction ） 【译】WebSocket 协议第…
19. 漫话：如何给女朋友解释什么是 HTTP 漫小画 擅长漫话 程小员 擅长编程 周末一大早，我正在电脑前面浏览一些技术网站，突然女朋友大喊起来：哇，杭州又下大雪啦，快来看啊。我并没有理她，于是她跑过来拉我。  图，雪后杭州 上次杭州下雪…
20. 读vue源码看前端百态2–打包工具 上图是 vue 的 package.json 文件。 除了 vue, React, Ember, Preact, D3, Three.js, Moment, etc. 一些很有名的js库,纷纷使用 Rollup 来作为打包工具，所以 Rollup 想必有它的优势。除了 rollup ，当然还有一些大家耳熟能详的打包自动化工具，比如 webpack,gulp,grunt,lerna ,这篇我们就来看一下他们的区别，以免书…
21. 用go实现聊天室(WebSocket方式) 前言 刚入门 go 语言和 beego 框架，通过一个简单聊天室的实现，来趁热练习。 详细代码见 github 。 一、WebSocket协议 在实现之前，我们需要解决一个底层问题。 总所周知， HTTP协议 是单向传输协议，只能由客户端 主动 向服务端发送信息，反之则不行。而在聊天室中，一个用户发送一条…
22. JavaScript DOM文档对象 文本节点，IE8以下空格节点获取不到。 元素节点 div 。 属性节点 class 、 id 、 value 。 注释节点 <div id="wrap"> <div class="position"> <div id="box" class="box1" data-title="这也是…
23. 工程优化暨babel升级小记 小记背景 随着业务代码的增多，项目代码的编译时长也在增多，遂针对这个痛点在dev下做些优化 第一部分：优化dev编译时间 这里优化的主要思路是在dev环境下，单独出来一个dll配置文件，将项目中的部分依赖包写入配置文件，最终生成一个在dev环境下专用的dll文件，这样处理的目的是减少开发时的编译时间（ps：经测试…
24. 急速 debug 实战三（Node – webpack插件,babel插件,vue源码篇） 1. 急速 debug 实战一 （浏览器 – 基础篇） 2. 急速 debug 实战二 （浏览器 – 线上篇） 3. 急速 debug 实战三 （Node – webpack插件,babel插件,vue源码篇） 在我们日常开发中有许多情况下没有 debug 就会让我们的开发变得非常的低效，甚至对一些流程的理解变得非常困难。本教程适用于，正在开发 node 应用， …
25. React的组件模式根据 React 官网的介绍，“组件让你可以将 UI 分割成独立的、可重用的部分，并独立管理每个部分。”
26. webpack 最简打包结果分析现在的 webpack 不再是入门噩梦,过去 webpack 最让人心塞的莫过于配置文件，而 webpack4 诞生随之而来的是无配置 webpack。
27. 集成架构图绘制-JS绘图工具库(2.19) 对于集成架构图的绘制一直是我关注的一个点，也看了类似百度Echart，D3和HighChart等，基本都没有发现适合用来做类似集成架构图绘制的工具。同时集成架构图往往都不是自动绘制，而需要提前进行集成架构的图形布局设计，布局好后才能够用JS去绘制。 因此更多我们需要的是一个JS绘图工具库，能够汇总线条，矩阵，圆等基…
28. MongoDB基本增删改查操作-基于Node.JS驱动 本文基于 MongoDB 的 Node.JS 驱动实现 MongoDB 基本的增删改查操作。驱动官方文档见： mongodb.github.io/node-mongod… 。 1 插入文档 MongoDB 中 Collection 类的 insertOne 和 insertMany 方法用来插入文档。 const MongoClient = require(‘mongodb’).MongoClient; const assert…
29. 深入Vue – 源码目录及构建过程分析摘要： Vue源码阅读第一步。 原文：深入vue – 源码目录及构建过程分析 公众号：前端小苑 Fundebug经授权转载，版权归原作者所有。 本文主要梳理一下vue代码的目录，以及vue代码构建流程，旨在对vue源码整体有一个…
30. 9102年webpack4搭建vue项目 前言 首先祝大家元宵节快乐，最近已经好久没有写过文章了，刚好趁着这几天刚刚上班，领导还没有来，偷偷的写一篇关于webpack搭建vue的博客。因为公司使用vue比较多，构建vue项目使用vue-cli显得有点臃肿，感觉还是自己配置比较好些，所以就有了这篇教程。由于水平有限，欢迎大家指正，一起进步。 新建项目 1.新建…
31. Redis 在 Web 项目中的应用与实践 Redis作为一个开源的(BSD)基于内存的高性能存储系统，已经被各大互联网公司广泛使用，并且有着诸多的应用场景。本篇文章将基于PHP来详细讲解Redis在Web项目中的主要应用与实践。 缓存 这里所介绍的缓存是指可以丢失或过期的数据。常用的命令有set,hset,get,hget，使用redis作为缓存时需要注意一下几个…

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条，每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等，为开发者提供动力，如果觉得内容对你有用，记得分享给你的小伙伴。进入码农头条查看更多