2017年04月_garyhu1

转载 CSS常见布局解决方案

说起css布局，那么一定得聊聊盒模型，清除浮动，position，display什么的，但本篇本不是讲这些基础知识的，而是给出各种布局的解决方案。水平居中布局首先我们来看看水平居中1.margin + 定宽div class="parent"> div class="child">Demodiv>div>style> .child { widt

2017-04-28 17:25:27 406

转载 JavaScript数组

数组是一种非常重要的数据类型，它语法简单、灵活、高效。在多数编程语言中，数组都充当着至关重要的角色，以至于很难想象没有数组的编程语言会是什么模样。特别是JavaScript，它天生的灵活性，又进一步发挥了数组的特长，丰富了数组的使用场景。可以豪不夸张地说，不深入地了解数组，不足以写JavaScript。截止ES7规范，数组共包含33个标准的API方法和一个非标准的API方法，使用场景和使用方

2017-04-28 17:20:54 248

转载图解android事件分发

转自：http://www.jianshu.com/p/e99b5e8bd67b 为什么转载这篇文章？因为它能让你很容易的把事件分发记在你的脑海，感觉自己写不出比这更好的文章了，推荐！在Android开发中，事件分发机制是一块Android比较重要的知识体系，了解并熟悉整套的分发机制有助于更好的分析各种点击滑动失效问题，更好去扩展控件的事件功能和开发自定义控件，同时事件分发机制也是Andr

2017-04-26 13:45:32 277

转载 CSS3之Flexbox布局(二)

0. 前言Flexbox 是什么呢？就 W3C 官方给到的解释是，这是设计来实现更复杂的版面布局。那我自己对他的定义是，Flexbox 从本质上就是一个 Box-model 的延伸，我们都知道 Box-model 定义了一个元素的盒模型，然而 Flexbox 更进一步的去规范了这些盒模型之间彼此的相对关系。而不需要去用一些很 cheat 的做法，去 hack 一些本

2017-04-26 10:11:05 1149

原创 JS的Document属性和方法

document.title //设置文档标题等价于HTML的title标签document.bgColor //设置页面背景色document.fgColor //设置前景色(文本颜色)document.linkColor //未点击过的链接颜色document.alinkColor //激活链接(焦点在此链接上)的颜色document.vlinkColor //已点击过的链

2017-04-24 10:39:13 521

原创 $parse和$eval

AngularJS的初学者常常会对$parse和$eval两个内建服务感到有些困惑，今天我们就来说说AngularJS中的$parse和$eval。总的来说，$parse和$eval都是作用于AngularJS的表达式。什么是表达式？AngularJS中的表达式就是一些类似于JavaScript代码的代码片段（但是它们和JavaScript代码有不尽相同）。表达式通常被用来防止

2017-04-24 10:07:41 261

转载 vue.js 父子间通信

本篇资料来于官方文档：http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1本文是在官方文档的基础上，更加细致的说明，代码更多更全。简单来说，更适合新手阅读（二十七）父子组件通信①访问子组件、父组件、根组件；this.$paren

2017-04-23 20:17:00 352

转载 Dagger2

原文链接：http://blog.csdn.net/xlh1191860939/article/details/70473853边撸代码边分析源码从而高效入门 Dagger2 —— 由1191860939分享好久没有更新博客了，最近在学习依赖注入框架Dagger2，感觉上手还是挺不容易的的，也查看了网上好多朋友写的技术文章，折磨了好长时间~今天，我在他

2017-04-23 15:17:47 469

转载使用 drawBitmapMesh 实现仿真水波纹效果

在 Android 的画布 Canvas 里面有个 drawBitmapMesh 方法，通过它可以实现对 Bitmap 的各种扭曲。我们试一下用它把图像扭出水波纹的效果。和 Material Design 里扁平化的水波纹不同，这里是通过对图像的处理，模拟真实的水波纹效果，最后实现的效果如下：drawBitmapMesh 简介我们先了解一下「网格」的概念

2017-04-23 15:15:58 1593 2

转载 Android全套动画使用技巧

一、Android View 动画框架 Animation框架定义了透明度、旋转、缩放和位移几种常见的动画，控制的整个View，实现原理是每次绘制视图时View所在ViewGroup中的drawChild函数获取该View的Animation的Transformation值，然后调用canvas.concat(transformToApply.getMatrix())，通过矩阵运算完成

2017-04-23 15:11:03 562

原创 JS 正则表达式 RegExp（下）

字符串是编程时涉及到的最多的一种数据结构，对字符串进行操作的需求几乎无处不在。比如判断一个字符串是否是合法的Email地址，虽然可以编程提取@前后的子串，再分别判断是否是单词和域名，但这样做不但麻烦，而且代码难以复用。正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否则，该字符串就是不合法的

2017-04-22 21:16:38 388

原创 JS 正则表达式RegExp（上）

RegExp 对象RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。直接量语法/pattern/attributes创建 RegExp 对象的语法：new RegExp(pattern, attributes);参数参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。参数 attributes 是一个可选的字符串，包含属性

2017-04-22 21:14:13 204

原创 js 的方法

anchor()创建 HTML 锚。13big()用大号字体显示字符串。13blink()显示闪动字符串。1 bold()使用粗体显示字符串。13charAt()返回在指定位置的字符。13charCo

2017-04-22 21:11:04 274

原创 angular创建自定义的指令

除了 AngularJS 内置的指令外，我们还可以创建自定义指令。你可以使用 .directive 函数来添加自定义的指令。要调用自定义指令，HTML 元素上需要添加自定义指令名。使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:AngularJS 实例

2017-04-22 16:17:54 577

转载 angular之link和compile的区别

在AngularJS应用启动之前，它们是以HTML文本形式存在文本编辑器当中。应用启动会进行编译和链接，作用域会同HTML进行绑定。这个过程包含了两个阶段！编译阶段　　在编译的阶段，angularJs会遍历整个的文档并根据JavaScript中指令定义来处理页面上什么的指令。在遍历的过程中，有可能一层套着一层，一直延深处遍历。一但遍历和编译完毕就会返回一个叫做模板函数的函数。在这个

2017-04-22 15:36:45 503

原创 AngularJS 路由

本章节我们将为大家介绍 AngularJS 路由。AngularJS 路由允许我们通过不同的 URL 访问不同的内容。通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。通常我们的URL形式为 http://runoob.com/first/page，但在单页Web应用中 AngularJS 通过 #

2017-04-22 15:17:47 292

原创 AngularJS 依赖注入

什么是依赖注入wiki 上的解释是：依赖注入（Dependency Injection，简称DI）是一种软件设计模式，在这种模式下，一个或更多的依赖（或服务）被注入（或者通过引用传递）到一个独立的对象（或客户端）中，然后成为了该客户端状态的一部分。该模式分离了客户端依赖本身行为的创建，这使得程序设计变得松耦合，并遵循了依赖反转和单一职责原则。与服务定位器模式形成直接对比的是，它允许

2017-04-22 15:15:42 261

原创 AngularJS 动画

AngularJS 动画AngularJS 提供了动画效果，可以配合 CSS 使用。AngularJS 使用动画需要引入 angular-animate.min.js 库。 src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js">还需在应用中使用模型 ngAnimat

2017-04-22 15:12:36 482

原创 angular.element

angular.element将DOM元素或者HTML字符串一包装成一个jQuery元素。格式：angular.element(element);element：包装成jquery对象的html字符串或者dom元素jqLite提供的方法：addClass()after()append()attr()bind() – 不支持命名空间,选择器和事件数据child

2017-04-22 15:05:52 412

原创 angular.copy()

AngularJS API之copy深拷贝angular提供了一个可以复制对象的api——copy(source,destination)，它会对source对象执行深拷贝。使用时需要注意下面几点：如果只有一个参数（没有指定拷贝的对象），则返回一个拷贝对象如果指定了destination,则会深拷贝对象复制给destination如果source是nul

2017-04-22 14:56:44 1529

原创 AngularJS的方法

对于一个在前端属于纯新手的我来说，Javascript都还是一知半解，要想直接上手angular JS，遇到的阻力还真是不少。不过我相信，只要下功夫，即使是反人类的设计也不是什么大的问题。 Okay，废话不多说。为了弄明白angular JS为何物，我先是从Scope开始。那么什么是Scope呢？借用官方文档的一段话：复制代码代码如下:“scope

2017-04-22 14:42:29 554

原创 jQuery的全局API

addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选

2017-04-22 14:41:51 290

原创 Vue的自定义控件

简介除了默认设置的核心指令( v-model 和 v-show ),Vue 也允许注册自定义指令。注意，在 Vue2.0 里面，代码复用的主要形式和抽象是组件——然而，有的情况下,你仍然需要对纯 DOM 元素进行底层操作,这时候就会用到自定义指令。下面这个例子将聚焦一个 input 元素，像这样：当页面加载时，元素将获得焦点 (注意：在手机 Safari 上自动聚焦无效)。

2017-04-21 17:12:21 1251

原创 Vue的Render函数

基础Vue 推荐使用在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这就是 render 函数，它比 template 更接近编译器。h1> a name="hello-world" href="#hello-world"> Hello world! a>h1>

2017-04-21 17:10:35 6417

原创 Vue的过渡效果

概述Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js在这里，我们只会讲到进入、离开和列表的

2017-04-21 17:07:14 7046 1

原创 Vue的表单控件绑定

基础用法你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。v-model will ignore the initial value, checked or selected attributes found

2017-04-21 17:00:30 580

原创 Vue的事件处理器

监听事件可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。示例：div id="example-1"> button v-on:click="counter += 1">增加 1button> p>这个按钮被点击了 {{ counter }} 次。p>div>var example1 = ne

2017-04-21 16:59:00 580

原创 Vue的列表的渲染

v-for我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。基本用法ul id="example-1"> li v-for="item in items"> {{ item.message }} li>ul>

2017-04-21 16:39:59 1426

原创 Vue的条件渲染

v-if在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：{{#if ok}} h1>Yesh1>{{/if}}在 Vue.js ，我们使用 v-if 指令实现同样的功能：h1 v-if="ok">Yesh1>也可以用 v-else 添加一个 “else” 块：

2017-04-21 16:32:23 308

原创 vue的Class 与 Style 绑定

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性，我们可以用v-bind 处理它们：只需要计算出表达式最终的字符串。不过，字符串拼接麻烦又易错。因此，在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。绑定 HTML Class对象语法我们可

2017-04-21 16:29:09 349

原创 Vue的计算属性

计算属性在模板中绑定表达式是非常便利的，但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如：div id="example"> {{ message.split('').reverse().join('') }}div>在这种情况下，模板不再简单和清晰。在实现反向显示 message 之前，你应该确认它。这个问题

2017-04-21 16:03:51 937

原创 Vue的模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。如果你

2017-04-21 15:55:19 478

转载 html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offs

2017-04-21 15:45:20 497

原创 vue的生命周期

生命周期Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是

2017-04-21 11:10:39 11003

转载 Vue的组件

组件什么是组件？组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 js 特性扩展。使用组件注册之前说过，我们可以通过以下方式创建一个 Vue 实例：

2017-04-21 10:18:46 645

转载 webpack与browser-sync热更新原理深度讲解

本文包含如下内容：webpack-hot-middlewareEventSourceCORSnginx配置browser-syncWebSocket支持性Frame建立连接服务端实现发送和监听消息关闭连接拥有的属性文件上传心跳连接Socket.IO小结开发环境页面热更新早已是主流，我们不光要

2017-04-20 09:11:37 4529

原创 call与apply

一、call和apply的说明1、call，apply都属于Function.prototype的一个方法，它是JavaScript引擎内在实现的，因为属于Function.prototype，所以每个Function对象实例(就是每个方法)都有call，apply属性。既然作为方法的属性，那它们的使用就当然是针对方法的了，这两个方法是容易混淆的，因为它们的作用一样，只是使用方式不同。

2017-04-19 17:33:24 220

转载关于JavaScript中apply与call的用法意义及区别(转)

JavaScript中有一个call和apply方法，其作用基本相同，但也有略微的区别。先来看看JS手册中对call的解释：call 方法调用一个对象的一个方法，以另一个对象替换当前对象。call([thisObj[,arg1[, arg2[, [,.argN]]]]])参数thisObj可选项。将被用作当前对象的对象。arg1, arg

2017-04-19 17:29:41 277

原创 javascript的垃圾回收机制与内存管理

一、垃圾回收机制—GCJavascript具有自动垃圾回收机制(GC:Garbage Collecation)，也就是说，执行环境会负责管理代码执行过程中使用的内存。原理：垃圾收集器会定期（周期性）找出那些不在继续使用的变量，然后释放其内存。JavaScript垃圾回收的机制很简单：找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是实时的，因为其开销比较大，所以垃

2017-04-19 17:10:55 301

转载从proto和prototype来深入理解JS对象和原型链

就标题而言，这是七八篇里起得最满意的，高大上，即使外行人也会不明觉厉！不过不是开玩笑，本文的确打算从__proto__和prototype这两个容易混淆来理解JS的终极命题之一：对象与原型链。__proto__和prototype__proto__引用《JavaScript权威指南》的一段描述：Every JavaScript object has a s

2017-04-19 15:15:52 302

空空如也

空空如也