20190408 前端开发周报-前端开发博客

面试官：前端跨页面通信，你知道哪些方法？；头条前端实习岗凉经有感；JavaScript中的算法（附10道面试常见算法题解决方法和思路）；面试官：react和vue有什么区别吗？；VUE 9个性能优化秘密？（vue-9-perf-secrets）；为什么 Node 是小菜前端团队的核心技术栈；pika 开源：替代 WebPack 的全新 JS 构建工具；你真的懂JavaScript基础类型吗

面试官：前端跨页面通信，你知道哪些方法？在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。
头条前端实习岗凉经有感虽然自己是计科院的学子，虽然接触前端已经一年半+，虽然系统复习理论知识体系已经一个月+，虽然又花了两周时间专门针对网上各种面经不难其烦的梳理，虽然有跟着大佬偷偷窃取头条面试第一手情报，奈何自己真的是太菜了还是被吊起来打！偷偷记个小本本，回顾一下面试时自己是多么愚钝，主要为了记录下自己面试时的心路历…
JavaScript中的算法（附10道面试常见算法题解决方法和思路）面试过程通常从最初的电话面试开始，然后是现场面试，检查编程技能和文化契合度。几乎毫无例外，最终的决定因素是还是编码能力。通常上，不仅仅要求能得到正确的答案，更重要的是要有清晰的思维过程。写代码中就像在生活中一样，正确的答案并不总是清晰的，但是好的推理通常就足够了。有效推理的能力预示着学习、适应和…
面试官：react和vue有什么区别吗？大家好呀，清明节这两天有没有出门踏青扫墓呢！！！言归正传，这是作者面试系列的第二篇文章！！！！！！！ react和vue是什么？有啥区别吗？三大框架之二，大家应该都不会陌生，都有学习过或者开发中使用。但是他们到底有啥区别呢？这个就是我们这篇文章所需探讨并学习的。开始！ MVC 和 MVVM 首先，…
VUE 9个性能优化秘密？（vue-9-perf-secrets） GitHub . Demo 栗子 Functional components Child component splitting Local variables Reuse DOM with v-show Keep alive(DOM-Reusing Router View) Deferred features Vuex demo 源代码中有个 Static 被注释，没有达到作者的优化效果。吃栗子栗子中都分别…
为什么 Node 是小菜前端团队的核心技术栈著作权归作者所有。商业转载请联系 Scott 获得授权，非商业转载请注明出处。 Scott 近两年无论是面试还是线下线上的技术分享，遇到许许多多前端同学，由于团队原因，个人原因，职业成长，技术方向，甚至家庭等等原因，在理想国与现实之间，在放弃与坚守之间，摇摆不停，心酸硬抗，大家可以找…
pika 开源：替代 WebPack 的全新 JS 构建工具在过去几年中，JavaScript 打包已经从一种生产环境优化手段演变成几乎所有 Web App 都必不可少的构建步骤。不管你喜欢与否，打包器已经给 Web 开发带来了巨大的复杂性，这是个不争的事实。为什么要进行打包？现在的 JavaScript 打包概念可以追溯到很早以前（大约 6 年前），那个时候我们通常会对 JavaScript 文件…
你真的懂JavaScript基础类型吗夯实Javascript基础。基本类型有六种： null，undefined，boolean，number，string，symbol。基本类型的值是保存在栈内存中的简单数据段基础类型特性基础类型最重要的特性基础类型是不变的因此：基础类型没有splice，sort之类的直接改变变量的方法强行改变…
前端核心代码保护技术面面观 V2EX › 程序员前端核心代码保护技术面面观 zyEros · 1 小时 38 分钟前 · 367 次点击 1、前言 Web 的开放与便捷带来了极高速的发展，但同时也带来了相当多的隐患，特别是针对于核心代码保护上，自作者从事 Web 前端相关开发的相关工作以来，并未…
JavaScript大师必须掌握的12个知识点译者按：前端技术涉及的越来越多！原文: 10 things to learn on the way to becoming a JavaScript Master 译者: Fundebug 为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习…
“上班 996，生病 ICU”？来自 GitHub 的群嘲（给IT一刻钟加星标，可以迎娶白富美）微信公众号：IT一刻钟大型现实非严肃主义现场一刻钟与你分享优质技术架构与见闻，做一个有剧情的程序员关注可第一时间了解更多精彩内容，定期有福利相送哟。近日，在Github上出现了一件火热的事情，有人在上面创建了一个名为996.ICU的项目，…
来了老弟，最简单的Promise原理 Promise 是一种异步编程的解决方案，通过链式调用的方式解决回调地狱。作为前端面试中的考点，也是前端的基本功，掌握其原理是非常重要的。本次分享就从 Promise 的使用方式上出发，一步一步剖析其原理，最后帮助大家封装出自己的 Promise 。注：如果你还不了解 Promise ，建议点击这里学习 Promise 的基本使用语法…
使用 nodejs 写爬虫(二): 抓取 github 热门项目其实爬虫是一个对计算机综合能力要求比较高的技术活。首先是要对网络协议尤其是 http 协议有基本的了解, 能够分析网站的数据请求响应。学会使用一些工具，简单的情况使用 chrome devtools 的 network 面板就够了。我一般还会配合 postman 或者 charles 来分析，更复杂的情况可能举要使用专业的抓包工具比如 wireshar…
前端异步解决方案-2（发布/订阅模式）；什么是发布订阅模式我这里不多就不多阐述了，给大家提供几个我觉得讲的比较好的博文，请各位自行阅读发布-订阅模式解释这一篇文章应该是一个java coder写的，但是设计模式这种东西并不分语言，各位可以借鉴一下J…
基于vue实现web端超大数据量表格一、整体思路 1.思路来源最近工作比较忙好久没写文章了，有一丢丢不知道如何写起了，那就先说说我是为什么要开发本文的组件把。公司有一个定位系统，基本上来说一个定位单位一分钟或者更短就会有一个定位点，这样一天下来就会有很多定位点了，如果表格想要一下子放一天甚至三天的数据，那么数据量将会特别大（可能…
前端工程化: 脚手架+物料库快速生成新项目美团有乐高, 京东有通天塔,阿里有飞冰,大厂都在尝试用自动化工具减少人工,看完这一篇,考虑给你的团队搭建一套自动化开发工具吧! 一、背景笔者所在公司并非大厂, 发现一些痛点. 1.前端研发跟随业务, 不同部门技术栈五花八门, 同岗位支援困难.( react | vue | seek.js), 2.规范不统一, 跨部门开项目, 编辑器一片…
2019，开发者应该学习的16个JavaScript框架来源 | 愿码(ChainDesk.CN)内容编辑愿码Slogan | 连接每个程序员的故事网站 | [链接] 愿码愿景 | 打造全学科IT系统免费课程，助力小白用户、初级工程师0成本免费系统学习、低成本进阶，帮助BAT一线资深工程师成…
关于在VUE里面使用swiper的方法 swiper是常用的轮播插件，提供了大量的API可以满足我们大量在开发中遇到的轮播需求。 Official Website: https://www.swiper.com.cn 现在swiper的最新版本为4.5.X 官方在使用方法上，只提供了以前我们常用的<link rel="stylesheet" href="dist/css/swiper.min.css">方式引用。而我们…
除了996 ICU，GitHub上还有哪些奇葩的项目？GitHub是一个面向开源及私有软件项目的托管平台，因为只支持git 作为唯一的版本库格式进行托管，故名GitHub。是全球最大的同性交友网站，哦不，最大的程序员交流网站。
前端工具类项目规范化-使用TS TypeScript 是微软开发一款开源的编程语言，本质上是向 JavaScript 增加静态类型系统。它是 JavaScript 的超集，所有现有的 JavaScript 都可以不加改变就在其中使用。它是为大型软件开发而设计的，它最终编译产生 JavaScript，所以可以运行在浏览器、Node.js 等等的运行时环境。 TS能做什么首先TS的定位是静态类型…
如果Node.js已具备反向代理的功能，我为什么要使用反向代理？这一年是2012年.PHP和Ruby on Rails作为渲染Web应用程序的最高服务器端技术而备受瞩目。但是，一个大胆的新竞争者掀起了一场风暴 – 一个能够处理1M并发连接的人。这项技术不过是Node.js，从那以后一直稳步增长。与当时大多数竞争技术不同，Node.js内置了一个Web服务器。拥有这个服务器意味着开发人员可以绕过无数的…
Vue-CLI 3.x 自动部署项目至服务器平时部署前端项目流程是：先部署到测试环境ok后再发布到生产环境上，部署到测试环境用 xshell 连上服务器，然后用 xftp 连接服务器，然后本地 build 项目，接着把 build 好的文件通过 xftp 上传到服务器上，整个…
LeetCode 之 JavaScript 解答第一题 —— 两数之和（Two Sum） Given an array of integers, return indices of the two numbers such that they add up to a specific target.You may assume that each input would have exactly one solution, and you may not use the same element twice. 问题：给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为…
3 个概念，入门 Vue 组件开发 “组件”是 Vue 中比较基础的概念，但我发现，许多同学对 Vue 组件的概念和由来并不是清楚。因此，我希望通过这个专题，带大家换个角度来分析，最终让大家更清楚组件开发。首先，我们先不谈组件，我想问大家一个问题：我们平常用任何编程语言写方法（method）的时候，当一个方法里的逻辑过多时，我们会怎么办？当多…
CSS文本溢出文本溢出单行显示 {代码…} 文本溢出多行显示 {代码…}
Why should I use a Reverse Proxy if Node.js is Production-Ready? Why should I use a Reverse Proxy if Node.js is Production-Ready? Thomas Hunter II BlockedUnblockFollowFollowing Mar 28 The year was 2012. PHP and Ruby on Rails reigned as the supreme server-side technologies for rendering web applications. But, a bold new contender took the community by s…
可能是最被误用的 HTTP 响应头之一关于 “ must-revalidate”。
一些常用的前端开发资源个人整理的一些常用前端开发资源，有事没事多看看，日后不断更新 css技巧 Flex布局阮一峰 [链接] 巧用margin/padding的百分比值实现高度自适应 [链接] 最全Html与CSS布局技巧 [链接] h5开发 css小技巧[链接] 移…
使用 nodejs 写爬虫(-): 常用模块介绍和前置JS语法本篇是使用 nodejs 写爬虫系列教程的第一篇, 介绍了使用 nodejs 写爬虫过程中常用的模块和一些必须掌握的 js 语法常用模块常用模块有以下几个: fs-extra superagent cheerio log4js sequelize chalk puppeteer fs-extra 使用 async/await 的前提是必须将接口封装成 …
Promise 对象的理解Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了 Promise 对象。
javascript中初始化构造函数时new所起的作用先看一下如下实例代码 function Person(name,age){ this.name=name; this.age=age; } Person.prototype.say=function(){ console.log("姓名："+this.name+"，年龄："+this.age); } var p1=new Person("黎明",30); console.log(p1.name);//黎明 p1.say();//姓名：黎明，年龄：30 …
《前端面试手记》之JavaScript基础知识梳理(下) 内容速览实现ES5继承的4种方法原型和原型链作用域和作用域链 Event Loop 执行上下文闭包的理解和分析查看全部教程 / 阅读原文 ES5继承题目：ES5中常用继承方法。方法一：绑定构造函数缺点：不能继…
LeetCode 之 JavaScript 解答第十五题 —— 三数之和（3Sum）Time：2019/4/3Title:3SumDifficulty: mediumAuthor:小鹿
d3.js交互图表d3js v5.9.2 如果对原生JS还有Jq比较熟悉的话，d3的交互很快就能掌握还是拿完整的柱形图例子修改：完整的柱图
前端必懂之熟悉又陌生的BFC写在最前：BFC看起来是个很陌生的概念但它却时时发生在我们工作中，如何清除浮动影响？如何避免margin穿透问题？如何编写两栏自适应布局？都和BFC有这密不可分的关系，下面走进切图妞的世界，分分钟搞定BFC！
JavaScript线程与异步语法进化我们知道JavaScript运行环境通常都是单线程的。在浏览器中，JavaScript代码主要运行在主线程，也就是UI线程中，为避免阻塞页面，语言层面提供了异步执行的能力，在浏览器实现的时候会将这些异步任务放到特定的线程去执行如ajax，setTimeout等。同时库支持层面上JavaScript的异步语法也经历了几次重大变化。单线程是J…
ES6-变量的解构赋值(3)官方解释：按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。
js计算图片内点个数图片是由连续的点信息组成，每个点信息包含四个长度即rgba信息，通过遍历配合处理函数实现对点个数的判断。实现思路本例子采用png格式图片，只需要判该点透明度（opacity）是否为0即可确定是否为小球上一点，如果不为0，判断上下左右方向的点是否透明度为0，不为0递归该结果，并且将该点的rgba信息置为0…
Vue.js + Tone.js 开发Web钢琴应用原文链接最近用Vue + Tone.js做了一款钢琴类web应用，名字定为自由钢琴（AutoPiano），人生如音乐，欢快且自由。此文权当作该项目的总结和分享~ 项目简介自由钢琴（AutoPiano）是利用HTML5技术开发的在线钢琴应用，致力于为钢琴爱好者、音乐爱好者以及其他所有的创造者提供一个优雅、简洁的平台，在学习工作…
VUE 项目：API配置、版本控制(V1.0方案) 项目的api的baseUrl 需要灵活配置，不能打包在代码中。项目需要写入版本号，用以保证用户的浏览器资源为最新。自古评论出大佬，在下初级解决方案奉上。欢迎大佬评论指正更高的解决方案。问题一(在下解决方案) 在项目public目录下新增文件，config.js，内容为： // 此处设置是为了方便多环境…
#前端技术#【从没有人告诉过我的 CSS 小知识】详见：本文作者记录了研究 CSS 过程中学到的关于 CSS 的一些要点，同时也分享了一些有意思的工具。（译者：Xuyuey）
你要的移动端vue多页面脚手架，都帮你集成和封装好了移动端1像素？px转rem适配？300ms延迟？做活动单页面导致苹果安卓微信签名问题？不存在的。以前经常做手机H5，喜欢做成vue单页应用，这样在开发微信相关应用时，往往因为单页应用在苹果和安卓上对于浏览器每个页面的url机制不一样，经常导致页面签名失败的问题。还有经常从其他应用带参数跳到单页应用的某个页面而加…
使用UmiJS和DvaJS完成用户管理系统前言对React温习差不多了，是时候尝试制作个小项目。目前使用UmiJS + DvaJS来构建项目。 UmiJS是一个可插拔的企业级 react 应用框架，具体可查看官网文档 DvaJS是dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解…
实现一个属于自己的React框架(一)3月31日去颐和园转了一圈, 拍的比较满意的几张照片前言本文主要参考了preact的源码准备工作我们首先搭建开发的环境, 我们选择webpack4。值得注意的是, 因为我们需要解析JSX的语法, 我们需要使用@babel/plugin…
LeetCode 之 JavaScript 解答第169题 —— 求众数 I（Majority Element）Time：2019/4/4Title: Majority Element 1Difficulty: easyAuthor: 小鹿
使用javascript实现小型区块链区块链概念一、挖矿（产生新区块）首先，区块链是由每一个区块联系而形成的，在产生新区块之前必须先有一个最初始的区块，这个区块也叫创世区块。通过这个创世区块，不停地通过变化随机数（nonce）来计算出符合条件的区块。以下是创世区块基本信息： const initBlock = { index: 0, data: ‘hey，this is…
webpack4入门和多文件打包尝试按照webpack官网的说法，webpack本质上是javascript应用程序的静态资源打包器(static module bundler)，它可以将模块按照依赖和规则打包成符合生产环境部署的前端资源。webpack可以将按模块异步加载按需引用，通过loader的转换还可以将任何资源看作模块，比如css、图片、json、commonjs模块、amd模块、es6模块等。如今we…
手把手教你撸一个vue框架（原理篇）前言：三月四月是招聘旺季，相信不少面试前端岗的同学都有被问到vue的原理是什么吧？本文就以最简单的方式教你如何实现vue框架的基本功能。为了减少大家的学习成本，我就以最简单的方式教大家撸一个vue框架。一、准备希望准备阅读本文的你最好具备以下技能： Object.defineProperty() 首先，我们按照以下代…
css盒模型理解css盒子模型又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。
前端小报 – 201903月刊【Alibaba-TXD 前端小报】- 热门前端技术快报，聚焦业界新视界；不知不觉 2019 年已经过去了 1/4，日新月异的前端技术正在蓬勃发展，ES10 都已到来。
一些有趣的 CSS 魔法和布局（下）（结尾有岗位内推哦~）上一篇一些有趣的 CSS 魔法和布局（上）中，我们聊了一些有趣且实用的布局。今天，将呈现一些 CSS 带来的魔法特效，有部分特效可以帮我们省去不少工作量。
漫话：如何给女朋友解释什么是 Git 和 GitHub？周末，我正在家里看《最强大脑》，女朋友在一旁刷手机，相安无事。谁知道，刚过了没多久，她突然问我：版本控制想要介绍什么是GitHub，就要介绍下什么是Git，想要介绍什么是Git，那就不得不提版本控制。 …
JavaScript 函数式编程指引原文链接 Introduction to Functional Programming 本文旨在对比命令式编程与函数式编程两种不同的解决问题的方式。目的并不是专门教大家函数式编程，而是介绍给大家一种区别于传统方法（循环、变换等）的不同的思考方式。在日后遇到问题时能从不同的角度去思考，同时给自己的技能树添加更多的工具。函数式编程的…
一文看穿JavaScript中this的圈圈绕相比C++或者Java中的 this 指针的概念而言，JavaScript中的 this 指针更为 "灵活" ，C++或Java中的 this 在类定义时便成为了一个指向特定类实例的指针，但是JavaScript中的 this 指针是可以动态绑定的，也就是说是依据上下文环境来指定 this 到底指向谁。这样的机制给编程带来了很大的灵活性（以及趣味性）…
Vue 的小奇技（第十二篇）：组件创建时立即调用观察者回调虽然 Vue.js 给我们提供了在绝大多数场景下很有用的「计算属性」，但是在一些特殊情况中，你可能需要用到「观察者属性」。默认情况下，观察者属性的回调函数仅会在被观察的属性值发生改变时被运行，这也的确符合逻辑。举个例子，为 dog 这个数据属性定义一个观察者回调： export default { data () { …
纯CSS实现垂直居中的几种方法垂直居中是布局中十分常见的效果之一，为实现良好的兼容性，PC端实现垂直居中的方法一般是通过绝对定位，table-cell，负边距等方法。有了css3，针对移动端的垂直居中就更加多样化。
【我在GitHub上找到一本大牛程序员献给女儿的书《TensorFlow 内核剖析》】前几天，无意中在GitHub上看到一本硬核书籍——《TensorFlow 内核剖析》。详见
剑走偏锋之Vue 组件通信（一）—通过$parent和$children构建自己的通讯方式在我平常的开发中，很多问题都是见招拆招，遇到了便去解决。长此以往，出现了一个大问题，就是会反复的碰到这个问题，而反复去解决，因为上次解决的方式不一定能记到。就像你看你几个月前的代码，都觉得：卧槽，谁的代码，这么烂。所以，最好的方式就是总结，不断总结。 Vue 的简便之处便在于组件，组件之间的复用让 …
JavaScript垃圾收集 JavaScript 具有自动垃圾收集机制，也就是说，执行环境会负责管理代码执行过程中使用的内存。而在 C 和 C++ 之类的语言中，开发人员的一项基本任务就是手工跟踪内存的使用情况，这是造成许多问题的一个根源。在编写 JavaScript 程序时，开发人员不用再关心内存使用问题，所需内存的分配以及无用内存的回收完全…
gulp插件解决浏览器缓存问题一、前言有些简单前端小项目，不需要涉及框架，前端打包压缩的话本妹子还是喜欢用 gulp 。本文将用 gulp-rev 和 gulp-rev-rewrite 解决cdn缓存问题。以及列出的是本妹子最常用的 gulp 插件，小伙伴们可以参考。案例地址： https://github.com/raoenhui/g… 二、解决浏览器缓存问题 gulp-rev …