20200616 前端开发日报

Vue状态管理机制探究(eventBus vs VUEX);对 JavaScript 开发者非常有用的 10 个技巧;巩固一下前端的基础知识;前端应该懂得初级web分析指标;浏览器如何运行 JavaScript;JS基础(一)-畅游promise世界;全局挂载组件之Vue.extend;原生JS利用transform实现banner的无限滚动

  1. vue状态管理机制探究(eventBus vs VUEX)

    最初了解到eventBus和vuex并不清楚其原理只知道无脑用,甚至有些时候用的时候还不是很清楚,最近比较好奇这两者的区别,特以此文梳理 eventBus 定义 又称事件总线,作为组件共同的事件中心 组件都可以上下平行的通知其他组件 工作原理 发布订阅模式 创建一个vue实例,通过一个空的vue实例作为桥梁实现vu...

  2. 对 JavaScript 开发者非常有用的 10 个技巧

    我们知道,JavaScript 这门语言正在高速发展中。伴随着 ES2020,又有很多很棒的功能加入。老实说,您可以通过许多不同的方式编写代码。实现同样一个功能,有的代码很长而有的却很短。你可以通过一些小技巧来让你...

  3. 巩固一下前端的基础知识

    很久没有回头看看html和js的一些基础知识了,周末闲来无事的时候看到了一篇关于面试题的文章,突然发现很多都忘记了,好的,那就趁热打铁,撸一波基础知识吧。

  4. 前端应该懂得初级Web分析指标

    从事该职业足够长的时刻的人们经常会忘掉这些目标对于新人来说听起来很荒诞,所以您必须宽恕他们。要学习网络剖析并了解它怎么使您受益,最好先了解周围常见的术语,这是一个好主意。  在本文中,咱们将介绍基...

  5. 浏览器如何运行 JavaScript

    浏览器如何运行 JavaScript 需要铺垫的知识点: 执行环境 + 执行栈 执行环境(Execution Context) 执行环境 是函数被调用时所在的环境。执行环境中存储了函数执行时相关的所有事物。当我们在函数内访问某一变量时,这个变量其实也是该函数执行环境提供的。因为执行环境是不能直接被访问的(不能被访问代表...

  6. JS基础(一)-畅游promise世界

    本文主要介绍了个人对promise的一些粗浅理解,如有不正确的地方,还请指正。 一. Promise是什么 从JS语法层面上讲,Promise是一个函数,可以通过new关键字进行调用然后生成一个对象,这个对象被成为promise对象。promise对象有三种状态,为pedding、resolved、rejected,这是promise的重要机制。 从功能的角度来讲,...

  7. 全局挂载组件之Vue.extend

    Vue.extend 属于Vue的全局 api,在实际业务开发中我们很少使用,因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中(例如:ElementUI库),所以 Vue.extend + $mount 这对组合非常有必要需要我们了解下。 Vue.component 文档 官网用法: 注册或获取全局组...

  8. 原生JS利用transform实现banner的无限滚动

    功能 默认情况无限循环向右移动 点击数字切换到对应图片 点击左右切换可切换图片 原理 首先说下原理。 在布局上所有的图片都是重叠的,即只要保证Y方向对齐即可,当前可见的图z-index层级最高。 每隔3s中更换一张...

  9. 图解JavaScript——代码实现【1】(Object.assign()、flat()等十四种代码原理实现不香吗?)

    关注公众号“执鸢者”,回复“书籍</font>”获取大量前端学习资料,回复“前端视频”获取大量前端教学视频,回复“代码实现”获取本节整体思维导图。

  10. vue源码阅读第三篇,渲染代码块生成

    个人觉得 本章 可以大概看看我写的内容 最有效的方法是查看测试用例 很详细 覆盖很全面 这一段比较绕,主要是包装compile,最终暴露出compile本身以及包装后的compileToFunctions 1.1 compiler和compileToFunctions的基础baseCompile 它是对src/compiler包下暴露出的核心parse进行初步包装,我们知道parse传入templa...

  11. 深度解析 Vue 响应式原理—源码级

    当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。 这些 getter/setter 对用户来...

  12. webgl之threejs入门

    相信很多经常上网的人都看过一些很酷炫的3d效果,作为技术开发来说,这其中包含了什么高含金量的技术呢?今天就来带大家入门一个简单的3d效果开发。 首先我们到 github 下载threejs的文件,在html文件中引入three.js和OrbitControls.js,接下来我们逐步来实现一个旋转的长方体。 1.创建场景对象 var scene = new T...

  13. webpack — 使用 loaders 处理静态资源

    默认情况下,webpack 只处理 JS 文件。如果要处理其他文件,webpack 需要配置 loaders 对文件进行预处理,这样 webpack 就能处理任意静态资源。 处理静态资源的常用 webpack loaders 分别有 file-loader 、 url-loader 、 css-loader 、 style-loader ,下面我将结合实例分析这些 loaders 的使用。 1. 创建 webpack ...

  14. 初识webpack

    在模块化编程盛行的今天,每一个js、css都可以独立存在,而每一个独立存在的文件又可能采取不同的工程化语言方法,比如typescript写js,用sacc写css等等,这时候我们就需要一个简单的工具,完成这种统一编译解析的功能。 webpack 处理程序的时候,他会递归地构建一个依赖关系图,其中包含应用程序的每一个模块,然后将...

  15. Vue中watch使用

    虽然 Vue.js 为我们提供了有用的 computed , 但在某些场景下, 仍然还是需要使用到 watch . 默认情况下, watch 只在被监听的属性值发生变化时执行. 例如: export default { data: () => ({ dog: "" }), watch: { dog(newVal, oldVal) { console.log(`Dog changed: ${newVal}`...

  16. webpack的基本使用及常用的loader配置

    webpack是一个前端项目构建工具(打包工具),提供了友好的模块化支持,以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能 1. webpack的基本使用 npm install webpack webpack-cli –D webpack.config.js const { join } = require('path') module.exports = { //mode用来设置构建的模式,参数有两个:d...

  17. 请查收这份学习笔记我从Vue源码中学到的5个JavaScript技巧

    本文转载自公众号“读芯术”(ID:AI_Discovery) 从他人的成果中汲取营养是进步的法则之一,阅读知名框架的源代码可以有效地提高编程水平。最近,笔者开始了一场vue2.x的阅读之旅,从中学到了很多与JS相关的技巧。 独乐乐不如众乐乐,本文就将和你分享我的学习成果。 1.确定任何对象的特定类型 JavaScript中有...

  18. vue-toy: 200行代码模拟Vue实现

    vue-toy 200行左右代码模拟vue实现,视图渲染部分使用React来代替Snabbdom,欢迎Star。项目地址:[链接] codesandbox示例 已实现的参数: {代码...} 示例: {代码...} 基本原理 官方原理图:实现基本步骤: 使用Ob...

  19. 前端必知必会MySQL的那些事儿 – NodeJS全栈成长之路

    博主不是搞技术出身,属于半路出家( 别误会,不是剃度当和尚 ),而是以前从事的餐饮服务行业,跟现在完全不沾边。由于热爱,喜欢专研技术(说白了就是高大上,重点薪水高,哈哈)。所以到后来有了一个180度的转变,迷上了搞IT( 经常被挨踢 )互联网,虽然过程很痛苦,经历过网页设计 - 切图仔 - 网页制作(JS特效) -...

  20. 使用Node.js和JSON搭建简单的动态服务器

    创建4个页面,index.html、register.html、sign_in.html、home.html index.html 默认主页 register.html 用于注册账号 sign_in.html 用于登录账号 home.html 用于显示登录后的页面 主要代码片段 register.html <form id="registerForm"> <div> <label for="&q...

  21. 一个周末都闲不住的程序猿,图解git操作文件命令(建议收藏)

    图片时间为证,哎,一个周末都闲不住的程序猿,为了应付七大姑八大姨家小孩子的面试需求,我整理了一些文档,本身想传到网盘让他们自己下载着看去,但是好像,貌似这个文件有点大,就网盘那个尿性,不是氪金玩家...

  22. 重温 JavaScript 之 Event Loop

    最近有朋友来信说在面试的时候遇到与事件循环(Event Loop)有关的问题,主要就是 Promise 和 setTimeout 等一起出现的时候,它们的执行顺序是怎样的。 有朋友遇到的示例代码比较复杂、嵌套较深,当被问到原理时没能正确回答。 我看了一些网上的文章,似乎能解释示例代码的执行过程,但总觉得有些地方不太对劲,于...

  23. JavaScript中new的原理以及实现

    1.new关键字会首先创建一个空对象2.将这个空对象的原型对象指向构造函数的原型属性,从而继承原型上的方法3.将this指向这个空对象,执行构造函数中的代码,以获取私有属性4.如果构造函数返回了一个对象res,就将...

  24. [vue源码04] Vue.set 和 vm.$set

    导航 执行上下文 原型链 继承 事件循环 柯里化 偏函数 函数记忆 隐式转换 和 运算符 浏览器缓存机制(http缓存机制) 前端安全 深浅拷贝 Debounce Throttle [深...

  25. webpack4核心模块tapable源码解析

    webpack打包是一种事件流的机制,它的原理是将各个插件串联起来,那么实现这一切的核心就是我们要讲解的tapable. 并且在webpack中负责编译的Compiler和负责创建bundles的Compilation都是tapable构造函数的实列 基于 "webpack": "^4.43.0",这个版本的包的。安装该webpack之后,该webpack会自带 tap...

  26. 如何在nginx同一端口下部署多个vue项目

    如题,项目部署我们都经历过,这个过程也是十面埋坑。其实部署vue应用比较简单了现在,特别是cli3出来后,比以前要容易多了。这里记录一次在nginx同一端口下部署多个vue应用的过程。nginx用来做代理很好用,可以解决跨域问题。 那么,如何在一个端口号下部署多个应用呢?这个需求有什么用?比如你的一个服务器上部署了...

更多内容请关注公众号【前端开发博客】每日更新
20200616 前端开发日报

原文:20200616 前端开发日报 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/fe-daily-20200616.html)