20190408 前端开发周报

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

  1. 面试官:前端跨页面通信,你知道哪些方法?在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。
  2. 头条前端实习岗凉经有感 虽然自己是计科院的学子,虽然接触前端已经一年半+,虽然系统复习理论知识体系已经一个月+,虽然又花了两周时间专门针对网上各种面经不难其烦的梳理,虽然有跟着大佬偷偷窃取头条面试第一手情报,奈何自己真的是太菜了还是被吊起来打!偷偷记个小本本,回顾一下面试时自己是多么愚钝,主要为了记录下自己面试时的心路历...
  3. JavaScript中的算法(附10道面试常见算法题解决方法和思路) 面试过程通常从最初的电话面试开始,然后是现场面试,检查编程技能和文化契合度。几乎毫无例外,最终的决定因素是还是编码能力。通常上,不仅仅要求能得到正确的答案,更重要的是要有清晰的思维过程。写代码中就像在生活中一样,正确的答案并不总是清晰的,但是好的推理通常就足够了。有效推理的能力预示着学习、适应和...
  4. 面试官:react和vue有什么区别吗? 大家好呀,清明节这两天有没有出门踏青扫墓呢!!! 言归正传,这是作者面试系列的第二篇文章!!!!!!! react和vue是什么?有啥区别吗? 三大框架之二,大家应该都不会陌生,都有学习过或者开发中使用。 但是他们到底有啥区别呢?这个就是我们这篇文章所需探讨并学习的。 开始! MVC 和 MVVM 首先,...
  5. 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 被注释,没有达到作者的优化效果。 吃栗子 栗子中都分别...
  6. 为什么 Node 是小菜前端团队的核心技术栈 著作权归作者所有。商业转载请联系 Scott 获得授权,非商业转载请注明出处 。 Scott 近两年无论是面试还是线下线上的技术分享,遇到许许多多前端同学,由于团队原因,个人原因,职业成长,技术方向,甚至家庭等等原因,在理想国与现实之间,在放弃与坚守之间,摇摆不停,心酸硬抗,大家可以找...
  7. pika 开源:替代 WebPack 的全新 JS 构建工具 在过去几年中,JavaScript 打包已经从一种生产环境优化手段演变成几乎所有 web App 都必不可少的构建步骤。不管你喜欢与否,打包器已经给 Web 开发带来了巨大的复杂性,这是个不争的事实。 为什么要进行打包? 现在的 JavaScript 打包概念可以追溯到很早以前(大约 6 年前),那个时候我们通常会对 JavaScript 文件...
  8. 你真的懂JavaScript基础类型吗 夯实Javascript基础。 基本类型有六种: null,undefined,boolean,number,string,symbol。 基本类型的值是保存在 栈内存 中的简单数据段 基础类型特性 基础类型最重要的特性 基础类型是不变的 因此:基础类型没有splice,sort之类的直接改变变量的方法 强行改变...
  9. 前端核心代码保护技术面面观 V2EX  ›  程序员 前端核心代码保护技术面面观 zyEros · 1 小时 38 分钟前 · 367 次点击 1、 前言 Web 的开放与便捷带来了极高速的发展,但同时也带来了相当多的隐患,特别是针对于核心代码保护上,自作者从事 Web 前端相关开发的相关工作以来,并未...
  10. JavaScript大师必须掌握的12个知识点译者按: 前端技术涉及的越来越多! 原文: 10 things to learn on the way to becoming a JavaScript Master 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习...
  11. “上班 996,生病 ICU”?来自 GitHub 的群嘲 (给IT一刻钟加星标,可以迎娶白富美) 微信公众号:IT一刻钟 大型现实非严肃主义现场 一刻钟与你分享优质技术架构与见闻,做一个有剧情的程序员 关注可第一时间了解更多精彩内容,定期有福利相送哟。 近日,在Github上出现了一件火热的事情,有人在上面创建了一个名为996.ICU的项目,...
  12. 来了老弟,最简单的Promise原理 Promise 是一种异步编程的解决方案,通过链式调用的方式解决回调地狱。作为前端面试中的考点,也是前端的基本功,掌握其原理是非常重要的。本次分享就从 Promise 的使用方式上出发,一步一步剖析其原理,最后帮助大家封装出自己的 Promise 。 注:如果你还不了解 Promise ,建议点击这里学习 Promise 的基本使用语法...
  13. 使用 nodejs 写爬虫(二): 抓取 github 热门项目 其实爬虫是一个对计算机综合能力要求比较高的技术活。 首先是要对网络协议尤其是 http 协议有基本的了解, 能够分析网站的数据请求响应。学会使用一些工具,简单的情况使用 chrome devtools 的 network 面板就够了。我一般还会配合 postman 或者 charles 来分析,更复杂的情况可能举要使用专业的抓包工具比如 wireshar...
  14. 前端异步解决方案-2(发布/订阅模式);什么是发布订阅模式我这里不多就不多阐述了,给大家提供几个我觉得讲的比较好的博文,请各位自行阅读发布-订阅模式解释 这一篇文章应该是一个java coder写的,但是设计模式这种东西并不分语言,各位可以借鉴一下J...
  15. 基于vue实现web端超大数据量表格 一、整体思路 1.思路来源 最近工作比较忙好久没写文章了,有一丢丢不知道如何写起了,那就先说说我是为什么要开发本文的组件把。公司有一个定位系统,基本上来说一个定位单位一分钟或者更短就会有一个定位点,这样一天下来就会有很多定位点了,如果表格想要一下子放一天甚至三天的数据,那么数据量将会特别大(可能...
  16. 前端工程化: 脚手架+物料库快速生成新项目 美团有乐高, 京东有通天塔,阿里有飞冰,大厂都在尝试用自动化工具减少人工,看完这一篇,考虑给你的团队搭建一套自动化开发工具吧! 一、背景 笔者所在公司并非大厂, 发现一些痛点. 1.前端研发跟随业务, 不同部门技术栈五花八门, 同岗位支援困难.( react | vue | seek.js), 2.规范不统一, 跨部门开项目, 编辑器一片...
  17. 2019,开发者应该学习的16个JavaScript框架来源 | 愿码(ChainDesk.CN)内容编辑 愿码Slogan | 连接每个程序员的故事 网站 | [链接] 愿码愿景 | 打造全学科IT系统免费课程,助力小白用户、初级工程师0成本免费系统学习、低成本进阶,帮助BAT一线资深工程师成...
  18. 关于在VUE里面使用swiper的方法 swiper是常用的轮播插件,提供了大量的API可以满足我们大量在开发中遇到的轮播需求。 Official Website: https://www.swiper.com.cn 现在swiper的最新版本为4.5.X 官方在使用方法上,只提供了以前我们常用的<link rel="stylesheet" href="dist/css/swiper.min.css">方式引用。而我们...
  19. 除了996 ICU,GitHub上还有哪些奇葩的项目?GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git 作为唯一的版本库格式进行托管,故名GitHub。是全球最大的同性交友网站,哦不,最大的程序员交流网站。
  20. 前端工具类项目规范化-使用TS TypeScript 是微软开发一款开源的编程语言,本质上是向 JavaScript 增加静态类型系统。它是 JavaScript 的超集,所有现有的 JavaScript 都可以不加改变就在其中使用。它是为大型软件开发而设计的,它最终编译产生 JavaScript,所以可以运行在浏览器、Node.js 等等的运行时环境。 TS能做什么 首先TS的定位是静态类型...
  21. 如果Node.js已具备反向代理的功能,我为什么要使用反向代理? 这一年是2012年.PHP和Ruby on Rails作为渲染Web应用程序的最高服务器端技术而备受瞩目。但是,一个大胆的新竞争者掀起了一场风暴 - 一个能够处理1M并发连接的人。这项技术不过是Node.js,从那以后一直稳步增长。 与当时大多数竞争技术不同,Node.js内置了一个Web服务器。拥有这个服务器意味着开发人员可以绕过无数的...
  22. Vue-CLI 3.x 自动部署项目至服务器平时部署前端项目流程是:先部署到测试环境ok后再发布到生产环境上,部署到测试环境用 xshell 连上服务器,然后用 xftp 连接服务器,然后本地 build 项目,接着把 build 好的文件通过 xftp 上传到服务器上,整个...
  23. 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,请你在该数组中找出和为...
  24. 3 个概念,入门 Vue 组件开发 “组件”是 Vue 中比较基础的概念,但我发现,许多同学对 Vue 组件的概念和由来并不是清楚。因此,我希望通过这个专题,带大家换个角度来分析,最终让大家更清楚组件开发。 首先,我们先不谈组件,我想问大家一个问题: 我们平常用任何编程语言写方法(method)的时候,当一个方法里的逻辑过多时,我们会怎么办?当多...
  25. CSS文本溢出文本溢出单行显示 {代码...} 文本溢出多行显示 {代码...}
  26. 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...
  27. 可能是最被误用的 HTTP 响应头之一 关于 “ must-revalidate”。
  28. 一些常用的前端开发资源个人整理的一些常用前端开发资源,有事没事多看看,日后不断更新 css技巧 Flex布局 阮一峰 [链接] 巧用margin/padding的百分比值实现高度自适应 [链接] 最全Html与CSS布局技巧 [链接] h5开发 css小技巧[链接] 移...
  29. 使用 nodejs 写爬虫(-): 常用模块介绍和前置JS语法 本篇是使用 nodejs 写爬虫系列教程的第一篇, 介绍了使用 nodejs 写爬虫过程中常用的模块和一些必须掌握的 js 语法 常用模块 常用模块有以下几个: fs-extra superagent cheerio log4js sequelize chalk puppeteer fs-extra 使用 async/await 的前提是必须将接口封装成 ...
  30. Promise 对象的理解Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了 Promise 对象。
  31. 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 ...
  32. 《前端面试手记》之JavaScript基础知识梳理(下) 内容速览 实现ES5继承的4种方法 原型和原型链 作用域和作用域链 Event Loop 执行上下文 闭包的理解和分析 查看全部教程 / 阅读原文 ES5继承 题目:ES5中常用继承方法。 方法一:绑定构造函数 缺点:不能继...
  33. LeetCode 之 JavaScript 解答第十五题 —— 三数之和(3Sum)Time:2019/4/3Title:3SumDifficulty: mediumAuthor:小鹿
  34. d3.js交互图表d3js v5.9.2 如果对原生JS还有Jq比较熟悉的话,d3的交互很快就能掌握 还是拿完整的柱形图例子修改:完整的柱图
  35. 前端必懂之熟悉又陌生的BFC写在最前:BFC看起来是个很陌生的概念但它却时时发生在我们工作中,如何清除浮动影响?如何避免margin穿透问题?如何编写两栏自适应布局?都和BFC有这密不可分的关系,下面走进切图妞的世界,分分钟搞定BFC!
  36. JavaScript线程与异步语法进化 我们知道JavaScript运行环境通常都是单线程的。在浏览器中,JavaScript代码主要运行在主线程,也就是UI线程中,为避免阻塞页面,语言层面提供了异步执行的能力,在浏览器实现的时候会将这些异步任务放到特定的线程去执行如ajax,setTimeout等。同时库支持层面上JavaScript的异步语法也经历了几次重大变化。 单线程是J...
  37. ES6-变量的解构赋值(3)官方解释:按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
  38. js计算图片内点个数 图片是由连续的点信息组成,每个点信息包含四个长度即rgba信息,通过遍历配合处理函数实现对点个数的判断。 实现思路 本例子采用png格式图片,只需要判该点透明度(opacity)是否为0即可确定是否为小球上一点,如果不为0,判断上下左右方向的点是否透明度为0,不为0递归该结果,并且将该点的rgba信息置为0...
  39. Vue.js + Tone.js 开发Web钢琴应用 原文链接 最近用Vue + Tone.js做了一款钢琴类web应用,名字定为自由钢琴(AutoPiano),人生如音乐,欢快且自由。 此文权当作该项目的总结和分享~ 项目简介 自由钢琴(AutoPiano)是利用HTML5技术开发的在线钢琴应用,致力于为钢琴爱好者、音乐爱好者以及其他所有的创造者提供一个优雅、简洁的平台,在学习工作...
  40. VUE 项目:API配置、版本控制(V1.0方案) 项目的api的baseUrl 需要灵活配置,不能打包在代码中。 项目需要写入版本号,用以保证用户的浏览器资源为最新。 自古评论出大佬,在下初级解决方案奉上。欢迎大佬评论指正更高的解决方案。 问题一(在下解决方案) 在项目public目录下新增文件,config.js,内容为: // 此处设置是为了方便多环境...
  41. #前端技术#【从没有人告诉过我的 CSS 小知识】详见: 本文作者记录了研究 CSS 过程中学到的关于 CSS 的一些要点,同时也分享了一些有意思的工具。(译者:Xuyuey)

    从没有人告诉过我的 CSS 小知识
  42. 你要的移动端vue多页面脚手架,都帮你集成和封装好了 移动端1像素?px转rem适配?300ms延迟?做活动单页面导致苹果安卓微信签名问题?不存在的。 以前经常做手机H5,喜欢做成vue单页应用,这样在开发微信相关应用时,往往因为单页应用在苹果和安卓上对于浏览器每个页面的url机制不一样,经常导致页面签名失败的问题。还有经常从其他应用带参数跳到单页应用的某个页面而加...
  43. 使用UmiJS和DvaJS完成用户管理系统 前言 对React温习差不多了,是时候尝试制作个小项目。目前使用UmiJS + DvaJS来构建项目。 UmiJS是一个可插拔的企业级 react 应用框架,具体可查看 官网文档 DvaJS是dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解...
  44. 实现一个属于自己的React框架(一)3月31日去颐和园转了一圈, 拍的比较满意的几张照片 前言 本文主要参考了preact的源码 准备工作 我们首先搭建开发的环境, 我们选择webpack4。值得注意的是, 因为我们需要解析JSX的语法, 我们需要使用@babel/plugin...
  45. LeetCode 之 JavaScript 解答第169题 —— 求众数 I(Majority Element)Time:2019/4/4Title: Majority Element 1Difficulty: easyAuthor: 小鹿
  46. 使用javascript实现小型区块链 区块链概念 一、挖矿(产生新区块) 首先,区块链是由每一个区块联系而形成的,在产生新区块之前必须先有一个最初始的区块,这个区块也叫创世区块。通过这个创世区块,不停地通过变化随机数(nonce)来计算出符合条件的区块。以下是创世区块基本信息: const initBlock = { index: 0, data: 'hey,this is...
  47. webpack4入门和多文件打包尝试 按照webpack官网的说法,webpack本质上是javascript应用程序的静态资源打包器(static module bundler),它可以将模块按照依赖和规则打包成符合生产环境部署的前端资源。webpack可以将按模块异步加载按需引用,通过loader的转换还可以将任何资源看作模块,比如css、图片、JSON、commonjs模块、amd模块、es6模块等。如今we...
  48. 手把手教你撸一个vue框架(原理篇) 前言:三月四月是招聘旺季,相信不少面试前端岗的同学都有被问到vue的原理是什么吧?本文就以最简单的方式教你如何实现vue框架的基本功能。为了减少大家的学习成本,我就以最简单的方式教大家撸一个vue框架。 一、准备 希望准备阅读本文的你最好具备以下技能: Object.defineProperty() 首先,我们按照以下代...
  49. css盒模型理解css盒子模型又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素。
  50. 前端小报 - 201903月刊【Alibaba-TXD 前端小报】- 热门前端技术快报,聚焦业界新视界;不知不觉 2019 年已经过去了 1/4,日新月异的前端技术正在蓬勃发展,ES10 都已到来。
  51. 一些有趣的 CSS 魔法和布局(下)(结尾有岗位内推哦~)上一篇 一些有趣的 CSS 魔法和布局(上) 中,我们聊了一些有趣且实用的布局。今天,将呈现一些 CSS 带来的魔法特效,有部分特效可以帮我们省去不少工作量。
  52. 漫话:如何给女朋友解释什么是 Git 和 GitHub? 周末,我正在家里看《最强大脑》,女朋友在一旁刷手机,相安无事。谁知道,刚过了没多久,她突然问我: 版本控制 想要介绍什么是GitHub,就要介绍下什么是Git,想要介绍什么是Git,那就不得不提版本控制。 ...
  53. JavaScript 函数式编程指引 原文链接 Introduction to Functional Programming 本文旨在对比命令式编程与函数式编程两种不同的解决问题的方式。目的并不是专门教大家函数式编程,而是介绍给大家一种区别于传统方法(循环、变换等)的不同的思考方式。在日后遇到问题时能从不同的角度去思考,同时给自己的技能树添加更多的工具。 函数式编程的...
  54. 一文看穿JavaScript中this的圈圈绕 相比C++或者Java中的 this 指针的概念而言,JavaScript中的 this 指针更为 "灵活" ,C++或Java中的 this 在类定义时便成为了一个指向特定类实例的指针,但是JavaScript中的 this 指针是可以动态绑定的,也就是说是依据 上下文环境 来指定 this 到底指向谁。这样的机制给编程带来了很大的灵活性(以及趣味性)...
  55. Vue 的小奇技(第十二篇):组件创建时立即调用观察者回调 虽然 Vue.js 给我们提供了在绝大多数场景下很有用的「计算属性」,但是在一些特殊情况中,你可能需要用到「观察者属性」。 默认情况下,观察者属性的回调函数仅会在被观察的属性值发生改变时被运行,这也的确符合逻辑。 举个例子,为 dog 这个数据属性定义一个观察者回调: export default { data () { ...
  56. 纯CSS实现垂直居中的几种方法垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法。有了css3,针对移动端的垂直居中就更加多样化。
  57. 我在GitHub上找到一本大牛程序员献给女儿的书《TensorFlow 内核剖析》】前几天,无意中在GitHub上看到一本硬核书籍——《TensorFlow 内核剖析》。详见

    我在GitHub上找到一本大牛程序员献给女儿的书《TensorFlow 内核剖析》
  58. 剑走偏锋之Vue 组件通信(一)—通过$parent和$children构建自己的通讯方式 在我平常的开发中,很多问题都是见招拆招,遇到了便去解决。长此以往,出现了一个大问题,就是会反复的碰到这个问题,而反复去解决,因为上次解决的方式不一定能记到。就像你看你几个月前的代码,都觉得:卧槽,谁的代码,这么烂。所以,最好的方式就是总结,不断总结。 Vue 的简便之处便在于组件,组件之间的复用让 ...
  59. JavaScript垃圾收集 JavaScript 具有自动垃圾收集机制,也就是说,执行环境会负责管理代码执行过程中使用的内存。而在 C 和 C++ 之类的语言中,开发人员的一项基本任务就是手工跟踪内存的使用情况,这是造成许多问题的一个根源。在编写 JavaScript 程序时,开发人员不用再关心内存使用问题,所需内存的分配以及无用内存的回收完全...
  60. gulp插件解决浏览器缓存问题 一、前言 有些简单前端小项目,不需要涉及框架,前端打包压缩的话本妹子还是喜欢用 gulp 。 本文将用 gulp-rev 和 gulp-rev-rewrite 解决cdn缓存问题。 以及列出的是本妹子最常用的 gulp 插件,小伙伴们可以参考。 案例地址: https://github.com/raoenhui/g... 二、解决浏览器缓存问题 gulp-rev ...

关注github前端日报 订阅精彩文章

前端日报栏目数据来自码农头条,每日分享互联网上热门的前端开发、移动开发、设计、资源和资讯等,为开发者提供动力,如果觉得内容对你有用,记得分享给你的小伙伴。进入码农头条查看更多

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