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

前端路由的前生今世及实现原理；打造自己的JavaScript武器库；前端日刊君来也；Web静态资源缓存及优化；Vue 进阶篇 – 用自定义指令完成一个下拉菜单；jQuery核心解读；JS常用的18种设计模式总结；Web 安全系列：XSS 攻击

前端路由的前生今世及实现原理原文发于我的博客：https://github.com/hwen/blogS… 什么是路由路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样 {代码…} 有时还会有带.asp或.html的路径，这就是所谓的SSR(Se…
打造自己的JavaScript武器库自己打造一把趁手的武器，高效率完成前端业务代码。前言作为战斗在业务一线的前端，要想少加班，就要想办法提高工作效率。这里提一个小点，我们在业务开发过程中，经常会重复用到日期格式化、url参数转对象、浏…
前端日刊君来也每天努力的日刊君 - 2017.11.13EveryDay为小伙伴们推荐 3 篇有质量的前端技术文章，让你每一天都收获满满还在等什么，和日刊君一起把~The Next Day is Always a New DayVue.js聊聊 Vue.js 的
Web静态资源缓存及优化前言对于页面中静态资源（html/js/css/img/webfont），理想中的效果：页面以最快的速度获取到所有必须静态资源，渲染飞快；服务器上静态资源未更新时再次访问不请求服务器；服务器上静态资源更新时请求服务器最新资源，加载又飞快。总结下来也就是2个指标前言对于页面中静态资源（html/js/css/img/webfont），理想中的效果：页面以最快的速度获取到所有必须静态资源，渲染飞快；服务器上静态资源未更新时再次访问不请求服务器；服务器上静态资源更新时请求服务器最新资源，加载又飞快。总结下来也就是2个指标前言对于页面中静态资源（html/js/css/img/webfont），理想中的效果：页面以最快的速度获取到所有必须静态资源，渲染飞快；服务器上静态资源未更新时再次访问不请求服务器；服务器上静态资源更新时请求服务器最新资源，加载又飞快。总结下来也就是2个指标
#前端开发那些事#【Vue 进阶篇 – 用自定义指令完成一个下拉菜单】详见：这次分享的是关于 Vue 自定义指令的使用方法，学习完基础后，我们再来实战完成一个下拉列表。（作者：被前端耽搁的后端林先生）
jQuery核心解读 jQuery如此强大和好用，关键得益于以下特性：丰富强大的语法（CSS选择器），用来查询文档元素高效的查询方法，用来找到与CSS选择器匹配的文档元素集一套有用
JS常用的18种设计模式总结花了一个多月，终于把js中常用的设计模式整理了一遍。其中主要参阅了曾探的《JavaScript设计模式与开发实践》，讲真这本书写的真的很不错。还参考了wiki、博客、掘金、CSDN等的文章，在此表示感谢，如有理解不当，还望指正。设计模式设计花了一个多月，终于把js中常用的设计模式整理了一遍。其中主要参阅了曾探的《JavaScript设计模式与开发实践》，讲真这本书写的真的很不错。还参考了wiki、博客、掘金、CSDN等的文章，在此表示感谢，如有理解不当，还望指正。设计模式设计花了一个多月，终于把js中常用的设计模式整理了一遍。其中主要参阅了曾探的《JavaScript设计模式与开发实践》，讲真这本书写的真的很不错。还参考了wiki、博客、掘金、CSDN等的文章，在此表示感谢，如有理解不当，还望指正。设计模式设计
Web 安全系列：XSS 攻击前段时间在学习Web安全方面的知识，对这方面有了进一步的了解，决定写文章记录下来，只是对Web安全方面知识的一些总结，没有太多的深度。 XSS攻击简介跨站脚本攻击(XSS),英文全称 Cross Site Script, 是Web安全头号大敌。 XSS攻击，一般是指黑客通过在网页中注入恶意脚本，当用户浏览网页时，恶…
js 讲给小白听的Promise原理剖析本文想从一个全新的角度来理解Promise的实现原理，即通过Promise的一些外在表现，一步步的去实现一个符合Promise所有行为的MyPromisee。本文适合对Promise有一定使用经验的人阅读。以下关于Promise和MyPromise的区别就是
【Chrome扩展开发】定制HTTP请求响应头域本文首发于《程序员》杂志2017年第9、10、11期，下面的版本又经过进一步的修订。关于 Github：IHeader 我的博客：louis blog SF专栏：路易斯前端深度课原文链接：【Chrome扩展开发】定制HTTP请求响应头域本文共15k字，
ASP.NET Core 与 Vue.js 服务端渲染 http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 作者：Mihály Gyöngyösi 译者：oopsguy.com 公众号：oopsguy_com 我真的很喜欢在前端使用 Vue.js，Vue 服务端渲染直到第二个版本才被支持。在本例中，我想展示如何将 Vue.js 2 服务端渲染…
JS中图片压缩的一般方法前两天公司业务上有需求需要将较大的图片压缩后再传到远程服务器，网上找了不少方法都不太好用，今天有空索性自己写了一个方法，并把它放到了自己的github上，有兴趣的同学可以戳这里一、需求是什么？首先想一想我们有哪些需求？大多时候我们需要将一个File对象压缩之后前两天公司业务上有需求需要将较大的图片压缩后再传到远程服务器，网上找了不少方法都不太好用，今天有空索性自己写了一个方法，并把它放到了自己的github上，有兴趣的同学可以戳这里一、需求是什么？首先想一想我们有哪些需求？大多时候我们需要将一个File对象压缩之后
用vue做一个酷炫的menu 写在前面         最近看到一个非常酷炫的menu插件，一直想把它鼓捣成vue形式，谁让我是vue的死灰粉呢，如果这都不算爱。开个小玩耍，我们一起来探索黑魔法吧。观看本教程的读者需要具备一定的vue
手把手教写 TypeScript Transformer Plugin 用过 ant-design 的同学可能对 babel-plugin-import 有印象，它可以帮助实现模块的按需引用，比如： import { Button } from 'antd'在使用该 Plugin 之后会被转换成： import Button fr 用过 ant-design 的同学可能对 babel-plugin-import 有印象，它可以帮助实现模块的按需引用，比如： import { Button } from 'antd'在使用该 Plugin 之后会被转换成： import Button fr
React v16.0 实践路漫漫其修远兮，吾将上下而求索。背景完全是出于实践的目的，在一个小业务中，将最新的react工程撸了一遍。【虽说是小业务，两个人也开发了近一周，七个工作日。】贡献于是有了这篇文章和【开箱即用】的脚手架工程，其中Options的选项，可以自行移除。不过好消息是这个脚手…
babel-preset-env升级迁移完全指北 Babel-preset-env升级指北前言在9月份Babel宣布ES2015/ES2016/ES2017等等ES20xx时代的presets通通被废弃，取而代之的是babel-preset-env，并且承诺它将成为“未来不 Babel-preset-env升级指北前言在9月份Babel宣布ES2015/ES2016/ES2017等等ES20xx时代的presets通通被废弃，取而代之的是babel-preset-env，并且承诺它将成为“未来不
#IT技术分享#【GitHub 上那些免费好用的 Windows 软件】详见：在本篇中，我们整理了一些 Github 上免费好用的 Windows 软件。涉及四大类好用的软件：文本相关、文件管理、效率提升、系统美化。
angular2/angular4 如何通过$http的post方法请求下载二进制的Excel文件时间有限,废话就不多说了,直接上干货! 下面给大家介绍一下我遇到的一个坑,如果你也遇到了,那恭喜你,你一定能找到答案:angular2/angular4 如何通过$http的post方法请求下载二进制的Excel文件? (angular1自行百度) 时间有限,废话就不多说了,直接上干货! 下面给大家介绍一下我遇到的一个坑,如果你也遇到了,那恭喜你,你一定能找到答案:angular2/angular4 如何通过$http的post方法请求下载二进制的Excel文件? (angular1自行百度)
#Bootstrap#【响应式表格,HTML表格自适应（responsive table）】简单自适应表格前面的一篇文章里面我介绍到了一种简单的自适应表格制作方案，就是通过给表格的外面加了一个.table-container的标签.table-container{width: 100…请戳→ #前端开发博客#
IWinter 一个路由转控制器的 Nodejs 库 IWinter 是一个路由转控制器的 node 库，只解决一个问题：为了让使用者以更优雅的姿势进行路由的编写。支持在 Express 和 Koa 中使用。项目地址简介：最近在学习使用 Typescript ，打算把以前写的博客管理后台用 Typescrip
用JavaScript实现一门编程语言 3-3 （解析器之词法分析器）词法分析器运行在字符输入流之上，通过相同的接口返回一个流对象，但是通过peek() /next()返回的值是tokens。一个token是一个对象，包含两个属性：type和value。下面是一些支持tokens的例子： { type: "punc", valu
EggBorn.js Showcase: Watch Articles 这是EggBorn.js的案例，同时也是一个强大的工具，可以自动抓取文章的统计数字，诸如visits、 stars、 replies，等等。 Vue.js + Framework7 + Koa.js + Egg.js + MySQL + GitHub Pa 这是EggBorn.js的案例，同时也是一个强大的工具，可以自动抓取文章的统计数字，诸如visits、 stars、 replies，等等。 Vue.js + Framework7 + Koa.js + Egg.js + MySQL + GitHub Pa
Fetch + GraphQL 的实践本文针对在 React Native 中通过 fetch 访问 GitHub GraphQL API 这一场景，构建了应用的模型层网络请求模块，探索了 HTTP 与 GraphQL 分离、内置异常处理等理念的实践。欢迎关注我的专栏：熵与单子的代码本。本文针对在 React Native 中通过 fetch 访问 GitHub GraphQL API 这一场景，构建了应用的模型层网络请求模块，探索了 HTTP 与 GraphQL 分离、内置异常处理等理念的实践。欢迎关注我的专栏：熵与单子的代码本。
Web 前端性能优化 : 如何有效提升静态文件的加载速度作者：刘轶斌，腾讯应用开发工程师商业转载请联系腾讯WeTest获得授权，非商业转载请注明出处。原文链接：wetest.qq.com/lab/view/34…WeTest 导读此文总结了笔者在Web静态资源方面的一些优化经验。一、如何优化用户在访问网页时，最作者：刘轶斌，腾讯应用开发工程师商业转载请联系腾讯WeTest获得授权，非商业转载请注明出处。原文链接：wetest.qq.com/lab/view/34…WeTest 导读此文总结了笔者在Web静态资源方面的一些优化经验。一、如何优化用户在访问网页时，最