20180906 前端开发日报

基于Vue开发的项目小结;webpack 定制前端开发环境;纯css实现瀑布流(multi-column多列及flex布局);7 分钟理解 JS 的节流、防抖及使用场景;前端技术全景展望;Vue项目预渲染机制引入实践;记一次Vue全页面SSR深坑之旅 – 微弱的内存/CPU泄漏;用JavaScript创建神经网络的有趣教程,一定要让你知道

  1. 基于Vue开发的项目小结 近期项目组在开发一个小程序管理平台,前端是基于vue开发的,这里就我开发的部分做个小结。 导航守卫 有些时候我们需要在路由发生改变的时候,做一些操作。比如编辑内容如果未保存,需要在跳转前弹窗提示。vue-router 提供的导航守卫就是用来解决这类问题的。 在本次项目用到了 beforeRouteLeave ,导航离开组件...
  2. webpack 定制前端开发环境 npm install webpack webpack-cli -g # 或者 yarn global add webpack webpack-cli # 然后就可以全局执行命令了 webpack --help 1.2 webpack 的基本概念 webpack 本质上是一个打包工具,它会根据代码的内容解析模块依赖,帮助我们把多个模块的代码打包 webpack 会把我们项目中使用到的多个代码模...
  3. 纯css实现瀑布流(multi-column多列及flex布局)瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了
  4. #前端技术#【7 分钟理解 JS 的节流、防抖及使用场景】详见: 由一道面试题引出 JS 函数防抖和函数节流,并通过实例分享其概念与使用场景。(作者:薄荷前端) ​​​

    7 分钟理解 JS 的节流、防抖及使用场景
  5. 前端技术全景展望 如果你正在进行前端项目的技术选型,可能就会发现,你已经跟不上前端生态的变化了,甚至令你眼花缭乱,因为现在有太多的技术栈供你选择:React、Flux、Angular、Aurelia、Mocha、Jasmine、Babel、TypeScript、Flow、Vue...这些技术栈的出现试图前端开发变得 简单化、模块化、工程化 ,但有一部分却增加了学习成本和项目...
  6. Vue项目预渲染机制引入实践 周末想顺便把已经做好静态页面的webApp项目做一下seo优化,由于不想写蹩脚的SSR代码,所以准备采用预渲染,本来想着网上有这么多预渲染的文章,随便找个来跟着做不就完了嘛,结果年轻的我付出了整个周末..... 这篇文章就记录一下最后是怎么配置的 T.T 声明: 以下配置只保留有必要的 生成目录这里使用 ...
  7. 记一次Vue全页面SSR深坑之旅 - 微弱的内存/CPU泄漏 其实你没啥必要解决这个bug,因为国内很多公司每周一个版本,所以压根儿就察觉不到这个bug的存在。 其实你大可不必解决这个bug,因为你写一个定时自动重启脚本,在一个夜深人静的夜晚默默执行重启之。 其实你不用非得解决这个bug,因为百度也开始支持spa系统seo,你还在那里累死累活搞蹩脚的ssr干嘛。 如果...
  8. 用JavaScript创建神经网络的有趣教程,一定要让你知道 作者 | Daniel Simmons 译者 | 王天宇 编辑 | Jane 出品 | AI科技大本营 【导读】本文中作者为初学者解释了如何使用 JavaScript 来搭建一个神经网络。不用担心,这不是一份深入介绍隐藏输入层、激励函数或如何使用 TensorFlow 的复杂教程,而是一次轻松实践。即使你不懂神经网络背后的深入内容,也可以完成这个...
  9. Vue作用域插槽 :slot-scope 实例 昨天看vue的官网文档,在slot-scope这块不是特别的明白,今天自己做了一个小例子,便于理解。 先说一下我们假设的应用常用场景,我们已经开发了一个代办事项列表的组件,很多模块在用,现在要求在 不影响已测试通过的模块功能和展示 的情况下,给 已完成的代办项增加一个对勾效果 。 也就是说,代办事项列表组件要...
  10. react 学习手记我们通常的做法是,在最外层包裹一个div标签,但是这个div标签最终会渲染到页面中,如果我们不想要让它显示的话,我们可以利用Fragment来解决。
  11. 前端爬坑日记之vue内嵌iframe并跨域通信由于该项目是基于原本的安卓app,做的微信h5,所以原来的使用webview的页面现在需要在vue中实现,那就是使用iframe
  12. 自己手撸一个符合Promise/A+的Promise 简单介绍 Promise是什么,相信不用说了,写过js的人或多或少都接触过。刚开始用Promise的时候,总感觉这种写法非常的怪异,但是当慢慢熟悉的时候,发现一切都是那么和谐。 我自己理解的Promise用来解决异步回调嵌套的问题,它代表了异步操作的一种结果。
  13. 《从零构建前后分离的web项目》:前端了解过关了吗? 前端基础架构和硬核介绍 技术栈的选择 首先我们构建前端架构需要对前端生态圈有一切了解,并且最好带有一定的技术前瞻性,好的技术架构可能日后会方便的扩展,减少重构的次数,即使重构也不需要大动干戈,我通常选型技术栈会参考以下三点: 一、提出自身业务的需求 SEO
  14. 用NodeJS进行Twitter情感分析 如果你想知道大家对某件事情的看法,Twitter 是最好的地方了。Twitter 是观点持续不断的涌现出来的地方,每秒钟大概有 6000 条新 Twitter 发送出来。因特网上的发展很快,如果你想与时俱进或者跟上潮流,Twitter 就是你要去的地方。 现在,我们生活在一个数据为王的时代,很多公司都善于运用 Twitter 上的数据。根据...
  15. 如何让 Laravel API 永远返回 JSON 格式响应?当你在编写完全为 API 服务的 Laravel 应用时,你希望所有响应都是 JSON 格式的,而不是例如说授权错误会重定向到 /home 或 /login,最终重定向会变成 InvalidArgumentException: Route [login] is not defined. ...
  16. React+Webpack性能优化 本文主要讲下React配合Webpack的一些优化,原项目在 这里 ,有空会持续更新,欢迎关注和start,另外还有个无法使用HtmlWebpackPlugin插入chunks的 issues 请求哪位大佬帮忙解决下,谢谢~ 构建优化 loaders 尽量少使用不同的loaders/plugins 使用 include 字段指明要转换的目录,使用 ...
  17. 用实验的思路优化webpack4项目编译速度 最近开发的时候遇到一个问题:当项目越来越大的时候,webpack构建和编译的速度变得很慢。尽管webpack4官方宣称速度提高了90%以上,但实际使用的时候感觉速度和webpack2也差不多。我实在受不了热加载的时候要等几秒才能编译好,于是就开始了优化之路。
  18. JavaScript Functions详解(包含ES6箭头函数) 简介 JavaScript中的所有内容都发生在函数中。 函数是一个代码块,可以定义一次并随时运行。 函数可以选择接受参数,并返回一个值。 JavaScript中的函数是对象,一种特殊的对象:函数对象。 另外,函数被称为第
  19. webpack loader—自己写一个按需加载插件 写在前面: 在开发的工程中,线上环境需要引入一些统计和打印日志的js文件。但是对于开发环境,加速打包速度减少页面渲染时间很关键。我于是想根据开发环境,写一个简单的loader,按需加载一些资源。 例如:在index.js中,用自定义函数envLoader添加资
  20. 前端每日实战:126# 视频演示如何用纯 CSS 创作小球变矩形背景的按钮悬停效果效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 [链接] 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 [链接] ...
  21. 自制简单的range(Vue) 自制简单的range(Vue) 废话不多说先上成果图 实现思路 主要分界面与逻辑两大块 界面分为5个部分 左滑块长度 左内容位置 中间长度 右滑块长度 右内容位置 逻辑 touch3个事件 各滑块长度及位置计算 选中时变色 具体实现步骤 首先我们
  22. 从零开始制造的Webpack4多页面脚手架(通用所有H5多页面应用) Fork或借鉴请注明出处 @ HeavenBin 如果觉得对你有帮助的话,请也不要吝啬你手中宝贵的Star,使劲砸向我吧! 这将是对我最大的鼓励!!!✧(∗≧ꇴ≦)人(≧ꈊ≦∗)✧ 项目构成 ├── build
  23. Web 模拟终端博客系统 前段时间做了一个非常有意思的模拟终端的展示页:ursb.me/terminal/(没有做移动端适配,请在PC端访问),这个页面非常有意思,它可以作为个人博客系统或者给 Linux 初学者学习终端命令,现分享给大家~开源地址:airingursb/termina
  24. 笔记:javascript参数传递解释:b对c说,我同意你跟我共用一个内存地址,你可以在我的内存地址内,修改局部成员,但是你要连我的家都给挪走,对不起 你自己走。。。
  25. 架构思维实现promise,大爷,来瞅瞅 小葵花课堂开课了惊不惊喜,期不期待,今天扯点promise的事情,主要为了学习,最重要的是按照正常人的逻辑器理解认识,promise的架构,不是死记硬背怎么去实现它 首先提出两个问题 为什么要手写Promise? Promise解决了什么问题? 回答,因
  26. js中reduce的神奇用法js中reduce的神奇用法 最近经常在项目中经常看到别人用reducer处理数据,很是牛掰,很梦幻, 不如自己琢磨琢磨。 先看w3c语法 {代码...} 常见用法 数组求和 {代码...} 数组最大值 {代码...} 进阶用法 数组对象中...
  27. JavaScript循环和作用域 JavaScript有一个特点,也许会让开发者头痛, 是与循环和作用域相关的. 举个例子: const operations = [] for (var i = 0; i < 5; i++) { operations.push(()
  28. threejs+tweenjs实现3D粒子模型切换 之前逛论坛时看到一篇利用 three.js 实现粒子模型切换动画的分享,具体的效果如下: 也可以去预览。 但是作者并没有把源码分享出来,正好最近在学习 threejs,正好抽时间写了一个类似的 demo,希望能帮助一些喜欢 threejs 的初学者。效果如下: 接下来,我们一起来看如何实现这样一个粒子体...
  29. iView 发布 3.1.0 版本,支持 TypeScript,支持 Vue CLI 3自 iView 7.28 发布 3.0 后,今天我们又带来了一个重要的版本 3.1.0(版本代号:INSIDE),这个版本 iView 开始支持 TypeScript,可以算是一个新的里程碑。
  30. 浅谈 TypeScript:使用类编写一个有趣的动画 除了 TypeScript 本身的特性之外,我们又回到了前端最本质的工作上,在没有使用现代 web 前端框架的情况下,我们要做一个类似抽屉柜一样的效果。 两周之后,产品小向跟小明说很希望在列表的旁边做一个类型抽屉柜的效果,将原来的个人信息,放置在这个抽屉柜中,这样来说用户体验相对会比较舒适。小明看了一...
  31. Serlina - 一個漸進式的 React 服務器渲染框架 A progressive React serverside-rendering framework. Motivation I love using Next.js, but most of my projects need
  32. 【前端芝士树】Vue.js面试题整理【前端芝士树】 Vue.js 面试题整理 1. Vue的生命周期 具体可以参照官网的这张图,左侧以红色框表示的都是阶段 beforeCreate created beforeMount mounted beforeUpdated updated beforeDestroy destroyed 大致过...
  33. 《Web 推送通知》系列翻译 | 第九篇:通知行为 && 第十篇:常用的通知模式 第九篇:通知行为 原文地址:notification behaviour 译文地址:通知行为 译者:任家乐 校对者:刘文涛、杨芯芯 到此为止,我们已经浏览了可以改变通知样式的选项,除了样式,我们还可以通过一些选项来改变通知的行为。 默认情况下,

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

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

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