20181215 前端开发周报-前端开发博客

22 个必备的 CSS 小技巧；Vue学习路线图；想写好前端，先练好内功；vue权限路由实现方式总结二；JS的防抖，节流，柯里化和反柯里化；vue路由动画；30 行 Javascript 代码搞定智能家居系统；改进用户界面与体验的21种JavaScript和CSS库

#前端技术#【22 个必备的 CSS 小技巧】详见：本篇分享一些实用、有趣的 CSS 小技巧。（译者：Jrain）写于 2016.07.03 原文链接：22 Essential CSS Recipes 大家好，今天我们将会介绍一些非常实用的CSS小技巧，让我们开始吧！混合模式不久之前Firefox和Safari浏览器已经开始支持类似Photoshop的混合模
Vue学习路线图
想写好前端，先练好内功封不平听在耳里，暗叫：“到这地步，我再能隐藏甚么？”仰天一声清啸，斜行而前，长剑横削直击，迅捷无比，未到五六招，剑势中已发出隐隐风声。他出剑越来越快，风声也是渐响，剑锋上所发出的一股劲气渐渐扩展，旁…
vue权限路由实现方式总结二
JS的防抖，节流，柯里化和反柯里化
vue路由动画模拟前进后退动画基于css3流畅动画基于sessionStorage，页面刷新不影响路由记录返回可记录滚动条位置前进后退的判断与路由路径规则无关支持任意基于Vue的UI框架 demo 手机扫码在线预览说明配套包含两个组件 vue-route-transition 负责动画 router-layout 负责…
30 行 Javascript 代码搞定智能家居系统智能家居可谓是今年物联网的热门领域，通过智能单品和智能音箱，人们已然把『智能』两个字变成了生活的理所应当。搭建云上之家除了买买买，还能 DIY。依托阿里云物联网平台，我们用 30 行代码来搞定一套智能家居…
改进用户界面与体验的21种JavaScript和CSS库【51CTO.com快译】当自己的网站应用流畅运行之后，下一步您就需要让它看起来更美观生动。本文列举了21种实用的JavaScript和CSS库，可帮助您实现更加酷炫的效果。 1. Algolia 如果您想在自己的网站上添加具有自动完成功能的表单，那么您肯定会用到这个库。由于其精准和快捷的特点，我非常喜欢它带有的地图功能。这个…
推荐一个很好用的vscode插件：一个可以给出vuex中store定义信息的vscode插件在使用Vuex管理自己应用的状态时，因为状态过多，为了正确性每次都要打开vuex定义文件，去复制定义时的函数名或者状态名，无形中就浪费了许多时间，为了解决这个痛点，开发了这个vscode插件。通过使用 ast 和正则表达式，获取 store 中所有文件的定义,在用户使用.vue 文件中时给出详细的提示，目前支持大多数 vuex …
值得看看，2019 年 11 个受欢迎的 JavaScript 动画库超过46K的星星，这个流行的库提供了非常多的3D显示功能，以一种直观的方式使用 WebGL。这个库提供了<canvas>、 <svg>、CSS3D 和 WebGL渲染器，让我们在设备和浏览器之间创建丰富的交互体验。该库于20…
Vue项目结构介绍编辑推荐: 本文来自CSDN，文章详细描述了移动端页面使用 vue2.0 重构中的接口 mock、前后端分离等，整个过程的介绍。凡普信贷的移动端页面正在使用 vue2.0 重构，在基于 vue-cli 脚手架生成项目模板基础上做了些改动，加入了 vue-router ，vuex 等配套设施，本地 dev server 中加入了接…
WebSocket 快速入门 WebSocket是基于TCP的一种新的网络协议，并在2011年被IETF定为标准的全双工通信协议，它实现了客户端与服务器全双工通信。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，…
提高 JavaScript 开发效率的高级 VSCode 扩展Quokka.js 是一个用于 JavaScript 和 TypeScript 的实时运行代码平台。这意味着它会实时运行你输入后的代码，并在编辑器中显示各种执行结果，建议亲自尝试一下。
Vue 2.0学习笔记：Vue的transition 动效在Web中一直是一个有争议的问题。动效做得好有助于在你的Web程序上锦上添花，甚至是留住你的用户，也可以具有较好的用户体验；反之，如果动效运用的不好，会给用户带来一种反感，让用户迅速地离开你的应用。怎么提供更友好的动效，并不是今天我们要讨论的重点，我们要讨论的是：在Vue应用程序中如何添加动效？在Vu…
vue轻量高效的前端组件化方案以及MVC MVVM思想近些年来前端的发展的趋势：旧浏览器逐渐被淘汰，移动端需求增加，旧浏览器是指ie6-ie8是不支持es5的，而vuejs利用了Object.defineProperty特性，es5在移动端和pc端也都是支持的，所以vuejs可以在移动端和pc端充分发挥自己的长处，架构从传统后台MVC向REST api+前端MV*迁移。 MVC到REST api+前端MV*：当前前…
javaScript高阶级函数函数作为参数传递函数作为返回值输出满足以上一个条件就可以称之为高阶级函数函数作为参数传递看一下例子 function iterator () { const obj = { message: ‘123’ status: false } obj.status = true return obj } const obj2 = iterator() console.log(obj2) /…
JS使用技巧1——使用fast-json-stringify代替JSON.stringify使用过JSON对象的程序员最常做的一项工作便是，将JSON对象转化为字符串。该字符串的用途很多，例如可以使用在WEB的URL中，在多个页面间进行传递。
引入外部js脚本加载慢与页面白屏问题最近做的一个项目需要引入一个外部的第三方js脚本。由于这是一个关于渲染3D建筑的脚本，所以体积比较大，大概有2M，加载完成也得要个好几秒，网速慢的时候十几秒都有可能。之前也遇到脚本加载慢的问题，但是没这么慢，所以这次就特别写个文章记录一下我的解决过程。首先上两张项目已完成的截图。下图是通过第三方…
苏宁的 Node.js 实践号称“不低于 Java 的渲染性能、安全稳定迭代快”。
CSS 应用之数据上报和HTML验证这让我想起之前讨论一时的 CSS 攻击。附《CSS 代码可能被用来收集敏感用户数据》。
JavaScript强制类型转换的抽象操作强制类型转换是JavaScript开发人员最头疼的问题之一, 它常被诟病为语言设计上的一个缺陷, 太危险, 应该束之高阁. 作为开发人员, 往往会遇到或写过涉及到类型转换的代码, 只是我们从来没有意识到. 因为我们基本碰运气. 猜猜看:smirk:: 作为基本类型值, 为什么我们可以使用相关的属性或方法? eg: ‘hel…
jQuery实现全选、全不选以及反选操作
Vue SPA 项目，浏览器和 nginx 反向代理缓存问题解决实方案问题背景 a. 浏览器端在每次发布新的版本时候，总会出现因为SPA项目中index.html文件（200 ok from disk cache 不发送请求，直接取用了本地磁盘缓存）和服务端版本不一致的问题，导致用户不能及时更新，需要通过手动刷新来强制从服务端更新文件。 b. 补充一下，服务端和浏览器之间架构。三级缓存…
一文带你看懂cookie，面试前端不用愁localStorage是H5中的一种浏览器本地存储方式，而实际上，cookie本身并不是用来做服务器存储的。但在 localStorage 出现之前，cookie被滥用当做了存储工具，什么数据都放在cookie中，即使这些数据只在页面中使用…
Vue.js子组件向父组件通信一、场景描述：曾经有个电商项目，其中有个“老带新”模块，而且该模块新增的入口很多，但是新增后展示效果还不一样，当时就考虑将新增的组件单独拿出来，其实就是一个子组件向父组同步数据的过程。当然，背景不重要了，关键是看实现的方式。二、场景展示效果（PS：展示效果请忽略美感）三…
JS专题之去抖函数在用户和前端页面的交互过程中，很多操作的触发频率非常高，比如鼠标移动 mousemove 事件, 滚动条滑动 scroll 事件, 输入框 input 事件, 键盘 keyup 事件，浏览器窗口 resize 事件。
vue全家桶制作一个精致的美团项目注意：如果gif动态图看不了，麻烦大家点击github美团项目中mt-app/src/assets/美团.gif便可以观看！
使用 Gatsby.js 搭建静态博客 2 实现分页原文地址：[链接] 可以先复习 -> 使用 Gatsby.js 搭建静态博客 1 关键文件 <- 本文将会介绍如何为初始项目添加分页功能。理解页面创建原理上一篇的 gatsby-node.js 介绍部分已经说明了页面生成的方法。 …
JavaScript 如何工作: 深入 V8 引擎 + 编写优质代码的 5 个技巧译者: 波比小金刚翻译水平有限，如有错误请指出。原文: blog.sessionstack.com/how-javascr… ps: 最近开始整理所有的优质文章翻译集，当然如果你有好的文章请提 issue，我会找时间翻译出来。第二篇文章的重点将会深入 V8 引擎内部，并且分享一些编写优质 JavaScript 代码的最佳实践。概述 JavaScrip …
NodeJS沙盒逃逸研究在这篇文章中，我们将探讨如何使用解释器的内部结构来逃离NodeJS沙箱。 Node.js是一个Javascript运行环境(runtime environment)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js不是一个JavaScript框架，不同于CakePHP、Django、Rails。Node.js更不是浏览器端的库，不能与jQuery、ExtJS…
【从前后端分离看阿里Web应用架构演变】前后端分离为什么出现？本质上是什么？前后端分离运动对 web 应用的架构带来了怎么样的变化？前后端分离怎么分离？为什么是 Node.js? 前后端分离的未来怎样？详见（来自：前端之巅）