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

Vue 前端应用实现RBAC权限控制的一种方式；vue和react的介绍；10分钟理解CSS3 Grid；前端工程师的 2018 年总结；MottoJS，一个让你的“座右铭”更好玩的JS插件；golang的websocket封装；教你一个vue小技巧，一般人我不说的；用css3实现ps蒙版效果+动画

Vue 前端应用实现RBAC权限控制的一种方式权限控制不管前后端都可以简单分为：身份认证权限控制 RBAC权限控制 … 而前端我和团队，检索了很多地方都没有很成熟或者说可行的关于 RBAC基于角色的访问控制相关的前端权限控制方案，可能是我们检索的方法不对，亦或是大家都忙于其他，没有时间把自己的方法整理公布出来，故我们在原定计划中，…
vue和react的介绍这几年前端框架发展的不错，出了不少框架，像微软自己的knockoutjs,angular,vue和最近比较火的react等，之前我有写过前两者的相关文章，今天主要说一下后两者。介绍是一个用于构建用户界面的 JAVASCRIPT 库。主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。拥有较高的性能，代码逻辑非…
10分钟理解CSS3 Grid上一篇文章我们介绍了 css3 flexbox，今天我们再来说说css3的另外一个强大的功能：Grid。Grid做前端的同学应该都很熟悉了，翻译成中文为“栅格”，用过bootstrap、semantic ui、ant design的同学肯定都了解grid lay…
前端工程师的 2018 年总结2018 年，我的本命年，今年 24 岁，离 “而立之年” —— 30 岁，又近了一步。今年对我而言，是人生的一个重要节点。今年是我觉得过得最快的一年，也是成长最多的一年。
MottoJS，一个让你的“座右铭”更好玩的JS插件写于 2016.07.23 项目地址： github.com/jrainlau/mo… 体验地址： jrainlau.github.io/motto/ Codepen:Codepen 最新更新：1.0.1版本加入了“抖动特效”，类似信号被干扰的样子，欢迎品尝~ 七夕快到了，我不会告诉你这是一个告白神器……写一封长长的告白信，把 config 里面的时间设置得长一些，然后默默地把它发给…
golang的websocket封装实现代码如下： import ( "errors" "github.com/gorilla/websocket" "sync" ) type Connection struct { wsConn *websocket.Conn inChan chan byte closeChan chan byte mutex sync.Mutex isClosed bool } func InitCon…
教你一个vue小技巧，一般人我不说的最近的项目中，需要实现在vue框架中动态渲染带提示框的单选/多选文本框，具体的效果如下图所示，在输入框聚焦时，前端组件通过接收的kv参数渲染出选项，用户点击选项，可以将选择的选项的key拼装到输入框中，同时…
用css3实现ps蒙版效果+动画这个动画，其实也并不复杂。它使用background-clip实现了文字蒙版的效果，然后结合了背景图片的animation实现了如上图所示的文字蒙版动画。
JS 总结之对象我们都知道，对象一般是类的实例，如 Java，Python 等这类面向对象语言，而 JavaScript 中没有类，因此 JavaScript 中的对象不是类的实例，而是基于原型的对象。 JavaScript 中的对象 Object 是 7 种内置类型（ number, string, null, undefined, boolean, object, symbol ）之一，是由 key 和 value 组成，value …
关于Webpack中一些让人困惑的地方的解答写于 2016.08.03 原文连接： Webpack — The Confusing Parts Webpack是React和Redux项目的主要模块加载器。我认为使用Angular2和其他的框架的人在如今也大量使用Webpack进行开发。当我第一次查看Webpack的配置文件时，我是懵逼的。在使用过一段时间以后，我觉得这是因为Webpack有着独一无二的语法和标新立异的…
深析filemap.js——关于JS的算法及优化的实践写于 2016.07.17 项目地址：链接描述项目简介： juejin.im/post/5c125a… 关于项目的用法和介绍可以查看上面的两个链接，这篇文章主要内容是对 filemap.js 的代码进行一步一步的分析，详细介绍其运行原理和优化策略。知识点准备： NodeJS 的基本使用方法（主要是 fs 文件系统）； ES6 特性及语…
JavaScript在面向对象中的创建对象的3种方法 JavaScript是一种功能强大的编程语言，支持面向对象编程(OOP)。实际上，在JavaScript中，对象最大 – 从核心功能(如字符串和数组)到使用该语言构建的浏览器API。 Bautista是一位美国网络开发人员，热衷于教授人们编程，他强调“要将你的JavaScript技能提升到一个新的水平，你需要理解语言的基于对象的本质。" 以…
JavaScript 模块的发展史我们都知道 JavaScript 中并没有模块的概念，一开始 JavaScript 的出现只是作为简单脚本语言来实现简单的页面逻辑，而随着互联网的发展和 web 2.0 时代的到来，前端代码呈现井喷式发展，随着代码量的增加，模块缺失的问题日益凸显，而同时 JavaScript 社区也做了很多探索。那么什么是模块呢？模块，是指能够单独命…
TypeScript 的一些小用法预先定义的条件类型（Predefined conditional types） TS提供了几种内置的预定义的条件类型 Exclude – 用于从类型T中去除不在U类型中的成员 Extract – 用于从类型T中取出可分配给U类型的成员 NonNullable – 用于从类型T中去除undefined和null类型 ReturnTyp…
React Native 实现地图导航相关源码同志们好，我又回归了，本来是想分享Flutter相关的内容，但是好久不写文章，感觉生疏了不少，不知道从何处下笔了，所有就把草稿箱躺了快一年的内容整理一下，分享分享。这篇文章是使用最简单的方式实现地图导航的需求，那就是通过唤起手机中的导航类软件进行导航，所以你想在应用内实现导航以及定…
《学会这两件事，让你成为 Git 老司机》“我在提交中犯了个错误，我如何修正它？”，“我的提交历史一团糟，我该如何让它更整洁？”如果你曾经有上述问题，那么这篇文章很适合你！（@BEAST丨Q 译，欢迎加入翻译组：）
JavaScript的工作原理：内存管理和4种常见的内存泄漏该系列的第一篇文章重点介绍了引擎，运行时和调用堆栈的概述。第二篇文章深入剖析了Google的V8 JavaScript引擎，并提供了关于如何编写更好的JavaScript代码的一些提示。在第三篇文章中，我们将讨论另一个越来越被开发人员忽视的关键主题，因为日常使用的编程语言（内存管理）越来越成熟和复杂。我们还会提供一些关于…
JavaScript中的函数柯里化函数柯里化以Haskell Brooks Curry命名，柯里化是指将一个函数分解为一系列函数的过程，每个函数都只接收一个参数。（译注：这些函数不会立即求值，而是通过闭包的方式把传入的参数保存起来，直到真正需要的时候才会求值）柯里化例子以下是一个简单的柯里化例子。我们写一个接收三个数字并返回它们总…
JavaScript是如何工作: 深入探索 websocket 和HTTP/2与SSE +如何选择正确的路径文章底部分享给大家一套 react + socket 实战教程这是专门探索 JavaScript 及其所构建的组件的系列文章的第5篇。如果你错过了前面的章节，可以在这里找到它们： JavaScript是如何工作的：引擎，运行时和调用堆栈的概述！ JavaScript是如何工作的：深入V8引擎&编写优化代码的5个技巧 JavaScri…
揭开 redux, react-redux 的神秘面纱 16年开始使用react-redux,迄今也已两年多。这时候再来阅读和读懂redux/react-redux源码，虽已没有当初的新鲜感，但依然觉得略有收获。把要点简单写下来，一方面供感兴趣的读者参考，另一方面也是自己做下总结。 redux react-redux最核心的内容就是redux。内带redux，react-redux只提供了…
站在 Web 3.0 理解 IPFS 是什么尽管网络上，已经有不少文章讨论IPFS，不过真正讲明白IPFS想做什么的很少，文本尝试站在未来Web3.0的高度来看看IPFS究竟用来解决什么问题。 DApp 的缺陷对区块链有所了解的同学，知道区块链维护的是一个中立的（去中心）、共同信任、难以篡改的数据库、智能合约创造的是一个完全透明（不被干扰）…
【20181220 前端开发日报】Vue与React两个框架的粗略区别对比；你（可能）不知道的 Web API；精读《Typescript 3.2 新特性》；Angular-Observable和RxJS（未完）；vue-property-decorator使用指南…详情→
理解 JavaScript this这是本系列的第 5 篇文章。还记得上一篇文章中的闭包吗？点击查看文章理解 JavaScript 闭包。在聊 this 之前，先来复习一下闭包： {代码…} 上一篇文章说，我们可以把闭包简单地理解为函数返回函数。所以这…
Weex系列(4) —— 老生常谈的三端统一目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(1) —— Hello World项目 Weex系列(2) —— 页面跳转和通信 Weex系列(3) —— 单页面还是多页面 Weex系…
js scroll相关内容父元素的高度小于子元素的高度，子元素的内容根据父元素的视区会有内容裁剪，这时我们设置父元素的overflow属性值为auto，我们可以看到此时显示了滚动条。
Spring Boot 2 Webflux 的全局异常处理本文首先将会回顾Spring 5之前的SpringMVC异常处理机制，然后主要讲解Spring Boot 2 Webflux的全局异常处理机制。 SpringMVC的异常处理 Spring 统一异常处理有 3 种方式，分别为：使用@ExceptionHandler注解实现HandlerExceptionResolver接口使用@controlle…