20180830 前端开发日报

前后端分离 Vue + NodeJS(Koa) + MongoDB,从产品到开发,全栈实践;JavaScript模拟自由落体;在vue中使用SockJS实现webSocket通信;js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗;vue项目中的痛点(十四);vue-cli3.0 资源加载的优化方案;Babel 7.0正式发布,支持TypeScript,JSX Fragment;vue路由(十一)

  1. 前后端分离 Vue + NodeJS(Koa) + MongoDB,从产品到开发,全栈实践 闲来无事,试了一下 Koa,第一次搞感觉还不错,这个项目比较基础但还是比较完整了,还是有一定的参考价值 项目简介 以下是项目地址,希望给个 star ,鼓励一下: 前端 gitHub 地址 后端 gitHub 地址 PS:数据库我放在了后端项目的 db-daike 目录下 项目名:《代课》 介绍:大学期间加入了两个...
  2. JavaScript模拟自由落体 1.效果图2.实现分析利用Canvas画圆球、地面;1.下落过程物理知识回顾,物体下落过程(不计损耗)由重力势能转换成动能重力势能 Ep = mgh动能 Ek = (1/2)mv^2速度右0增加至gt此间需要计算浏览器每次渲染的圆球y坐标y = (1/2)
  3. 在vue中使用SockJS实现webSocket通信 最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助.废话少说,下面我就来讲一下我的实现过程: 前提 要进行文章中的代码的测试,需要服务端端开发人员配合你,提供相关...
  4. js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗为了完成本次测试,先来科普一下,如何利用chrome来设置下载速度(会用的可直接跳过)1.打开chrome控制台(按下F12),可以看到下图,重点在我画红圈的地方
  5. vue项目中的痛点(十四) 例如商品列表页面前往商品详情页面,需要传一个商品id <router-link :to="{path: 'detail', query: {id: 1}}">前往detail页面</router-link> c 页面的路径为 http://localhost:8080/#/detail?id=1 ,可以看到传了一个参数 id=1 ,并且就算刷新页面id也还会存...
  6. vue-cli3.0 资源加载的优化方案之前自己搭建了一个 vue + tp5.1 的后台项目([链接]),坑很多,其中一个就是资源加载的方案,由于是后台项目,之前一直没放在心上,看到一些资源优化方案后([链接]),觉得有必要弄一下。
  7. Babel 7.0正式发布,支持TypeScript,JSX Fragment 编译|无明、覃云 今天,Babel 官方博客宣布正式推出 Babel 7.0,在过去两年内,Babel 7 经历了 4000 次提交,发布了 50 多个预览版本,这也是三年前发布 v6.0 之后的最大更新。 Babel 的重要意义 由于
  8. vue路由(十一) 在单页面应用,大部分结构不变,只改变内容的使用 1.3 前端路由优点、缺点 优点 : 用户体验好,不需要每次都从服务器全部获取,快速展现给用户 缺点 : seo 二、vue-router用来构建SPA 2.1 开始 在你的文件夹下的 src 文件夹下...
  9. Github托管项目实现自动化部署当我们利用github来托管项目时,每次部署项目都要走同样的流程,敲击同样的命令行,尤其的我们的node项目更是无法忍受这种重复工作。
  10. 一个老同学的故事引发的nodejs 爬虫 故事发展 平静悠闲的日子,依然是钱少事多,此处想象一个表情。忽然有一天,故事就来了,一个做统计的美女老同学说她懒得自己复制粘贴,让我帮她爬虫获取一些文章的内容和制定段落的文字,他们做后续的数据统计和分析,这个忙我当然得帮了,虽然没爬过。。。哈哈,然后下班之后我就花了几个小时用自己比较熟悉的nodejs...
  11. React 后台管理模板 GitHub主页 | 预览地址 功能 封装了dva框架的数据流转,简单的请求可以不用在model和service中定义 封装了数据模模拟,可以独立于后台开发前台功能 封装了分页请求,简化并规范了分页逻辑 封装了fetch请求,适应与后台多种交互请求, bo
  12. Web安全快速入门 web安全快速入门 ──几个Web开发人员必知的安全缩略语 原文:A quick introduction to web security 作者:Austin Tackaberry 发表时间:2018/8/15 译者:陈 昌茂
  13. vue计算属性与数据监听(十) 我们在工作中常常需要监听某一个属性值的变化,这个时候我们就需要用到了监听属性 watch 1.1 基础版监听 场景如下:输入框输入你的年龄,如果年龄在0-15岁提示信息:你还是个小孩,如果年龄在 15-25岁,提示信息:你已经是个少年,如果年龄在25岁以上,提示信息:你已经长大了 <template&g...
  14. vue过渡与动画(十五) vue.2.0 中的过渡动画利用自身的 transition 组件实现 有四种情形可以实现过渡效果 v-if v-show 过渡有两种总的状态:即 enter (过渡开始)和 leave (过渡结束) 这两中状态再细分,可分出6种状态,对应6个类名 在进入/离开的过渡中,会有 6 个 class 切换 控制元素的滑入与滑...
  15. vue实例方法(十三) Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $ ,以便与代理的数据属性区分 组件树 $parent :用来访问组件实例的父实例 $root : 用来访问当前组件树的根实例 $children :用来访问当前组件实例的直接子组件实例 $refs :用来访问 v-ref 指令的子组件 DOM访问 ...
  16. webpack v4 中的断舍离 - 代码分离 SplitChunksPlugin(一) Time went by...  webpack已经从v3版本升级升级到了v4版本,刚刚我在官网看见升级到 v4.16.5 。最近webpack的升级速度很快,几乎两个星期就会有一个小版本的更新。软件更新速度快是一件好事情,会让一款软件更加稳定和便捷,但对于使用着来说无疑是增加了学习成本。 案例地址 github.com/z354392349/… ...
  17. 前端阶段性总结(一): HTTP 协议,从1.0到2.0引言: 转前端一年了,期间工作较忙,也没时间整理一些知识体系,此系列文章是对前端基础的一些回顾与总结。
  18. 使用PDF.JS插件在HTML中预览PDF文件PDF.js是一款基于HTML5建立的PDF阅读器,兼容大部分主流的浏览器,使用起来,也相对简单。步骤如下:
  19. webpack自定义loader初探 最近负责的Weex项目涉及到一些构建上的问题,需要通过自定义webpack的loader去实现,于是学习了一下这方面的知识,写一篇文章做个总结,以免遗忘。 什么是loader 我们都知道webpack作为当下最火的一个前端构建工具,具有很多很实用的功能,loader就是其中之一。说的通俗一点,loader就是用于对模块的源码进行转换...
  20. wepback的可视化资源分析工具webpack-bundle-analyzer的使用首先推荐使用wepback的可视化资源分析工具。以下给出webpack-bundle-analyzer配置【vue-cli构建项目时会自动配置好】
  21. ES6指北【6】——详谈解构赋值【附赠练习题】解构赋值语法是一个 Javascript 表达式,这使得可以将值从数组或属性从对象提取到不同的变量中
  22. 《Web 推送通知》系列翻译 | 第二篇:推送是怎么工作的? 原文地址:how-push-works 译文地址:推送是怎么工作的? 译者:刘鹏 校对者:任家乐、张卓 在我们接触这个 API 之前,让我们先从一个高层次从头到尾来看一下推送。稍后我们将通过逐一介绍各个主题和 API 让你知道为什么推送是这么重要

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

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

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