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

JavaScript 原型链污染；大前端时代下的微前端架构：实现增量升级、代码解耦、独立部署；Node.js进阶之进程与线程；使用JavaScript的一些小技巧；vue核心原理学习；Webpack介绍和使用(配置环境变量，打包依赖)；[vue中使用typescript] 超实用教程；用Vue.js在浏览器中裁剪图像[每日前端夜话0x86]

JavaScript 原型链污染原型 JavaScript 是一门面向对象的语言，但是在 ES6 之前，JavaScript 中没有 class 语法。不过在它的构造函数（ constructor ）就相当于类，通过构造函数，我们可以生成实例化的对象。 function Cat() { this.color = ‘orange’ } var cat = new Cat() console.log(cat.color) // orange prototype …
大前端时代下的微前端架构：实现增量升级、代码解耦、独立部署想做好前端很难，做出可扩展的前端，从而让多个团队可以同时投身于一项复杂的大型产品项目就更难了。本文将介绍前端领域最近的一项变革：单体前端架构正在过渡到许多较小、较易管理的前端架构。我们还会展示这种新的体系结构怎样提升前端团队的效率和表现。除了讨论这种新趋势的好处与代价外，我们还将介绍一些可行的实…
Node.js进阶之进程与线程进程与线程在服务端研发中是一个非常重要的概念，如果您在学习的时候对这一块感到混乱或者不是太理解，可以阅读下本篇内容，本篇在介绍进程和线程的概念之外，列举了很多 Demo 希望能从实战角度帮助您更好的去理解。作者简介：五月君，Nodejs Developer，热爱技术、喜欢分享的 90 后青年，公众号 “Nodejs技术栈”，Gi…
使用JavaScript的一些小技巧任何一门技术在实际中都会有一些属于自己的小技巧。同样的，在使用JavaScript时也有一些自己的小技巧，只不过很多时候有可能容易被大家忽略。而在互联网上，时不时的有很多同行朋友会总结（或收集）一些这方面的小技巧。作为一位JavaScript的菜鸟级的同学，更应该要留意这些小技巧，因为这些小技巧可以在实际业务的开发…
vue核心原理学习最近想深入了解一下vue.js（后面简称vue）的核心原理，无意中看到了一个用于学习vue原理的项目。在深入了解之后，发现它短小精悍，对于渐进式地了解vue的核心原理的实现大有帮助，于是乎就正式开始了对它探索之旅。概念概念代表着人类意识上的共识。所以，要想通过沟通交流来产生一些成果，对同一个概念达成共…
Webpack介绍和使用(配置环境变量，打包依赖) webpack介绍和使用 webpack是一个前端模块化打包工具，它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。主要由入口，出口，loader，plugins四个部分。 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端…
[vue中使用typescript] 超实用教程 VueConf ，尤大说， Vue 支持 Ts 了，网上关于 Vue + Ts 的资料有点少，楼主踩了一个星期坑，终于摸明白了修饰器的玩法，下面我们就来玩下 Vue 的 decorator 吧 1，data 值的声明在这里 public 声明的是公有属性， private 声明的是私有属性，私有属性要带下划线蓝色框里的内容是声明组件，在每个…
用Vue.js在浏览器中裁剪图像[每日前端夜话0x86] 每日前端夜话 0x86 每日前端夜话，陪你聊前端。每天晚上18:00准时推送。正文共：1557 字预计阅读时间： 5 分钟作者：Nic Raboy 翻译：疯狂的技术宅来源： logrocket Cropping Images In The Browser With Vue.js 你是否写了一个需要接受用户上传图片…
Vue parse之从template到astElement 源码详解在紧张的一个星期的整理，笔者的前端小组每个人都整理了一篇文章，笔者整理了 Vue编译模版到虚拟树的思想这一篇幅。建议读者看到这篇之前，先点击这里预习一下整个流程的思想和思路。本文介绍的是Vue编译中的parse部分的源码分析，也就是从template 到 astElemnt的解析到程。正文从笔者的Vue编译思想详解一…
vue-router导航守卫进阶&源码实现前端路由实现起来其实很简单，本质就是监听URL的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。vue-router共有三种守卫，分别是全局守卫、路由独享守卫、组件内的守卫。导航守卫全局守卫你可以使用 router.beforeEach 注册一个全局前置守卫： ep:设置全局守卫，如果进入about页，没有登陆则重定向…
一起学习NodeJs的模块化原文 github 地址戳这里： github.com/wangkaiwd/n… 在介绍之前，我们可以先简单了解一下 javascript 的模块化历程 javascript 模块化 AMD ： Asynchronous Module Definition CMD : Common Module Definition UMD : Universal Module Definition CommonJS : Node 采用该模块化方式 …
#开源项目#【基于 HTML5 的文件保存插件：FileSaver.js】详见：工作中有时需要通过 JavaScript 保存文件到本地，那么 FileSaver.js 就能助你一臂之力。 FileSaver.js 是一个基于 HTML5 的浏览器端文件保存插件，能够帮助你直接从网页中导出多种格式文件，支持目前主流浏览器。
前端性能优化之 JavaScript 前端性能优化之 JavaScript 前言本文为《高性能 JavaScript》读书笔记，是利用中午休息时间、下班时间以及周末整理出来的，此书虽有点老旧，但谈论的性能优化话题是每位同学必须理解和掌握的，业务响应速度直接影响用户体验。一、加载和运行大多数浏览器使用单进程处理 UI 更新和 JavaScript 运行等多个…
深入剖析Vue源码 – 响应式系统构建(上) 从这一小节开始，正式进入 Vue 源码的核心，也是难点之一，响应式系统的构建。这一节将作为分析响应式构建过程源码的入门，主要分为两大块,第一块是针对响应式数据 props,methods,data,computed,wather 初始化过程的分析，另一块则是在保留源码设计理念的前提下，尝试手动构建一个基础的响应式系统。有了这两个基础内…
JavaScript函数之参数解析作者：一介书生@毛豆前端在JavaScript世界中函数是一等公民，它不仅拥有一切传统函数的使用方式（声明和调用），而且可以做到像简单值一样赋值、传参、返回，这样的函数也称之为第一级函数（First-class Function）。不仅如此，JavaScript中的函数还充当了类的构造函数的作用，同时又是一个Function类的实例(instance…
让NodeJS在你的项目中发光发热近些年来借着NodeJS的春风，前端经历了一波大洗牌式得的发展。使得前端开发在效率，质量上有了质的飞跃。可以说NodeJS已经是前端不可欠缺的技能了。但是是事实上大部分的前端对于本地安装的NodeJS的使用可能仅限…
前端面试问题整理第一部分首先overflow的常用属性：visible/hidden/scroll/auto/inherit white-space:pre/pre-wrap/nowrap/pre-line/inherit； <style type="text/css"> .ellipsis{ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } </style> &l…
配置Typescript、ESLint并支持polyfill踩坑指南最近在搞一个公司用的插件开发环境，环境是以TypeScript+Webpack+ESlint+Sass并支持polyfill为基础进行配置的但是在配置的过程中TypeScript与其他工具的配合上总会出现一些坑，而这些坑是我翻了很多国外论坛、知乎提问、去github仓库找到两年前的issue才解决的，所以在此记录分享一下，希望可以帮助需要的人躲避这些坑…
chrome插件开发 – github仓库star趋势图这天，在逛github（就是划水）的时候，突然想看看某个仓库的star走势，但是在star列表中翻了半天愣是没找到相应的功能。于是乎，谷歌一搜，发现有个叫Star History的谷歌插件，然而竟然要收费。。。
前端实现设置缓存数据定时失效在项目开发中，我们可以写一个公用的方法来进行存储的时候加上时间戳 export function setLocalStorageAndTime (key, value) { window.localStorage.setItem(key, JSON.stringify({ data: value, time: new Date().getTime() })) } 复制代码项目中应用存储 // 有数据再进行存储 setLocalStorageAndTime(‘XX…
React性能测量和分析上一篇文章讲了 React 性能优化的一些方向和手段，这篇文章再补充说一下如何进行性能测量和分析, 介绍 React 性能分析的一些工具和方法. 进行任何性能优化的前提是你要找出’性能问题‘，这样才能针对性地进行优化。我觉得对于 React 的性能优化可以分两个阶段: 1. 分析阶段通过分析器(Profiler)找出…
提升90%加载速度——vuecli下的首屏性能优化之前用vuecli做了个博客，是一个单页面项目，大概有十个路由直接npm run build打包出来，有一个1M的巨大js文件
用webpack4.0撸单页/多页脚手架(jquery,react,vue,typescript) 1.导语首先来简单介绍一下webpack：现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个会映射项目所需的每个模块的依赖图(dependency graph)，并生成一个或多个 bundle 。webpack4.0出现之后，我们可以不用再引入一个配置文件来打包项目，并且它仍然有着很…
说说JavaScript中函数的防抖 (Debounce) 与节流 (Throttle) 为何要防抖和节流有时候会在项目开发中频繁地触发一些事件,如 resize 、 scroll 、 keyup 、 keydown 等，或者诸如输入框的实时搜索功能，我们知道如果事件处理函数无限制调用，会大大加重浏览器的工作量，有可能导致页面卡顿影响体验；后台接口的频繁调用，不仅会影响客户端体验，还会大大增加服务器的负担。而…
从渲染原理谈前端性能优化这句话来自《web性能权威指南》，我一直很喜欢，而本文尝试从浏览器渲染原理探讨如何进行性能提升。全文将从网络通信以及页面渲染两个过程去探讨浏览器的行为及在此过程中我们可以针对那些点进行优化，有些的不足…
试读angular源码第四章：angular模块及JIT编译模块官方介绍 NgModule 是一个带有 @NgModule 装饰器的类。 @NgModule 的参数是一个元数据对象，用于描述如何编译组件的模板，以及如何在运行时创建注入器。它会标出该模块自己的组件、指令和管道，通过 exports 属性公开其中的一部分，以便外部组件使用它们。 NgModule 还能把一些服务提供商添加到应用的…
5种处理Vue异常的方法去年一整年，我都在使用最爱的—Vue.js— 来做项目。最近突然意识到，我竟然从来没有认真去处理异常。我可以自恋地说：”我写的代码是完美的，没有BUG。” 我相信大家都明白这是迷之自信。最近，我花了不少时间研究了…
JS 中为啥 [‘1’, ‘7’, ’11’].map(parseInt) 返回 [1, NaN, 3]Javascript 一直是神奇的语言。不相信我？尝试使用map和parseInt将字符串数组转换为整数。打开 Chrome 的控制台(F12)，粘贴以下内容，然后按回车，查看输出结果：
异步操作 Promise,then/catch,async/await ajax 异步操作的原理：执行到需要的异步操作，会开始执行异步操作，不等执行完直接开始执行操作后面的语句，等语句执行完全再去看异步操作是否执行完成，完成就返回完成，没有就继续执行异步。常用的异步请求操作 const promise = new Promise(function(resolve, reject) { // … 请求代码 if (/…
如何使用Web Share APIWeb Share API 自从它首次在Android 版 Chrome 61中推出以来，似乎已经不再受到关注。从本质上讲，它提供了一种方法，可以直接从网站或 Web 应用中共享内容（例如链接或联系人卡片）时触发设备（如果使用 Safari …