JavaScript
文章平均质量分 83
dm_vincent
这个作者很懒,什么都没留下…
展开
-
[AngularJS面面观] 23. 依赖注入 --- Factory vs Service
据说99%的angular的初学者都会有一个疑问:factory和service到底有什么区别?什么情况该用factory,而什么情况又该用service呢?比如这个Stackoverflow上的这个问题:Service vs Factory,又或者是这个问题:Service vs Provider vs Factory。这些问题都有热心答主回答的很棒了,能够解释清它们共同点,区别以及典型用法。因此原创 2016-08-26 00:00:01 · 4384 阅读 · 0 评论 -
[AngularJS面面观] 6. scope继承 - 基于原型继承的树形体系以及scope的生命周期
写过Angular应用的同学们或多或少都会注意到Angular框架在幕后会根据应用结构创建很多个scope,这些scope也许是继承自它的父节点的scope,也可能是隔离scope(Isolated Scope)。但是它们最终的父节点都是$rootScope。$rootScope是全局唯一的一个scope,它由Angular在应用启动之初就被创建。现在我们就来探究一下scope的树形继承结构。原创 2016-06-09 00:02:33 · 6085 阅读 · 0 评论 -
[AngularJS面面观] 5. scope中的两个异步方法 - $applyAsync以及$evalAsync
Angular中digest循环的主干是对于watchers的若干次遍历,直到整个scope中的数据”稳定”下来,这部分实现在这篇文章中已经进行了详尽的介绍。相关的一些细节优化也在这篇文章中进行了分析。除了主干的内容,digest循环的内容其实还包括几个比较有趣的部分,比如这一节我们即将分析的$evalAsync以及$applyAsync,下面我们就来通过相关源代码来分析一下:$digest: fu原创 2016-06-08 00:32:06 · 22597 阅读 · 2 评论 -
[AngularJS面面观] 4. scope中的$apply方法 - Digest Cycle的触发者
本文介绍scope对象中$apply方法的实现。关于$apply和$digest方法,就像是一枚硬币的两面,它们之间的区别和联系,在这篇译文中做出了解答,有兴趣的同学可以看看。当然,本文的重点还是在于该方法是如何实现的。下面言归正传,来看看相关源代码:$apply: function(expr) { try { beginPhase('$apply'); try {原创 2016-06-07 18:49:01 · 6575 阅读 · 0 评论 -
[AngularJS面面观] 3. scope中的Dirty Checking(脏数据检查) --- Digest Cycle中的优化和细节
Digest Cycle中的优化在上一篇文章中,介绍了Digest Cycle的实现方法$digest的大概逻辑。但是离真正的实现还有相当大的差距,具体的实现比较长,而且其中有很多细节在本篇文章还不会介绍,所以就不贴在这里了,有兴趣的可以去看源码。现在$digest方法的实现逻辑是这样的:var ttl = 10;do { var dirty = false; var length = $原创 2016-05-15 15:04:07 · 5689 阅读 · 1 评论 -
[AngularJS面面观] 2. scope中的Dirty Checking(脏数据检查) --- Digest Cycle
Dirty Checking的实现方式了解Angular的开发人员都知道,是一种叫做脏数据检查(Dirty Checking)的机制实现了双向绑定这一前端开发中的黑科技。那么在Angular中到底是如何实现它的呢?本文就一一来揭开它的神秘面纱。一言以蔽之,在angular中是通过Digest Cycle来完成脏数据检查从而完成双向绑定进而实现scope和view的同步的。下面分几个方面来介绍一下什么原创 2016-05-15 00:45:27 · 7320 阅读 · 1 评论 -
[AngularJS面面观] 1. scope中的Dirty Checking(脏数据检查) --- 引言
scope功能概述scope是AngularJS中的核心概念之一。它的设计思想和实现方式也是希望深入了解和学习AngularJS的开发人员必须熟知的。它的功能主要有以下几点: 1. 通过数据共享连接Controller和View 2. 事件的监听和响应 3. 脏数据检查和数据绑定前两点并没有什么新奇的地方,关键的地方在于第三点。这是AngularJS这一框架和好多其它框架的不同之原创 2015-12-18 11:27:34 · 13051 阅读 · 5 评论 -
使用JS实现页面内跳转的两种方式
第一种方式是直接使用锚点配合链接标签:Scroll to hereJump to H2现在大多数实现都采用该种方式。但是这种方式没有动画效果,跳转是直接发生的。第二种方式使用jQuery中的animate方法实现:var target= $('#h2-anchor').offset().top;$('body').animate({scrollTop原创 2015-03-14 12:03:07 · 8116 阅读 · 0 评论 -
[AngularJS] 仿照Angular Bootstrap TimePicker创建一个分钟数-秒数的输入控件(minuteSecondPicker)
在一个项目中需要一个用来输入分钟数和秒数的控件,然而调查了一些开源项目后并未发现合适的控件。在Angular Bootstrap UI中有一个类似的控件TimePicker,但是它并没有深入到分钟和秒的精度。因此,决定参考它的源码然后自己进行实现。最终的效果如下:首先是该directive的定义:app.directive('minuteSecondPick原创 2015-01-12 00:34:08 · 8725 阅读 · 0 评论 -
[AngularJS/Elasticsearch] 使用AngularJS为基于Elasticsearch的应用创建前端
使用AngularJS为Elasticsearch创建一个前端如果使用Elasticsearch使用应用的数据源,我们可以很方便的使用AngularJS结合Elasticsearch提供的相关模块为它创建一个前端。以创建一个简单的员工信息花名册为例。准备工作准备工作分为以下两个方面:添加前端依赖安装Bower在bower.json中添加对于Angul原创 2014-12-02 10:10:01 · 10020 阅读 · 0 评论 -
Effective JavaScript Item 55 接受配置对象作为函数参数
接受配置对象作为函数参数虽然保持函数接受的参数的顺序很重要,但是当函数能够接受的参数达到一定数量时,也会让用户很头疼:var alert = new Alert(100, 75, 300, 200, "Error", message, "blue", "white", "black", "error", true);随着函数的不断重构和进化,它能原创 2014-11-21 10:05:06 · 3839 阅读 · 0 评论 -
Effective JavaScript Item 54 将undefined视为"没有值"
将undefined视为"没有值"JavaScript中的undefined是一个特殊的值:当JavaScript没有提供具体的值时,它就会产生undefined。比如:未被赋值的变量的初始值就是undefined访问对象中不存在的属性会得到undefined没有返回值的函数,undefined会作为其返回值函数的参数没有提供时,它的值就是undefined// 情原创 2014-11-20 10:24:13 · 3891 阅读 · 0 评论 -
Effective JavaScript Item 33 让构造函数不再依赖new关键字
本系列作为EffectiveJavaScript的读书笔记。 在将function当做构造函数使用时,需要确保该函数是通过new关键字进行调用的。function User(name, passwordHash) { this.name = name; this.passwordHash = passwordHash;}如果在调用上述构造函数时,忘记了使用new原创 2014-10-05 19:13:39 · 3568 阅读 · 0 评论 -
Effective JavaScript Item 40 避免继承标准类型
本系列作为Effective JavaScript的读书笔记。 ECMAScript标准库不大,但是提供了一些重要的类型如Array,Function和Date。在一些场合下,你也许会考虑继承其中的某个类型来实现特定的功能,但是这种做法并不被鼓励。 比如为了操作一个目录,可以让目录类型继承Array类型如下:function Dir(path, entries) {原创 2014-10-15 09:59:30 · 3896 阅读 · 0 评论 -
Effective JavaScript Item 63 注意异步调用中可能会被忽略的异常
异常处理是异步编程的一个难点。在同步的代码中,异常能够很容易地通过try catch语句来完成:try { f(); g(); h();} catch (e) { // handle any error that occurred...}但是在异步代码中,使用一个try代码块将所有可能出现的异常都包括在内是不现实的。实际上,异步API设置不能原创 2014-11-16 09:22:36 · 3574 阅读 · 0 评论 -
Effective JavaScript Item 37 认识this的隐式指向
本系列作为Effective JavaScript的读书笔记。 CSV数据通常都会被某种分隔符进行分隔,所以在实现CSV Reader时,需要支持不同的分隔符。那么,很自然的一种实现就是将分隔符作为构造函数的参数。function CSVReader(separators) { this.separators = separators || [","]; this.rege原创 2014-10-11 10:17:22 · 3487 阅读 · 0 评论 -
[AngularJS面面观] 7. scope继承与digest循环 - scope树结构的遍历
在上一篇文章中,介绍了scope继承本质上也是基于JavaScript原型继承。同时也分析和讨论了scope生命周期中最重要的两个方法$new以及$destroy的源代码实现。而在这一篇文章中,会接着讨论digest循环是如何利用scope的树形继承结构来进行遍历的。这也解答了在这篇文章末尾遗留下来的第一个问题。首先,还是回顾一下scope核心方法$digest的实现,这里会略去一些和本节原创 2016-06-12 15:53:19 · 5567 阅读 · 1 评论 -
[AngularJS面面观] 10. scope事件机制 - $emit,$broadcast以及事件对象
发布-订阅模式(Publish-Subscribe Pattern)事件的生命周期-注册和注销事件与scope继承树-$emit以及$broadcast事件的停止传播以及阻止默认行为事件在scope生命周期中的应用本节继续介绍介绍3,4以及5。原创 2016-07-10 22:50:25 · 7203 阅读 · 1 评论 -
[AngularJS面面观] 20. 依赖注入 --- instance注入器以及provider注入器
本文就来解答上一篇文章留下的疑问,为什么在注入器也分成了instance注入器和provider注入器。这两种注入器的工作原理是怎么样的。总体结构为此我特别准备了一张图来描述一下angular注入器的工作流程和原理,如下所示。这张图的顶部是外部调用的入口,即通过angular暴露给外部的injector服务。关于injector服务。关于injector服务中含有的五个方法,在原创 2016-08-13 22:08:41 · 4797 阅读 · 1 评论 -
[AngularJS面面观] 19. 依赖注入 --- Provider是个啥
在前面介绍angular中依赖注入相关的概念和细节时,非常多次提到了provider这个概念,每次提到都会让大家再等等,再等等。现在再也等不了啦,从本篇文章开始就会陆续介绍provider和一些基于provider的高层方法,比如service,factory等等。provider是什么?通过对象声明provider首先,我们来看看provider是什么。在angular中,p原创 2016-08-13 22:07:51 · 9759 阅读 · 1 评论 -
[AngularJS面面观] 22. 依赖注入 --- 配置队列以及运行队列
在上一篇文章中,介绍了constant的生命周期:它是如何被定义的,如何被创建,如何被使用的。本文继续介绍module上更多高层API的实现细节。在继续阅读下面的内容之前,还是建议对依赖注入本身要有足够的理解,当然如果你是跟着依赖注入的这一系列文章一路走来,对angular实现依赖注入的方式和细节应该是比较熟悉了。本文会介绍定义与module上的两个方法:module.config以及modu原创 2016-08-21 14:14:58 · 3900 阅读 · 0 评论 -
[AngularJS面面观] 21. 依赖注入 --- constant到底如何而来
在上一篇文章中,我们终于见到了angular中依赖注入的总体结构图。从这幅图中我们可以知道在angular内部是有两个注入器协同工作来实现我们习以为常的依赖注入特性的。结合上图简单回顾一下angular依赖注入的组成和工作流程。首先,在台面上的注入器名为实例注入器(Instance Injector),它里面含有一个名为实例缓存(Instance Cache)的字典对象,该缓存的作用是原创 2016-08-19 23:11:01 · 8498 阅读 · 0 评论 -
[AngularJS面面观] 18. 依赖注入 --- $injector服务
有了前面那么多的铺垫工作,`$injector`服务正式上线。本文将介绍angular提供给开发者可以直接使用的`$injector`服务中包含的可调用方法以及每个方法的实现。##$injector服务首先我们看看这个服务中包含了那些方法:```jsreturn { invoke: invoke, instantiate: instantiate, get: getSer原创 2016-08-08 09:24:27 · 6110 阅读 · 2 评论 -
[AngularJS面面观] 17. 依赖注入 --- 注解的定义与实现
本篇文章继续介绍angular用以实现依赖注入的关键元素之一 - 注解(Annotation)。在前几篇文章中,我们已经分析和讨论了有关angular依赖注入的几个方面:angular如何处理模块的声明和获取angular注入器的概念和它是如何加载模块以及执行模块定义的任务angular注入器如何管理被托管的对象既然我们定义的服务和数据都已经被angular注入器托管在其内部的原创 2016-08-07 00:22:35 · 6450 阅读 · 0 评论 -
[AngularJS面面观] 24. 依赖注入 --- Value以及Decorator
module中定义的高层API现在已经介绍的差不多了,本文就把后面剩下的几个能介绍的先介绍了(不能介绍的还有蛮多的,比如filter,controller,directive,这些使我们后面讨论的内容,敬请期待 :) )。和依赖注入关系比较紧密的剩下2个方法分别是value和decorator。Value在angular中,比较常见的问题除了service,factory和provider三者之间有原创 2016-08-28 18:55:47 · 5594 阅读 · 2 评论 -
[AngularJS面面观] 16. 依赖注入 --- 注入器中如何管理对象
上一篇文章初次介绍了注入器(Injector),分析了它加载模块的过程以及它是如何执行任务队列的。这里需要重申一下的是,所谓任务队列实际上就是我们在开发一个基于angular的应用时定义的那些`constant`,`service`,`factory`等等,它们通过`module`类型提供的方法定义,但是定义并不代表立即就创建。它们的创建工作是交给注入器来完成的。原创 2016-08-06 18:19:37 · 6471 阅读 · 3 评论 -
[AngularJS面面观] 15. 依赖注入 --- 初识注入器(Injector)
本篇文章继续介绍angular中实现依赖注入的”幕后英雄” — 注入器(Injector)。说它是”幕后英雄”,是因为它才是依赖注入得以实现的主力军。而上篇文章介绍的模块只不过是活跃在前台跟各位开发人员直接打交道的”接待人员”。初识注入器加载模块任务队列方法介绍注入器任务执行注解(Annotation)提供$inject数组数组风格(Array-styl原创 2016-08-05 00:23:24 · 8068 阅读 · 0 评论 -
[AngularJS面面观] 14. 依赖注入 --- module的定义与实现
从本篇文章开始,会开始系统性地介绍angular是如何实现依赖注入这一重要特性的。##引言提到依赖注入,有后端背景的开发人员应该不会陌生。比如对于Java开发人员而言,绝大部分都是通过Spring这一框架首先了解到依赖注入这一概念的。所谓依赖注入(Dependency Injection),它其实是一个更大的名为控制反转(Inverse of Control)概念的一种实现模式。只不过这种实现策略使用原创 2016-07-31 21:46:12 · 6638 阅读 · 5 评论 -
[AngularJS面面观] 12. scope中的watch机制---第三种策略$watchCollection
如果你刚刚入门angular,你或许还在惊叹于angular的双向绑定是多么的方便,你也许在庆幸未来的前端代码中再也不会出现那么多繁琐的DOM操作了。但是,一旦你的应用程序随着业务的复杂而复杂,你就会发现你手头的那些angular的知识似乎开始不够用了。为什么绑定的数据没有生效?为什么应用的速度越来越慢?为什么会出现莫名其妙的infinite digest异常?所以你开始尝试进阶,尝试弄清楚在数据绑定这个现象原创 2016-07-17 23:01:57 · 10413 阅读 · 1 评论 -
[AngularJS面面观] 11. scope事件机制 - 事件系统在Angular框架中的应用
此篇文章是angular事件机制相关的最后一篇文章。 主要介绍一下事件系统在Angular框架本身中的一些应用场景,看看在什么场景下使用事件是比较合适的。移除scope后的广播有过定义指令(directive)经验的同学们应该知道,很多指令都会拥有自己的scope,无论是隔离scope也好,还是原型继承的scope也好。这些指令在浏览器中也是通过对应模板(template)所表示的D原创 2016-07-16 22:54:15 · 5321 阅读 · 0 评论 -
[AngularJS面面观] 9. scope事件机制 - 基本概念以及生命周期
发布-订阅模式(Publish-Subscribe Pattern)事件的生命周期-注册和注销事件与scope继承树-$emit以及$broadcast事件的停止传播以及阻止默认行为事件在scope生命周期中的应用本节介绍1和2。原创 2016-07-04 00:09:07 · 5378 阅读 · 0 评论 -
[AngularJS面面观] 8. scope继承 - 属性覆盖,隔离scope以及指定scope的parent
上一节中我们探讨了遍历scope树形继承结构的过程。本节继续讨论一下在继承结构下产生的属性覆盖问题,以及scope的一些特殊情况:隔离scope以及为scope显式指定其父亲scope。##属性覆盖(Attribute Shadowing)属性覆盖这个问题或许会对Angular新手造成一定的困扰,尽管从本质上而言,它的成因还是基于JavaScript中原型继承这一概念。那么让我们看看属性覆盖到原创 2016-07-03 16:47:23 · 8196 阅读 · 0 评论 -
[AngularJS面面观] 13. Angular工具库 --- 异常对象创建方法minErr
本系列文章会讨论Angular框架除了提供scope等核心功能外,还提供了哪些功能。作为Angular工具库这一系列文章的开篇,首先来看看但凡程序都绕不开的一个话题 - 异常。那么Angular在异常处理方面又提供了哪些工具呢?##引子 - scope中是如何抛出异常的?首先,让我们看看在定义`$rootScope`的过程中,哪些代码和异常有关:```js// 定义异常对象原创 2016-07-24 23:04:02 · 7432 阅读 · 1 评论 -
Effective JavaScript Item 39 绝不要重用父类型中的属性名
本系列作为Effective JavaScript的读书笔记。 如果需要向Item 38中的Actor对象添加一个ID信息:function Actor(scene, x, y) { this.scene = scene; this.x = x; this.y = y; this.id = ++Actor.nextID; scene.register(this);}原创 2014-10-14 10:22:12 · 3623 阅读 · 0 评论 -
Effective JavaScript Item 61 不要阻塞事件队列
JavaScript处理并发事件的机制是十分友好和强大的,它结合了事件队列(Event Queue)/事件循环并发(Event-loop Concurrency)和一套异步调用API。这因为这一点,JavaScript不仅可以在浏览器环境中运行,还可以在桌面应用和服务器应用中运行,如Node.js。令人奇怪的是,ECMAScript标准时至今日对并发这个问题还是只字未提。所以以下提到的各种原创 2014-11-14 12:32:12 · 3864 阅读 · 0 评论 -
Effective JavaScript Item 19 使用高阶函数 (High-Order Function)
本系列作为Effective JavaScript的读书笔记。 不要被高阶函数这个名字给唬住了。实际上,高阶函数只是代表了两类函数:接受其他函数作为参数的函数返回值为函数的函数 有了这个定义,你也许就发现你已经使用过它们了,典型的就是对于一些事件的处理时传入的回调函数。 另外的一个典型使用场景就是Array类型的sort函数,它可以接受一个function作为排原创 2014-09-15 09:54:16 · 4887 阅读 · 0 评论 -
Effective JavaScript Item 29 避免使用非规范的Stack Inspection属性
本系列作为Effective JavaScript的读书笔记。 由于历史原因,很多JavaScript执行环境中都提供了某些方式来查看函数调用栈。在一些环境中,arguments对象(关于该对象可以查看Item 22,23,24)上有两个额外的属性: arguments.callee -它引用了正在被调用的函数arguments.caller -它引用了调用当前函数原创 2014-09-26 12:38:52 · 3576 阅读 · 0 评论 -
Effective JavaScript Item 26 使用bind来进行函数的柯里化(Curry)
本系列作为Effective JavaScript的读书笔记。 在上一个Item中介绍了bind的一种用法:用来绑定this对象。但是实际上,bind含有另一种用法,就是帮助函数进行柯里化。关于柯里化,这里有一份百科可以参考:http://zh.wikipedia.org/wiki/%E6%9F%AF%E9%87%8C%E5%8C%96 但是实际上,关于柯里化只需要记住一点就够原创 2014-09-23 10:51:16 · 4223 阅读 · 0 评论 -
Effective JavaScript Item 18 理解Function, Method, Constructor调用之间的区别
本系列作为Effective JavaScript的读书笔记。 Function绝对是JavaScript中的重中之重。在JavaScript中,Function承担了procedures, methods, constructors甚至是classes以及modules的功能。 在面向对象程序设计中,functions,methods以及class constructor原创 2014-09-11 14:18:10 · 4189 阅读 · 0 评论 -
Effective JavaScript Item 13 使用即时调用的函数表达式(IIFE)来创建局部域
本系列作为Effective JavaScript的读书笔记。 所谓的即时调用的函数表达式,这个翻译也许不太准确,它对应的英文原文是Immediately Invoked Function Expression (IIFE)。下文也使用IIFE来表达这一概念。 首先看一个程序:function wrapElements(a) { var result = [], i,原创 2014-09-10 19:26:14 · 3893 阅读 · 0 评论