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

封装Vue组件的一些技巧；可用于下一个项目的9个Node.JS框架；前端面试必杀技：原型、原型链以及继承（一张图搞定面试）；手写JavaScript常用的函数；使用TypeScript两年后-值得吗？；JS闭包:For循环中的setTimeout；LeetCode 之 JavaScript 解答第150题 —— 逆波兰表达式求值；【入门指南】node.js

封装Vue组件的一些技巧本文同步在个人博客shymean.com上，欢迎关注写Vue有很长一段时间了，除了常规的业务开发之外，也应该思考和反思一下封装组件的正确方式。以弹窗组件为例，一种实现是在需要模板中引入需要弹窗展示的组件，然后通过一个flag变量来控制弹窗的组件，在业务代码里面会充斥着冗余的弹窗组件逻辑，十分不优雅。本文整…
可用于下一个项目的9个Node.JS框架 Node.js Node.js由Ryan Dahl于2009年创建。它是一个开源的跨平台运行时环境，用于开发服务器端和网络应用程序，它是基于Google Chrome V8 JavaScript引擎构建的。它允许您使用Node.js中的JavaScript执行使用Ruby或PHP可以执行的所有操作。为什么开发人员喜欢Node.js？这是开发人员选择Node.js开发应用程序的原因…
前端面试必杀技：原型、原型链以及继承（一张图搞定面试）什么是对象多个数据（属性）的集合；用来保存多个数据（属性）的容器；属性组成属性名：字符串（标识）；属性值：任意类型；属性的分类：一般：属性值不是function，描述对象的状态；方法：属性值为function的属性，描述对象的行为； …
手写JavaScript常用的函数一、bind、call、apply函数的实现改变函数的执行上下文中的this指向，但不执行该函数(位于Function构造函数的原型对象上的方法) Function.prototype.myBind = function (target) { if (typeof this !== ‘function’) { throw Error(‘myBind is not a function’) } var that = this var args…
使用TypeScript两年后-值得吗？这是我的第一篇翻译文章，想看这篇文章的时候，发现没有中文翻译版，无奈去读了英文版，读完发现可以试试翻译出来。
JS闭包:For循环中的setTimeout 译者：嘴里起了个泡原文地址： wsvincent.com/javascript-… 这篇文章详细介绍了JS在执行for循环里面的 setTimeout() 语句的时候发什么了什么。这是面试中经常会被问到的一个问题，因为这个问题的答案涉及到了几个JS的核心知识点：闭包（closures），提升（hoisting）和事件循环（the event loop）。 For…
LeetCode 之 JavaScript 解答第150题 —— 逆波兰表达式求值 Time：2019/4/14 Title: Evaluate Reverse Polish Notation Difficulty: Medium Author:小鹿题目：Evaluate Reverse Polish Notation Evaluate the value of an arithmetic expression in Reverse Polish Notation . Valid operators are + , – , * , / . Each operand may be …
【入门指南】node.js node.js不是一种独立语言，是一个可以让js在服务器端运行的平台区别与传统语言平台依靠多线程来实现高并发的设计思路，node采用单线程、异步式I/O、事件驱动式的程序设计模型 node.js使用的JavaScript引擎为V8引擎，还使用了高效的 libev 和 libeio 库支持事件驱动和异步式 I/O 来代替传统平台的多线程模式，带…
Vue的mergeOptions函数分析-上 Vue的mergeOptions函数的主要作用是用于合并选项(将俩个选项对象合并成一个)，它是用于实例化和继承的核心函数。这也是为什么我们要去分析它。并且与函数相关的选项合并策略也都在一个文件里，定义在 /src/core/util/options.js 文件中。使用场景因为Vue的核心代码都是放在src文件夹下，所以我们可以在src目录下…
从基础到实战手摸手带你掌握新版Webpack4.0详解知识点概览： Loader，HMR ,Create React App, Caching, Plugin, SourceMap,Vue Cli 3.0 ,Shimming, WebpackDevServer,TreeShaking, CodeSplitting, Babel, React , Library, Eslint ,PWA, Vue, Mode,性能优化,多页应用,原理, PreLoading, PreFetching ,环境变量,TypeScript 收获：彻底学会Webpack的配置理解 We…
理理Vue细节 <!– 属性name –> <a : ="url"> … </a> <!– 计算属性sss和s –> <img : ="/img/test.png"/> <!– 方法change1和change2 –> <img : ="change2()"/> data: { name: ‘href’, sss: ‘src’ } 复制代码注意：…
你真的了解npm-scripts吗？作者：冯伟尧 GitHub： tank0317 我们都很熟悉的，通过 npm run script-name 可以执行 package.json 中 scripts 对象配置的脚本。但是，你或许不知道下面这些知识。下文中 npm-scirpt 指 package.json scripts 中配置的脚本命令。 name-scirpt 指代某一个名字为 name 的脚本命…
[Vue.js进阶]从源码角度剖析Vue的生命周期使用Vue在日常开发中会频繁接触和使用生命周期,在官方文档中是这么解释生命周期的: 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的…
JavaScript中创建对象的几种方式一般情况下，JS中创建对象的方式可以用构造函数Object或者对象字面量的方式，但需要创建几个具有相同属性或方法的对象时，就得写大量的冗余代码。故而出现了下述几种创建对象的方法。一、工厂模式工厂模式是一种常见的设计模式。这种模式把对象的创建过程抽象出来并封装成一个函数。需要使用同类型的对象时，可以…
浏览器事件循环（结合vue nextTicket）同步：就是在执行栈中（主线程）执行的代码异步：就是在异步队列（macroTask、microTask）中的代码简单理解区别就是：异步是需要延迟执行的代码线程和进程进程：进程是应用程序的执行实例，每一个进程都是由私有的虚拟地址空间、代码、数据和其它系统资源所组成；进程在运行过程中能够申请创建和使…
VUE学习笔记：环境准备 Node是JavaScript语言的服务器运行环境。所谓“运行环境”有两层意思：首先，JavaScript语言通过Node在服务器运行，在这个意义上，Node有点像JavaScript虚拟机；其次，Node提供大量工具库，使得JavaScript语言与操作系统互动（比如读写文件、新建子进程），在这个意义上，Node又是JavaScript的工具库。 Node内部采用G…
理解 JavaScript 中的循环 type: FrontEnd title: Understanding the For…of Loop In JavaScript link: https://blog.bitsrc.io/understanding-the-for-of-loop-in-javascript-8aded97d7ef8 author: kurtwanger40 在JavaScript的世界中，我们可以使用很多种循环表达式： while表达式 do…
TypeScript：面向编辑器编程 TypeScript 写久了，越来越觉得定义各种类型，接口啊其实都是在写编辑器自动提示的配置而已。而且现在 ts 的各种高级类型越来越多，整个类型系统甚至可以看作是一套函数式工具库。用它不难，用好它其实挺难的，其中的差别我觉得就像前端从面向 dom 的编程和转变为面向数据驱动编程那样，你得首先有类型思维，因为它一定…
细说javascript的constructor和prototype constructor 是每个实例对象都会拥有的一个属性，而且这个属性的实在意义在于一个指针，它指向了创建当前这个实例对象的类。 function Person() {} let p = new Person(); // ƒ Person() {} console.log(p.constructor); 复制代码控制台打印结果可以看出， p.constructor 指向的是 Person 对象，后面会详解 new…
webpack4配置(1)-打包一个js文件 npm install == npm i npm install –save == npm i -S npm insall –save-dev == npm i -D 两者的区别：-D只在开发环境中使用，如loader,babel等；-S在生产环境和开发环境中都要使用，如Vue,jquery等。配置流程新建一个空项目，然后初始化 npm init 然后会生成一个package.json文件 …
实现 VUE 中 MVVM – step9 – Vue 激动人心的时候即将来临，之前我们做的 8 步，其实都在为这一步打基础，这一步，我们来简单实现一个 Vue 对象，还没有看过之前代码的同学，请确认看过之前的文章。主要实现内容我们从测试代码入手，来看我们这个 Vue 实现了什么，然后在根据要实现的内容来编写这个 Vue 对象： let test = new …
【周刊-2】三年大厂面试官-前端面试题披露（偏难）在阿里和腾讯工作了6年，当了3年的前端面试官，把阿里和腾讯常问的面试题与答案汇总在我的Github中。希望对大家有所帮助，助力大家进入自己理想的企业。
js模块化发展历程 js作为一个非主流语言发展到现在如此热门的语言，一定经历了很多的变迁，我们从模块化方面来了解下js的发展。直接定义这时候的前端也没有模块化的概念，当然js文件之间也没有太多的束缚，只是简单的堆砌script标签，没有全局变量与局部变量的概念，定义的变量都是全局的。因此很容易出现，b文件改了a文件中的变量…
web uploader 上传大文件总结由于业务需要，需要上传大文件，已有的版本无法处理IE版本，经过调研，百度的 webuploader 支持 IE 浏览器，而且支持计算MD5值，进而可以实现秒传的功能。
精读《Scheduling in React》1. 引言这次介绍的文章是 scheduling-in-react，简单来说就是 React 的调度系统，为了得到更顺滑的用户体验。毕竟前端做到最后，都是体验优化，前端带给用户的价值核心就在于此。 2. 概述文章从 Dan 在 JSConf…
【一篇文章读懂HTTPS及其背后的加密原理】HTTPS（全称： Hypertext Transfer Protocol Secure，超文本传输安全协议），是以安全为目标的HTTP通道，简单讲是HTTP的安全版。本文，就来深入介绍下其原理。详见（来自：Hollis）
#开源项目#【Block 风格开源编辑器：Editor.js】详见： Editor.js 是一款全新的 Block 风格编辑器。它能够通过 JSON 输出清晰的数据，并具备简单的 API、可扩展、可插拔等特性。
#前端技术#【前端开发手册 2019】详见：一本任何人都可以了解前端开发的实践指南。它将系统的概述前端工程实践，帮助你了解前端开发，以及在 2019 年需要使用哪些开发工具。
如何将使用了store的Vue业务组件复用之前公司业务做了一个审核功能，业务数据和状态比较复杂，当初做的时候用上了 Vuex store 进行数据交互，最近新上了基于审核功能页面模板的需求，依照其模板开发不同的功能（不同菜单入口，模板相同，只有 api不相同），在改造的过程中遇到了 store 组件如何进行复用的问题。问题审核系统是可以菜单多开的，…
2019前端工程师自检清单与思考对于JavaScript，掌握其语法和特性是最基本的，但是这些只是应用能力，最终仍旧考量仍然是计算机体系的理论知识，所以数据结构，算法，软件工程，设计模式等基础知识对前端工程师同样重要，这些知识的理解程度，…
认识 rxjs 中的 Subject 原文链接： Understanding rxjs Subjects 原文作者：Luuk Gruijs；发表于2018年4月17日译者： yk ；如需转载，请注明出处，谢谢合作！ RxJS 是真的好用，它可以帮助我们更好地编辑/订阅数据流。虽然单用 Observable（可观察对象）就可以做很多事情，但 RxJS 还是提供了多种用于操控数据流的类，Subject（…