vue-music 音乐 App 之 cube-ui 重构
去年6月初，我在慕课网上线了一门Vue.js2.0的高级实战课程音乐WebApp课程，教同学们如何去开发基础组件和业务组件。在一般大公司的实际项目中，并不会为每一个项目都去开发基础组件，他们往往会把基础组件收敛成一个组件库，供各个项目复用。滴滴也是如此，我们在去年初使用Vue.js去重构了我们的打车WebApp，也抽象出了一套移动端组件库，在经过一年多的业务考验后，我们决定做开源，一方面是想把好的东西分享出去，并通过社区的反馈去完善我们的组件库；另一方面也是想让大家了解滴滴的前端，能吸引一些优秀的人才加入滴滴。于是在去年的11月份，我们团队开源了cube-ui，到现在为止收到的反馈还算不错，也陆续有一些同学在生产环境也开始使用。cube-ui和其它同类型的开源组件库有一个很大的不同，它内部了使用了一个我们团队玩出来的“后编译”技术，它能帮我们玩出很多花样，比如减少组件包体积、支持rem、支持自定义组件颜色等等，但带来好处的同时也会有一些不便（webpack的配置会略显复杂），因此我们团队也为cube-ui
使用ElementUI开发系统（介绍与开发中遇到的问题）
最近使用ElementUI开发项目，遇到一些问题，由于网上能找到相关的资料实在太少了，所以把这次项目中的问题总结一下。首先你可以从github上面fork他们的代码下来这里就不多加阐述：https://github.com/ElementUI/theme-default-scss下载下来后你会发现，他们提供了一个element-variables.css给你设置你的主题色，帮助你快速设置你项目的主题颜色甚至是组件的长宽圆角。如果你是想沿用ele的交互而又想有一点点自己的风格的话，这样的修改相信已经可以满足你的需求了。但是如果你想进入更深层次的定制，甚至二次开发，那你就要去熟悉它的样式风格，去编写新的交互或者组件。开始二次开发一开始看到它生成的样式的时候，我感觉到它构建前肯定是用了类似预处理来处理它的样式，看到源代码后果然印证了我的想法，它是基于PostCss来编译的，虽然跟我之前想的应该是LESS/SCSS来进行预处理有出入，但是它的想法跟预处理差不多，PostCss是什么？网上很多人的说法是下一代CSS风格，但是CSS3都没
css网页的几种布局
第一种实现方式通过负边距与浮动实现左边固定，右边自适应的布局。主要代码如下：
漫谈前端性能优化
原文刊登在github，如果掘金有图片加载不出的，大家也可以直接看原版github地址在互联网网站百花齐放的今天，网站响应速度是用户体验的第一要素，其重要性不言而喻，这里有几个关于响应时间的重要条件：用户在浏览网页时，不会注意到少于0.1秒的延迟；少于1秒的延迟不会中断用户的正常思维，但是一些延迟会被用户注意到；延迟时间少于10秒，用户会继续等待响应；延迟时间超过10秒后，用户将会放弃并开始其他操作；因此大家都开始注重性能优化，很多厂商都开始做一些性能优化。比较有名的是雅虎军规，不过随着浏览器和协议等的发展，有一些已经逐渐被淘汰了。因此建议大家以历史的目光看待它。比如.尽量减少HTTP请求数这一条，在HTTP2协议下就不管用了，因为HTTP2实现了HTTP复用，HTTP请求变少，反而降低性能。因此一定要结合历史环境看待具体的优化原则和手段，否则会适得其反。雅虎军规中文版：http://www.cnblogs.com/xianyulaodi/p/5755079.html随着移动互联网的高速发展，移动终端的
快速开发基于 HTML5 网络拓扑图应用1
快速开发基于HTML5网络拓扑图应用1今天开始我们就从最基础解析如何构建HTML5Canvas拓扑图应用，HT内部封装了一个拓扑图形组件ht.graph.GraphView（以下简称GraphView）是HT框架中2D功能最丰富的组件，其相关类库都在ht.graph包下。GraphView具有基本图形的呈现和编辑功能，拓扑节点连线及自动布局功能，电力和电信等行业预定义对象，具有动画渲染等特效，因此其应用面很广泛，可作为监控领域的绘图工具和人机界面，可作为一般性的图形化编辑工具，可扩展成工作流和组织图等企业应用。简单说来就是：拓扑图是泛化的说法，电信网管的网络拓扑图、电力的电网拓扑图、工业控制的监控图、工作流程图、思维脑图等等，简单说就是节点连线构成的这些都是这里指的拓扑图。用HT开发一个网络拓扑图是非常容易的一件事，只需要短短几行代码就能完成一个简单的服务器与客户端的拓扑图：这个例子非常基础，几乎完成了服务器与客户端在拓扑上的所有功能。话不多说，猜猜看这个例子包括HTML标签的所有部分总共花了多少
Visual Studio Code发布了2017年最后一个版本1.19，准备迎接2018
Microsoft以版本1.19结束了VisualStudioCode一整年的月度发布。这个编辑器在过去的一年里，在功能、速度和流行度上都取得了不小的进步。开发团队已经为2018年排满的发布计划做好了准备。2017年最后一次的发布版本1.19，主要集中于性能改进和功能梳理，为新一年的发布做准备。Microsoft在版本说明里宣称他们“修复了近50个性能相关的问题”。其中有一些专门针对启动阶段，重新编排了编辑器的工作方式和工作时间，从而获得了启动时的性能提升。十一月的迭代计划说明了GitHub仓库有点失去控制：如你所知，一系列功能丰富的发布总是不利于让我们及时跟进所有的GitHub上的问题。所以，如果你在短时间内看到了很多的GitHub通知，不要被吓到了。重点是，版本1.19不会让你看到很多新的功能，但是你仍然会得到一个更好版本的VSCode。在优化版GitHub问题智能回复的帮助下，GitHub仓库有4,400个问题得以关闭，不过同时有2700个新的问题在这一时间段内被创建。版本1.1
F# 2017回顾
据微软项目经理PhillipCarter介绍，2017年，F#达到了4.1版本，用户社区也得到了发展，基本上与.NETCore2.0的发布保持了一致。同时，F#的工具变得更加强大，大会参与人数增加。在语言方面，F#在2017年最主要的成果是4.1版本发布，这绝不是一个小版本，带来了许多新特性，如结构体元组、结构体记录和结构体可区分联合等。此外，4.1修复了可选参数，日志功能新增调用者信息支持，提高了灵活性。Carter表示，最重要的是F#社区的发展，这一点通过产品遥测及Twitter、GitHub、F#软件基金会的活动就可以度量出来。遥测数据显示，F#的活跃用户数以万计，而且还在以每年20%以上的速度增长。有趣地的是，遥测数据显示，F#的增长与.NETCore2.0的发布保持一致。Carter承认，遥测是一个复杂的主题，提供的只是一个保守估计，因为微软并没有设法计算无法遥测的环境里的F#用户数。按照Carter的说法，2017年，F#的工具也得到了许多增强。首先，在安装.N
C# event线程安全
突然想到有关C#中使用event特性时关于线程安全的问题，以前虽然有遵从“复制引用+null判断”的模式（盲目地），但没有深入了解和思考。为之查询了资料和实验，对此有了进一步的理解。一般event使用模式定义（field-likeevent）：publiceventEventHandlerDone;类内raise：protectedvoidOnDone(){vardone=Done;if(done!=null){done(this,newEventArgs());}}不禁要问，为何要复制引用？多线程下表现如何？关于C#3.0和C#4.0中编译器对event实现的整理为了解决上面哪些疑惑，我查了一些资料，其中有来自当时C#编译器开发组成员的一篇博文Field-likeEventsConsideredHarmful。这篇博文介绍了C#3.0中编译器对于field-likeevent（也是最常见的使用方式）的实现。对于如此的代码，classE
DevExpress WPF入门指南：Smart Tag扩展功能
SmartTag提供了一些扩展功能用于简化指定某些属性的程序，比如下面这几项：ApplicationThemeDataContextImageGalleryConverttoDXWindowandConverttoDXRibbonWindowApplicationThemeApplicationTheme应用选中的主题（默认是DeepBlue），包括设计时和运行时。当应用主题，SmartTag会在你的应用程序中生成这样一段代码：
中小研发团队架构实践之开篇
中小研发团队架构实践之开篇中小型研发团队很多，而社区在中小型研发团队架构实践方面的探讨却很少。中小型研发团队特别是50至200人的研发团队，在早期的业务探索阶段，更多关注业务逻辑，快速迭代以验证商业模式，很少去关注技术架构。这时如果继续按照原有的架构及研发模式，会出现大量的问题，再也无法玩下去了。能不能有一套可直接落地、基于开源、成本低，可快速搭建的中间件及架构升级方案呢？我是一个有十多年经验的IT老兵，曾主导了两家公司的技术架构升级改造，现抛砖引玉，与大家一起探讨这方面的问题。整个系列有18篇文章，可分为三个部分，包括框架篇、架构篇和公共应用篇。框架篇即中间件或工具的使用，如缓存、消息队列、集中式日志、度量、微服务框架等，工欲善其事，必先利其器。架构篇主要是设计思想的提升，有企业总体架构、单个项目架构设计、统一应用分层等。公共应用篇是业务与技术的结合，有单点登录和企业支付网关，以下是具体篇章的介绍：一、框架篇——工欲善其事，必先利其器如果说运维是地基，那么框架就是承重墙。农村建住房是一块砖一块砖地往上垒，而城市建大H
中小研发团队架构实践之总体架构
中小研发团队架构实践之总体架构企业总体架构是什么，有什么用，具体怎么做呢？以我曾任职的公司为案例，一起来探讨这个问题。这家公司当时有200位研发人员和200多台服务器，我刚进这家公司时，他们的系统就已经玩不下去了，总是出现各种问题，例如日常发布系统时或访问量稍微过大时，系统就会出现很多故障，而且找不到故障发生的根本原因。我进公司后主要任务就是对这个系统进行升级改造，花了一个半月的时间写了那份企业总体架构文档，文档共有124页，直接指导了之后的技术改造，下图是那份文档的目录。一、企业商务模型企业商务模型的内容主要包括主营业务、商务模式、商务主体、竞品分析、组织架构、商务运作模型和业务流程等。主营业务即公司做什么业务，商业模式即公司怎么赚钱，商务主体即哪几个人在一起做这门生意，竞品分析即了解竞争对手的情况，组织架构即公司部门是怎么划分的。组织架构图中标出人数，根据系统与业务之间对应关系，可以了解系统中哪些模块使用频率高，以及业务与其对应模块的复杂度。商务运作模型即公司是如何运作的，售前做计划，找供应商把东西买
前端 2017: 举要删芜
2017年发生了很多事，想起来，嗯，确实有点多。我们都喜欢拿前端开发领域的变化之快开玩笑，而在过去几年中事实也确实如此。尽管听起来可能会有些陈词滥调，今天我想说事情不一样了。前端趋于稳定——流行的库基本上已经得到了大众化而不是被竞争者抢去风头——同时web开发变的很棒了。这篇文章，我将着眼于大的趋势来总结今年前端生态中发生的一些重要事件。统计数据很难说什么是下一件大事什么时候到来，特别是你还在上一件大事之中时。获取开源工具正确的数据很难，通常情况下我们看下面几个地方：GitHubstar数量跟流行库趋势有一丢丢关联，但人们通常只是给那些有趣的项目star然后再也不会来了。Google趋势可以帮助我们粗糙的看到流行趋势，但是不能提供足够的数据来与一些特定的工具集做对比。StackOverflow问题数量更多的只是可以看出人们对这一项技术的问题而不是这个东西的流行度。NPM下载量是人们下载这些库最精确的统计数据，即使这些也不是100%准确的，因为包括了一些可能的持续集成的
【JS基础】初谈JS现有的数据类型
undefined类型原始值类型.表示某个变量已经声明,但是未分配内存空间给予该变量.varfoo;console.log(foo);/*申明变量,却没有赋值*/functionbar(a){console.log(a);/*函数形参声明,却没有对应实参赋值*/}bar();functionfoo2(){}varbar2=foo2();/*函数无return或者,return不带任何返回值*/varo={foo:'foo'}console.log(o.bar);/*在对象中寻找不存在的属性*/varfoo='foo';foo=undefined;/*显示将某个变量指向undefined,消除引用标记*/null类型原始值类型.声明变量此时为一个空的原始值.由于历史原因,使用typeofnull返回object表示为一个对象.如果要验证一个变量是否为null,可以有以下几种方式functionis_null1(o)
2018-01-05 探索Vue高阶组件
高阶组件(HOC)是React生态系统的常用词汇，React中代码复用的主要方式就是使用高阶组件，并且这也是官方推荐的做法。而Vue中复用代码的主要方式是使用mixins，并且在Vue中很少提到高阶组件的概念，这是因为在Vue中实现高阶组件并不像React中那样简单，原因在于React和Vue的设计思想不同，但并不是说在Vue中就不能使用高阶组件，只不过在Vue中使用高阶组件所带来的收益相对于mixins并没有质的变化。本篇文章主要从技术性的角度阐述Vue高阶组件的实现，且会从React与Vue两者的角度进行分析。从React说起起初React也是使用mixins来完成代码复用的，比如为了避免组件不必要的重复渲染我们可以在组件中混入PureRenderMixin：constPureRenderMixin=require('react-addons-pure-render-mixin')constMyComponent=React.createC
浏览器解析渲染以及页面优化
浏览器对页面的加载、解析以及渲染是一个非常复杂的话题，这里我只对这个过程做一个非常概括的总览，以初步了解这些过程，对于前端编程如何优化页面给予一些原理性的支撑。为什么要了解这些过程了解浏览器的资源加载，可以使我们在引入外部样式、脚本资源时进行更合理的时机选择了解浏览器文档解析，可以使我们在构建DOM结构，组织CSS选择器等，选择更为合理的写法了解浏览器结果渲染，让我们在设置元素属性，脚本操作尽量优化以减少和避免不必要的重绘和回流以上三个过程并非完全独立，而是会有交叉，存在一边加载一边解析一边渲染的工作现象。加载从用户输入网址，这其后到获得网页文档之前也包含了如下众多步骤：DNS解析，会依次从缓存，本地Hosts，本地DNS服务器直至根DNS服务器，任何一级命中结果则直接返回，此步骤获得目标服务器IP端口解析，从URL中获得目标服务器端口号浏览器建立一条与网页服务器的TCP连接(三次握手)浏览器向服务器发送一条HTTP请求报文服务器执行一些逻辑如数据库查询并最终生成并返回HTTP响应报文初步经过以上步骤，
canvas绘制海报+二维码，满足绝大部分场景
canvas_x无需任何第三方依赖，轻型工具库。canvas绘制海报，生成带logo的二维码。也可生成编辑界面，用户自定义输入，一键生成等等项目地址https://github.com/sayll/canvas_x使用方法可直接通过script标签引入lib/canvas_x.js，也可当第三方模块引入。通过script引入，可通过全局变量canvas_x直接使用。详情可见demo。接口函数描述makeImage(options,...)绘制一个图片renderEditor(container,options,callback)创建编辑节点DOMmakeImage：高阶合成图片可以接受三个类型：图片，文字，二维码参数类型
我的大学是如何度过的
本文为原创文章，转载注明出处，欢迎扫码关注公众号flysnow_org或者网站http://www.flysnow.org/，第一时间看后续精彩文章。觉得好的话，顺手分享到朋友圈吧，感谢支持。前几天在一篇专业成死板怎么办？中，有位读者在公众号(flysnow_org)中留言到：估计很多人都遇到过跟我一样的问题:大学学了那么多知识，在人看来好像我们什么都会了，但是快到毕业找工作的时候又发现我们好像什么都不会？？？在我看来大学本科的每一门课都是一个大的方向，加上所学内容比较基础，而且教学与实际应用脱节，所以导致我们学的很泛，但是还不够专；不知道作者当初在大学的时候是不是也遇到过这种情况，或者还可以给几点建议。这个的确是个普遍的问题，对于这个问题的建议，我有在这篇公众号文章的留言回复，今天暂不提，今天主要讲下我的大学是如何度过的，给大家点参考。对于高考志愿，我可能和别人有点不一样，我所有志愿的专业都是清一色的计算机，并且不同意调剂。最终如愿以偿，得以修的《计算机科学与技术》，这门学科比较广泛，不过我最感兴趣的还是软件开发。
关于博客更新说明
各位小伙伴们，最近南京雨雪更替，气温剧降，大家要多注意保暖啊。glmapper博客系列年后有所变更，个人水平有限，年后将个人博客更替为工作室的博客，邀请了几位志同道合的小伙伴来一起参与。为了更好的将我们的理念“开放，开源，共享，分享”传递给更多热爱技术的小伙伴们，我们将会从博客的内容从原有的几条主线进行扩展，除了之前的菜鸟成长系列和Spring技术系列之外，将会拓展到JAVA基础系列、分布式、中间件，缓存等众多新的模块，同时秉承着之前的风格，从概念，源码，应用场景等不同角度进行学习和理解。从2017年6月份开始，制定了技术学习、分享的个人计划，截止目前，累计阅读量将近1.5万，关注数接近2300。半年的时间，除了工作之外基本都是在关注一些技术相关的东西，每周一更的频率也基本维持了下来，收获很大。相信小伙伴们和我一样，也都是再坚持自己喜欢的东西，无论结果如何，最起码很踏实。在这里，要感谢掘金提供的平台让我能够结实许许多多热爱技术的小伙伴。希望2018年能够有更大的突破，能够分享更多的知识给大家。工作室博客地址：glmapper_20
C语言编程打造表白程序——教你做一个浪漫的程序员
废话不多说直接上代码：//MFCApplication2Dlg.cpp:实现文件//#include"stdafx.h"#include"MFCApplication2.h"#include"MFCApplication2Dlg.h"#include"afxdialogex.h"#include"mmsystem.h"#include"Resource.h"#pragmacomment(lib,"winmm.lib")#ifdef_DEBUG#definenewDEBUG_NEW#endif//用于应用程序“关于”菜单项的CAboutDlg对话框classCAboutDlg:publicCDialogEx{public:CAboutDlg();//对话框数据enum{IDD=IDD_ABOUTBOX};protected:virtualvoidDoDataExchange(CDataExchange*pD
《Istio官方文档》设计理念
《Istio官方文档》设计理念原文链接译者:carvendy设计理念这页概述了Istio的核心设计理念。Istio的架构里有一些关键的设计理念，是在服务在一定规模上和高性能的标准上，系统必备的能力。公开透明。为了适应Istio，运维人员和开发人员应该做一些最小限度的工作从系统中获取真实值。为此，Istio可以自动注入在服务间的所有网络路径。Istio使用了sidecar代理获取流量，通过代理而无需任何代码，就可以在自动的应用网络层来路由流量。在Kubernetes,代理注入到了pods，而流量是通过iptables的规则来获取的。在sidecar代理会注入，而流量路由是程序化的，Istio是可以协调所有流量的。此原则也可以适应于性能。当使用Istio开发时，运维人员在保证性能的可用性下，应该查看在源消耗的最小增长。组件和API必须设必须考虑性能和规模。增长率。作为运维人员和开发人员，在系统必须增长到他们需要的数量时，将会越来越依赖Istio提供的功能。当希望加入自己的新特性，更加需要地可以自己扩展策略系统，使得源策略更加完整，可以控制