HTML5 Canvas 数据持久化存储之属性列表
属性列表想必大家都不会陌生，正常用HTML5来做的属性列表大概就是用下拉菜单之类的，而且很多情况下，下拉列表还不够好看，怎么办？我试着用HTforWeb来实现属性栏点击按钮弹出多功能选框，对传入的数据进行选择的功能，感觉整体实践起来还是比较简单方便的，所以在这边跟大家分享一下。本例链接：http://www.hightopo.com/demo/propertyEditor/index.html本例效果图：从上面的效果图中我们可以看到，整个页面分为3个部分，左边的graphView拓扑图部分，右下角的tableView表格部分，以及右上角的propertyView属性部分。我们先把整个场景划分出来，然后再向各个部分来添加具体的内容：gv=newht.graph.GraphView();vartablePane=newht.widget.TablePane(gv.dm());//表格面板组件propertyView=newht.widget.PropertyView(gv.dm());/
一个只有 99 行代码的 JS 流程框架 （一）
张镇圳，腾讯Web前端高级工程师，对内部系统前端建设有多年经验，喜欢钻研捣鼓各种前端组件和框架。最近一直在想一个问题，如何能让js代码写起来更语义化和更具有可读性。上周末的时候突发奇想，当代码在运行的时候，其实跟我们做事情是类似的，都是做完一步接着下一步，并且这些事情有些是可规划的，有些是需要做完该步才知道下一步该做什么。想到这里一个js框架雏形在我大脑中慢慢形成，暂且命名为flowJS。接着说说这个框架应该有哪些API？1、可以预先规划好流程的每一步，如this.setNext('步骤A').setNext('步骤B')……2、可以在任何一步决定下一步做什么，如this.setNext('步骤C')，其实这里的API和上面的一样，只是调用的地方不一样而已。3、在任何一步中，可以知道当前步是在做什么，前面一步做了什么、下一步准备要做什么，如this.getCurr()、this.getPrev()、this.getNext()。4、当前步做完后，能将结果告诉下一步（仅仅是下一步能获取到当前步传
前端特效06：4D炫酷光影效果
今天，小编将与大家分享web前端特效荟萃系列第六期，喜欢把玩儿炫酷效果的小伙伴快快看过来^_^，希望大家喜欢呦～第六期，给大家分享一个使用CSS及javascript实现的4D炫酷光影效果。相关代码如下：
CVE-2017-0234
CVE-2017-0234是Chakra引擎在进行JIT代码优化的时候优化过度，去掉了数组边界检查而导致的漏洞。一首先在github上找到对应的有漏洞的ChakraCore版本，可以在release-note里搜索CVE-2017-0234，发现:v1.4.4ThispatchreleaseofChakraCore1.4includesthefollowingsecurityfixes:ChangetoaddressCVE-2017-0229,CVE-2017-0223,CVE-2017-0224,CVE-2017-0252,CVE-2017-0230,CVE-2017-0234,CVE-2017-0235,CVE-2017-0236,CVE-2017-0228,CVE-2017-0238,CVE-2017-0266#2959那么最后一个有漏洞的版本就是v1.4.3，在release版里提供了二进制文件和源代码文件，
移动端图片上传旋转、压缩的解决方案
在手机上通过网页input标签拍照上传图片，有一些手机会出现图片旋转了90度d的问题，包括iPhone和个别三星手机。这些手机竖着拍的时候才会出现这种问题，横拍出来的照片就正常显示。因此，可以通过获取手机拍照角度来对照片进行旋转，从而解决这个问题。Orientation这个参数并不是所有图片都有的，不过手机拍出来的图片是带有这个参数的。
2017年 JavaScript 框架回顾 -- React生态系统
前一篇文章中，我们介绍了2017年JavaScript框架的整体情况。我们也了解到在众多的前端框架中，目前最为庞大又在快速增长的当属React了，本文就来重点介绍React的生态系统。首先看看与React有关的软件包的生态系统。在Facebook构建React之初，就有许多来自于开源社区第三方库的软件包。这些软件包使用React补充其它功能，以便提供完整的应用程序解决方案。当然，安装包中也存在着提供相似功能的彼此竞争关系。ReactRouter丰富的Web应用程序具有的一个共同特点就是：提供了多个“路由”。这些“路由”本质上是不同的功能块，在浏览器中表现为单独的URL。React不需要为简单的应用程序使用路由，同时在一些桌面和移动应用程序环境中，路由也不是必需的。因此，ReactRouter虽然是最受欢迎的React应用程序的路由解决方案，但ReactRouter的相对流行程度却只有React的一半。了解React的开发者都知道，React应用于一个明确定义的
Node.js 子进程与应用场景
由于ons（阿里云RocketMQ包）基于C艹封装而来，不支持单一进程内实例化多个生产者与消费者，为了解决这一问题，使用了Node.js子进程。在使用的过程中碰到的坑发布：进程管理关闭主进程后，子进程变为操作系统进程（pid为1）几种解决方案将子进程看做独立运行的进程，记录pid，发布时进程管理关闭主进程同时关闭子进程主进程监听关闭事件，主动关闭从属于自己的子进程子进程种类spawn：执行命令exec：执行命令（新建shell）execFile：执行文件fork：执行文件子进程常用事件exitcloseerrormessageclose与exit是有区别的，close是在数据流关闭时触发的事件，exit是在子进程退出时触发的事件。因为多个子进程可以共享同一个数据流，所以当某个子进程exit时不一定会触发close事件，因为这个时候还存在其他子进程在使用数据流。子进程数据流stdinstdoutstderr因为是以主进程为出发点，所以子进程的数据流与常规理解的数据流方向相反，stdin：写入
Npm vs Yarn 之备忘大全
NpmvsYarn之备忘大全有则笑话，如此讲到：“老丈人爱吃核桃，昨天买了二斤陪妻子送去，老丈人年轻时练过武，用手一拍核桃就碎了，笑着对我说：你还用锤子，你看我用手就成。我嘴一抽，来了句：人和动物最大的区别就是人会使用工具。……”。撇开这样特例场景，这句话还是非常用有道理的；毕竟从远古石器时期或更早，到如今，所言之语，所穿之衣，代步之车，所学的知识，所晓的常识.....皆是工具；可以说绝大部分人之间的差异(天才级除外)，仅在于工具使用之优劣罢了。在工具的使用中，很多人极大程度上停留于会用层面，如若不遇到问题，几乎就处于停滞；这本身倒也没有问题，但可能因为没有透彻的了解，而错失了对该物可以拥有的想象力，从而错过了许多本该有的美好，如此的可惜。坦白说，在从事前端方面工作，蛮长一段时间内，就因缺乏对Npm有足够的认知，使得后来对其诸多讯息，颇感「相见恨晚」；在本篇中，将客观陈述Npm与Yarn的各自功用，以此显出两者间的差异；同时，以比较的形式，列出「常用命令清单」，以方便使用之时，作为参考(将陆续更新以完善)；同时也欲借此，再次
基于vue开发活动页-路由相关
首先介绍一下项目的背景，脱离了背景谈需求都在瞎逼逼，本次活动页是独立于主站项目(SPA)的新独立项目，但是由于对微信的强依赖，新项目还是需要挂在主域名下。这有啥的，让运维同事帮忙配个nginx把主站的某个路径指向新项目目录就好呗~事实上确实是的，一开始配的域名是m.kurisu.fm/my(对..这个是假域名)凡是这个路径的都直接指向vue项目的目录，很完美跑起来了，这个也是微信的安全域名所以登录应该也是稳妥的。但是问题来了...它没法支付...这个域名并不是可支付的域名，所以我们必须要改动域名。我们的可支付路径是m.kurisu.fm/pay/:id，只好再麻烦一下同事帮忙配个m.kurisu.fm/pay/my的路径了，好啦，restart之后一看，凉了。白屏，静态资源都加载出来了，#app也挂载上了，但是router-view那边没有显示。这是啥玩意？看了下vue-router的文档，发现了这个玩意--应用基路径也就是说我们应该将router的配置修改一下letlink=''if(window.locat
组件的划分
本篇主要来聊一聊组件的划分的那些事。现在的前端开发，都是围绕着组件展开的。我们逐渐意识到，理解组件化的含义，清楚组件划分的规则至关重要。如何做到组件与组件之间的耦合度尽量的小，如何完成子组件和父组件的划分，或许，是我们开发一个优秀的系统前，需要去认真思考的问题。如果你喜欢我的文章，欢迎评论，欢迎Star~github博客正文本篇文章主要使用的数据驱动框架是vue，所以后续的组件划分中，也主要是围绕着vue组件展开的。或许，你会有疑问，React和Vue的组件性质不应该是一样的吗？是的，可以说两者开发出来的组件都非常的相似，但是，还是有些细微的差别。比方说，无状态组件，大家都知道React中的无状态组件，只有props这个外部给予的属性。但是，在Vue中，你会发现似乎也有类似的组件，只提供props不就可以了么。但是，它仍然是具备data的。所以，归根结底，它只是不去使用状态，而不是没有状态。扯了这些东西，我们回到正题——组件的划分。这里需要我们去思考一个问题——组件以何为分？首先，我们以写代码这件事来举个例子。我们说好的代码
[译] Vue Devtools 4.0 有哪些新内容
几天前，Vuedevtools发布了重大更新。让我们来看看有哪些新特性与改进！:christmas_tree:（译者注：以下视频源都是youtube，需自备梯子）可编辑的组件data现在可以直接在组件检查面板中修改组件的data了。选中一个组件在检查器的data部分下，将鼠标移到你要修改的字段上点击铅笔图标通过点击完成图标或者敲击回车键来提交你的改动。也可以通过敲击ESC键来取消编辑字段内容会被序列化为JSON。举个例子，如果你想输入一个字符串，则打字输入带双引号的"hello"。数组则应该像[1,2,"bar"]，对象则为{"a":1,"b":"foo"}。目前可以编辑以下几种类型的值：null和undefinedString字面量：Boolean,Number,Infinity,-Infinity和NaNArraysPlainobjects对于Arrays和Plainobjects，可以通过专用图标来增删项。也可以重命名对象的key名。
机器学习新框架Propel：使用JavaScript做可微分编程
本文介绍了一种JavaScript的机器学习新框架Propel，该框架技能在Node中使用，又能在浏览器中使用。以下是对该框架的使用介绍。Propel提供JavaScript中的GPU后端类似numpy的基础设施。JavaScript作为快速、动态语言，我们认为可以作为所有科学类程序员的理想工作流。Propel在浏览器、Node中都能运行。在两个环境中，Propel都能够使用GPU硬件对计算进行加速。在浏览器中，它能通过deeplearn.js利用WebG，在Node上，它能使用TensorFlow的CAPI。import{grad,linspace,plot}from"propel";f=x=>x.tanh();x=linspace(-4,4,200);plot(x,f(x),x,grad(f)(x),x,grad(grad(f))(x),x,grad(grad(grad(f)))(x),x,grad(grad(grad(grad(f))
前端多项目模块化实践
已经连续加班快三个月了，最近抽个时间把一些心得记录下来，算是做个总结吧！故事背景公司的业务以做项目为主，主打的是电商行业，因此也决定了很多项目其实存在一定的共性。目前公司业绩不错（年底应该会有大把money吧），经常多个项目并行，这也暴露了整个团队存在的问题：多项目并行，导致人力资源不够（本猿在三线城市，有两把刷子的兄弟不好招）代码复用率低，重复劳动过多（即使有50%相似度的项目，可能也要重新开发，太low了）开发质量难以控制，测试成本高项目难以按时完成，经常会delay因此如何能找到一个经济实惠符合我们团队的情况的解决方案迫在眉睫！本猿团队的技术栈是vue+webpack，因此我的解决方案可能不适合其他技术栈解决方案一这个其实是个失败的方案，在这里先介绍一下，鄙视一下自己！总体思路在通过项目编号，在页面中控制组件的渲染，比如：
小而美的backbone
本文已同步在我的博客在这个react和vue如日中天、jquery逐渐被大家抛弃的年代，我还是想要来说一说backbone。16年6月初，在没有任何前端框架使用经验、js水平也较一般的情况下，被告知需要在几个工作日内搭建完成一个后台管理系统，没有页面设计稿、没有组件库，一切都是从零开始。当时面临两个选择，backbone和react。虽然我很希望能够拿react来练手，但是考虑到学习成本和项目时间问题，leader还是建议我使用backbone来完成，就这样，一直用到差不多现在。虽然到项目后期业务场景越来越复杂，backbone的这套技术栈体现出越来越多的问题，但是对于小型项目来说，我还是认为backbone是个不错的选择，而且学习成本低，上手极快~backbone是个非常轻量的mvc库，本文将基于backbone的源码谈一谈其实现的核心部分，以及其中一些巧妙的思想和代码实现技巧。事件机制（Events）事件部分的核心逻辑其实比较简单，简化一下可以用如下的伪代码来表示
Castle Game Engine 6.4 发布，带来大量新特性
CastleGameEngine是一个用ObjectPascal开发的跨平台游戏引擎，支持2D和3D游戏，支持PC、Android和iOS端。CastleGameEngine6.4主要新特性：Rigid-bodyphysics：集成KraftPhysicsEngineiOS游戏服务改进地形生成API升级，地形演示改进Shader渲染管道代码改进，完全统一移动（OpenGLES）和桌面（OpenGL）着色器引入新的功能强大的TCastleTransform类引入新的现代化API支持DragonBones、https协议、KTX纹理格式其他API改进引擎示例改进同时，开发团队还发布了3D和2D模型浏览器view3dscene3.18.0，以及图像浏览器glViewImage的1.8.0版本。各项具体细节请查阅发行说明。
PCF 2.0平台扩展：包含容器和Serverless
看新闻很累？看技术新闻更累？试试下载InfoQ手机客户端，每天上下班路上听新闻，有趣还有料！PivotalCloudFoundry（PCF）2.0版本是平台的一次意义重大的扩展。PCF通过附加服务市场来扩展平台的能力，在提供原有的PaaS(PlatformasaService)功能的同时，PCF2.0现在还包含了基于Kubernetes的容器服务和即将上线的Function/Serverless服务。早前被称为ElasticRuntime的PivotalApplicationService（PAS）是一个部署Java、.Net和Node应用程序的平台。这些应用程序使用云和12-factorApp开发模式构建。PCF的现存用户会对平台的这部分功能感到非常熟悉。在PAS的基础上，Pivotal将会联合VMware和GoogleCloud开发PivotalContainerService，或者称为PKS。名字当中的“K”表示，这会在用户特定的数据中心或者是公共云中，为开源版本的Kub
vue你不知道的奇淫绝技
1.placeholder与computed巧用表单开发肯定是日常开发中必不可少的环节，可是设计图经常会有表单默认值的设计，比如:需求方的需求点是：在没有输入值的时候显示默认值，在输入值的时候显示输入值。通常就能想到用placeholder来解决这个问题，并且通常会用v-model来绑定data中的值。然后，data的值再设定默认值为空//scriptdata(){return{index:0,name:''}}//template<inputtype="number"placeholder="默认值index"v-model="index"/><inputtype="text"placeholder="默认值name"v-model="name"/>以上这种效果是,第一个input的placeholder的值显示不出，显示了index的值：0，不符合需求第二种能显示placeholder的值,需求满足。但是一些复杂的需求，比如，让
Dora.Interception, 为.NET Core度身打造的AOP框架[3]：Interceptor的注册
Dora.Interception,为.NETCore度身打造的AOP框架[3]：Interceptor的注册在《不一样的Interceptor》中我们着重介绍了Dora.Interception中最为核心的对象Interceptor，以及定义Interceptor类型的一些约定。由于Interceptor总是通过拦截某个方法的调用进而实现对前置或者后置操作的注入，所以我们定义的Interceptor类型总是需要与对应的目标方法进行映射。在默认的情况下，这种映射是通过在目标类型或者方法上标注特性的方式来实现的。对于任何一个Interceptor类型，我们总是需要为它定义一个对应的特性类型，这些特性具有一个共同的基类InterceptorAttribute。目录一、InterceptorAttribute二、如何定义和使用InterceptorAttribute三、InterceptorAttribute的作用域四、屏蔽某种类型的InterceptorAttribute五、对其他注册方式的支持一、InterceptorAttribute
vue通过路由实现页面刷新
vue开发微信商城项目，需求如下：购物车页面跳转到详情页，购物车页面包含了多个组件，点击结算跳转到订单页面，从订单返回时，购物车页面没有刷新，由于购物车组件之间通过bus实现事件传递，页面跳转（非物理返回）无法触发beforeDestroy方法，则无法再此方法中销毁bus方法beforeDestroy(){this.$root.Bus.$off('judge')this.$root.Bus.$off('refreshDetail')this.$root.Bus.$off('clearAll')this.$root.Bus.$off('upDataCart')},无奈，通过beforeRouteLeave来销毁beforeRouteLeave(to,from,next){this.$root.Bus.$off('judge')this.$root.Bus.$off('refreshDetail')this.$root.Bus.$off('clear
C#历年来最受欢迎功能
不定时更新翻译系列，此系列更新毫无时间规律，文笔菜翻译菜求各位看官老爷们轻喷，如觉得我翻译有问题请挪步原博客地址本博文翻译自：http://www.dotnetcurry.com/csharp/1411/csharp-favorite-features在这篇文章中，请您和我一起浏览C#的各种版本，并分享每个版本中我最喜欢的特性。我将在强调实用性的同时展示其优点。C＃我最喜欢的功能-V1至V7C＃1.0版本C＃1.0版本（ISO-1）真的是一种非常无趣的东西，没有什么特别令人兴奋的东西，而且它缺少很多开发者喜欢的语言。然而，有一种特别的特征，我认为是我最喜欢的。-隐式和显式接口实现。接口一直在使用，并且在现代的C#中仍然很流行。以下面的IDateProvider接口为例。publicinterfaceIDateProvider{DateTimeGetDate();}没有什么特别的，现在设想两个实现-其中第一个隐式实现如下：publicclassDefaultDateProvider:IDatePr