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

JS 中的 this 和 arguments；前端面试题 | JS部分（附带答案）；Vue中后台鉴权的另一种思路 – 动态路由的实现与优化；对javascript闭包的理解；帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）；谈谈JavaScript编码风格；对js中执行环境、作用域和作用域链的理解；css魔法——左边竖条的实现方法

JS 中的 this 和 arguments 在 JavaScript 中，函数有两种调用方式： function sum(x, y) { return x + y } // 第一种方式 sum(1, 2) // 3 // 第二种方式 sum.call(undefined, 1, 2) // 3 复制代码第一种方式是常用的方法调用函数，第二种是使用 call() 方法调用函数，在使用后者调用函数时，第一个参数便是 this 值。 …
前端面试题 | JS部分（附带答案）目前在找工作，所以各方收集了一堆面试题。其实刷面试题的过程也能更新自己对知识的认识，所以也提醒自己多看多理解。如果对下面题目有更深理解，会实时更新。遇到新题目，也会不定时更新。希望能帮助到部分朋友～一、各种函数方法定义及区别 1. typeof运算符和instanceof运算符以及isPrototypeOf()方法的区别 ty…
Vue中后台鉴权的另一种思路 – 动态路由的实现与优化借用大佬的一张图，侵权立删前言在今年年初在掘金发布了一篇文章记一次Vue动态渲染路由的实现，现在代码经过不断的Review 现在完全优化了之前的实现方法，代码量减少很多，逻辑更加简单，同时也更加稳定 demo已经部署到github，欢迎体验~~ vue-element-asyncLogin ，你的start是我的动力! 鉴权-前端…
对javascript闭包的理解在工作中在很多情况下都会用到闭包，但是当别人问起闭包到底是什么时，总是觉得说不出个所以然来，所以这次准备把闭包这个知识点好好的梳理一遍，以加深对闭包的理解。而且很多时候我们也容易将匿名函数跟闭包弄混，所以在此区分一下。写得不对的地方欢迎各位大神指出。 1、什么是闭包？含义：有权访问…
帮你彻底搞懂JS中的prototype、__proto__与constructor（图解）作为一名前端工程师，必须搞懂JS中的 prototype 、 __proto__ 与 constructor 属性，相信很多初学者对这些属性存在许多困惑，容易把它们混淆，本文旨在帮助大家理清它们之间的关系并彻底搞懂它们。这里说明一点， __proto__ 属性的两边是各由两个下划线构成（这里为了方便大家看清，在两下划线之间加入了一个空格： _ _p…
谈谈JavaScript编码风格 “编程风格”（programming style）指的是编写代码的样式规则。不同的程序员，往往有不同的编程风格。有人说，编译器的规范叫做“语法规则”（grammar），这是程序员必须遵守的；而编译器忽略的部分，就叫“编程风格”（programming style），这是程序员可以自由选择的。这种说法不完全正确，程序员固然可以自由选择编程风…
对js中执行环境、作用域和作用域链的理解越是学习js越是觉得js基础理论知识是多么的重要，所以最近花了比较多的时间去学习，并把学习所得之感悟记录下来，以加深自己的理解，同时也供将来自己复习所用。写的不对的地方还烦请各位大神指出，非常乐意跟各位同道中人交流。 1、执行环境 2、作用域 3、变量对象 1、执行环境执行环境是指…
css魔法——左边竖条的实现方法问题描述：在只使用一个标签的情况下实现左边竖线通用标签与样式如下：html: <div class=”div1″>实现左边竖线</div> css: {代码…} 方法一：使用border .div1 { border-left: 5px solid red;} 方法…
GitHub 上的各大高校资料以及国外公开课视频 2019 第 37 篇文章，总第 61 篇文章本文大约 1800 字，阅读大约需要 5 分钟最近发现兴起了一股在 Github 上大学的潮流，目前可以选择的大学包括清华、北大、上海交通大学、中国科学技术大学、中山大学，然后今天还发现还可以选择上国外的名牌大学，包括斯坦福、麻省理工等。 …
15个最好用的JavaScript代码压缩工具 JavaScript 代码压缩是指去除源代码里的所有不必要的字符，而不改变其功能的过程。这些不必要的字符通常包括空格字符，换行字符，注释以及块分隔符等用来增加可读性的代码，但并不需要它来执行。在这篇文章中，我们选择了15个最好用的 JavaScript 压缩工具，有简单的在线转换器，GUI工具和命令行界面等。 1. JavaSc…
到底什么是 Node.js Node.js 是一个 JavaScript 运行时环境。听起来不错，但这意味着什么？这是如何运作的？ Node 运行时环境包含着执行 JavaScript 所编写的程序所需的一切。 Java 和 Node.js 的类比当 JavaScript 的开发者，将 JavaScript 从浏览器开发拓展到本地计算机上开发时，Node.js 就出现了。现在，您可以使用 JavaS…
js实现音频模拟信号转数字信号前篇文章也讲了如何通过webrtc中的getUserMedia()方法获取音频的模拟信号，接下来，我们就将这些模拟信号转为数字信号。模拟信号什么是模拟信号呢？非通信专业的我，引用来自维基百科的一段话：模拟信号（英语： Analog Signal ），是指在时域上数学形式为连续函数的信号。（时域是描述数学函数或物理信号对时…
Web 性能优化：Preload,Prefetch的使用及在 Chrome 中的优先级这是 Web 性能优化的第 6 篇，上一篇在下面看点击查看： Web 性能优化：使用 Webpack 分离数据的正确方法 Web 性能优化：图片优化让网站大小减少 62% Web 性能优化：缓存 React 事件来提高性能 Web 性能优化：21…
JavaScript 七大继承全解析上一篇文章《从感性角度谈原型 / 原型链》介绍了什么是原型和原型链。我们简单回忆一下构造函数、原型、原型链之间的关系：每个构造函数有一个 prototype 属性，它指向原型对象，而原型对象都有一个指向构造函数的指针 constructor ，实例对象都包含指向原型对象的内部指针 ] 。如果我们让原型对象等于另…
Web Components 的高级工具原文地址： Advanced Tooling for Web Components 原文作者：Caleb Williams 译文出自：掘金翻译计划本文永久链接： github.com/xitu/gold-m… 译者： Xuyuey 校对者： Long Xiong , Ziyin Feng 该系列由 5 篇文章构成，我…
Promise (1) 初步接触最近看了《javascript Promise迷离书》，对Promise的理解颇有加深。那么就从总结Promise开始吧。 1 什么是Promise? 抽象描述： Promise 是一个规范，提供了一套定义用来与一个可能会在任意时刻完成或失败的异步过程的结果对象交互的接口。( Promise提供了一套接口，用来与异步过程的结果的对象交互。这样读着…
由webpack引发的前端自动化讲解纪念第一次讲课，纪念 avepont ,纪念长春,纪念俩年前青涩的自己，纪念windows 对NODE的误解 NODE 肯定是几个前端工程师在实验室里捣鼓出来的。为了后端而后端，有意思吗？怎么又发明了一门新语言？ javascript 承担的责任太重了直觉上，JavaScript不应该运行在后端前端工程师要逆袭了 …
js中sort方法的排序问题及localecompare方法让我们来看一个例子： var arr = ; arr.sort(); // arr.sort(function(a,b){ return a-b; }) // 复制代码这个结果让我很疑惑，上面的代码第一个sort没有按照数值的大小对数字进行排序,而第一个sort就是我们就要的结果。查了下资…
入手vue-cli 3.x注：vue-cli需要要8.9+版本，我使用的n模块，进行node版本管理。因为之前曾经安装2.x版本所以先执行卸载
从零开始搭建一个 React + Mobx + React Router 脚手架本文详细介绍了如何从零开始搭建一个 React 开发的脚手架，包含如何添加 Redux 以及 React Router 的环境。本文代码地址： react-mobx-starter 。建议将代码拉下来之后，配合本文一起查看，效果更佳。代码下载命令： git clone https://github.com/beichensky/react-mobx-starter.git 复制代码一、前情…
实现 VUE 中 MVVM – step3 – Watcher 在 step2 中，我们实现了一个管理依赖的 Dep ，但是仅仅使用这个类并不能完成我们想实现的功能，而且代码的解耦上也有点小问题。以下是在 step2 中最后说的几个问题：解耦不完全，需要传递参数没有地方可以移除依赖考虑问题第一个问题显示出来一个问题，由于我们的依赖是函数，为了函…
实现 VUE 中 MVVM – step2 – Dep 在上一篇我们大概实现了， Vue 中的依赖收集和触发，但我们仅仅是将依赖维护在一个内置数组中，这样做虽然容易理解，但毕竟不好维护，为了更容易的维护这些依赖，我们来实现一个维护依赖的类。确定功能首先我们可以先确定这个类下的属性，以及一些功能：类下属性： target 函数，用…
Node.js 应用故障排查手册 —— 大纲与常规问题指标简介你是否想要尝试进行 Node.js 应用开发但是又总听人说它不安全、稳定性差，想在公司推广扩张大前端的能力范畴和影响又说服不了技术领导。
#开源项目#【React 响应式图像裁剪工具：React Image Crop】详见： React Image Crop 是一款响应式图像剪裁工具，它具备轻量、无依赖、响应式、支持触控等特性。
状态 Hook (React) 背景在 Hook 出现之前，为实现一个计数器的功能，我们最常用的做法是在react class 的构造函数中声明一个 count的状态变量，然后通过在点击事件中调用 this.setState 方法对 count 进行递增操作。案例代码如下： 1class Example extends React.Component { 2 &nb…
2019 西湖论剑 Web wp 2019西湖论剑线上赛 Web wp。除了最后一道原题没时间做，其他都弄出来了。 Web Web 1 猜猜 flag 在哪 Description NULL 题目地址：http://ctf1.linkedbyx.com:10122 Hacking 扫目录发现有 .DS_Store 文件，发现 http://ctf1.linkedbyx.com:10122/e10adc3949ba59abbe56e057f20f883e 目录下有 gi…