js原生的轮播，原理以及实践
轮播，无论是文字轮播还是图片轮播，他们的原理是一样的，都是通过定时器执行循环展示和影藏。一、手动轮播（1）原理一系列的大小相等的图片平铺，利用CSS布局只显示一张图片，其余隐藏。通过计算偏移量利用定时器实现自动播放，或通过手动点击事件切换图片。（2）实现如何利用css实现布局显示一张图片？主要的属性是over-follow:hidden。首先给容器一个固定的长和宽，然后设置over-flow:hidden。1、html结构首先父容器container存放所有内容，子容器list存在图片。子容器buttons存放按钮小圆点。
VueRouter进阶（1）-导航守卫
简介主要用来通过跳转或取消的方式守卫导航。例如判断登录信息：没登录全部跳到登录页。判断必要操作是否进行没进行的话中断跳转。分为三大类：全局守卫、路由守卫、组件守卫全局守卫1.beforeEach2.beforeResolve3.afterEach路由守卫1.beforeEnter组件守卫1.beforeRouteEnter//在渲染该组件的对应路由被confirm前调用//不！能！获取组件实例`this`//因为当守卫执行前，组件实例还没被创建虽然无法直接获取组件实力但是我们可以通过next参数的回调函数获取到当前实例进行操作beforeRouteEnter:(to,from,next)=>{next((vm)=>{//vm就是当前组件实例});}2.beforeRouteUpdate//在当前路由改变，但是该组件被复用时
每个人都能实现的vue自定义指令
前文先来bb一堆废话哈哈..用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用.刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是就想说自己封装一个自定义指令来解决这个问题,于是便有了自己的第一个vue自定义指令vue-reclick.vue-reclick传送门哈哈,好了!广告打完了,开始进入正题(等一下,听说star有奖哦)...1.使用场景在vue2.0中,有的情况下,你需要对普通DOM元素进行底层操作，这时候就需要用到自定义指令!2.api详解其实关于vue自定义指令的使用vue官方文档已经说的非常清楚.这里只是简单的照搬,哦不,讲一下(23333..)..1.首先创建一个指令自定义对象directObj。letdirectObj={}.2.vue为所有指令的钩子函数都提供一些函数参数。letargs={el:'指令所绑定的元素，可以用来直接操作
iOS 上的 FlexBox 布局
最近时不时的听到关于FlexBox的声音，除了在Weex以及ReactNative两个著名的跨平台项目里有用到FlexBox外，AsyncDisplayKit也同样引入了FlexBox。先说说iOS本身提供给我们2种布局方式:Frame,直接设置横纵坐标，并指定宽高。AutoLayout，通过设置相对位置的约束进行布局。Frame没什么太多可说的了，直接制定坐标和大小，设置绝对值。AutoLayout本身用意是好的，试图让我们从Frame中解放出来，摆脱关于坐标和大小的刻板思考方式。转而利用UI之间的相对位置关系，设置对应约束进行布局。但是AutoLayout好心并未做成好事，它的语法又臭又长!至今学习iOS两年，我使用到原生AutoLayout语法的时候屈指可数。只能靠Masonry这样的第三方库来使用它。AutoLayout的原理说完了AutoLayout的使用，再来看看它工作原理。实际上，我们设置AutoLayout的约束，
使用vue实现简单键盘，支持移动端和pc端
常看到各种app应用中使用自定义的键盘，本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用，欢迎点赞实现效果：Keyboard.vue<template><divclass="keyboard"v-show="showKeyboard"v-clickoutside="closeModal"><pv-for="keysinkeyList"><templatev-for="keyinkeys"><iv-if="key==='top'"@click.stop="clickKey"@touchend.stop="clickKey"class="iconfonticon-zhidingtab-top"></i><iv-else-if="key==='123'"@click.stop="clickKey"@touchend.stop="clickKey"
vue项目实战(第二回)
项目完整地址：系列文章一：https://segmentfault.com/a/11...系列文章二：项目中路由的配置路由这一块儿一直是我比较头疼的问题，在做angularJs项目的时候由于页面过多，在做路由配置及跳转的时候导致出现了问题，及时当时已经解决了，还是有点儿稀里糊涂，现在开始做vue项目，我想趁着这个机会好好把路由捋一捋，如果有相应疏漏还烦请批评指正，这里谢谢各位同学1.项目的结构分析index.html的内容如下：<!DOCTYPEhtml><html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>vue_program</title></head><body><divid="a
技术帖:GPU上的高性能C#——Hybridizer
Hybridizer是来自Altimesh的编译器，可以让人们采用C#代码或.NET程序集编程GPU和其他加速器。Hybridizer使用修饰符号来表达并行性，可以生成针对多核CPU和GPU优化的源代码或二进制文件。在这篇博文中演示了CUDA的目标。图1Hybridizer编译管线图1显示了Hybridizer编译管线。使用Parallel.For之类的并行化模式，或者像在CUDA中一样明确地分配并行工作，可以从加速器的计算能力中受益，而无需了解其内部架构的所有细节。下面是一个使用Parallel.For和lambda的简单示例。人们可以使用NVIDIANsightVisualStudioEdition在GPU上调试和分析这些代码。Hybridizer实现了先进的C#功能，其中包括虚函数和泛型。在哪里可以获得HybridizerHybridizer有两个版本：HybridizerSoftwareSuite：支持CUDA，AVX，AVX2，AVX512目标和输出源代码。这个源代码需要被审查，这在某些企业(
vue先hash 模式部署项目，然后开启histroy模式 ，引发的几个问题以及histroy模式的开启方式、优点
前言：vue路由有一个HTML5History模式,这个模式要在路由里面另外开启的，很多人在刚使用路由的时候之前不知道这个模式，所以并没有启用，然后就把项目部署上去了，因为这个模式还是有挺多优点的，最后还是会开启这个模式。然而因为之前使用hash模式再改为histroy模式还是有些问题的，我已经踩过坑了，然后把这几个问题写出来。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。本文首发于我的个人blog：obkoro1.com开启history模式：如果不开启的话，路由默认是hash模式，开启这个模式前端的工作也很简单，如下：mode:'history'//在路由那里配置一下这个最后需要后端的做一些配置配合，这里可以参考一下文档给的栗子。history模式的优点:url变成真正的url，url看上去更好看。http://yoursite.com/#/a/b//hash模式http://yoursite.com/a/b//history模式可以使用vue-router的
实现一个 WPF 版本的 ConnectedAnimation
Windows10的创造者更新为开发者们带来了ConnectedAnimation连接动画，这也是FluentDesignSystem的一部分。它的视觉引导性很强，用户能够在它的帮助下迅速定位操作的对象。不过，这是UWP，而且还是Windows10Creator’sUpdate中才带来的特性，WPF当然没有。于是，我自己写了一个“简易版本”。▲ConnectedAnimation连接动画模拟UWP中的APIUWP中的连接动画能跑起来的最简单代码包含下面两个部分。准备动画PrepareToAnimate()：ConnectedAnimationService.GetForCurrentView().PrepareToAnimate(/*string*/key,/*UIElement*/source);开始动画TryStart：varanimation=ConnectedAnimationService.GetForCurrentView().GetAni
Vue源码解析(六)-vue-router
先上一段简单的demo，本文根据此demo进行解析Vue.use(VueRouter)constrouter=newVueRouter({routes:[{path:'/home',component:{template:'<div>home</div>'}}]})newVue({'el':'#app',router,template:`<divid="app"><h1>Basic</h1><router-viewclass="view"></router-view></div>`})vue源码解析(五)中介绍过，Vue.use(VueRouter)其实主要调用了VueRouter.install(Vue)方法functioninstall(Vue){//挂载全局的钩子函数到Vue,vue
VueRouter进阶（2）-路由元信息
路由元信息为什么会有这个东西呢？我们知道我们浏览一些网站的时候有需要验证登录的也有不需要验证登录的，如果所有页面都在做成验证登录的话对于用户的体验也是极差的，所以这个时候路由元信息就起到了很大的作用。简单介绍主人公：meta字段介绍：我们称每个路由对象为路由记录，路由记录可以嵌套。所以到我们匹配到一个路有的时候他有可能有多条路由记录。路由记录会暴露在对应路由对象上，我们可以通过$route.matched获取到当前路由所有的路由记录，$route.matched[n].meta可以获取其中一个路由记录的meta字段栗子：letroutes=[{path:'/foo',name:'foo',component:foo,children:[{path:'bar',component:bar,meta:{needLogin:true//需要判断登录}}]},{
【ASP.NET MVC】MVC概述
描述本篇文章主要概述ASP.NETMVC，具体包括如下内容：1.MVC模式概述2.WebForm概述3.WebForm与MVC区别4.ASP.NETMVC发展历程5.运用程序结构6.ASP.NETMVC默认约定一MVC模式概述1.MVC模式运用领域分析：(1)当前，MVC作为一种主流框架，被广泛运用，如JAVAWeb开发，.NETASP,NETMVC(2)MVC模式被广泛运用于中间件，如RabbitMQ;(3)MVC模式广泛运用于接口开发，如ASP.NETWebAPI;(4)其他领域；2.MVC大致流程概述分析：(1)MVC由三大核心模块构成：控制器(Controller，简称C)，模型(Model，简称M)和视图(View，简称V);(2)View负责视图呈现，Model负责数据处理，Controller负责处理视图与模型之间逻辑；(3)WebForm中，一般是UI+BLL+DAL+Utility+WebService模式，而在MVC中，
死磕java底层（二）—消息服务
这一节作为上一节多线程的延续，先说一下java原生的阻塞队列（BlockingQueue），之后再说一下JMS（JavaMessagingService，java消息服务）以及它的实现之一ActiveMQ消息队列，所以都归并到消息服务中讨论。1.阻塞队列（BlockingQueue）BlockingQueue也是java.util.concurrent下的接口，它解决了多线程中如何高效传输数据的问题，通过这些高效并且线程安全的类，我们可以搭建高质量的多线程程序。主要用来控制线程同步的工具。BlockingQueue是一个接口，里面的方法如下：publicinterfaceBlockingQueue
FEX 技术周刊 - 2017/12/25
微信搜索『FEX』关注我们的公众号，及时获得最新资讯。深阅读V8releasev6.4https://v8project.blogspot.com/2017/12/v8-release-64.htmlV8v6.4improvestheperformanceoftheinstanceofoperatorby3.6×.Asadirectresult,uglify-jsisnow15–20%fasteraccordingtoV8’sWebToolingBenchmark.V8’sbuilt-incodeobjectsandbytecodehandlersarenowdeserializedlazilyfromthesnapshot,whichcansignificantlyreducememoryconsumedbyeachIsolate.Ijustasked23,000developerswhattheythink
android民工走向前端民工的无奈
开题宗旨:本文没有炫耀，没有装逼，只有自嘲，希望不会引战0.前言：细想今年，从调离部门开始，就开始从android转向了前端，今年调了两次部门我也不是在什么大公司，就是一个人人鄙视的外包公司，一年间看到无数的同事离开，而自己待大项目组到小黑屋，在从20几个人到自己一个人，当然现在我也进了新的项目组，有时候去看看小黑屋也很有感触，那种滋味就是心里闷得慌，也想离职找份心得工作，奈何出去找工作，没啥好的，可能也是自己比较弱吧当初移动端不行的时候，恰巧正好是16年底，没多少移动端的需求了，公司从移动部门200号人缩减几十号人，我也彻底的想去转方向了，生活所迫不想没饭吃，16年底就想着做后台，选择了node.js去学习，还买了一本过气的书籍去学，奈何，因为node.js做成了前端...我也不想，我也很无奈罗技术选择从angular4+ionic3做了几个移动项目，开源了一个项目，如果有意向做AG4+ionic3的可以看看我的开源项目项目地址后面开始用React.js做H5，别问我哪个技术好，我TM技术信仰已经被领导的无节操给扔了
AWS Codestar 服务简介
开发人员在软件开发过程中面临的最基本挑战是平衡团队管理、不同代码的合并、问题跟踪、库的引入和新的框架设置。这些因素已经在软件行业占据了相当长的一段时间。这些公司目前正在不断地发展和整理新方法，以简化和加快开发过程。大量的时间投资在设置IDE、配置正确的代码库上，为开发的需要确定基础设施、测试和生产、获得权限等等。开发人员在最终开始实际开发之前，要将宝贵的时间投入到这些事情中。这些组织需要快速的开发方法以在AWS上构建和部署应用程序，但它们中的大多数直到现在为止都缺乏资源。亚马逊此前推出的AWSCodeStar服务，倾向于增加开发速度，和缓解开发高级功能软件的各种挑战。AWSCodeStar是一个基于云计算的服务，用于快速开发、构建和部署应用程序。AWSCodeStar主要用于解决这样的挑战。它简化了开发的安装过程，使团队能够立即开始项目上的工作，而不是在设置和配置上浪费时间。没有类似手动进行代码跟踪、配置和库的引入这些混乱，AWSCodeStar会为每项开发自动配置。Codestar实行自上而下的方式，管理员
在编程中为所欲为[圣诞版]
众所周知，在Java中finalString中的值是一成不变的。大家都知道String的+(拼接)运算会丢弃内存引用并在内存中重新开拓地址，事实上也确实如此。但final的变量真的是一成不变的吗？谨以此文打开程序员思路，跳出定式思维，希望本文会给你的程序员生涯带来新的思考。一个简单的例子这个例子很久远，早有前辈做过，但并不是所有的程序员都接触过。通常喜欢“猎奇”的程序员对此不会陌生。importjava.lang.reflect.Field;publicclassChangeFinalString{publicstaticvoidmain(String[]args)throwsException{finalStrings="12345:caiyongji";System.out.println(s);System.out.println("hashcode:"+s.hashCode());Fieldf=String.class.getDeclaredField("value");f.setAc
视频教程 | 与程序员进行高效沟通，三分钟带你掌握Zeplin
视频教程Zeplin是配合着Sketch非常好用的一款插件，设计稿完成后，可以直接从Sketch导入到Zeplin中。Zeplin可以帮你自动生成尺码标注、CSS样式代码、导出图片（在Sketch中设好切片的设计稿，在Zeplin中可以直接导出），以及共享成员间可以备注和评论等。所以这一期教程，我们就来看一下该如何使用Zeplin（大家可以选择看视频，或是下面的图文教程）。1准备工作登录Zeplin的官网（戳这里进入），选择右上角的Signupfree，先注册一个账号。
程序员你为什么这么累【续】：编码习惯之工具类规范
导读:程序员你为什么这么累？我的编码习惯-接口定义我的编码习惯-Controller规范我的编码习惯-日志建议我的编码习惯-异常处理我的编码习惯-参数校验和国际化规范我的编码习惯-工具类规范我的编码习惯-函数编写建议我的编码习惯-配置规范一个项目不可能没有工具类，工具类的初衷是良好的，代码重用，但到了后面工具类越来越乱，有些项目工具类有几十个，看的眼花缭乱，还有不少重复。如何编写出好的工具类，我有几点建议：隐藏实现就是要定义自己的工具类，尽量不要在业务代码里面直接调用第三方的工具类。这也是解耦的一种体现。如果我们不定义自己的工具类而是直接使用第三方的工具类有2个不好的地方：不同的人会使用不同的第三方工具库，会比较乱。将来万一要修改工具类的实现逻辑会很痛苦。以最简单的字符串判空为例，很多工具库都有StringUtils工具类，如果我们使用commons的工具类，一开始我们直接使用StringUtils.isEmpty，字符串为空或者空串的时候会返回为true，后面业务改动，需要改成如
前端开发人员需要知道的JavaScript简写技巧（高级篇）
之前我们介绍JavaScript简写技巧的初级篇，下面给大家讲解JavaScript简写技巧的高级篇帮助大家更加熟练的运用JavaScript语言来进行开发工作。高级篇1.变量赋值当将一个变量的值赋给另一个变量时，首先需要确保原值不是null、未定义的或空值。可以通过编写一个包含多个条件的判断语句来实现：或者简写为以下的形式：可以将下面的代码粘贴到es6console中，自己测试：2.默认值赋值如果预期参数是null或未定义，则不需要写六行代码来分配默认值。我们可以只使用一个简短的逻辑运算符，只用一行代码就能完成相同的操作。简写为：3.对象属性ES6提供了一个很简单的办法，来分配属性的对象。如果属性名与key名相同，则可以使用简写。简写为：4.箭头函数经典函数很容易读写，但是如果把它们嵌套在其它函数中进行调用时，整个函数就会变得有些冗长和混乱。这时候可以使用箭头函数来简写：简写为：5.隐式返回值返回值是我们通常用来返回函数最终结果的关键字