[译] Angular 安全 —— 使用 JSON 网络令牌（JWT）的身份认证：完全指南
本文是在Angular应用中设计和实现基于JWT（JSONWebTokens）身份验证的分步指南。我们的目标是系统的讨论基于JWT的认证设计和实现，衡量取舍不同的设计方案，并将其应用到某个Angular应用特定的上下文中。我们将追踪一个JWT从被认证服务器创建开始，到它被返回到客户端，再到它被返回到应用服务器的全程，并讨论其中涉及的所有的方案以及做出的决策。由于身份验证同样需要一些服务端代码，所以我们将同时显示这些信息，以便我们可以掌握整个上下文，并且看清楚各个部分之间如何协作。服务端代码是Node/Typescript，Angular开发者对这些应该是非常熟悉的。但是涵盖的概念并不是特定于Node的。如果你使用另一种服务平台，主需要在jwt.io上为你的平台选择一个JWT库，这些概念仍然适用。目录在这篇文章中，我们将介绍以下主题：第一步——登陆页面基于JWT的身份验证用户在Angular应用中登录为什么要使用单独托管的登陆页面？在我们的单页应用（SPA）
从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理
前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。———-超长文+多图预警，需要花费不少时间。———-如果看完本文后，还对进程线程傻傻分不清，不清楚浏览器多进程、浏览器内核多线程、JS单线程、JS运行机制的区别。那么请回复我，一定是我写的还不够清晰，我来改。。。———-正文开始———-最近发现有不少介绍JS单线程运行机制的文章，但是发现很多都仅仅是介绍某一部分的知识，而且各个地方的说法还不统一，容易造成困惑。因此准备梳理这块知识点，结合已有的认知，基于网上的大量参考资料，从浏览器多进程到JS单线程，将JS引擎的运行机制系统的梳理一遍。展现形式：由于是属于系统梳理型，就没有由浅入深了，而是从头到尾的梳理知识体系，重点是将关键节点的知识点串联起来，而不是仅仅剖析某一部分知识。内容是：从浏览器进程，再到浏览器内核运行，再到JS引擎单线程，再到JS事件循环机制，从头到尾系统的梳理一遍，摆脱碎片化，形成一个知识体系目标是：看完这篇文章后，对浏览器多进程，JS单线程，JS事件循环机制这些都能有一定理解，有一个知识体
基于create-react-app 和 koa2 快速搭建react同构渲染项目总结
前段时间做了一个简单的古文网，但是项目是使用ReactSPA渲染的，不利于SEO，便有了服务端渲染这个需求。后面就想写个demo把整个过程总结一下，同时也加深自己对其的理解，期间由于工作，过程是断断续续。总之后来就有了这个项目吧。关于服务端渲染的优缺点，vue服务端渲染官方文档讲的最清楚。对于大部分场景最主要还是两点提高首屏加载速度和方便SEO.为了快速构建开发环境，这里直接使用create-react-app和koa2.x生成一个基础项目。整个项目便是以此作为基点进行开发的，目前也只是完成了最基本的需求，还有很多Bug和可以优化的地方，欢迎交流。服务端渲染最基本的理论知识梳理首先前后端分别使用create-react-app和koa2的脚手架快速生成，然后再将两个项目合并到一起。这样我们省去了webpack的一些繁琐配置，同时服务端使用了babel编译。看这个之前默认已经掌握webpack和koa2.x,babel的相关知识。我们直切重要的步骤吧。我觉得搭建一个react-ssr环境主要只有
Javascript DataView
测试平台是win10x64Edge在windbg里搜索DataView:0:025>xchakra!Js::*DataView00007ff8`37235938chakra!Js::JavascriptLibrary::CreateDataView=
从0到1，开发一个动画库(1)
如今市面上关于动画的开源库多得数不胜数，有关于CSS、js甚至是canvas渲染的，百花齐放，效果炫酷。但你是否曾想过，自己亲手去实现（封装）一个简单的动画库？本文将从零开始，讲授如何搭建一个简单的动画库，它将具备以下几个特征：从实际动画中抽象出来，根据给定的动画速度曲线，完成“由帧到值”的计算过程，而实际渲染则交给开发者决定，更具拓展性支持基本的事件监听，如onPlay、onStop、onReset、onEnd，及相应的回调函数支持手动式触发动画的各种状态，如play、stop、reset、end支持自定义路径动画支持多组动画的链式触发完整的项目在这里：点赞行为高尚！，欢迎各种吐槽和指正^_^OK，话不多说，现在正式开始。作为开篇，本节将介绍的是最基本、最核心的步骤——构建“帧-值”对应的函数关系，完成“由帧到值”的计算过程。目录结构首先介绍下我们的项目目录结构：/timeline/index..js/core.j
[译]对象组合中的宝藏（软件编写）（第十三部分）
（译注：该图是用PS将烟雾处理成方块状后得到的效果，参见flickr。）这是“软件编写”系列文章的第十一部分，该系列主要阐述如何在JavaScriptES6+中从零开始学习函数式编程和组合化软件（compositionalsoftware）技术（译注：关于软件可组合性的概念，参见维基百科<上一篇|<<返回第一篇“通过对象的组合装配或者组合对象来获得更复杂的行为”~GangofFour，《设计模式：可复用面向对象软件的基础》“优先考虑对象组合而不是类继承。”~GangofFour，《设计模式：可复用面向对象软件的基础》软件开发中最常见的错误之一就是对于类继承的过度使用。类继承是一个代码复用机制，实例对象和基类构成了**是一个（is-a）**关系。如果你想要使用is-a关系来构建应用程序，你将陷入麻烦，因为在面向对象设计中，类继承是最紧的耦合形式，这种耦合会引起下面这些常见问题：脆弱的基类问题猩猩/香蕉问题不得已的重复问题类继承是通过从基类中抽象出一个可供子类继承或者重载的公共接
【Html5】-- 塔台管制
【Html5】--塔台管制2018-01-2121:22bystoneniqiu,...阅读,...评论,收藏,编辑想做这个游戏已久，今天终于初步完成，先解释下，这是一个模拟机场塔台管制指挥的游戏，飞机从不同的方向飞入管制空域，有不同的目的地，飞机名称最后一个字母表示飞机要到达的目的地，分ABCD和R。A-D表示四个方向，R表示到本场的跑道降落。飞机有H,M,S三种速度，离场必须不能是最快的速度(H)，降落必须是S的速度这样才能得分。默认设置是20架飞机，最多容量默认是10架飞机。当然实际的指挥比这个要复杂。基本原理整个游戏是基于canvas的，纯JavaScript，四种朝向的飞机是用四张图片实现的，所有要不断渲染的对象都在airspace这个数组里面。有Plane，Runway和Exit三个对象。正确指挥一架飞机到目的地有5分。functionPlane(id,sx,sy,heading,url){this.x=sx;this.y=sy;this.flightId=id;this.h=heading||"
网页端「应用跳转」技术实现演变
由于网页传播的便捷性，从网页向APP导流几乎是所有APP厂商都会采用的推广手段，具体来说就是在网页上提供一些触发点（例如按钮、链接），用于跳转到APP。URLScheme早期的应用跳转只能通过「URLScheme」实现。例如通过下面这个「URLScheme」，就可以跳转到「贝聊APP」：ibeiliao://在网页中调用「URLScheme」也有多种方法：
Dora.Interception,为.NET Core度身打造的AOP框架：全新的版本
Dora.Interception,为.NETCore度身打造的AOP框架：全新的版本Dora.Interception1.0（Github地址：可以访问GitHub地址：https://github.com/jiangjinnan/Dora）推出有一段时间了，最近花了点时间将它升级到2.0，主要有如下的改进：提供了原生的动态代理生成底层框架Dora.DynamicProxy：之前依赖第三方框架Castle实现最底层的代理生成，但是它不支持基于Task的并行编程（也就是说通过它编写的Interceptor无法实现异步执行），所以我采用ILEmit的方式自行实现了这部分的功能，这些底层的功能实现在Dora.DynamicProxy中。提供了如下两种形式的拦截方案：基于实例封装：如果消费的类型是一个接口，那么提供的类型为动态生成的代理类，该代理类封装了目标对象。对于每一个动态生成的接口实现成员来说，它会负责执行应用的Interceptor。如果需要调用目标方法，被封装的目标对象的对应方法会被调用。这种拦截方案要求目标类型实现一个接口，接口中
VSTS/TFS Auto Build
前几天使用VSTS配置自动部署前端网站(AngularJS)和RESTfulAPI(.NET)到客户环境.由于都是参考官方文档https://docs.microsoft.com/zh-cn/vsts/build-release/tasks/比较费时间，所以记录下来步骤，希望能对大家有帮助。BuildRESTfulAPI1.选择BuildandRelease->Builds->New->选择模板ASP.NET，这个模板主要思路是：选择一个代理(相当于云服务器)->获取代码->安装NuGet->使用NuGet获取引用->编译项目->执行单元测试->上传.2.关键的配置项.Process中Agentqueue,因为是部署到WindowsServer2012,直接选择HostedVS2017.如何没有已经存在的代理，需要在设置->AgentQueues中下载配置。3.Getsources中Serverpath，这个代码路径很重要，因为默认设置是寻找.sln文
element 结合vue 在表单验证下，有值却提示错误的解决办法
绑定的值与规则指定的值一定要相同-------第一步：
萍萍的JavaScript教程 其一 量
在javascript中存在两种量,变量与常量,其唯一的区别是在声明后的可变性。常量声明后不可改变，变量声明后可以改变。其中，变量的声明是显示的，使用关键字var或let。如vara=1;varb=2;varc;以上是三条变量声明语句,其中前两句与赋值语句结合,属于带初始化的变量声明。而第三句属于不带初始化的。在javascript中有个特殊的undefined常量,表示的是未定义的,而不带初始化的声明实际上是将其值初始化成了undefined,即以下两种声明是等价的。varc;varc=undefined;在语句书写过程中,分号的书写不是必须的，但是非常建议写上。其一是为了方便阅读，其二是防止不同的javascript解析器的自动插入分号功能尝试差异，从而使程序结果变得不可预测。在变量声明过程中，let有着比var更加严格的语义描述。其最显著的特点我们用以下几个代码片段来描述。console.log(a);//此时控制台会输出undefined;vara=100;console.log(b);
PHP 用websocket实现客户端和服务器消息双向推送
PHP实现websockethtml代码
关于JS中变量提升的规则和原理的一点理解（二）
上篇文章中讲到变量提升和函数提升的先后顺序时蒙了，后来去查了一下资料，特别整理一下。在《你不知道的JavaScript（上卷）》一书的第40页中写到：函数会首先被提升，然后才是变量。书中的一个代码示例是：foo();//1varfoo;functionfoo(){console.log(1);}foo=function(){console.log(2);}这个例子相对比较好理解，就是foo这个函数会先被声明再作用域的开始部分，实际上这个代码片段会被引擎理解为如下形式：functionfoo(){console.log(1);}foo();//1foo=function(){console.log(2);}可是，当在网上看到这个一个例子时一开始我也是对运行结果不太理解的:console.log(foo);//functionfoo(){...}functionfoo(){console.log("函数声明");}varfoo="变量";咋一看这段代码输出的应该是undefined啊，
入门 Android 之 js
所谓的前端开发，浅显的理解就是是指我们经常看到的各种界面。比如网页，小程序、Android和iOS端的App等，都属于前端范畴。学习前端开发，选择从布局入门，学习各种界面控件，符合认识由浅入深的基本过程。Android中的界面实现是通过xml来定义，衍生出的html，具有使用简单和使用范围的优点，所以选择从html入手，可以起到一石二鸟的效果。具体可以参考我的另一篇文章：入门Android布局之html。当然，更进一步的学习要求我们透过现象看本质。html界面的背后逻辑是通过js来实现的，下面看一下js的基本使用方式。1三种提示框：三种提示框指：提醒框、确认框、输入框。提醒框用于对用户的操作进行提示；确认框具有同样的功能，不同的是多了「取消」和「确定」两个按钮，供用户选择；输入框用来获取用户的输入。实际效果如下：
web前端vue：可以使用javascript的表达式解析
代码实例学了怎么久的vue到现在为止在我们的模板组件中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持，如下代码实例：
git commit 规范
采用Angular的commit规范。不写commitmessage不允许提交代码，具体的规范格式，可以查看github。commit工具流commitizen项目内安装commitizen,安装cz-conventional-changelognpmicommitizencz-conventional-changelog--save-dev然后在package.json内手动配置如下内容："config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}}或者通过全局安装commitizennpmi-gcommitizen然后，在项目目录里，运行下面的命令，使其支持Angular的Commitmessage格式。commitizeninitcz-conventional-changelog--save--save-exact也会生成上面的那段config配置！！！添加script
vue-router 组件复用问题
组件系统是Vue的一个重要组成部分，它可以将一个复杂的页面抽象分解成许多小型、独立、可复用的组件，通过组合组件来组成应用程序，结合vue-router的路由功能将各个组件映射到相应的路由上，通过路由的变化来告诉Vue要在哪里渲染他们，实现各个组件、各个页面之间的跳转导航。问题使用vue-router切换路由时会触发组件树的更新，根据定义的路由渲染一个新的组件树，大致的切换过程是这样的：停用并移除不需要的组件验证切换的可行性复用没有进行更新的组件启用并激活新的组件具体路由切换控制流程请参考官方文档：切换控制流水线那vue-router是怎么判断某一个组件可以复用的呢？我们看一下下面这条路由配置：{path:'post/:postId',name:'post',component:resolve=>require(['./components/Post.vue'],resolve)}这是通过文章ID加载对应文章页面的路由，第一次访问时，Post.vue这个组件会被渲染到组件树中，mounted安装组件时通过文章ID获取文章
canvas图像处理汇总
一、canvas的情况canvas自从出来了之后，在前端的图像处理上面提供了各种各样的遍历，虽然很多的操作其实都是要应用到算法的，但是这个也给前端提供了很多的可能性，其中最终要的一个canvas函数（至少我认为）就是getImageData,这个函数可以提取图像每个像素的RGBA值。因为有这个函数所有才有丰富多彩的canvas图像处理。二、预备知识2.1获取一个canvas对象