20180906 前端开发日报-前端开发博客

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

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