20190324 前端开发周报

前端 input 输入框可能被攻击的几种方式及防范;一个HTTP打趴80%面试者;Vue实现电商网站项目;【HTML/CSS】CSS实现垂直水平居中;deno 如何偿还 node.js 的十大技术债;从零开始的Webpack4教程;Go、Nginx、Php、Nodejs谁能胜出紫禁之巅;JS面试之数组的几个不low操作(3)

  1. 前端 input 输入框可能被攻击的几种方式及防范 最近看到一篇文章,文章讲到输入框有被 注入代码攻击 的危险,自己做了一个小示例,发现确实有这样的情况。 示例 先来看小示例吧,一个最简单的留言功能,输入框输入信息,然后把信息插入页面: 页面效果 关键代码 <body> <div id="content"></div> <input id=’i…
  2. 一个HTTP打趴80%面试者面试一年多,每当我问起面试者对HTTP的了解时,个个回答令我瞠目结舌,这些开发者都有3-5年的经验。请不要让我叫你野生程序员,是时候了解HTTP了,让我们当个正规军。
  3. Vue实现电商网站项目 shopping vue + vue-router + vuex 实现电商网站 效果展示 install git clone https://github.com/chenchangyuan/shopping.git npm install npm run dev 运行环境: node v9.11.1 npm 5.6.0 需求分析 登录页面、商品列表页(网站首页)、购物车页(实现结算)、商品详情页 可按颜色、品…
  4. 【HTML/CSS】CSS实现垂直水平居中相信在工作中经常会遇到需要某某元素垂直水平居中的需求,下面总结一下实现方法 元素已知宽度 绝对定位 + margin反向偏移 html {代码…} 元素未知宽度 绝对定位 + margin auto + 流体特性 html {代码…} Tips {…
  5. deno 如何偿还 node.js 的十大技术债“Node现在太难用了!”。Node.js之父 Ryan Dahl 去年初要开发一款 JavaScript 互动式数据分析工具时,忍不住抱怨起自己十年前一手创造的技术。
  6. 从零开始的Webpack4教程在Webpack看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理
  7. Go、Nginx、Php、Nodejs谁能胜出紫禁之巅 声明:这里的测试框架都是很常用的框架,不去跟一些奇葩但是所谓性能极高的框架进行对比 由于我们在项目中大量使用Iris和nginx这两个Web框架(纯Go语言实现,零内存拷贝),同时也听过很多人问Go的Http性能对比nginx、对比nodejs到底如何,有鉴于此,今天我们就来做一个Web框架性能真实比拼。 测试环境图: 下面…
  8. JS面试之数组的几个不low操作(3)本文主要从应用来讲数组api的一些骚操作;如一行代码扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等;上面这些应用场景你可以用一行代码实现?
  9. 浅谈前端技术选型(一)现在前端,都往大前端方向发展,pc, wapApp, 小程序,混合开发,桌面开发,node 后台。不光发展方向多,同一个方向的技术选型也同样多,比如wapApp的 vue,react,angular。那么问题来了,在项目中,我们到底应该如…
  10. 金三银四,前端同学快来补补React原理吧深入学习一个框架最直接的方式,就是弄明白框架的原理。React无疑是一个非常值得学习其原理的框架,它设计简单,没有引入任何新的概念,一个组件就是一个方法或一个类。
  11. 11 个最好的 JavaScript 动态效果库当我想要在网上找一个简洁的 Javascript 动效库时,总是发现很多“推荐”的库都是缺乏持续维护的。
  12. JS框架对比,Angular还是Vue适宜才最好 曾几何时,人人都在写前端框架,从网上搞点js脚本自己封装一下就可以搞成一个框架,然而除了用来吹牛外并没有什么egg用。后来有了Jqury出现了几乎一统江湖,但是也仅仅是昙花一现,没持续多久。最近这些年伴随着移动互联网的发展,Ajax技术,V8引擎和Node.js出现和流行催生了JS和前端(全栈)开发的火热。前端框架又爆发了…
  13. Ajax技术的一些总结 ajax全称叫 Asynchronous JavaScript and XML ,意思是异步的 JavaScript 和 XML。 ajax是现有标准的一种新方法,不是编程语言,可以在不刷新网页的情况下,和服务器交换数据并且更新部分页面内容,不需要任何插件,只需要游览器允许运行JavaScript就可以。 而传统的网页(不使用ajax的)如果需要更新页面内容,…
  14. 一文看懂 JS 继承最近回顾 js 继承的时候,发现还是对一些概念不是很清晰。这里再梳理一下 JS 中继承的几种主要的方式,构造函数继承、原型链继承、组合继承以及原型式继承、寄生式继承、寄生组合式继承和 ES6 的 Class:
  15. 如何学习 Git 是一门学问 最近一直在回忆学习git的一些过程,觉得很有意义,延伸出来就是如何学习计算机知识的一些思路,如果一个人从来没有接触过git或github,那么如何下手呢? 不管我们懂不懂git或github,首先要明白它们不是一回事,git可以认为是一个协议或者一个工具,主要工作是版本控制,git蕴含了很多优秀和灵活的工作流。 …
  16. Vue 的小奇技(第十篇):监听第三方组件的生命周期钩子 今天要讲的技巧是我以前从我朋友Damian Dulisz 那里学来的。他是 Vue.js 核心团队的成员,就是那个官方新闻站点Vue newsletter 的建设者,也还是vue-multiselect 库的作者。 在一些场景中,我需要在父组件上知道子组件什么时候被创建、挂载或者是更新,特别是当为原生 js 库创建组件时。 你可能知道有一些方法可以…
  17. 前端构建秘籍 随着前端构架工具的不断发展,提供了很多提高我们的开发体验和开发效率的能力,同时构建已经成为前端技术栈中常见的技术。 webpack 也是众多构建工具中崭露头角一员,早期的 webpack 配置复杂难懂,随着其发展,相关配置也不断简化,性能也不断提高,但是对于深入使用的开发人员,通常它的默认配置并不适用于业务开发…
  18. Web 性能优化:21种优化CSS和加快网站速度的方法这是 Web 性能优化的第 4 篇,上一篇在下面看点击查看: Web 性能优化:使用 Webpack 分离数据的正确方法 Web 性能优化:图片优化让网站大小减少 62% Web 性能优化:缓存 React 事件来提高性能 CSS 必须通过一个…
  19. 容易遗忘的前端基础:Javascript 内存详解 某些语言,比如C有低级的原生内存管理原语,像malloc()和free()。开发人员使用这些原语可以显式分配和释放操作系统的内存。 相对地,JavaScript会在创建变量(对象、字符串)时自动分配内存,并在这些变量不被使用时自动释放内存,这个过程被称为 垃圾回收 。这个“自动”释放资源的特性带来了很多困惑,让JavaScript(…
  20. 用Class写一个记住用户离开位置的js插件 前言 常见的js插件都很少使用ES6的 class ,一般都是通过构造函数,而且常常是手写 CMD 、 AMD 规范来封装一个库,比如这样: // 引用自:https://www.jianshu.com/p/e65c246beac1 ;(function(undefined) { "use strict" var _global; var plugin = { // … } _gl…
  21. 在Node.js中编写内存高效的软件应用程序 在Node.js中编写内存高效的软件应用程序 Naren Yellavula 封锁 UnblockFollow 继2018年11月14日之后 一个旨在避免气流的建筑物( https://pixelz.cc ) 软件应用程序在计算机的主存储器中运行,我们称之为随机存取存储器(RAM)。 JavaScript尤其是Node.js(服务器端js)允许我们为最终用户编写…
  22. F4Lab:Flutter 实现的 GitLab 客户端 F4Lab A glitlab client made by flutter. Support Android & IOS. Download Release Apk light nav dark nav project merge requert pipeline …
  23. 【前端词典】实现 Canvas 下雪背景引发的性能思考 去年圣诞节产品提了一个活动需求,其中有一个下雪的背景动画。在做这个动画的过程中加深了对 canvas 动画的一些了解,在这里我仅是抛砖引玉的分享一下,欢迎各位大佬批评。 代码已上传至 github ,感兴趣的可以 clone 代码到本地运行。望给个 star 支持一下。 入题 需求给出的 UI 样式如下: UI 的需求是雪…
  24. 深入理解JavaScript执行上下文和执行栈如果你是一名 JavaScript 开发者,或者想要成为一名 JavaScript 开发者,那么你必须知道 JavaScript 程序内部的执行机制。执行上下文和执行栈是JavaScript中关键概念之一,是JavaScript难点之一。 理解执行上下文…
  25. Vue.js-状态管理与Vuex非父子组件(跨级组件和兄弟组件)通信时,使用了bus(中央事件总线)的一个方法,用来触发和接收事件,进一步起到通信的作用。
  26. Vue.js-Render函数学习笔记:Render函数 Render函数 Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点,提升渲染性能。 Vue2与Vue1最大的区别就在于Vue2使用了虚拟DOM来更新DOM节点,提升渲染性能。 Vue2与Vue1最大的区…
  27. 使用 Pixi.js 构建一个视差滚动器(第一篇) 翻译对照 原文: PART 1 ・ PART 2 ・ PART 3 ・ PART 4 译文:第一篇・第二篇・ 第三篇・ 第四篇 关注 @chriscaleb 这个系列的教程已经更新到了 PixiJS v4 版本。 曾经玩过 Canabalt 和  Monster Dash ,好奇他们是如何构建一个滚动游戏地图的?在这个教程中我们将向「构建一个视差滚动器」迈…
  28. 我在珍爱网这半年(前端) “半年”,在职场中是一个很短暂的词,现在我已经去了另外一家公司了,很想和一些想加入珍爱网的前端分享一下我的经历。 我是一名前端工程师,在珍爱网的级别是I2+,对应的是普通前端的title。对于珍爱网的这段工作经历,我是带着期望到来,带着遗憾离开。为什么说带着期望来,因为我放弃了几个年薪35W+的offer选择…
  29. JavaScript 为什么要有 Symbol 类型Symbols 是 ES6 引入了一个新的数据类型 ,它为 JS 带来了一些好处,尤其是对象属性时。 但是,它们能为我们做些字符串不能做的事情呢?
  30. 前端面试题 — JavaScript (一)前两天总结了一下HTML+CSS方面的面试题 (传送门),今天翻看了一些 JavaScript 面试中常见的几个问题(只是一部分,会持续更新),分享给有需要的小伙伴
  31. 使用 Pixi.js 构建一个视差滚动器(第二篇) 翻译对照 原文: PART 1 ・ PART 2 ・ PART 3 ・ PART 4 译文:第一篇・第二篇・ 第三篇・ 第四篇 关注 @chriscaleb 这个系列的教程已经更新到了 PixiJS v4 版本。 在这个系列教程中我们将探索如何构建一个类似 Canabalt 和  Monster Dash 的视差滚动地图游戏界面。第一篇介绍了 pixi.js 的渲染…
  32. 加快你的网站响应速度-Vue懒加载 关于懒加载 众所周知,对于页面内容比较丰富的网站,dom的解析会很复杂,这样就会导致首屏加载过慢,对于图片很丰富的网站,我们知道可以使用图片懒加载来提高网站的响应速度,我在我的另外一篇文章中写过,有兴趣的点击这里。像淘宝、京东等等的首页都是经过懒加载处理的,他们会先渲染出骨架,然后懒加载的区域出现…
  33. 前端面试知识点目录整理金三银四, 又到了一年一度的跳槽季, 相信大家都在准备自己面试笔记, 我也针对自己工作中所掌握或了解的一些东西做了一个目录总结,方便自己复习; 详细内容会在之后一一对应地补充上去(有些在我的个人主页笔记中也…
  34. Vue.js-组件详解要在父实例中使用这个组件,必须要在实例创建前注册,之后就可以用<my-component></my-component>的形式来使用组件。
  35. 前端面试题 — JavaScript(二)上一篇 前端面试题-JavaScript(一), 感兴趣的小伙伴也可以移步这里查看 完整版JavaScript面试题,面试题会不定期更新加进去一些个人工作中遇到的或者认为比较重要的东西,后面会涉及到前端的各个方面,感兴趣的…
  36. Vue.js-函数化组件Vue提供了一个functional的布尔值选项,设置为true可以使组件无状态和无实例,也就是没有data和this上下文。这样用render函数返回虚拟节点可以更容易渲染,因为函数化组件只是一个函数,渲染开销要小很多。
  37. 通过分析 AST 自动重构 three.js 的老旧代码 前言 先简单介绍一些背景: three.js是一个非常流行的JS三维渲染库,通常是做web端三维效果的第一选择。但是同时three.js已经有了将近9年的历史,所有它很多代码仍然是使用非常老旧的模式。 three.js曾经所有的文件都是使用全局变量THREE的方式来组织,比如欧拉角Euler.js // three.js/src/math/Euler…
  38. 基于 React.js 和 Node.js 的 SSR 实现方案 SSR:即服务端渲染(Server Side Render) 传统的服务端渲染可以使用Java,php 等开发语言来实现,随着 Node.js 和相关前端领域技术的不断进步,前端同学也可以基于此完成独立的服务端渲染。 过程:浏览器发送请求 -> 服务器运行 react代码生成页面 -> 服务器返回页面 -> 浏览器下载HTML文档 -> 页面准备…
  39. HTTP精简教程二:简单的HTTP协议HTTP协议和TCP/IP协议族内的其他众多协议相同,用于客户端和服务器之间的通信。请求访问资源的一端为客户端,响应资源的一端为服务器。请求必须从客户端发出,而服务器回复响应,因此建立通信是从客户端开始的。
  40. [前端漫谈_3] 从 filter 聊到 Promise 在学习前端的时候,我总是能听到很多高级词汇,比如今天会聊到的 函数式编程(Functional Programming) & 高阶函数 (Higher-order function) 。 但是当你真正的理解什么是 函数式编程 & 高阶函数 的时候,也许会发现,你几乎每天都会用到它,只是你不知道那就是高阶函数 / 函数式编程。 JavaScri…
  41. Vue.js基础拾遗 1、Vue.js的数据绑定形式是使用“Mustache”语法(双大括号)的形式,针对Html代码,需要使用 v-html 指令。 <p>Using v-html directive: <span v-html="rawHtml"></span></p> 复制代码 2、Mustache语法不能作用在HTML特性上面,此时需要使用 v-bind 指令。 <div v…
  42. 打造前端离线日志(一): IndexedDB 本文从理论和实战的两个方面讲述前端离线日志系统是如何构建的,因为内容比较多,我将文章分为 3 部分来讲述整个日志系统的设计。 前端数据存储设计 – IndexedDB 服务端设计 – node + express/koa 以及数据压缩 – deflate/gzip (探索) WebRTC 实现日志获取 为什么需要离线日志 随着前端项目越发…
  43. Vue2.0源码阅读笔记(一):选项合并 Vue本质是上来说是一个函数,在其通过new关键字构造调用时,会完成一系列初始化过程。通过Vue框架进行开发,基本上是通过向Vue函数中传入不同的参数选项来完成的。参数选项往往需要加以合并,主要有两种情况: 1、Vue函数本身拥有一些静态属性,在实例化时开发者会传入同名的属性。 2、在使用继承的方式使用Vue时,…
  44. ES5 to ESNext:自 2015 以来 JavaScript 新增的所有新特性 type: FrontEnd title: ES5 to ESNext — here’s every feature added to JavaScript since 2015 link: https://medium.freecodecamp.org/es5-to-esnext-heres-every-feature-added-to-javascript-since-2015-d0c255e13c6e author: Flavio Copes ES5 to ESNext —  自 2015 以来 JavaScript 新增的所有新特性 …
  45. 如何优雅解决 js小数点计算错误问题(三个函数告诉你解决办法)策略就是把小数值变成整数进行操作加减乘除 {代码…}
  46. Vue.js-Vue实例<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”wjXLMa” data-default-tab=”js,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”组件间通信” class=”codepen”>See the Pen 组…
  47. 浅谈JS的深拷贝和浅拷贝因为对象的是通过指针仔细内存地址的,所以对象的拷贝不能像变量一般简单的赋值,对象的赋值只是将指针的地址赋值过去而已,修改属性值会对所有指向这个内存地址的对象的属性值都会被改变,见下面的例子:
  48. Nmon 实时监控并生成 HTML 监控报告 前面的博客介绍了服务端监控工具:Nmon使用方法,最近在github找到了一个nmon自动监控并生成HTML格式报告的工具:easyNmon,使用体验蛮不错的,这里介绍下它的安装及使用方法。 一、关于easyNmon说明 工具下载地址:easyNmon 说明:为了方便多场景批量监控,作者用golang写了个监…
  49. 基于vue解决大数据表格卡顿问题 点我在线体验Demo 先看一下效果,一共 3600 X 100 = 36W 个单元格基本感受不到卡顿,而且每个单元格点击可以编辑,支持固定头和固定列 项目源代码地址 Github 解决问题核心点:横向滚动加载,竖向滚动加载 项目背景 笔者最近在做广告排期功能,需要进行点位预占,大的合同可能需要对多个资源排…
  50. 【从蛋壳到满天飞】JS 数据结构解析和算法实现-哈希表 【从蛋壳到满天飞】JS 数据结构解析和算法实现,全部文章大概的内容如下: Arrays(数组)、Stacks(栈)、Queues(队列)、LinkedList(链表)、Recursion(递归思想)、BinarySearchTree(二分搜索树)、Set(集合)、Map(映射)、Heap(堆)、PriorityQueue(优先队列)、SegmentTree(线段树)、Trie(字典树)、UnionFind(并查集)、AVLTree…
  51. 或许我们在 JavaScript 中不需要 this 和 class 今年年初 Douglas Crockford 的新书 How JavaScript Works 出版不久后,我买来看了。在 JavaScript: The Good Parts 出版后 10 年,并深远影响了 JavaScript 语言之后,Douglas Crockford 对 JavaScript 这门语言依然有很多不满,并认为 the bad parts 更多了。 当然我并不认同他的所有观点,比如把箭头函数…
  52. 最简单的Vue.js入门方法最近花了几天看了下vue, 确实vue相对于其他两大前端框架来说,学习成本会低很多。 文档、社区、资料都很完善。下面是我觉得还不错的学习路径,希望对你有帮助。
  53. 优雅的实现动态加载 css、js 前端开发需求总数层出不穷,有时需要在某个时刻、某个页面、某个组件,甚至某个逻辑中加载一些css、js文件,比如微信sdk,地图插件、主题css等等,还要在加载完成之后,执行一些逻辑。这些第三方文件,往往只在一个场景用到,并不想放在全局,而第三方文件又没办法通过dynamic import打包进来,此时就需要某种动态加载任…
  54. RxJS的学习之路三(创建一个Observable) 在RxJS中Observable是可以被订阅(subscribe)的一个流对象,而observer是订阅Observable的物件,理解这两者的区别和联系是很重要的。 用RxJS官网上给的一个例子来说明 var Obsec = Rx.Observable.create(function (observer) { observer.next(1); observer.next(2); observer.next(3); observer.complete()…
  55. vue 组件的三种使用方式教程 在 vue angular react 三大前端框架的大前端时代。许多人选择了 vue ,在 github 上的 star , vue 已经超过 react 的数量了。虽然 star 并不能代表 vue 更强,不过在发展速度上看来, vue 确实很快。 在模块化的前端时代,万物皆组件, vue 学习组件是必不可少的。 可是在大多数人…
  56. 前端JS代码的性能探究 团队中做code review有一段时间了,最近一直在思考一个问题,抛开业务逻辑,单纯从代码层面如何评价一段代码的好坏? 好和坏都是相对的,一段不那么好的代码经过优化之后,如何标准化的给出重构前后的差异呢? 我们所有的代码都跑在计算机上,计算机的核心是CPU和内存。从这个角度来看,效率高的代码应当占用更少…
  57. 请求网页时,怎么给我返回了一段 JavaScript 代码 今天给大家带来的是一个论坛网站,牛仔俱乐部-努比亚社区, 网址为:https://bbs.nubia.cn/ 如果你想要获取这个网站的源代码的话,必须要先获取一个 cookie,其字段名为:acw_sc__v2,你是不是不相信?爬取网站还需要获取 cookie 值才可以?说实话,我刚开始爬的时候我…
  58. 不同前端框架下的代码转换 背景 整个前端领域在这几年迅速发展,前端框架也在不断变化,各团队选择的解决方案都不太一致,此外像小程序这种跨端场景和以往的研发方式也不太一样。在日常开发中往往会因为投放平台的不一样需要进行重新编码。 前段时间我们需要在淘宝页面上投放闲鱼组件,淘宝前端研发DSL(React/Rax)和闲鱼前端研发DSL(Vue/Weex…
  59. 使用 JavaScript 对象 Rest 和 Spread 的7个技巧 使用 JavaScript 对象 Rest 和 Spread 的7个技巧 原文作者:Joel Thoms 原文标题:7 Tricks with Resting and Spreading JavaScript Objects 原文: https://blog.bitsrc.io/6-tric… Rest 和 Spread 操作符不仅仅可以用于让参数休息和扩展数组。 下面针对 JavaScript 对象时使用 Rest 和 Spr…
  60. React 怎么实现 Vue 的 <keep-alive> 组件 如果你用过Vue,那肯定知道它有一个非常好用的组件(keep-alive)能够保持组件的状态来避免重复重渲染。 有时,我们希望在列表页面进入详情页面后,缓存列表页面的状态;当从详情页面返回列表页面时,列表页面还是和切换前一样。 这实际上挺难实现的,因为 React 中的组件一旦卸载就无法重用。在 issue #12039 中…

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

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


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流