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

2017前端技术大盘点；基于 vue.js 的前端开发环境，用于前后端分离后的单页应用开发；你以为 CSS3 只是个简单的布局？；手把手教你如何实现《前端异常监控系统》；7个前端不容错过的jQuery图片滑块插件；[阅 #33] 如何监听一个 JS 对象的变化；Angular 4.0 内置指令全攻略；现代浏览器性能优化-CSS篇

2017前端技术大盘点前言临近2017的尾声，总是希望来盘点一下这一年中前端的发展。到目前为止，前端的井喷期也快临近尾声了。并不像几年前一样，总是会有层出不穷的新东西迸发出来。同时，前端技术也慢慢的趋于稳固，自成一套体系。…
基于 vue.js 的前端开发环境，用于前后端分离后的单页应用开发项目简介基于 vue.js 的前端开发环境，用于前后端分离后的单页应用开发，可以在开发时使用 ES Next、scss 等最新语言特性。项目包含：基础库: vue.js、vue-router、vue
你以为 CSS3 只是个简单的布局？ CSS3 奇思妙想前几天看了一篇文章，颠覆了我对 CSS 认识，心中无数次蹦出一个念头：'卧槽，卧槽，还能特么这么用，这特么太叼了' … 于是我迫不及待想跟你们一起分享分享，以后你也可以在别人面前炫（装）耀（逼）了~ ps：本文原创不是我，我只是搬运
手把手教你如何实现《前端异常监控系统》导火索有一天一个测试同事的一个移动端页面白屏了，看样子是页面哪里报错了。我自己打开页面并没有报错，最后发现报错只存在于他的手机，移动端项目又是在微信环境下，调试起来会比较麻烦，最后用他手机调试才发现问题：是他账户下面有个对话的消息数据有问题导致页
7个前端不容错过的jQuery图片滑块插件作为前端开发者，我们会碰到很到各种各样的jQuery插件，但老实说，很少有自己写的。今天要分享的几款jQuery图片滑块插件，也就是jQuery焦点图插件，基本上会在每个网站都有应用，可以下载看看，也许你可以用到。 1、jQuery多图并列焦点图插件今天我们要来分享一款比较特别的jQuery焦点图插件，它允许你自己定义当前…
[阅 #33] 如何监听一个 JS 对象的变化
Angular 4.0 内置指令全攻略在这篇文章中，我们将分别列举每一个内置指令的用法，并提供一个例子作为演示。尽量用最少最简单的描述，让你在更快更准确地学会每一种内置指令的基本用法。 ngFor 作用：像 for 循环一样，可以重复的从数组中取值并显示出来。例子： // .ts this.userInfo = ; // .html…
现代浏览器性能优化-CSS篇我来填坑了，CSS篇终于写出来了，如果你没看过前面的JS篇，可以在这里观看。众所周知，CSS的加载会阻塞浏览器渲染或是引起浏览器重绘，目前业界普遍推荐把CSS放到<head>中，防止在CSS还没加载完，DOM就已…
react-router 升级小记前言最近将公司项目的 react-router 从 v3 版本升到了 v4 版本，react-router v4 跟 v3 完全不兼容，是一次彻底的重写。这也给升级造成了极大的困难，与其说升级不如说是对 router 层重写。之前我也将项目的 rea…
JavaScript 年度调查报告：React、Vue 和 Angular 三分天下，谁将在 2018 年独占鳌头？要论 2017年最主流的三个 Web前端框架，应莫过于 Angular、Vue和 React了。然而在实际应用中，这三个框架却不尽相同，对于规模不大的前端项目来说，Vue因其极易上手会被列出首选之位，Angular在快速开发大型 Web项目上很受推崇，但仍存诸多缺陷，React正为 JavaScript应用开发者提供新的开发方式。因此，面对各有千秋的…
json与jsonp区别浅析（json才是目的，jsonp只是手段）一言以蔽之，json返回的是一串数据；而jsonp返回的是脚本代码（包含一个函数调用）； JSON其实就是JavaScript中的一个对象，跟var obj={}在质上完全一样，只是在量上可以无限扩展。简单地讲，json其实就是JavaScript中的
JS基础篇–通过JS生成由字母与数字组合的随机字符串在项目中可能需要随机生成字母数字组成的字符，如生成3-32位长度的字母数字组合的随机字符串（位数不固定）或者生成43位随机字符串（位数固定）使用Math.random()与toString()方法的结合先看一下这个方式： {代…
前端性能优化之桌面浏览器优化策略在前端页面中，通常建议尽可能合并资源图片、 Javascript 或 CSS 代码，减少页面请求数和资源请求消耗，这样可以缩短页面首次访问的用户等待时间。通过构建工具合并雪碧图、 CSS 、 JavaScript 文件等都是为了减少 HTTP 请求次数。另外也要尽量避免重复的资源，防止增加多余请求。 2.减小HTTP请求大…
Nginx反向代理WebSocket响应403的解决办法在Nginx反向代理一个带有WebSocket功能的Spring Web程序（源代码地址）时，发现访问WebSocket接口时总是出现403响应，Nginx的配置参考的是官方文档: {代码…} 唯一不同的是我们的Nginx配置了https。于是打开Spr…
使用parcel替代webpack制作omi-tap插件
技术雷达之 “微前端”：将微服务理念扩展到前端开发文章大纲本文共计约 7k 字，预计阅读时间 15mins 微前端的缘由：单体应用与微服务架构微服务架构带来了哪些好处？那么前端的现状呢？ —— 臃肿的前端微前端的定义 – 将微服务理念扩展到前端开发拆分微前端所带来的好处 …
MongooseJS 5.0.0 rc0 发布，MongoDB 连接包 MongooseJS 5.0.0 rc0 发布了，MongooseJS 是使用 JavaScript 编程，连接 MongoDB 数据库的软件包，使 MongoDB 的文档数据模型变的优雅起来，方便对 MongoDB 文档型数据库的连接和增删改查等常规数据操作。主要更新内容： BREAKING CHANGE: always use mongoose aggregation cursor when using …
JSONP的原理与实现以及XSS,CSRF的相亲相爱 1 JSONP的原理与实现 1.1 同源策略前端跨域是每个前端人绕不过的坎，也是必须了解的一个知识点。我记得第一次遇到前端跨域这个坑的时候，真是无语到极点，对于一个移动端出身的人来说，觉得这个玩意无可理喻。但是后来慢慢了解，觉得前端
N 阶贝塞尔曲线生成器：bezierMaker.js Canvas 绘制多个控制点的贝塞尔曲线。
vue 单文件测试前言官网虽有测试例子，但涉及较窄，遇到组件中存在异步传参、触发 action、获取 state 等问题时，编写单元测试便不知从哪下手。这篇文章结合实际项目，旨在解决上述问题，顺便记录写测试文件时遇到的一些问题，希望对各位朋友有所帮助。
React系列——用简单的例子掌握不可突变数据结构数据结构对react的影响开发React的时候，我们可能会发现有时候state设置了一个新值，但是它并没有执行重新渲染。然后就疯狂找bug，却很难发现问题是什么。这是因为你在setState的时候，对原数据结构做了修改，造…
Vue异步更新队列原理从入门到放弃声明：本文章中所有源码取自Version: 2.5.13的dev分支上的Vue，不保证文章内观点的绝对准确性。文章整理自本周我在小组的内部分享。文章原地址我们目前的技术栈主要采用Vue，而工作中我们碰到了一种情况是当传入某些组件内的props被改变时我们需要重置整个组件的生命周期（比如更改IView中datepicker的type，好…
利用Webpack插件进行前端code-splitting 大家好，我是 LINE 漫画的 JavaScript 开发工程师 @sunderls。今天我介绍一个 webpack loader – grow-loader。之前在 LINE 漫画：通过 Page Stack 实现流畅的页面切换这篇文章中介绍过，
《优化 Webpack 构建性能的几点建议》在开发现代 Web 应用的过程中，Webpack 和我们的开发过程和发布过程都息息相关，如何改善 Webpack 构建打包的性能也关系到我们开发和发布部署的效率。（by 葡萄城控件）
《从无到有 <前端异常监控系统 > 落地》测试：页面白屏了！产品经理：点不动了！！！研发：我的咋可以？（by 子慕大诗人）
createjs开发h5游戏: 指尖大冒险之前看到一个指尖冒险游戏，觉得挺有意思，就想学习一下怎么实现，毕竟当产经提出类似的需求时，问我等开发可不可以实现的时候，不至于回答不知道。本文的主要思路，参考的是凹凸实验室的这篇文章：H5游戏开发：…
编写高性能JavaScript 很多JavaScript引擎，如Google的V8引擎（被Chrome和Node所用），是专门为需要快速执行的大型JavaScript应用所设计的。如果你是一个开发者，并且关心内存使用情况与页面性能，你应该了解用户浏览器中的JavaScript引擎是如何运作的。无论是V8，SpiderMonkey的（Firefox）的Carakan（Opera），Chakra（IE）或其他引擎，这样…
条理清晰的Ajax基础讲解离职中，有招人的求推荐一下，评论或者私信我邮箱和公司，我发简历给您，最近一直在搞基础的东西，弄了一个持续更新的github笔记，可以去看看，诚意之作（本来就是写给自己看的……）链接地址：Front-End-Basics 此…
滴滴后市场前端技术体系 “我们说的前端技术体系，指的是我在前端边界内，着眼于产出产品和服务的效率和质量，通过拆分和整合产出过程中的关键工作，最终所形成的一套包含代码，工具，理论，规范，文档等的支撑体系。”
#前端开发那些事#【你以为 CSS 只是个简单的布局？】详见：在本文中，作者分享了利用 CSS3 制作各种酷炫图形的方法，并附了完整代码，供大家学习参考。[喵喵]（作者：chokcoco）