20190630 前端开发周报

这几天国外关于 Vue 新 API 的一些争论;JavaScriptJSON.stringify 的二八法则;支付宝玉伯:从前端到体验,如何把格局做大;撸一个Vue脚手架plus,高级概念玩儿一遍(超详细);手把手教你使用ts 一步一步的去完成一个Promise;前端页面优化,减少reflow的方法;滑动验证码的原理并利用 Vue 实现滑动验证码;一文速览React全栈

  1. 这几天国外关于 Vue 新 API 的一些争论 这几天国外关于 Vue 新 API 的一些争论 本文只是翻译 🙂 首先是 Reddit 上有人发帖。 标题:Vue 3 将大变——目前的语法会被弃用,组合函数将最终作为创建组件...
  2. JavaScript 中 JSON.stringify 的二八法则 函数 JSON.stringify() 是一个把 JavaScript object 转换成JSON 的标准方法。很多 JavaScript 框架在底层都使用了 JSON.stringify() ,例如: Express' res.json() 、 Axios' post() 和Webpack stats 都在底层调用了 JSON.stringify() 。这篇文章会提供一个实用的、包含异常情况的 JSON.stringify...
  3. 支付宝玉伯:从前端到体验,如何把格局做大国内的前端行业,是一个群星璀璨,同时又有些纷纷扰扰的圈子。很多初出茅庐的年轻人怀着改变世界的梦想,谁也不服谁。不过,有一些为前端领域做出贡献的拓荒者几乎受到所有人的尊敬,玉伯就是这些拓荒者中的一员。
  4. 撸一个Vue脚手架plus,高级概念玩儿一遍(超详细) 相信每个一个程序员都不希望花过多的时间去造没必要造的轮子(纯粹为了学习的略过),经过不断的成长和经验的积累,我们总得造出一些有意义的可以长期使用的“轮子”(因为没有现成的,哈哈 ),也就是大家都将求的代码的复用性。 此篇文章主要分享一下我是怎样省去每次初始化Vue项目的那几十分钟。 先让我们回忆一下...
  5. 手把手教你使用ts 一步一步的去完成一个Promise 前奏 笔者公司前端小组,线上出现了因为Promise用错了而导致的问题。 本文的出发点不仅是了解Promise,主要目的是跟着特性去写一个Promise。 所以前提是你已经掌握了Promise的基本特性,如果没有接触过的话,请点击学习 正文 熟悉ES6的Promise特性。 1.特性概览 链式调用。 内部三种状态。 ...
  6. 前端页面优化,减少reflow的方法 reflow 也就是 重排或者回流 由DOM或者布局的变动而触发。 如你改变了一个 div 的位置,或者是改变了这个div的width, height, position 或者布局类的样式。 利用 display:none 不渲染的特点 通过 一次完整的web请求和渲染过程以及如何优化网页 ,我们可以知道页面渲染的时候,会忽略掉 display: none 这一...
  7. 滑动验证码的原理并利用 Vue 实现滑动验证码 做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动、点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大致说明下这些验证码的原理以及带大家实现一个滑动验证码。 我之前做过 Web 相关开发,尝试对接过 Lavavel 的极验验证,当时还开发了一个 Lavavel 包: https://githu...
  8. 一文速览React全栈 React是Facebook推出的一个JavaScript库,它的口号就是“ 用来创建用户界面的JavaScript库 ”,所以它只是和用户的界面打交道,你可以把它看成MVC中的V(视图)这一层。现在前端领域各种框架和库层出不穷,那么是什么原因让React如此流行呢?简单来说,是它三大颠覆性的特点: 组件、JSX、Virtual DOM 。 本文依次介绍...
  9. Ajax详解(手写jq和axios部分实现) //一、创建ajax实例 let xhr = new XMLHttpRequest();//IE下为ActiveObject对象 //二、打开请求: 发送请求之前的一些配置项 //1.HTTP METHOD:GET/POST/PUT/DELETE/HEAD/OPTIONS/TRACE/CONNECT/ //2.url:接口地址 //3.async:设置Ajax的同步异步,默认是异步 //4.user-name/user-pass用户名和密码,一般不用 xhr.open(met...
  10. JavaScript基础:如何管理JS中的内存?什么是内存泄漏和垃圾回收 前言 像C语言这样的底层语言一般都有底层的内存管理接口,比如 malloc()和free()用于分配内存和释放内存。 而对于JavaScript来说,会在创建变量(对象,字符串等)时分配内存,并且在不再使用它们时“自动”释放内存,这个自动释放内存的过程称为垃圾回收。 因为自动垃圾回收机制的存在,让大多Javascript开发者感觉他们...
  11. 一文学会Vue中间件管道[每日前端夜话0x8C] 每日前端夜话 0x8C 每日前端夜话,陪你聊前端。 每天晚上18:00准时推送。 正文共:2799 字 预计阅读时间:10 分钟 作者:Dotun Jolaoso 翻译:疯狂的技术宅 来源: logrocket 通常,在构建SPA时,需要保护某些路由。例如假设有一个只允许经过身份验证的用户访问的 da...
  12. 初学 Babel 工作原理已经9102了,我们已经能够熟练地使用 es2015+ 的语法。但是对于浏览器来说,可能和它们还不够熟悉,我们得让浏览器理解它们,这就需要 Babel。
  13. new Vue到底发生了什么(2.0) 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 复制代码 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例,以及可选的嵌套的、可复用的组件树组成。当一个 Vue 实例被创建时,它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改...
  14. JS 里的简易算法和数据结构之复杂度 原文:https://www.freecodecamp.org/news/the-complexity-of-simple-algorithms-and-data-structures-in-javascript-11e25b29de1e/ 译者:zhicheng 校对者:Chengjun.L 提示:文中的蓝色字体大家可以点击文末“阅读原文”在 freeCodeCamp 中文论坛访问链接 在之前的文章迈向计算科...
  15. 一周 GitHub 开源项目推荐:阿里、腾讯、陌陌、bilibili…… 一周 GitHub 开源项目推荐 点击链接或图片即可阅读 喜欢请分享到朋友圈哦 陌陌风控系统正式开源 陌陌风控系统静态规则引擎,零基础简易便捷的配置多种复杂规则,实时高效管控用户异常行为。 GitHub 地址 https://github.com/momosec...
  16. CSS优秀起来真没JS什么事 原文: The State of CSS Reflections 说明:为方便读者理解,本文采用意译,非直译;其次,原文极长,作者还给出了浏览器兼容方案,本译文重点介绍 box-reflex 属性的作用效果,不阐述兼容问题,有兴趣的读者可以点击原文阅读,谢谢~ 最后:翻译不易,译文求Star: //github.com/qiud... 最近我在CodePen上...
  17. 使用koa搭建web服务,从路由到MySql 最近使用koa搭建了个web服务器,包括Session的处理、路由的设计、项目结构的设计、错误的处理、数据库的读写等,用起来特别的爽,在这做个总结,供大家参考,有什么不对的,欢迎讨论。 项目结构 -config.js -package.json -scripts/,用来存放初始脚本文件 -logs/,用来存放日志 -static/,用来存放前端文件 -server/...
  18. Vue 组件间传参最佳实践1.1.1通过绑定 props 将父组件的数据关联到子组件,并修饰 .sync 或者用 v-model 同步来自子组件的数据变化
  19. JavaScript温故而知新——原型和原型链 在当前Vue、React、Angular三驾马车齐驱的前端领域,我们对于框架的学习是无可厚非的,毕竟日常工作当中做的最多的就是业务的开发,框架的灵活运用大大提高了我们的开发效率。只不过我们前端框架的底层也终归是原生的JS,如果我们对于原生的东西了然于胸,那么对于框架的使用自然是更加得心应手。 不过原生JS我们往往...
  20. Vue 最黑暗的一天 原文:Vue's Darkest Day 作者:Daniel Elkington 译者注:原文写于2019年6月21日 今天,我惊讶的发现,往常积极友好的 VueJS 社区陷入了一场激烈的战争。 两周前,Vue 的创建者尤雨溪发布了一个 请求意见稿(RFC) ,用于在即将发布的 Vue 3.0 中使用基于函数的方式编写 Vue 组件。今天, 一个 Reddit 上批评性的...
  21. js普通函数和箭头函数的this(全网最容易理解) 首先我们来搞明白普通函数的this指向问题: const obj = { bg:function(){ console.log(this) } } obj.bg() //obj var dbl = obj.bg dbj() //windows 复制代码 obj是一个对象,对象里面有过一个bg的属性,然后第一行obj.bg()执行,普通函数里面的this指向obj这个对象,第二行var dbl = obj.bg只做...
  22. 「译」编写更好的 JavaScript 条件式和匹配条件的技巧如果你像我一样乐于见到整洁的代码,那么你会尽可能地减少代码中的条件语句。通常情况下,面向对象编程让我们得以避免条件式,并代之以继承和多态。我认为我们应当尽可能地遵循这些原则。
  23. svg+css3做一个动感的波浪效果一根矢量的波浪 {代码...} 完整代码: {代码...}
  24. 5 分钟即可掌握的 JavaScript 装饰者模式与 AOP 什么是装饰者模式 当我们拍了一张照片准备发朋友圈时,许多小伙伴会选择给照片加上滤镜。同一张照片、不同的滤镜组合起来就会有不同的体验。这里实际上就应用了装饰者模式:是通过滤镜装饰了照片。在不改变对象(照片)的情况下动态的为其添加功能(滤镜)。 需要注意的是:由于 JavaScript 语言动态的特性,我们很...
  25. JavaScript深入浅出第2课:函数是一等公民是什么意思呢?摘要: 听起来很炫酷的一等公民是啥? 《JavaScript深入浅出》系列: JavaScript深入浅出第1课:箭头函数中的this究竟是什么鬼? JavaScript深入浅出第2课:函数是一等公民是什么意思呢? 看到一篇讲JavaScript历...
  26. 为什么 ['1', '7', '11'].map(parseInt) 在 Javascript 中返回了 [1, NaN, 3] 本篇文章采用意译,原文地址 你有没有觉得 Javascript 是有点奇怪的。使用 map 和 parseInt 试着把字符串数组转化成整型数组,看看会发生什么。打开你的控制台,粘贴下面的代码然后执行。 .map(parseInt); 复制代码 没有得到 。这究竟是怎么回事?我们首先需...
  27. JavaScript来说数据结构数据结构是工程师编程通识之一,不管你是JavaScript工程师,还是Java、python工程师,对数据结构理解够深,才能写出更简洁、更优雅的程序代码。这里我用JavaScript语言来写数据结构示例,希望对你有所帮助。
  28. 前端工程化初探目前我所理解的前端工程化, 顾名思义, 就是让前端项目具备工程特性: 满足规范化,流程化,自动化等要求, 随着大前端时代下前端发展的速度越来越快, 项目也日渐复杂起来, 前端项目管理也越来庞杂, 造成项目维护性差,...
  29. 搭建一个 nodejs 脚手架 像我们熟悉的 vue-cli,taro-cli 等脚手架,只需要输入简单的命令 taro init project ,即可快速帮我们生成一个初始项目。在日常开发中,有一个脚手架工具可以用来提高工作效率。 1.2 为什么需要脚手架 减少重复性的工作,从零创建一个项目和文件。 根据交互动态生成项目结构和配置文件等。 多人协作更为方便...
  30. centos7.6+nginx+nvm+pm2+nodejs+vuejs初探 背景 一个切图仔除了工作之余想自己学点东西,想到之前自学了一些vuejs,也了解过一点nodejs和Linux的内容,那就决定下来自己开发部署发布一个小应用吧。(纯属记录自己瞎搞的过程,不对的地方还请大家批评指正,万分感谢) centos7.6 首先搞一个Linux服务器,一个没怎么弄过服务器的菜鸟来说,最简单的当然是去...
  31. React学习篇-JSX(手写一个JSX的插件) 学习和阅读 vue 源码有段时间了,最近在尝试去学习 react,由于眼前项目使用不上 react,并不想一股脑的学习它的 API(长时间不用还是会忘),所以此次的学习过程打算换种方式,对于 react 涉及到的每个点尝试逐个深入,了解其解析过程及整个框架的思路。 对于每个点的学习和深入,将以文章的形式产出,主要是对于学习...
  32. 如何从零开始定义一个类似websocket的即时通讯协议WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被W3C定为标准。
  33. TySheMo 前端数据管理模型项目地址:[链接] 使用文档:[链接] 使用案例:[链接] TySheMo是一个前端数据(状态)管理工具。它面向复杂的前端数据管理,用于在前端结构化数据的不断变化中,清晰地控制数据变动,使数据变动不引起错误,并且...
  34. Node.js 前后端分离开发新思路从事 Web 开发的程序员,对于前后端分离模式多半不陌生,这也是目前主流的 Web 开发模式,具体关于前后端分离的模式可以参看文章《你不得不了解的前后端分离原理!》,在这里写者不进行说明。
  35. 写给产品经理们的技术分享——前端篇 作为一个产品经理,学习并掌握基础的技术知识是非常重要的。而本篇文章就重点讨论前端部分,讲一讲HTML和CSS、JavaScript的知识要点。 为什么学习技术?我想上面这段话给予了非常好的解释。 在当今时代,职能划分越来越精细,但你仍然可以看到不同行业、领域、职业都密不可分,他们互相融合和渗透。设计和...
  36. JavaScript之cookie与webstorage 由于http是无状态的协议,一旦客户端和服务器的数据交换完毕,就会断开连接,再次请求,会重新连接,服务器单从网络连接上是没有办法知道用户身份的。cookie就是为了解决此问题而产生的,每次新的用户请求时,便给用户颁发一个独一无二的身份证,下次访问,必须带上身份证,这样服务器就会知道是哪个用户进行了访问,针...
  37. 对于promise的常见面试题总结分析 1)了解Promise, Promise是一种异步编程的解决方案,有三种状态,pending(进行中)、resolved(已完成)、rejected(已失败) 。当Promise的状态由pending转变为resolved或reject时,会执行相应的方法 2) Promised的特点是只有异步操作的结果,可以决定当前是哪一种状态,任务其他操作都无法改变这个状态 ,也是“P...
  38. vue-cil 3.0 配置说明 npm install -g cnpm --registry=https://registry.npm.taobao.org 复制代码 1 安装vue-cli npm install -g @vue/cli # OR yarn global add @vue/cli 复制代码 2 查看版本 vue --version 复制代码 3 vue-cli构建项目 vue create vue-demo 复制代码 选择默认即可、可起服务 4 目录结构 ├── R...
  39. 用 js 写卡牌游戏(三) 废了又废话 上篇文章发了之后,有挺多朋友来注册线上地址的,受宠若惊。 然后看了看上篇文章的日期,6个月前,emmmm,为什么我这么懒。。。 开了一个交流群,532413727,大家有啥想问的想说的可以加群交流。 第三回(卡牌攻击) 接着上节所...
  40. JavaScript基础专题之深入执行上下文(三) 变量对象作为执行上下文的一种属性,每次创建后,根据执行环境不同上下文下的变量对象也稍有不同,我们比较熟悉的就是 全局对象 和 函数对象 ,所以我们来聊聊全局上下文下的变量对象和函数上下文下的变量对象。 全局上下文 我们先了解一个概念,什么叫全局对象。在W3School中: 全局对象是预定义的对象,作为 ...
  41. 写给产品经理们的技术分享——前端篇 作为一个产品经理,学习并掌握基础的技术知识是非常重要的。而本篇文章就重点讨论前端部分,讲一讲HTML和CSS、JavaScript的知识要点。 为什么学习技术?我想上面这段话给予了非常好的解释。 在当今时代,职能划分越来越精细,但你仍然可以看到不同行业、领域、职业都密不可分,他们互相融合和渗透。设计和...
  42. JavaScript的事件流 事件就是文档或者浏览器窗口中发生的一些特定的交互瞬间。我们可以用侦听器(或者事件处理程序)来预定事件,这样当监测到事件发生时就能执行响应的代码了。 二、事件 事件是JS引擎内置的、预先定义的函数变量 事件有可能由浏览器触发,也可能由用户触发 当事件触发时,JS引擎会按照一定的规则调用这些变...
  43. [Vue]组件编写小结 前言 随着js编程进入工程化纪元,代码模块化,组件化,成为工程的具体落地方法。 最近使用vue全家桶做了一个类似于iconfont的网站,在做的过程中关于组件有了一些思考和总结,为了巩固,写个小结。 一 组件类型 根据我已知的组件的编写方式,有四种介绍给大家: 1.1 基本组件 最基本的组件由一个.vue文件构成,其...
  44. 前端面试知识点整理(附答案)大部分情况,采用div+css就可以实现静态页面,但是这样的布局会导致文档结构不够清晰,而且不利于浏览器的读取。而如果采用语义强的标签,比如用H系列标签表示标题,strong表示强调等,这样就能提升网站的可读性,...
  45. mpvue框架使用记录 最近公司接了一个订制小程序,是从APP改成微信小程序,考虑用 mpvue 框架来开发,发现还是有些坑的,下面说一下这两天使用下来的感受。 template 中不支持 methods 中的函数,也没有filter过滤器,数据要预先处理比较麻烦 突然想到可以用组件来预处理数据,比如项目中图片url的拼接和替换域名 创建新页面比较繁...
  46. 重学Vue-Router 除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。 想要导航到不同的 URL,则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。 当你点击 <router-link> 时,这个...
  47. 你要的Vue面试题都在这里 Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API; Vue.js是一个构建数据驱动的Web界面的库。 Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面...
  48. Vue移动端右滑屏幕返回上一页 有些时候我们玩手机更喜欢使用手势滑动带来的用户操作体验。Vue touch directive是一个用于移动设备操作指令的轻量级的VUE组件。使用它可以轻松实现屏幕触控、滑动触发事件,提高用户体验。本文结合实例讲解如何实现Vue移动端右滑屏幕返回上一页。 查看演示 下载源码 安装依赖 使用npm安装vue-directive-t...
  49. 揭秘Vue中的Virtual DomVue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍,并大大降低了内存消耗。那么,什么是Virtual DOM?为什么需要Virtual DOM?它是通过什么方式去提升页面渲染效率的呢?这是本文所要探讨的问题。
  50. 搞懂JavaScript引擎运行原理JS引擎 — 一个读取代码并运行的引擎,没有单一的“JS引擎”;,每个浏览器都有自己的引擎,如谷歌有V。
  51. JavaScript原型链理解 前段时间离职了,裸辞的那种,然后马不停蹄的就开始投简历,面试,在面试中被问到你能说一下原型和原型链吗或者是你能画一下原型链图吗的问题,当时我的表情是这样的, 然后只能凭着自己仅有的一点点记忆画了一下图,最后还是说这个我没有理解到位!唉,心里面一万个后悔没有好好研究一下原型。所以就有了这...
  52. 从0搭建前端项目架构-webpack配置 cd build touch webpack.config.client.js 复制代码 6.在webpack中配置项目打包的入口和出口文件。 entry代表打包的入口文件,这里就是指定到app.js output代表打包后的出口文件。 filename:打包后的文件名,采用 . .js。 是项目的入口文件名,就是app, 是hash串。采用hash写...
  53. 支持嵌套对象、多级数组的Vue动态多级表单组件 —— vue-dynamic-form-component 方便不想看完全篇文章的童鞋,简单总结一下,这是篇软广,主要是推广自己在业务中沉淀的一个开源组件 vue-dynamic-form-component 。基于 element-ui 实现的 vue组件,只需编写类似 async-validator 的规则,自动生成对应的表单,支持常见输入类型的同时,支持嵌套对象、hashmap、多维数组等复杂类型。有需要的童鞋欢迎...
  54. 需要知道的JS的日期知识,都在这了但是我们并不总是需要使用库。如果知道要注意一些总是,日期实际上可以非常简单。接下介绍有关Date对象的所有信息
  55. CSS布局:如何实现居中布局?1. 父级容器设置成表格,子级设为行内元素。 适合子级内容为文本展示。 {代码...} 2. 父级容器设置相对定位,子级设置绝对定位后通过外边距居中。 {代码...} 3. 父级容器设置为弹性盒,子级设置外边距。 {代码......
  56. 深入浅出weex核心原理 从前,如果我们打算实现某个需求,通常需要三种程序员(ios, 安卓,前端)写三份代码。这就带来了非常大的开发成本,所以业界也一直在探索跨平台方案——从最早的H5, Hybrid 到现在的weex, React Native。这些方案的本质目的都是,一套代码,多端运行。 H5和Hybrid的发展 早期H5和Hybrid方案的本质是,利用客户端App...
  57. 深入了解JSX 最近开始学着使用React写东西。在写代码时会使用JSX,不了解JSX的相关知识写起代码的效率还是蛮低的。为了能更好的进入状态,打算先把JSX相关的知识和细节了解一下。在这篇文章中我们主要就是来学习一下JSX的相关知识。希望对于像我这样的初学React(或初次接触JSX)的同学有所帮助。 什么是JSX JSX是JavaScript中的...

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

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

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