linux的ubuntu版本中后台执行node,aws的ec2为例

通过pageant将秘钥aws.pem转换为ppk后缀,存为私钥

然后通过pageant添加秘钥

在通过putty以ubuntu@ec2-54-179-150-61.ap-southeast-1.compute.amazonaws.com登录远程linux

然后可以通过

sudo apt-get update //先更新
sudo apt-get install nodejs //安装node
sudo apt-get install npm //安装node的包管理器

git clone 地址 //克隆git对应的项目

cd 项目目录

npm install //安装项目依赖包

npm run start //运行项目,此时如果关闭putty,node也将退出运行

nonup npm run start & //后台运行命令,这样只要putty通过exit退出,node即可在后台一直运行

ps -aux //查看进程;-a显示其他用户启动的进程;-x查看系统中属于自己的进程;-u启动这个进程的用户和它启动的时间

kill pid对应进程编号 //停止对应pid的进程

ls -la //查看当前目录下文件及状态;-l长格式列出;-a显示所有文件

rm -rf 目录名字 //-r 就是向下递归,不管有多少级目录,一并删除;-f就是直接强行删除,不作任何提示的意思

//以下是查看文件内容命令

cat     //由第一行开始显示内容,并将所有内容输出

tac    // 从最后一行倒序显示内容,并将所有内容输出

more   // 根据窗口大小,一页一页的现实文件内容

less    //和more类似,但其优点可以往前翻页,而且进行可以搜索字符

head   // 只显示头几行

tail    //只显示最后几行

nl      //类似于cat -n,显示时输出行号

tailf   //类似于tail -f



			

javascript的归并排序

function merge(left,right){
  var re=[];
  while(left.length>0 && right.length>0)
  {
    if(left[0]<right[0]){
    re.push(left.shift());
  }
  else{
    re.push(right.shift());
  }
}

  return re.concat(left).concat(right);
}

function mergeSort(array){
  if(array.length==1) return array;
  var mid=Math.floor(array.length/2);
  var left=array.slice(0,mid);
  var right=array.slice(mid);

  return merge(mergeSort(left),mergeSort(right));
}

var array=[234,123,1,23,123,2,11];
console.log(mergeSort(array));

/*
 mergeSort([234,123,1,23,123,2,11])
 |
 V
 merge(
   mergeSort([234,123,1]),
   mergeSort([23,123,2,11])
 );
 |
 V
 merge(
   merge(
     mergeSort([234]),
     mergeSort([123,1])
   ),
   merge(
     mergeSort([23,123]),
     mergeSort([2,11])
   )
 );
 |
 V
 merge(
   merge(
     mergeSort([234]),//arr=[234],
     merge([123],[1]);//arr=[1,123]
   ),//arr=[1],left=[234],right=[123] => arr=[1,123,234]
   merge(
     merge([23],[123]),//arr=[23,123]
     merge([2],[11])//arr=[2,11]
   )//arr=[2],left=[23,123],right=[11]
    //arr[2,11],left=[23,123],right=[] 
    //arr=[2,11,23,123]
 );
 |
 V
 merge([1,123,234],[2,11,23,123]);
 |
 V
 arr=[1],left=[123,234],right=[2,11,23,123]
 |
 V
 arr=[1,2],left=[123,234],right=[11,23,123]
 |
 V
 arr=[1,2,11],left=[123,234],right=[23,123]
 |
 V
 arr=[1,2,11,23],left=[123,234],right=[123]
 |
 V
 arr=[1,2,11,23,123],left=[123,234],right=[]
 |
 V
 arr=[1,2,11,23,123,123,234]
 */
张贴在js

angular之service与factory的用法

angular之service与factory的用法

直接上代码


<!DOCTYPE html>
<html>
<head>
  <title>Angular JS Forms</title>
</head>
<body>
  <h2>AngularJS Sample Application</h2>
  <div ng-app="mainApp" ng-controller="CalcController">
   <p>Enter a number: <input type="number" ng-model="number" />
   <button ng-click="square()">X<sup>2</sup></button>
   <p>Result: {{result}}</p>
  </div>
  <script src="http://libs.useso.com/js/angular.js/1.2.9/angular.js"></script>
  <script>
   var mainApp = angular.module("mainApp", []);
   mainApp.factory('MathService', function() {   
     var factory = {}; 
     factory.multiply = function(a, b) {
      return a * b 
     }
     return factory;
   }); 

   mainApp.service('CalcService', function(MathService){
      this.square = function(a) { 
      return MathService.multiply(a,a); 
     }
   });

   mainApp.controller('CalcController', function($scope, CalcService) {
      $scope.square = function() {
      $scope.result = CalcService.square($scope.number);
     }
   });
  </script>
</body>
</html>

AngularJS笔记之directive——scope选项与绑定策略

ng-directive

开门见山地说,scope:{}使指令与外界隔离开来,使其模板(template)处于non-inheriting(无继承)的状态,当然除非你在其中使用了transclude嵌入,这点之后的笔记会再详细记录的。但是这显然不符合实际开发中的需求,因为实际上,我们经常想要我们的指令能够在特定的情况下与外界进行数据上的交互,这就需要借助绑定策略之手了。

大家知道,当scope选项写为scope:{}这种形式的时候,就已经为指令生成了隔离作用域,现在,我们来看看绑定策略的三种形式:& 、= 、@。

首先是@,它将本地作用域和DOM中的属性值绑定起来(且这个属性的值必须是父级作用域中的),什么意思呢?说的简单一点就是假设你在模板中有个双花括号表达式,然后我们把表达式里的内容和html中指令里特定名字的属性绑定起来,还是不懂?看看下面的代码:

<body ng-app="test">
<div ng-controller="ngs">
      <input type="text" ng-model="haha" />
      <abc for-name="{{ haha }}" for-tem="{{ tem }}"></abc>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app=angular.module("test",[]);
app.directive('abc',function(){
       return {
          restrict:'E',
          replace:true,
          template:'<div class="header">冷{{name}}<input type="text" ng-model="name" />{{ aa }}</div>',
          scope:{
              name:'@forName',//属性是传入到template中的值,引号中值是在指令绑定的属性;@是找到的意思(用于字符串)
              aa:"@forTem"//如上解释(限用于字符串)
         }
      }
})
.controller('ngs',function($scope){
       $scope.tem="呵呵";//仅限字符串
});
</script>
</body>

运行结果可想而知,{{ name }}成功地与父控制器中的Name绑定起来了。当然这里也可以这样写

name:’@’ 这样写的话,就默认DOM中的属性名为name了意即 for-name=”{{ Name }}”可简写为name=”{{ Name }}”;其实,另外两个符号=和&也有这样的简写规则,方便起见接下来都使用这种写法。

@到此为止,接下来就是’=’了。=与@的不同点在于,@是针对字符串而用,但=是针对某个对象的引用,

这么说可能不太专业,但就拿上边的例子而言,我们在html中,把Name这个字符串通过一对双花括号传递给for-name属性,但如果我们用了=,这里传入的Name就不应该是一个字符串,而是一个对象的引用。这不是一个很一目了然的概念,所以我用接下来的两个例子诠释它的含义。

<body ng-app="test">
<div ng-controller="ngs">
	<input type="text" ng-model="haha" />
	<abc for-name="haha" aa="tem"></abc>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app=angular.module("test",[]);
app.directive('abc',function(){
	return {
		restrict:'E',
		replace:true,
		template:'<div class="header">冷{{forName}}<input type="text" ng-model="forName" />{{aa[0].name}}</div>',
		scope:{
			forName:'=',//属性是指令绑定的属性,且此属性可以传入到template中去;=是等价的意思(用于对象)
			aa:'='//跟上解释
		}
	}
})
.controller('ngs',function($scope){
	$scope.tem=[{name:"哈哈"},{name:"呵呵"}];//类型都可
});
</script>
</body>

这就完成了,其实只不过是加了一点小把戏,把ng-model换成了model而已。

注意到,这个例子中,都是使用对象的引用,而不是单纯的字符串,这也是=可以进行双向绑定的关键。

最后是&符号。它的含义是:对父级作用域进行绑定,并将其中的属性包装成一个函数,注意,是属性,意即,任何类型的属性都会被包装成一个函数,比如一个单纯的字符串,或是一个对象数组,或是一个函数方法,如果是字符串、对象数组和无参的函数,那么可想而知,它们都会被包装成一个无参的函数,若是有参的函数方法则反之,并且我们需要为其传入一个对象。

<body ng-app="test">
<div ng-controller="ngs">
	<abc for-name="fun()"></abc>
</div>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app=angular.module("test",[]);
app.directive('abc',function(){
	return {
		restrict:'E',
		replace:true,
		template:'<div class="header">冷<input type="button" ng-click="forName()" value="按钮" /></div>',
		scope:{
			forName:'&'//属性是指令绑定的属性,且此属性可以传入到template中去;&(任何类型的属性都会被包装成一个函数)

		}
	}
})
.controller('ngs',function($scope){
	$scope.fun=function(){
		alert(123);
	}
});
</script>
</body>

记录angular之directive指令的用法

1.实例1:从最简单的开始

<html ng-app='app'>
<body>
    <hello></hello>
</body>
<script src="../angular-1.0.3/angular.min.js">
</script> <script src="HelloDirect.js"></script>
</html>

对于以上代码里面的<hello>标签,浏览器显然是不认识的,它唯一能做的事情就是无视这个标签。那么,为了让浏览器能够认识这个标签,我们需要使用Angular来定义一个hello指令(本质上说就是自己来把<hello>这种玩意儿替换成浏览器能识别的那些标准HTML标签)。

来看这段温馨的JS代码:

var appModule = angular.module('app', []);
appModule.directive('hello', function() {
    return {
       restrict: 'E',
       template: '<div>Hi there</div>',
       replace: true
   };
});

以上代码大概看两眼就可以了,不要太在意细节。

然后我们就可以在浏览器里面看到这样的内容:

实际产生的标签结构是这样的:

可以看到,<hello>这个东东已经被<div>Hi there</div>这个标签替换掉了,这也是以上JS代码里面replace:true这行配置的作用,代码里面的template配置 项当然就是我们要的div标签啦,至于restrict:’E’这个配置项的含义,请看下表:

ok,看完上面的表格,对于restrict这个属性相信你已经秒懂了,那么我们来玩儿点花样吧。如果我们需要替换的HTML标签很长,显然不能用 拼接字符串的方式来写,这时候我们可以用templateUrl来替代template,从而可以把模板写到一个独立的HTML文件中。

2.实例2:transclude(变换)


//先看例子,JS代码:
var appModule = angular.module('app', []); 
appModule.directive('hello', function() {
     return { 
         restrict: 'E', 
         template: '<div>Hi there <span ng-transclude></span></div>', 
         transclude: true
    }; 
}); 
//HTML代码:
<html ng-app='app'>
<head> 
     <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
</head> 
<body>
<hello> 
   <br/> 
   <span>原始的内容,</span>
   <br/>
   <span>还会在这里。</span> 
</hello>
<hello> </hello>
</body> 
<script src="../angular-1.0.3/angular.min.js"></script> 
<script src="Transclude.js"></script>
</html> 

运行效果如下:

生成的HTML标签结构如下:

和第一个例子对比,这个例子的JS和HTML代码都略有不同,JS代码里面多了一个transclude: true,HTML代码里面在<hello>内部出现了子标签。

按照我们在第一个例子中的说法,指令的作用是把我们自定义的语义化标签替换成浏览器能够认识的HTML标签。那好,如果我们自定义的标签内部出现了子标签,应该如何去处理呢?很显然,transclude就是用来处理这种情况的。

对于当前这个例子,transclude的作用可以简化地理解成:把<hello>标签替换成我们所编写的HTML模板,但是<hello>标签内部的内容保持不变

很显然,由于我们没有加replace:true选项,所以<hello>标签还在,没有被替换掉。同时,通过这个例子你还还会发现一 个暗藏的属性,那就是浏览器实际上非常智能,虽然它并不认识<hello>这个标签,但是页面没有出错,它只是默默地把这个标签忽略掉了!怎 么样?是不是碉堡了?

你可以自己在上面的JS代码里面加上replace:true,然后再看生成的HTML结构。

addEventListener之handleEvent

addEventListener() 方法是将指定的事件监听器注册到目标对象上,当该对象触发指定的事件时,指定的回调函数就会被执行。

var obj = {
     name: ‘foo’,
     handleEvent: function() {
           alert(‘click name=’+ this.name);
    }
};
document.body.addEventListener(‘click’, obj, false);// 注意:该接口属于DOM2, 所以IE6~IE8不能直接使用哦~

这样,在 element 触发event事件后,调用的是handleEvent 方法,且其中的 this 是指实现EventListener接口的对象,这里指向obj对象。

new运算符,alert的那些知识


var a=new function(){return "funA"};alert(a);
//用new运算符表示调用的是一个构造函数 构造函数默认返回一个该构造函数的实例对象

var b = new function() {this.name = "test"; return {toString: function() {return "testB"}}}; alert(b) ;
//而alert在打印对象的时候会调用对象的toString方法

var c = new function() {this.name = "testC"; return 123}; console.log(c);
var d = new function() {this.name = "testD"; return new Number(123)}; console.log(d);
//c这个返回的是实例对象  d这个返回的是Number的实例对象
//return的是一个对象的时候是有效的 返回一些原始值之类的是无效的(除了数字,字符串,布尔值,null,undefined之外的其他值都可以返回;包括数字,字符串,布尔值的包装对象都可以)
//只要 new 表达式之后的 constructor 返回(return)一个引用对象(数组,对象,函数等),都将覆盖new创建的匿名对象,如果返回(return)一个原始类型(无 return 时其实为 return 原始类型 undefined),那么就返回 new 创建的匿名对象。

手机端事件touchstart,touchend,touchmove

touchstart:触摸开始的时候触发

touchmove:手指在屏幕上滑动的时候触发

touchend:触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):

touches:当前位于屏幕上的所有手指的列表。

targetTouches:位于当前DOM元素上手指的列表。

changedTouches:涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息(常用):

identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)

target:DOM元素,是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。

手机端事件touchstart,touchend,touchmove只支持addEventListener写法,不支持传统模式写法

var obj = document.getElementByIdx_x('id');
obj.addEventListener('touchmove', function(event) {
     // 如果这个元素的位置内只有一个手指的话
    if (event.targetTouches.length == 1) {
     event.preventDefault();// 阻止浏览器默认事件,重要 
        var touch = event.targetTouches[0];
        // 把元素放在手指所在的位置
        obj.style.left = touch.pageX-50 + 'px';
        obj.style.top = touch.pageY-50 + 'px';
        }
}, false);

以下是获取不同类型滑动的代码具体做法,结合前人的思想,封装好了,可以借鉴学习:

var touchFunc = function(obj,type,func) {
    //滑动范围在5x5内则做点击处理,s是开始,e是结束
    var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};
    var sTime = 0, eTime = 0;
    type = type.toLowerCase();
  
    obj.addEventListener("touchstart",function(){
        sTime = new Date().getTime();
        init.sx = event.targetTouches[0].pageX;
        init.sy = event.targetTouches[0].pageY;
        init.ex = init.sx;
        init.ey = init.sy;
        if(type.indexOf("start") != -1) func();
    }, false);
  
    obj.addEventListener("touchmove",function() {
        event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动
        init.ex = event.targetTouches[0].pageX;
        init.ey = event.targetTouches[0].pageY;
        if(type.indexOf("move")!=-1) func();
    }, false);
  
    obj.addEventListener("touchend",function() {
        var changeX = init.sx - init.ex;
        var changeY = init.sy - init.ey;
        if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {
            //左右事件
            if(changeX > 0) {
                if(type.indexOf("left")!=-1) func();
            }else{
                if(type.indexOf("right")!=-1) func();
            }
        }
        else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){
            //上下事件
            if(changeY > 0) {
                if(type.indexOf("top")!=-1) func();
            }else{
                if(type.indexOf("down")!=-1) func();
            }
        }
        else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){
            eTime = new Date().getTime();
            //点击事件,此处根据时间差细分下
            if((eTime - sTime) > 300) {
                if(type.indexOf("long")!=-1) func(); //长按
            }
            else {
                if(type.indexOf("click")!=-1) func(); //当点击处理
            }
        }
        if(type.indexOf("end")!=-1) func();
    }, false);
};

各种浏览器全屏模式的方法,video、img全屏等

浏览器全屏模式的启动函数 requestFullscreen仍然需要附带各浏览器的js方言前缀:

// 判断各种浏览器,找到正确的方法
function launchFullscreen(element) { 
   if(element.requestFullscreen){ 
       element.requestFullscreen(); 
   }else if(element.mozRequestFullScreen){ 
       element.mozRequestFullScreen(); 
   }else if(element.webkitRequestFullscreen){ 
       element.webkitRequestFullscreen(); 
   }else if(element.msRequestFullscreen){ 
       element.msRequestFullscreen(); 
   }
}

// 启动全屏!
launchFullScreen(document.documentElement); // 整个网页
launchFullScreen(document.getElementById("videoElement")); // 某个页面元素

对你想要全屏显示的页面元素调用全屏方法,浏览器窗口就会变成全屏,但会先请求用户允许全屏模式。要注意,用户很有可能会拒绝全屏模式。如果用户运行全屏模式,则浏览器的工具条等按钮菜单都会隐藏,你的页面会覆盖整个屏幕。

退出全屏模式

这个 exitFullscreen方法(也需要加浏览器前缀)会让浏览器退出全屏模式,变成正常模式。

// 判断浏览器种类
function exitFullscreen(){
     if(document.exitFullscreen){
        document.exitFullscreen();
     }else if(document.mozCancelFullScreen)
     {
       document.mozCancelFullScreen();
     }
     else if(document.webkitExitFullscreen)
     {
       document.webkitExitFullscreen();
     }
}

// 退出全屏模式!
exitFullscreen();

需要注意的是, exitFullscreen只能由document对象调用,而不是启动全屏时传入的对象。

全屏属性和事件

不幸的是,全屏属性和事件的相关方法也需要添加浏览器前缀,但我相信很快就不需要这样做了。

  • document.fullScreenElement: 全屏显示的网页元素。
  • document.fullScreenEnabled: 判断当前是否处于全屏状态。

fullscreenchange事件会在启动全屏或退出全屏时触发:

var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEnabled;

你仍然可以使用上面判断浏览器种类的方法给这个事件加上前缀。

全屏样式CSS

各种浏览器都提供了一个非常有用的全屏模式时的css样式规则:

:-webkit-full-screen {
  /* properties */
}

:-moz-full-screen {
  /* properties */
}

:-ms-fullscreen {
  /* properties */
}

:full-screen { /*pre-spec */
  /* properties */
}

:fullscreen { /* spec */
  /* properties */
}

/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}

/* styling the backdrop*/
::backdrop {
  /* properties */
}
::-ms-backdrop {
  /* properties */
}

有些情况下,WebKit样式会出现一些问题,你最好把这些样式保持简洁。

console.time和console.timeEnd及console.log用法

console.time方法与console.timeEnd方法

当需要统计一段代码的执行时间时,可以使用console.time方法与console.timeEnd方法,其中console.time方法用于标 记开始时间,console.timeEnd方法用于标记结束时间,并且将结束时间与开始时间之间经过的毫秒数在控制台中输出。这两个方法的使用方法如下 所示。

console.time('small loop');
for (var i = 0; i < 100000; i++) {
 ;
}
console.timeEnd('small loop');

这两个方法均使用一个参数,参数值可以为任何字符串,但是这两个方法所使用的参数字符串必须相同,才能正确地统计出开始时间与结束时间之间所经过的毫秒数。

console.log如何在控制台写有颜色的文字?

console.log("这是一然博客。\n我叫一然。我在写博客。\n");
console.log("我的邮箱 %c zhudong208#qq.com(其中“#”表示“@”)","color:red;font-size:24px");
console.log("我的网址:http://dodozhu.com");