20190924 前端开发日报

通过 Laravel 创建一个 Vue 单页面应用(一);原生JS之CORS;提升 Web 开发效率的 VS Code 扩展;遇见面试 Vuex原理解析;使用CSS实现图片帧动画与曲线运动;Javascript 内存空间管理(这次一定要整明白);如何不花钱让html5播放rtsp视频流(第二弹);放下Axios,手写纯原生Ajax通信接口

  1. 通过 Laravel 创建一个 Vue 单页面应用(一) 文章转发自专业的Laravel开发者社区,原始链接: https://learnku.com/laravel/t… 使用 laravel 创建一个 Vue 单页面应用 (SPA) 可以构建一个整洁的由 API 驱动的应用。在此教程中,我们将学习如何构建并运行一个以 Vue 路由为前端,laravel 为后端的 SPA 应用。首先我们将注意力集中在编写每一个小的功能代码块上…
  2. 原生JS之CORS CORS全称是:Cross-Origin Resource Sharing,跨域资源共享。是解决AJAX跨域的一种方案。正常情况下,AJAX 发起跨域请求后,浏览器拒绝接收响应,会报跨域的错。CORS是W3C的一个标准,他新增了一些机制,可以使得浏览器能够接收跨域的响应。虽然JSONP能够实现跨域,但它不够正统,存在一些缺陷,JSONP只支持GET请求,这…
  3. 提升 Web 开发效率的 VS Code 扩展怕有人不知道,我还是简单说明一下。Visual Studio 是一个功能全面且便捷的集成开发环境,而 VS Code 则是一个开源、跨平台的源码编辑器,在 web 开发群体中尤其出名。它不仅快速、可扩展、可自定义,而且还有大…
  4. 遇见面试 Vuex原理解析 自从学习了VUE框架,其中必不可少的会用到vuex这个核心插件,而且在做项目的时候,基本都会使用,可能你会使用vuex状态管理,但是对vuex原理存在着或多或少的的疑惑或不解,这篇文章就针对vuex原理进行研究,希望能帮助到大家,如果有不准确的地方,大家多多指教。。。 二、Vuex是什么? Vuex是专门为Vue服务,用于…
  5. 使用CSS实现图片帧动画与曲线运动本文首发于公众号:符合预期的CoyPan 写在前面 在前端开发中,提到动画,我们可以: 直接利用DOM实现动画。 利用canvas实现动画。 利用svg实现动画。 直接用一张gif动图。 利用图片实现帧动画。 … 所有动画的基…
  6. Javascript 内存空间管理(这次一定要整明白) 我们都知道 Javascript 具有自动垃圾回收机制。一听到 自动 这个词,多好啊,能帮我们做点,我们就可以少做点事了。或许也部分是因为这个自动回收垃圾的机制,很多的前端小伙伴就减少了和内存空间打交道的场合或机会,就容易忽视这些。还有就是,前端开发人员许多都不是计算机专业毕业的,对内存空间的认知就比较模糊了…
  7. 如何不花钱让html5播放rtsp视频流(第二弹) 书接上文,上期教程我们实现了利用FFmpeg将rtsp转码为rtmp,nginx分发,在页面上播放视频。但是rtmp也有还是具有缺陷的,比方说: rtmp视屏流基于flash才能播放,所以你的电脑必须安装flash,但是当前各大浏览器都准备不再支持flash rtmp视频流播放还是具有2-3秒的延迟实现,这对实时告警系统还是不太理想。 …
  8. 放下Axios,手写纯原生Ajax通信接口 axios作为vue框架中最常用的ajax工具包之一,可以与后台API接口进行通信,传送或接收数据,在前后端分离开发中,发挥了通信桥梁的重要作用。 虽然像axios这样的第三方工具包很好用,但是这类工具包并不能很好地帮助前段开发人员,尤其是新人理解JavaScript原生的ajax通信机制。 因此,本文将通过JS原生的ajax通信实…
  9. 前端性能优化二:现代浏览器javascript性能优化(1) 前端性能优化一:性能指标 现代前端程序中,前端资源文件中占绝大部分byte的是javascript。一个现代前端应用程序,javascript包中可能包含以下几种类型的js文件 一个客户端的框架(react/vue等等)或者一个UI框架(Element UI等等) 单页应用程序state管理解决方案(Redux,vuex等等) Polyfill 一些工具库(loda…
  10. electron-vue项目笔记7——实现主题换肤 不推荐直接使用less或css变量方式来换肤,因为有些定制不仅仅是某些样式颜色不一样,当然,如果你的定制仅仅更换相同地方的颜色,那你使用less/scss变量会更节省资源 1. 新建一个主题文件夹 theme 并创建相应的换肤脚本 index.js 以及主题样式文件 theme.scss 、 theme1.scss 新建一个主题文件夹 theme 并创…
  11. Javascript中你需要知道的最出色的新特性:Optional Chaining 对于使用 Javascript 的每个人来说,可选链(Optional chaining)是游戏的规则的改变者。它与箭头函数或 let 和 const 一样重要。我们讨论下它可以解决什么问题,它如何工作,以及它如何使得你的生活更加轻松。 问题 想象以下场景: 你正在使用片段代码来从一个 API 加载数据。返回数据是深度嵌套的对象,这就意…
  12. promise笔记-自己实现一个简易promise 例如 多个setTimeout()嵌套造成回调地狱 setTimeout(function() { // do something.. setTimeout(function() { // do something.. }, 1000) }, 1000) 复制代码 可以用Promise解决 new Promise(function(resolve, reject){ setTimeout(function() { // do something.. resolv…
  13. 生成定制化的JSDoc文档 前两周接到一个需求,为我们的公共接口库生成一篇文档,主要是老大觉得这么重要的库连篇像样的文档都没有,来一个新人都要口耳相传忒费劲QAQ。在网上搜了些自动化识别js并生成文档的第三方工具,最终选择了JSDoc。 JSDoc功能描述 JSDoc 是一个根据 javascript 文件中注释信息,生成 JavaScript 应用程序或库、模块的…
  14. nodejs(七)模版引擎的使用 art-template 是一款高性能的JavaScript 模板引擎,不仅可以在浏览器(前端)使用,同时也可以在Node中使用。 原理: art-template 原理就是将一个字符串数据按照模板引擎的语法替换掉其中的某些特定格式数据,然后产出我们所需的HTML文档。 art-template 支持两种语法:标准语法,原始语法,标准语法多以 {{}} 常见…
  15. nodejs(八)express使用详解 Express 是一个基于 Node.js 封装的上层服务框架,它提供了更简洁的 API 更实用的新功能。它通过中间件和路由让程序的组织管理变的更加容易;它提供了丰富的 HTTP 工具;它让动态视图的渲染变的更加容易;它还定义了一组可拓展标准。 1.2 安装 npm install express -S 复制代码 1.3 hello world let express = r…
  16. 细说webpack 3. webpack-cli 零配置打包 大家好!我是萝卜不带泥,webpack 4 带来了大量的更新,其中一个就是webpack 4 默认不需要配置文件,下面就带大家体验一下! 初始化项目 首先创建项目,创建一个名为webpack的文件夹,进入文件夹使用npm init进行初始化,代码如下: // 创建目录并进入 mkdir webpack && cd $_ // 初始化项目 npm init -y // 安装 web…
  17. Webpack chunk打包时,一定要采用非覆盖式升级 最近使用webpack时,遇到了一个问题:版本更新后,如果没有刷新页面就去动态加载某个chunk文件,可能会返回404,即找不到这个文件。 问题复现条件 使用webpack 动态import实现按需加载业务模块 chunk文件名带有哈希:3种哈希(hash/chunkhash/contenthash)都可以 静态资源部署时,采用覆盖的方式。即:将…
  18. webpack loader配置全流程详解 1.主要目的为稍微梳理从配置到loader的流程。另外详解当然要加点源码提升格调(本人菜鸟,有错还请友善指正) 2.被webpack打包的文件,都被转化为一个module,比如 import ‘./xxx/x.jpg’ 或 require(‘./xxx/x.js’) 。至于具体实际怎么转化,交由loader处理 3.下文会使用typescript(劝退警告?)以方便说明有哪些选项和…

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

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


关注我

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

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

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