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

WebSocket 与 Socket 的区别；记录一次蚂蚁金服前端电话面试；nginx,作为前端的你会多少？；2019年JavaScript开发者应该都在用的9个棒的技巧；深入Vue.js组件(一)；一文搞懂JavaScript原型链（看完绝对懂）；js 操作剪贴板；Vue源码探究-状态初始化

WebSocket 与 Socket 的区别准备：如果不太了解网络的朋友可以先看一下我之前写的文章需要了解的网络协议。想必大家再做即时通讯业务或需要替代轮训的时候，肯定听说过 WebSocket 和 Socket 这两个东西，我们今天就来简单说一下这两者的区别。 WebSocket 是什么 WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。WebSocket 使得…
记录一次蚂蚁金服前端电话面试坐标杭州，18年毕业，算上实习一年半开发经验。是外派的面试，后面两面都是阿里的面试官。本来是给我发的在线测评，但是那边服务器出现问题，我一直打不开网页，最后只好以电话问答的形式。下面我写的大部分都是测评里的题目，部分是电话里新增的题目。。。尽量使用尽可能多的方式实现子元素的垂直水平居中 &…
nginx,作为前端的你会多少？前端的我们，已经不仅仅是做页面，写样式了，我们还需要会做相关的服务器部署。废话不多说，下面就从前端的角度来讲以下nginx的相关使用。
2019年JavaScript开发者应该都在用的9个棒的技巧又一年过去了，JavaScript也一直在变化进步着。这儿列举了一些小技巧帮你在2019年写出更简洁，高效的可拓展的代码。下面共列举了9个讲究使用的小技巧来帮助你成为更好的开发者。 1. async / await 如果你还陷入到回调地狱中，那么你应该回到2014年去开发你的代码。除非绝对必要（像第三方库需要或者性能原因），否…
深入Vue.js组件(一) 1、使用 kebab-case Vue.component(‘my-component-name’, { /* … */ }) 复制代码 2、使用 PascalCase Vue.component(‘MyComponentName’, { /* … */ }) 复制代码当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说和都是可接受的。直接在 DO…
一文搞懂JavaScript原型链（看完绝对懂）原型原型链原型指向改变后是如何添加方法和属性原型指向改变后的原型链实例对象的属性和原型对象的属性重名通过原型继承组合继承拷贝继承一,原型问题：请看以下代码，如果我们要创建100个对象，应该怎么创建？ function Person(name, sex) { this.name = name; this….
js 操作剪贴板js 操作剪贴板 MDN 官方说明： [链接] 通过 js 可以操作剪贴板的复制剪切粘贴用到的方法和元素 DOM元素 {代码…} js 方法 {代码…} 实现原理是通过 js 操作 textarea input 输入框，只能操作输入框，不能…
Vue源码探究-状态初始化本篇代码位于 vue/src/core/instance/state.js 继续随着核心类的初始化展开探索其他的模块，这一篇来研究一下Vue的状态初始化。这里的状态初始化指的就是在创建实例的时候，在配置对象里定义的属性、数据变量、方法等是如何进行初始处理的。由于随后的数据更新变动都交给观察系统来负责，所以在事先弄明白了数据绑定…
JavaScript中的几种数据结构简介随着业务逻辑越来越多的从后端转向前端,专业的前端工程知识变的更加关键。作为前端的工程师，我们依赖像 React 这样的库来开发view层,同时又依赖 Redux 这样的库来管理数据状态，两者组合起来作为响应式编程，当数据动态变化时，UI层可以实时的更新。渐渐地，后端可以专注于api的开发，仅仅提供数据的检索和更新…
14个最好的 JavaScript 数据可视化库你的程序有多么依赖数据？即使应用程序不完全面向业务，你也可能需要管理面板、仪表板、性能跟踪以及用户非常喜欢的类似分析功能的数据。
「从源码中学习」面试官不知道的Vue题目答案当回答面试官问及的Vue问题，我们除了照本宣科的回答外，其实还可以根据少量的源码来秀一把，来体现出你对Vue的深度了解。本文会陆续更新，此次涉及以下问题： “new Vue()做了什么？” “什么阶段才能访问DOM？” “谈谈你对Vue生命周期的理解。” 扩展：新生命周期钩子serverPrefetch是什么？ …
8个有用的 CSS 技巧:视差图像，sticky footer 等等CSS是一种独特的语言。乍一看，这似乎很简单,但是，某些在理论上看起来很简单的效果在实践中往往不那么明显。
Node.js 花盒：Redis 的使用最近公司的 ASR 实时推送以及登录认证模块都使用了 Redis ，因此在完成功能的同时，整理一下 Node.js 从零开始对 Redis 使用的文档。 1、本地安装 Redis 1.1、安装地址： Redis 服务器软件官网： redis.io/download Redis 服务器软件 github (免费)： github.com/MSOpenTech/… Redis 数…
JavaScript中AMD和ES6模块的导入导出对比我们前端在开发过程中经常会遇到导入导出功能，在导入时，有时候是require，有时候是import在导出时，有时候是exports，module.exports，有时候是export，export default今天我们对这些内容进行简单的介绍
使用 React + Koa 从零开始一步一步的带你开发一个 36kr SSR 案例本项目源码地址 github.com/zwmmm/react… 喜欢的给个 star 鼓励下作者，有问题可以提 issue 。也许你看过其他的ssr教程都会先说一说spa和ssr的区别以及优缺点，但是我相信能点进来看的小伙伴们肯定是对这两个概念有过了解的，也无需我在这里多费口舌。不懂的可以直接看这里那么我们就直接进入正题了!!! 搭建…
React-Router V5 尝鲜新特性完全兼容老版本v4 支持 React 16 , 兼容 React >= 15 消除在 React.StrictMode 严格模式中的警告使用 create-react-context 实现 context API 新功能 Route 组件 path 可以为数组 before {代码…} af…
Vue使用技巧和项目中遇到的问题这里给大家分享一下Vue中的一些技巧，希望对大家有用处。（话不多说上代码） 1. Vue路由拦截浏览器后退实现表单保存类似需求（为了防止用户突然离开，没有保存已输入的信息。） //在路由组件中： mounted(){ }, beforeRouteLeave (to, from, next) { if(用户…
译—JavaScript是如何工作的（2）：V8引擎内部+优化代码的5个技巧几周之前，我们开始了一系列旨在深入挖掘JavaScript及其实际工作原理的文章：我们认为通过了解JavaScript的构建块以及它们如何共同发挥作用，你将能够编写更好的代码和应用程序。第一篇文章集中于提供引擎，运行时和调用堆栈的概述。第二篇文章将深入探讨谷歌V8 JavaScript引擎的内部。我们还将提供一些关于如何编…
搜索和在线阅读 GitHub 代码的插件推荐 2019 年第 31 篇，总 55 篇文章上一篇文章推荐了 3 个 Github 相关的项目，这次继续推荐 3 个项目，严格说是 3 个插件，主要是帮助搜索 Github 项目和在线阅读代码的插件。 1. GitHunt 第一个是帮助搜索在指定时间内 Star 数量增长最多的 Github 项目，项目地址如下： htt…
webpack4.X 实战（三）：企业SPA 24点总结（上）遵循不重复原则（DRY） webpack 的相关配置需要保留一个 common配置、一个dev配置、一个prod配置通过 webpack-merge 包将其整合开发环境时一些工具的使用是没有意义的，比如压缩代码、文件名哈希、分离代码等… 如下配置建议只在生产环境下使用 UglifyJsP…
性能优化篇—Webpack构建代码质量压缩Webpack构建流程：初始化配置参数 -> 绑定事件钩子回调 -> 确定Entry逐一遍历 -> 使用loader编译文件 -> 输出文件
promise常见错误上周讲了promise用法，这周我们讲一下promise实战中可能出现得一些易错点,如果对promise基础不是很了解可以去看我的上一篇文章promise入门常见问题一：回调地狱式用法 remotedb.allDocs({ include_docs: true, attachments: true }).then(function (result) { var docs = result.rows; docs.forEach(fun…
前端培训-初级阶段（13、18）前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（…
Node.js之path模块的使用 path模块包含一系列处理和转换文件路径的工具集，通过 require(‘path’) 可用来访问这个模块。知识点：对window系统，目录分隔为”, 对于UNIX系统，分隔符为’/’，针对’..’返回上一级，发现多个斜杠或反斜杠时会替换成一个，/，//，与都被统一转换为方法 1、path.resolve( , , …) 按照顺序依次…
jQuery之documentFragment前言：documentFragment 在 jQuery 中的 buildFragment() 方法中总是用到，不了解它的含义话，读源码会比较困难，写文章以记之。
node.js高级编程阅读笔记事件驱动编程是指程序的执行流程取决于事件，当感兴趣的事情发生时由系统调用的函数来取代应用返回值的编程风格被称为事件驱动编程或者异步编程，它是Node的显著特征之一，这种编程风格意味着当前进程在处理I/O操作时不会发生阻塞，因此多个I/O操作可以并行进行，当每个操作结束时，将会分别调用其对应的回调函数，线程…
深入剖析 React Concurrent
ES6系列—新的变量声明方式在ES5中，变量声明只有var和function以及隐式声明三种，在ES6中则增加了let、const、import和class四种。
基于page-skeleton-webpack-plugin分析自动生成骨架屏原理一、page-skeleton-webpack-plugin page-skeleton-webpack-plugin 是一款由ElemeFE团队开发的webpack 插件，该插件的目的是根据你项目中不同的路由页面生成相应的骨架屏页面，并将骨架屏页面通过 webpack 打包到对应的静态路由页面中。二、插件自动生成骨架屏的主要原理通过无头浏览器puppeteer打开…
《9102 了，你还不会移动端真机调试？》有什么什么方法，能够让我们调试移动端的适配的时候，像调试PC端一样直观呢？本文旨在为你提供移动端的调试方法，希望能够为你打开新的一扇门。（by 前端小姐姐）
Web 前端性能分析（一）参考链接初探 performance – 监控网页与程序性能使用简洁的 Navigation Timing API 测试网页加载速度前端性能统计前端性能——监控起步使用性能API快速分析web前端性能 Page Visibility 通过以上几篇文章，可…
#前端技术#【HTML5 常用标签元素表】详见：一个响应式 HTML5 常用标签元素表，帮助你直观查询标签含义。
iOS 开发中的 Web 应用概述移动开发领域近年来已经逐渐告别了野蛮生长的时期，进入了相对成熟的时代。而一直以来Native和Web的争论从未停止，通过开发者孜孜不倦的努力，Web的效率和Native的体验也一直在寻求着平衡。本文聚焦iOS开发和Web开发的交叉点，希望能通过简要的介绍，帮助开发者一窥Hybrid和大前端的构想。插播广告…
在 React Hooks 中如何请求数据？通过这个教程，我想告诉你在 React 中如何使用 state 和 effect 这两种 hooks 去请求数据。我们将使用众所周知的 Hacker News API 来获取一些热门文章。你将定义属于你自己的数据请求的 Hooks ，并且可以在你所有…
前端规范化 Lint tools 推荐说起 Lint tools，其实不如说是 Vue 的 Lint tools 推荐，在过去我对 Vue.js 的 Lint 感受的不够深刻，由于 Vue.js 是由 .vue 的后缀名组成的 template file，那样 Lint 其实是不好做的，但是万万没想到，这年头 Lint 工具超发达的，什么都有—— eslint lint 界元老，也是最基本的一个 lint 工具，即使别的你什…