TOMMYHU

使用AJAX封装HTTPS请求，对request数据进行JavaScript加密库Crypto-JS加密，对于response数据库进行解密，可以参考：AES(高级加密标准（英语：Advanced Encryption Standard，缩写：AES），在密码学中又称Rijndael加密法，是美国联邦政府采用的一种区块加密标准)
参考文档：
https://www.npmjs.com/package/crypto-js
https://my.oschina.net/jack230230/blog/69826

HybridAPP中，H5页面在ios系统中页面会被拖动，出现webview的底部颜色，引入此插件完美解决问题，不依赖任何第三方库！如果页面中有需要滚动的div元素，增加css样式-webkit-overflow-scrolling: touch;即可
，请访问：https://github.com/freedomdebug/iNoBounce

Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲， Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架，Vue.js 更容易上手。

Vue.js 是一个用于创建 Web 交互界面的库。它让你通过简单而灵活的 API 创建由数据驱动的 UI 组件。

适用人群
即便您已经熟悉了一些这类的库或框架，我们还是推荐您继续阅读接下来的概览，因为您对它们的认识也许和它们在 Vue.js 语境下的定义不尽相同。

学习前提
Vue.js 的 API 是参考了 AngularJS、KnockoutJS、Ractive.js、Rivets.js。所以建议学习前，对上述 4 个框架系统做些了解。

Vue.js是一个在谷歌的哥们用了一段时间angularjs之后甚感不爽，例如脏watch，factory，service，provider之类不清晰，然后自己也diy了一把，基于观测者模式，指令，filter重新造另一个轮子，当然这个轮子能否持续下去还要看社会是否会持续火热了

一、service引导

刚开始学习Angular的时候，经常被误解和被初学者问到的组件是 service(), factory(), 和 provide()这几个方法之间的差别。This is where we'll start the twenty-five days of Angular calendar.

二、service

在Angular里面，services作为单例对象在需要到的时候被创建，只有在应用生命周期结束的时候（关闭浏览器）才会被清除。而controllers在不需要的时候就会被销毁了。

这就是为什么使用controllers在应用里面传递数据不可靠的原因，特别是使用routing的时候。Services are designed to be the glue between controllers, the minions of data, the slaves of functionality, the worker-bees of our application（就是说services在应用的controllers、 方法、数据之前起到了很关键的作用）



现在我们开始看怎么创建service。每个方法我们都会看到下面两个一样的参数：

name-我们要定义的service的名字

function-service方法

他们都创建了相同的底层对象类型。实例化后，他们都创建了一个service，这些对象没有什么功能上的差别。

1、factory()

Angular里面创建service最简单的方式是使用factory()方法。


factory()让我们通过返回一个包含service方法和数据的对象来定义一个service。在service方法里面我们可以注入services，比如 $http 和 $q等。
angular.module('myApp.services') .factory('User', function($http) { // injectables go here   var backendUrl = "http://localhost:3000";  var service = {    // our factory definition     user: {},     setName: function(newName) {       service.user['name'] = newName;     },     setEmail: function(newEmail) {       service.user['email'] = newEmail;     },     save: function() {       return $http.post(backendUrl + '/users', {         user: service.user       });     }   };  return service; });

在应用里面使用factory()方法

在应用里面可以很容易地使用factory ，需要到的时候简单地注入就可以了
angular.module('myApp') .controller('MainCtrl', function($scope, User) {   $scope.saveUser = User.save; });

什么时候使用factory()方法

在service里面当我们仅仅需要的是一个方法和数据的集合且不需要处理复杂的逻辑的时候，factory()是一个非常不错的选择。

注意：需要使用.config()来配置service的时候不能使用factory()方法

2、service()
service()通过构造函数的方式让我们创建service，我们可以使用原型模式替代javaScript原始的对象来定义service。

和factory()方法一样我们也可以在函数的定义里面看到服务的注入
angular.module('myApp.services') .service('User', function($http) { // injectables go here   var self = this; // Save reference   this.user = {};   this.backendUrl = "http://localhost:3000";   this.setName = function(newName) {     self.user['name'] = newName;   }   this.setEmail = function(newEmail) {     self.user['email'] = newEmail;   }   this.save = function() {     return $http.post(self.backendUrl + '/users', {       user: self.user     })   } });

这里的功能和使用factory()方法的方式一样，service()方法会持有构造函数创建的对象。

在应用里面使用service()方法
angular.module('myApp') .controller('MainCtrl', function($scope, User) {   $scope.saveUser = User.save; });


什么时候适合使用service()方法

service()方法很适合使用在功能控制比较多的service里面

注意：需要使用.config()来配置service的时候不能使用service()方法


3、provider()

provider()是创建service最底层的方式，这也是唯一一个可以使用.config()方法配置创建service的方法

不像上面提到的方法那样，我们在定义的this.$get()方法里面进行依赖注入
angular.module('myApp.services') .provider('User', function() {   this.backendUrl = "http://localhost:3000";   this.setBackendUrl = function(newUrl) {     if (url) this.backendUrl = newUrl;   }   this.$get = function($http) { // injectables go here     var self = this;     var service = {       user: {},       setName: function(newName) {         service.user['name'] = newName;       },       setEmail: function(newEmail) {         service.user['email'] = newEmail;       },       save: function() {         return $http.post(self.backendUrl + '/users', {           user: service.user         })       }     };     return service;   } });

在应用里面使用provider()方法

为了给service进行配置，我们可以将provider注入到.config()方法里面
angular.module('myApp') .config(function(UserProvider) {   UserProvider.setBackendUrl("http://myApiBackend.com/api"); })

这样我们就可以和其他方式一样在应用里面使用这个service了
angular.module('myApp') .controller('MainCtrl', function($scope, User) {   $scope.saveUser = User.save; });

什么时候使用provider()方法

当我们希望在应用开始前对service进行配置的时候就需要使用到provider()。比如，我们需要配置services在不同的部署环境里面（开发，演示，生产）使用不同的后端处理的时候就可以使用到了

当我们打算发布开源provider()也是首选创建service的方法，这样就可以使用配置的方式来配置services而不是将配置数据硬编码写到代码里面。

还可以看看这篇翻译：http://www.oschina.net/translate/top-10-mistakes-angularjs-developers-make



点击查看完整的代码：https://gist.github.com/auser/7743235

AngularJS实现注入服务的方法有5种方式：
decorator
constant
value
service
factory
provider
其中provider是一切方法的基础，有点类似于XMLHttpObject，在这个基础之上建立起来的，像jquery的$.ajax等等。

第一种方式：decorator
<div ng-controller="appCtrl">{{ content }}</div>      <script type="text/javascript">       var app = angular.module('myApp', []);       app.value('profile', 'I\'am a angular developer.');       app.config(function ($provide) {           $provide.decorator('profile', function ($delegate) {               return $delegate + ' I like angularJS. So sorry, you are hacked!';           });       });          app.controller('appCtrl', ['$scope', 'profile', function ($scope, profile) {           $scope.content = profile;       }]);   </script>  

第二种方式：constant
<div ng-controller="UsingConstantServiceCtrl">{{ magicNumber }},{{ bookTitle }}</div>   <div ng-controller="UsingValueServiceCtrl">{{ magicNumberFromService }}</div>      <script type="text/javascript">       var app = angular.module('myApp', []);          app.constant('magicNumber', 42);//常量直接接作为服务       app.constant('magicNumber', 422);//TODO 重新赋值是无效的       app.constant('bookTitle', "Hitchhiker's Guide");          function UsingConstantServiceCtrl($scope, magicNumber, bookTitle) {           $scope.magicNumber = magicNumber;           $scope.bookTitle = bookTitle;       }          (function () {           var existingServiceInstance = {               getMagicNumber: function () {                   return 42; // Note that we are using an "hard-coded" magic number               }           };           app.value('magicNumberService', existingServiceInstance);       }());          function UsingValueServiceCtrl($scope, magicNumberService) {           $scope.magicNumberFromService = magicNumberService.getMagicNumber();       }   </script>  


第三种方式：value
<pre code_snippet_id="92094" snippet_file_name="blog_20131202_3_1841481" name="code" class="javascript"><div ng-controller="appCtrl">{{ title }}</div>    <script type="text/javascript">       var app = angular.module('myApp', []);       app.config(function ($provide) {           $provide.value('title', 'my Title')       });       app.controller('appCtrl', ['$scope', 'title', function ($scope, title) {           $scope.title = title;       }]);   </script>

第四种方式：service
<pre code_snippet_id="92094" snippet_file_name="blog_20131202_4_2538810" name="code" class="javascript"><div ng-controller="UsingValueServiceCtrl">{{ magicNumberFromService }}</div>   <script type="text/javascript">       var app = angular.module('myApp', []);          app.constant('magicNumber', 42);//常量直接接作为服务          (function() {           var MyService = function(magicNumber) { // "magicNumber" is injected               this.getMagicNumber = function() {                   return magicNumber;               };           };              app.service('magicNumberService', MyService);       }());          function UsingValueServiceCtrl($scope, magicNumberService) {           $scope.magicNumberFromService = magicNumberService.getMagicNumber();       }   </script></pre><br/>   <br/>   <pre></pre>   <br/>   <br/>  


第五种方式：factory
<div ng-controller="UsingValueServiceCtrl">{{ magicNumberFromService }}</div>         <script type="text/javascript">       var app = angular.module('myApp', []);             app.constant('magicNumber', 42);//常量直接接作为服务             (function () {           // registers a service factory with "magicNumber" injected           app.factory('magicNumberService', function (magicNumber) {               return {                   getMagicNumber: function () {                       return magicNumber;                   }               };           });       }());             function UsingValueServiceCtrl($scope, magicNumberService) {           $scope.magicNumberFromService = magicNumberService.getMagicNumber();       }   </script>  


第六种方式：provider
<div ng-controller="UsingValueServiceCtrl">{{ magicNumberFromService }}</div>      <script type="text/javascript">       var app = angular.module('myApp', []);          app.constant('magicNumber', 42);//常量直接接作为服务          (function() {           var MyService = function(magicNumber) { // "magicNumber" is injected               this.getMagicNumber = function() {                   return magicNumber;               };           };              app.service('magicNumberService', MyService);       }());          function UsingValueServiceCtrl($scope, magicNumberService) {           $scope.magicNumberFromService = magicNumberService.getMagicNumber();       }   </script>  

理解AngularJS中的依赖注入
AngularJS中的依赖注入非常的有用，它同时也是我们能够轻松对组件进行测试的关键所在。在本文中我们将会解释AngularJS依赖注入系统是如何运行的。

Provider服务（$provide）
$provide服务负责告诉Angular如何创造一个新的可注入的东西：即服务(service)。服务会被叫做provider的东西来定义，你可以使用$provide来创建一个provider。你需要使用$provide中的provider方法来定义一个provider，同时你也可以通过要求改服务被注入到一个应用的config函数中来获得$provide服务。下面是一个例子：
app.config(function($provide) {   $provide.provider('greeting', function() { this.$get = function() {   return function(name) { alert("Hello, " + name);   }; };   }); });  
代码laycode - v1.1
在上面的例子中我们为一个服务定义了一个叫做greeting的新provider；我么可以把一个叫做greeting的变量注入到任何可注入的函数中（例如控制器，在后面会讲到）然后Angular就会调用这个provider的$get函数来返回这个服务的一个实例。在上面的例子中，被注入的是一个函数，它接受一个叫做name的参数并且根据这个参数alert一条信息。我们可以像下面这样使用它：
app.controller('MainController', function($scope, greeting) {   $scope.onClick = function() { greeting('Ford Prefect');   }; });
代码laycode - v1.1
现在有趣的事情来了。factory，service以及value全部都是用来定义一个providr的简写，它们提供了一种方式来定义一个provider而无需输入所有的复杂的代码。例如，你可以用下面的代码定义一个和前面完全相同的provider：
app.config(function($provide) {   $provide.factory('greeting', function() { return function(name) {   alert("Hello, " + name); };   }); });  
代码laycode - v1.1
这非常的重要，所以一定要记住：在幕后，AngularJS实际上是在调用前面出现的代码（就是$provide.provider的版本）。从字面上来说，这两种方法基本上没有差别。value方法也一样 – 如果我们需要从$get函数（也就是我们的factory函数）返回的值永远相同的话，我们可以使用value方法来编写更少的代码。例如如果我们的greeting服务总是返回相同的函数，我们可以使用value来进行定义：
app.config(function($provide) {   $provide.value('greeting', function(name) { alert("Hello, " + name);   }); });  
代码laycode - v1.1
再一次申明，以上两种方式的效果完全一样 – 只不过是代码的量不同而已。

现在你可能已经注意到了我们使用的烦人的
app.config(function($provide){...})  
代码laycode - v1.1
代码了。由于定义一个新的provider是如此的常用，AngularJS在模块对象上直接暴露了provider方法，以此来减少代码的输入量：
var myMod = angular.module('myModule', []); myMod.provider("greeting", ...); myMod.factory("greeting", ...); myMod.value("greeting", ...);  
代码laycode - v1.1
上面的代码和前面app.config(...)这样?嗦的写法完全相同。

除了上面提到的可以注入的东西之外，还有一个constant方法。基本上，它和value的用法一致。我们会在后面来讨论两者的不同点。

为了巩固前面的学习成果，下面所有的代码所做的都是同一件事情：
myMod.provider('greeting', function() {   this.$get = function() { return function(name) {   alert("Hello, " + name); };   }; }); myMod.factory('greeting', function() {   return function(name) { alert("Hello, " + name);   }; }); myMod.value('greeting', function(name) {   alert("Hello, " + name); });  
代码laycode - v1.1
注入器（$injector）
注入器负责从我们通过$provide创建的服务中创建注入的实例。只要你编写了一个带有可注入性的参数，你都能看到注入器是如何运行的。每一个AngularJS应用都有唯一一个$injector，当应用启动的时候它被创造出来，你可以通过将$injector注入到任何可注入函数中来得到它（$injector知道如何注入它自己！）。

一旦你拥有了$injector，你可以动过调用get函数来获得任何一个已经被定义过的服务的实例。例如：
var greeting = $injector.get('greeting'); greeting('Ford Prefect');  
代码laycode - v1.1
注入器同样也负责将服务注入到函数中；例如，你可以魔法般的将服务注入到任何函数中，只要你使用了注入器的invoke方法：
var myFunction = function(greeting) {   greeting('Ford Prefect'); }; $injector.invoke(myFunction);  
代码laycode - v1.1
如果注入器只是创建一个服务的实例一次的话，那么它也没什么了不起的。它的厉害之处在于，他能够通过服务名称缓存从一个provider中返回的任何东西，当你下一次再使用这个服务时，你将会得到同一个对象。

因此，你可以通过调用$injector.invike将服务注入到任何函数中也是合情合理的了。包括：

控制器定义函数
指令定义函数
过滤器定义函数
provider中的$get方法（也就是factory函数）
由于constant和value总是返回一个静态值，它们不会通过注入器被调用，因此你不能在其中注入任何东西。

配置provider
你可能会感到困惑：既然factorry和value能够节省那么多的代码，为什么还有人要使用provider。答案是provider允许我们进行一些配置。在前面我们已经提到过当你通过provider（或者其他简写方法）创建一个服务时，你实际上创建了一个新的provider，它将定义你的服务如何被创建。我们没有提到的是，这些provider可以被注入到config函数中，你可以和它们进行一些交互。

首先，AngularJS分两个阶段运行你的应用 – config阶段和run阶段。config阶段是你设置任何的provider的阶段。它也是你设置任何的指令，控制器，过滤器以及其它东西的阶段。在run阶段，AngularJS会编译你的DOM并启动你的应用。

你可以在myMod.config和myMod.run中添加任何代码 – 这两个函数分别在两个阶段运行。正如我们看到的，这些函数都是可以被注入的 – 我们在第一个例子中注入了内建的$provide函数。然而，值得注意的是在config阶段，只有provider能被注入（只有两个例外是$provide和$injector)。

例如，下面的代码就是错误的写法：
myMod.config(function(greeting) {   //不会运行 -- greeting是一个服务的实例   //只有服务的provider能被注入到config中 }); 代码laycode - v1.1 但是你可以通过下面的方法注入provider： myMod.config(function(greetingProvider) {   // 这下好了！ });  
代码laycode - v1.1
有一个例外：constant，由于它们不能被改变，因此它不能被注入到config中（这就是它和value之间的不同之处）。它们只能通过名字被获取。

无论何时你为一个服务定义了一个provider，这个provider的名字都是serviceProvider。在这里service是服务的名字。现在我们可以使用provider的力量来做一些更复杂的事情了！
myMod.provider('greeting', function() {   var text = 'Hello, ';   this.setText = function(value) {      text = value;   };   this.$get = function() {      return function(name) {          alert(text + name);      };   }; }); myMod.config(function(greetingProvider) {   greetingProvider.setText("Howdy there, "); }); myMod.run(function(greeting) {   greeting('Ford Prefect'); });
代码laycode - v1.1
现在我们在provider中拥有了一个叫做setText的函数，我们可以使用它来自定义我们alert的内容；我们可以再config中访问这个provider，调用setText方法并自定义我们的service。当我们最终运行我们的应用时，我们可以获取greeting服务，然后你会看到我们自定义的行为起作用了。

控制器($controller)
控制器函数是可以被注入的，但是控制器本身是不能被注入到任何东西里面去的。这是因为控制器不是通过provider创建的。然而，有一个内建的AngularJS服务叫做1$controller，它负责设置你的控制器。当你调用myMod.controller(…)时，你实际上是访问了这个服务的provider，就像上面的例子一样。

例如，当你像下面一样定义了一个控制器时：
myMod.controller('MainController', function($scope) {   // ... });  
代码laycode - v1.1
你实际上做的是下面这件事：
myMod.config(function($controllerProvider) {   $controllerProvider.register('MainController', function($scope) { // ...   }); });
代码laycode - v1.1
当Angular需要创建一个你的控制的实例时，它会使用$controller服务（它反过来会使用$injector来调用你的控制器以便它能够被注入依赖项）。

过滤器和指令
filter和directive和controller的运行方式相同；filter会使用一个叫做$filter的服务以及它的provider $filterProvider，而directive使用一个叫做$compile的服务以及它的provider $compileProvidr。下面是相应的文档：
$filter: <a href="http://docs.angularjs.org/api/ng.$filter" target="_blank">http://docs.angularjs.org/api/ng.$filter</a> $filterProvider: <a href="http://docs.angularjs.org/api/ng.$filterProvider" target="_blank">http://docs.angularjs.org/api/ng.$filterProvider</a> $compile: <a href="http://docs.angularjs.org/api/ng.$compile" target="_blank">http://docs.angularjs.org/api/ng.$compile</a> $compileProvider: <a href="http://docs.angularjs.org/api/ng.$compileProvider" target="_blank">http://docs.angularjs.org/api/ng.$compileProvider</a>
其中，myMod.filter和myMod.directive分别是这些服务的简写。

总结
总结一下，任何能够被$injector.invoke调用的函数都是能被注入的。包括，但不限于下面的这些：

控制器
指令
factory
过滤器
provider中的$get函数
provider函数
服务
provider创建的新服务都可以用来注入。包括：

constant
factory
provider
service
value
另外，内建的服务$controller和$filter也可以被注入，同时你也可以使用这些服务来获得新的过滤器和控制器。

本文译自Understanding Dependency Injection，原文地址https://github.com/angular/angular.js/wiki/Understanding-Dependency-Injection

Flux应用架构 http://reactjs.cn/react/docs/flux-overview.html

React+Redux
Vue+Vues

解决了一个低端设备问题，原来一个页面时间使用了touch和click，而使用了e.preventDefault();不见效果，改为click后就可以了

一.click与300ms延迟

移动浏览器提供一个特殊的功能：双击（double tap）放大

300ms的延迟就来自这里，用户碰触页面之后，需要等待一段时间来判断是不是双击（double tap）动作，而不是立即响应单击（click），等待的这段时间大约是300ms。之前有过简单介绍： 黯羽轻扬：HTML5触摸事件

移动事件提供了 touchstart 、 touchmove 、 touchend 却没有提供tap支持，主流框架（库）都是手动实现了自定义tap事件，以求消除300ms延迟，提高页面响应速度。对于简单的页面，可以把 touchstart 或者 touchend 当作tap来用，但存在一些问题，比如手指接触目标元素，按住不放，慢慢移出响应区域，会触发 touchstart 事件执行对应的事件处理器（本不应该触发）， touchend 事件也存在类似的问题。

此外， 使用原生touch事件也存在点击穿透的问题 ，因为click是在touch系列事件发生后大约300ms才触发的，混用touch和click肯定会导致点透问题，下面详细介绍