20180903 前端开发周报

前后端分离 Vue + NodeJS(Koa) + MongoDB,从产品到开发,全栈实践;JavaScript逗号运算符知多少;在vue中使用SockJS实现webSocket通信;现代 JS 流程控制:从回调函数到 Promises 再到 Async/Await;js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗;JavaScript模拟自由落体;可能比文档还详细–VueRouter完全指北;Vue.js从Virtual DOM映射到真实DOM的过程

  1. 前后端分离 Vue + NodeJS(Koa) + MongoDB,从产品到开发,全栈实践 闲来无事,试了一下 Koa,第一次搞感觉还不错,这个项目比较基础但还是比较完整了,还是有一定的参考价值 项目简介 以下是项目地址,希望给个 star ,鼓励一下: 前端 gitHub 地址 后端 gitHub 地址 PS:数据库我放在了后端项目的 db-daike 目录下 项目名:《代课》 介绍:大学期间加入了两个...
  2. JavaScript逗号运算符知多少 前不久看到一道挺有意思的题目,这次就围绕这个来写点东西~ 首先来看下这个东西~ var a = (1,2,3); console.log(a) 答案是什么?为什么?答对了么?第一次看到这个,会以为是报错,因为一直没见过这种写法,而且实际项目中几乎也没人这样写吧,也看不出有啥实际用途。结果这个出乎意料输出...
  3. 在vue中使用SockJS实现webSocket通信 最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助.废话少说,下面我就来讲一下我的实现过程: 前提 要进行文章中的代码的测试,需要服务端端开发人员配合你,提供相关...
  4. js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗为了完成本次测试,先来科普一下,如何利用chrome来设置下载速度(会用的可直接跳过)1.打开chrome控制台(按下F12),可以看到下图,重点在我画红圈的地方
  5. JavaScript模拟自由落体 1.效果图2.实现分析利用Canvas画圆球、地面;1.下落过程物理知识回顾,物体下落过程(不计损耗)由重力势能转换成动能重力势能 Ep = mgh动能 Ek = (1/2)mv^2速度右0增加至gt此间需要计算浏览器每次渲染的圆球y坐标y = (1/2)
  6. 可能比文档还详细--VueRouter完全指北 前言 关于标题,应该算不上是标题党,因为内容真的很多很长很全面.主要是在官网的基础上又详细总结,举例了很多东西.确保所有新人都能理解!所以实际上很多东西是比官网还详细的.你想要的,在官网上没理解的,基本在这里都能找到解答!本来想分成两篇发的,但想想男人长点也没
  7. Vue.js从Virtual DOM映射到真实DOM的过程 Virtual DOM的概念相信大家都不会陌生,Vritual DOM是相对与DOM(文档对象模型)来说的,MDN上关于DOM的定义:“DOM模型用一个逻辑树来表示一个文档,树的每个分支的终点都是一个节点(node),每个节点都包含着对象(objects)。DOM的方法(methods)让你可以用特定方式操作这个树,用这些方法你可以改变文档的结构、样式或者内...
  8. vue过滤器(八) // 第一个参数表示:过滤器的名称 // 第二个参数表示:函数,使用过滤器的时候,这个函数中的代码会被执行 Vue.filter('filterName', function (value) { // value 表示要过滤的内容 }) 例子 Vue.filter('date', function (input, format = 'yyyy-MM-dd hh:mm:ss'){ var o = { &q...
  9. React Context API:轻松管理状态 原文链接:React Context API: Managing State with Ease 译者:OFED 使用最新的 React Context API 管理状态非常容易。现在就跟随我一起学习下它和 Redux 的区别以及它是如何使用的吧。 **综述:**React Context API 在 React 生态系统中并不是个新鲜事物。不过,在 React16.3.0版本中做了一...
  10. 干货|前端程序员容易出错的基础知识 web全栈是目前比较流行的语言,因为前端较其他语言相比,简单好学,而且现在的互联网公司几乎缺少不了web前端开发,行业的需求致使大量的人转型前端,对于刚学前端的人来讲,他们缺乏开发经验,在项目开发中容易出错,为了使大家少走弯路,小编综合一批前端程序员,收集了一些最常见的错误,供大家学习,避免掉坑。 ...
  11. 写给前端工程师的 10 条实用原则 译者按: 牛人都说自己是站在巨人的肩膀上,我们也要善于学习他人的经验。 原文: 10 Things You Will Eventually Learn About JavaScript Projects 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。 小编推荐:Fundeb...
  12. vue项目中的痛点(十四) 例如商品列表页面前往商品详情页面,需要传一个商品id <router-link :to="{path: 'detail', query: {id: 1}}">前往detail页面</router-link> c 页面的路径为 http://localhost:8080/#/detail?id=1 ,可以看到传了一个参数 id=1 ,并且就算刷新页面id也还会存...
  13. 如何机智的弄坏一台电脑?来自一名前端工程师的报复.. 很多人都在说: “技术领域当中,前端最没有技术含量,且容易被替代。” 有人说,前端的能力界限顶多就在浏览器那儿,无论你触发了多少bug,最多导致浏览器崩溃,连电脑系统都影响不了。 就像二次元各种炫酷的毁灭世界,都不会导致三次元的世界末日。 这我就不能忍了。作为一个前端,我发现还是有方式突破次元壁、打...
  14. 彻底搞懂CSS层叠上下文、层叠等级、层叠顺序、z-index 前言 最近,在项目中遇到一个关于CSS中元素z-index属性的问题,具体问题不太好描述,总结起来就是当给元素和父元素色设置position属性和z-index相关属性后,页面上渲染的元素层级结果和我预想的不一样。根据自己之前的理解,也没找到一个合理的解释。我
  15. Cookie 或将被替换,Chrome 工程师提议新型 HTTP 状态管理协议 问题 Cookie允许无状态的HTTP协议支持有状态会话,在web上,我们依靠Cookie实现了很多有趣的功能。即便如此,Cookie依然还是有很多问题:使用起来不够安全,浪费资源,使用一种令人惊讶的方式追踪用户在网络上的活动。 安全:这些年我们引入过很多的特性,试图提供合理的安全属性给那些关心安全的开...
  16. Vue.js异步更新及nextTick 前段时间在写项目时对nextTick的使用有一些疑惑。在查阅各种资料之后,在这里总结一下Vue.js异步更新的策略以及nextTick的用途和原理。如有总结错误的地方,欢迎指出! 本文将从以下3点进行总结: 为什么Vue.js要异步更新视图? JavaScript异步运行的机制是怎样的? 什么情况下要使用nextTick? 先看...
  17. vue-cli3.0 资源加载的优化方案之前自己搭建了一个 vue + tp5.1 的后台项目([链接]),坑很多,其中一个就是资源加载的方案,由于是后台项目,之前一直没放在心上,看到一些资源优化方案后([链接]),觉得有必要弄一下。
  18. vue过渡与动画(十五) vue.2.0 中的过渡动画利用自身的 transition 组件实现 有四种情形可以实现过渡效果 v-if v-show 过渡有两种总的状态:即 enter (过渡开始)和 leave (过渡结束) 这两中状态再细分,可分出6种状态,对应6个类名 在进入/离开的过渡中,会有 6 个 class 切换 控制元素的滑入与滑...
  19. Babel 7.0正式发布,支持TypeScript,JSX Fragment 编译|无明、覃云 今天,Babel 官方博客宣布正式推出 Babel 7.0,在过去两年内,Babel 7 经历了 4000 次提交,发布了 50 多个预览版本,这也是三年前发布 v6.0 之后的最大更新。 Babel 的重要意义 由于
  20. 【抛砖引玉】使用 ES6 的类继承加速 SPA 开发 【抛砖引玉】使用 ES6 的类继承加速 SPA 开发 背景 随着 ES6 和 SPA 框架的普及,前端开发已经在从以往的页面为主体向组件为主体进行改变,而组件的重用可以使用类继承来加速 SPA 开发。下面就是一个简单的继承实现的例子。 初始化项目 本文使用 a
  21. 一个老同学的故事引发的nodejs 爬虫 故事发展 平静悠闲的日子,依然是钱少事多,此处想象一个表情。忽然有一天,故事就来了,一个做统计的美女老同学说她懒得自己复制粘贴,让我帮她爬虫获取一些文章的内容和制定段落的文字,他们做后续的数据统计和分析,这个忙我当然得帮了,虽然没爬过。。。哈哈,然后下班之后我就花了几个小时用自己比较熟悉的nodejs...
  22. vue路由(十一) 在单页面应用,大部分结构不变,只改变内容的使用 1.3 前端路由优点、缺点 优点 : 用户体验好,不需要每次都从服务器全部获取,快速展现给用户 缺点 : seo 二、vue-router用来构建SPA 2.1 开始 在你的文件夹下的 src 文件夹下...
  23. 如何使用纯函数式 JavaScript 处理脏副作用 首先,假定你对函数式编程有所涉猎。用不了多久你就能明白 纯函数 的概念。随着深入了解,你会发现函数式程序员似乎对纯函数很着迷。他们说:“纯函数让你推敲代码”,“纯函数不太可能引发一场热核战争”,“纯函数提供了引用透明性”。诸如此类。他们说的并没有错,纯函数是个好东西。但是存在一个问题…… 纯函数是没...
  24. webpack4.0各个击破(9)—— karma篇 webpack 作为前端最火的构建工具,是前端自动化工具链 最重要的部分 ,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过 问题 + 解决方式 的模式,以前端构建中遇到的具体需求为出发点,学习 webpack 工具中相应的处理办法。(本篇中的参数配置及使用方式均基于 webpack4.0版本 ) 一. webpa...
  25. 只会用就out了,手写一个符合规范的Promise Promise是什么 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进
  26. 前端知识集锦2① 使用set去重:set是ES6中提供的数据结构,不同于数组,所有的值都是不重复的,Set内部使用===来判断是否相等,类似'1'和1会两个都保存,NaN和NaN只会保存一个
  27. css加载会造成阻塞吗? 之前面试今日头条的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染做一个测试。 为了完成本次测试,先来科普一下,如何利用chrome来设置下载速度
  28. 2018你应该知道的Web性能信息采集指南 2018你应该知道的Web性能信息采集指南 本文作者: Berwin ,W3C性能工作组成员,360导航高级前端工程师。Vue.js早期用户,《深入浅出Vue.js》(正在出版)作者。 http://github.com/berwin 假设您正在访问一个网站,如果Web内容不在几秒内显示在屏幕上,那么作为用户您可能会选择关闭标签页,转去浏览其他页...
  29. 前端数据校验从建模开始 前端开发过程中你们觉得处理什么业务功能最烦人? 做前端已经有很长一段时间了,不知道大家是否和我有同样的感受,在一些 Web 应用中表单处理起来比其他功能模块都麻烦,很多体力活,往往在数据的校验会很费时间。 为了能够把这部分代码更有条理,我们把数据校验部分通过
  30. JavaScript .filter() 方法全解析 .filter是一个内置的数组迭代方法,它接受一个“谓词(译者注: 指代一个过滤条件的函数)”,该“谓词”针对每个值进行调用,并返回一个符合该条件(“truthy值”)的数组。 上面那句话包含了很多信息,让我们来逐一解答一下。
  31. Vue.js的响应式系统原理 Vue.js是一款MVVM框架,核心思想是数据驱动视图,数据模型仅仅是普通的 JavaScript 对象。而当修改它们时,视图会进行更新。实现这些的核心就是“ 响应式系统 ”。 我们在开发过程中可能会存在这样的疑问: Vue.js把哪些对象变成了响应式对象? Vue.js究竟是如何响应式修改数据的? 上面这幅图的下半部...
  32. 从手写一个符合Promise/A+规范Promise来深入学习Promise 1.什么是Promise 一项技术不会凭空产生,都是为了解决某些实际的问题而出现。了解技术产生的背景,可以让我们更好的知道他擅长解决什么问题,哪些场景我们可以利用他来解决。那么就让我们一步一步来揭开promise神秘的面纱。 1.1.什么是promise 首先
  33. Github托管项目实现自动化部署当我们利用github来托管项目时,每次部署项目都要走同样的流程,敲击同样的命令行,尤其的我们的node项目更是无法忍受这种重复工作。
  34. react在安卓下输入框被手机键盘遮挡问题 问题概述 &nbsp;&nbsp;今天遇到了一个问题,在安卓手机上,当我要点击输入“店铺名称”时,手机软键盘弹出来刚好把输入框挡住了;挡住就算了,关键是页面还不能向上滑动,整个手机窗口被压为原来的二分之一左右; &nbsp;&nbsp;&nbsp;&nbsp;
  35. vue 表单控件与绑定(七) <div id="app-1"> <p><input v-model="textBox" placeholder="输入内容...">输入的内容:{{ textBox }}</p> </div> <script type="text/javascript"> var vm1 = new Vue({ el: '#app-1', data: { tex...
  36. ECMAScript正则表达式6个最新特性译者按: 还没学好ES6?ECMAScript 2018已经到来啦! 原文:ECMAScript regular expressions are getting better! 作者: Mathias Bynens: Google V8引擎开发者 译者:Fundebug 为了保证可读性,本文采用意译而非...
  37. React 后台管理模板 GitHub主页 | 预览地址 功能 封装了dva框架的数据流转,简单的请求可以不用在model和service中定义 封装了数据模模拟,可以独立于后台开发前台功能 封装了分页请求,简化并规范了分页逻辑 封装了fetch请求,适应与后台多种交互请求, bo
  38. vue计算属性与数据监听(十) 我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性 watch 1.1 基础版监听 场景如下:输入框输入你的年龄,如果年龄在0-15岁提示信息:你还是个小孩,如果年龄在 15-25岁,提示信息:你已经是个少年,如果年龄在25岁以上,提示信息:你已经长大了 <template&g...
  39. Web安全快速入门 Web安全快速入门 ──几个Web开发人员必知的安全缩略语 原文:A quick introduction to web security 作者:Austin Tackaberry 发表时间:2018/8/15 译者:陈 昌茂

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

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

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