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

深入理解javascript事件机制；Vue学习笔记（一）——脚手架vue cli；高仿网易云音乐 Vue前端项目；Vue中的scoped及穿透方法；11个教程中不常被提及的JavaScript小技巧；前端面试必问题答疑（1）；记一次 Vue 移动端活动倒计时优化；从JSCore了解Hybrid开发

深入理解javascript事件机制 Created By JishuBao on 2019-04-17 12:38:22 Recently revised in 2019-04-17 17:38:22 欢迎大家来到技术宝的掘金世界,您的star是我写文章最大的动力！ GitHub地址不知道各位小伙伴在平时撸码中会不会经常看到诸如 event.preventDefault()、event.stopPropagation() …
Vue学习笔记（一）——脚手架vue cli cli（@vue/cli） cli服务（@vue/cli-service） cli插件 CLI ( @vue/cli ) 是一个全局安装的 npm 包，提供了终端里的 vue 命令，这些命令都是在全局安装之后才可以使用的，例如：使用 vue serve 启动项目需要在npm install -g @vue/cli-service-global之后才可以。 vue create 创建一个vue项目 vue…
高仿网易云音乐 Vue前端项目歌曲播放界面支持播放进度同步、收藏或取消收藏当前歌曲 banner、排行榜左边的三个按钮点击没有效果( ´▽｀) ，没时间写那些啦… 实现了登录功能登录后展示头像和昵称，且可进入个人中心即“我的”页面，可查看…
Vue中的scoped及穿透方法 css一直有个令人困扰的作用域问题：即使是模块化编程下，在对应的模块的js中import css进来，这个css仍然是全局的。为了避免css样式之间的污染，vue中引入了scoped这个概念。在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件。通过设置该属…
11个教程中不常被提及的JavaScript小技巧这次我们主要来分享11个在日常教程中不常被提及的JavaScript小技巧，他们往往在我们的日常工作中经常出现，但是我们又很容易忽略。
前端面试必问题答疑（1）一，前端性能优化有哪些？ {代码…} {代码…} 二，关于原型链
记一次 Vue 移动端活动倒计时优化通常写倒计时效果，用的是 setInterval，但这会引发一些问题，最常见的问题就是定时器不准。如果只是普通的动画效果，倒也无所谓，但倒计时这种需要精确到毫秒级别的，就不行了，否则活动都结束了，用户的界面上倒计时还在走，但是又参加不了活动，会被投诉的╮(╯▽╰)╭ 一、知识铺垫 1. setInterval 定时器先说…
从JSCore了解Hybrid开发最近因为工作的原因，越来越多的动态化开发模式开始在项目中实施。为了对Hybrid的开发有一个深入的了解，查阅了相关的博客和官方文档之后，决定把学到的东西在这里做一个总结，方便日后查阅。好了，废话不多说，要研究Hybrid开发，其中必不可少的是要去了解 JavaScriptCore (以下简称 JSCore )。那么我们就先从 JSCore …
JS中的原型与原型链 JS中的原型可以类比于Java中的父类。在Java中实现继承有接口继承与实现继承两种方式，接口继承只继承方法签名，而实现继承则继承实际的方法。由于JS中的函数没有签名，在 ECMAScript 无法实现接口继承， ECMAScript 只支持实现继承，而其实现继承的主要依靠原型与原型链来实现的。原型模式我们创建的每个…
Vue自定义全局Toast和Loading如果我们的Vue项目中没有用到任何UI框架的话，为了更好的用户体验，肯定会用到loading和toast。那么我们就自定义这两个组件吧。
Vue SSR 踩坑之旅前言本文并不是 Vue SSR 的入门指南，没有一步步介绍 Vue SSR 入门，如果你想要 Vue SSR 入门教程，建议阅读 Vue 官网的《 Vue SSR 指南》，那应该是最详细的 Vue SSR 入门教程了。这篇文章的意义是，主要介绍如何在 SSR 服务端渲染中使用最受欢迎的 vue ui 库 element-ui…
【核心模块】node.js node环境中，全局对象为global；浏览器环境中，全局对象时window 所有全局变量均挂载在全局对象上，作为全局对象的属性，其中包含：显式定义全局对象的属性隐式定义的变量(没有定义直接赋值的变量) 这里建议使用 var、let、const 定义变量以避免引入全局变量，因为全局变量会污染命名空间，…
关于程序员写好 ppt 的几点总结 – 前端张大胖近一年我做了几次 ppt，刚开始写 ppt 简直不要太痛苦，真的不如写代码来的简单，每晚熬到深夜但也是收效甚微。
你真的理解JS的继承了吗？噫吁嚱，js之难，难于上青天在原型链和继承上花了不知道多少时间，当每次自以为已经吃透的时候，总是会出现各种难以理解的幺蛾子。也许就像kyle大佬说的那样，js的继承模式真的是‘蠢弟弟’设计吧。请先看下图，如果各位觉得soeasy，那各位也许不需要往下看了。（图片忘了从那篇文章摘下来的，请多见谅） …
webpack配置笔记 npm install -g webpack@3.5.3 // my-demo npm init npm install –save-dev webpack@3.5.3 复制代码在根目录下创建两个文件夹 public app 创建三个文件 index.html –放在public文件夹中 Greeter.js– 放在app文件夹中 main.js– 放在app文件夹中在index.html文件中写入最基础…
Javascript的对象拷贝在开始之前，我先普及一些基础知识。Javascript 的对象只是指向内存中某个位置的指针。这些指针是可变的，也就是说，它们可以重新被赋值。所以仅仅复制这个指针，其结果是有两个指针指向内存中的同一个地址。
JavaScript 是如何工作的：JavaScript 的共享传递和按值传递这是专门探索 JavaScript 及其所构建的组件的系列文章的第 22 篇。如果你错过了前面的章节，可以在这里找到它们： JavaScript 是如何工作的：引擎，运行时和调用堆栈的概述！ JavaScript 是如何工作的：深入V8引…
Node.js对MongoDB进行增删改查操作 MongoDB简介 MongoDB 是一个开源的、文档型的NoSQL数据库程序。MongoDB将数据存储在类似JSON的文档中，操作起来更灵活方便。NoSQL数据库中的文档(documents)对应于SQL数据库中的一行。将一组文档组合在一起称为集合(collections)，它大致相当于关系数据库中的表。除了作为一个NoSQL数据库，MongoDB还有一些自己的…
Web应用性能优化随笔思路就是，当我们去访问一个web应用的时候，都做了哪些操作？对应这些操作的，就是我们所能进行的优化的模块！
js中arraybuffer与blob的区别当接触过前端中二进制后，arraybuffer和blob是经常会遇到的，而且经常会搞混，那么这两者之间有啥区别，又有啥联系呢？ ArrayBuffer ArrayBuffer对象用来表示通用的、固定长度的原始二进制数据缓冲区。ArrayBuffer是不可以直接操作的，而是要通过类型数组对象或 DataView 对象来操作，它们会将缓冲区中的…
Node.js – 阿里Egg的多进程模型和进程间通讯最近用Egg作为底层框架开发项目，好奇其多进程模型的管理实现，于是学习了解了一些东西，顺便记录下来。文章如有错误，请轻喷
git与github汇总关于git与github首先要明白git和github其实就是足球与球场的关系，git粗爆的可以理解为代码管理工具；其次明白git工作流是怎样运行（如下图）
把你的devtools从webpack里删除通过判断是否为 dev 环境，加载 vConsole 并实例化使用： // 开发时引入 vConsole if (process.env.NODE_ENV === ‘development’) { // 吐槽一波：不支持 import 方式 const VConsole = require(‘vconsole’); new VConsole(); } 复制代码生产环境是没有 vConsole 了吧！想象很丰满，打包很骨感。 …
开发Vue组件系列之模态框项目基础工程文件是使用 vue-cli3.0 搭建的,这里不过多介绍。开发Vue组件系列之模态框,主要有标题、内容、定时器、按钮文案、按钮事件回调、遮罩层这些可配置项。本次开发得组件是本系列的第一个组件,后期也会有更多系列教程推出。使用命令行 $ Vue create echi-modal $ cd echi-modal $ npm install $ npm ru…
keep-alive + vuex 让缓存的页面灵活起来在使用vue + vue-router开发SPA的时候，有没有遇到过这样的情况：当我们在列表页和详情页之间切换的时候，如果列表页不做缓存，会导致每次从详情页返回时，列表页都会重新加载。如下图：细心的朋友已经发现了，当从详情页返回列表页的时候，列表页重载了，这样的体验显然不好，这时我们可以对列表页进行缓…
【React深入】深入分析虚拟DOM的渲染原理和特性React的虚拟DOM和Diff算法是React的非常重要的核心特性，这部分源码也非常复杂，理解这部分知识的原理对更深入的掌握React是非常必要的。
基于JQuery做的一个简单的点击显示和隐藏的小Demo 最近新加入了一个公司，并接手到了一个新项目，是基于 Spring + Spring MVC + MyBatis 架构来搭建的，在公司领导的需求下修改功能，需要修改些修改些前端页面，原本很简单的就是一个JQuery的基于事件的显示和隐藏节点，却花费了几个小时才弄清楚大概，效率实在低下。记录下吧！ 1. 简单Demo源代码具体效果可以直接…
关于JS更新input元素的value属性引发的狗血讨论来个面试题：在浏览器中，对于input节点的用户输入，何时触发"change"事件呢？在浏览器中，JS更新input的value属性，会触发"change"事件吗？如果不会触发，请问为什么？有什么办法解决吗？根据对上面问题的理解，我分为以下三个认知阶段：第一阶段：读者只需要答案…
在 Go 中使用 Websockets 和 Socket.IO 注 – 本教程是使用 Go 1.9 版和 googollee/go-socket.io 编写的 Websockets 我觉得非常有趣，在应用程序之间通信中使用标准 RESTful API 方案之外，它为我们提供了一个替代选项。使用套接字，我们可以做到成千上万个不同客户端之间的实时通信，而不必让每分钟数十万个 RESTful API 调用来轰炸我们的服务器。视…
《2019 React Redux 完全指南》在本篇 Redux 教程中，我会渐进地解释如何将 Redux 与 React 搭配使用 —— 从简单的 React 开始 —— 以及一个非常简单的 React + Redux 案例。（by 希里花斯）