前端乱炖

##CSS

####BFC(Block formatting context块级格式化上下文)

BFC有一下特性:

####BFC触发条件:

BFC主要用途:作为html布局的一个独立单位,占居相对独立的空间,并不受影响

##JS

####创建JS对象

如何在Javascript实现OO编程?最好的方式就是充分利用prototype属性。比较基本的原理是,当你用prototype编写一个类后,当你new一个新的object,浏览器会自动把prototype中的内容替你附加在object上。这样,通过利用prototype,你也就实现了类似OO的Javascript。

function MyObject(name, size)
{
  this.name = name; 
  this.size = size; 
}
MyObject.prototype.tellSize = function()
 {
    return "size of "+this.name+" is "+this.si  
 }
var myobj1 = new MyObject("tiddles", "7.5 meters");

####闭包

(function(name){
    var say_word = "hello, " + name,
    w = window,
    helloword = function(){
           console.log(say_word);
        };
    w.hw = helloword;
	})("尐鱼");
hw();

作用:

1、封装

2、模块化

####Responsive布局

		
<link rel=“stylesheet” type=“text/css” media=“only screen and max-width 480px),only screen and max-device-width 480px)” href=“link.css”/>

##Angularjs

####视图和模板

<html ng-app>
<head>
 <script src="lib/angular/angular.js"></script> 
 <script src="js/controllers.js"></script> 
</head> 
 <body ng-controller="PhoneListCtrl"> 
 <ul> 
 <li ng-repeat="phone in phones">
    <p></p> 
 </li> 
 </ul> 
 </body> 
</html>

####模型和控制器

function PhoneListCtrl($scope) { 
 $scope.phones = 
 [ {"name": "Nexus S", "snippet": "Fast just got faster with Nexus S."}, 
   {"name": "Motorola XOOM™ with Wi-Fi", "snippet": "The Next, Next Generation tablet."},
   {"name": "MOTOROLA XOOM™", "snippet": "The Next, Next Generation tablet."} 
 ]; 
 }
 

####迭代过滤

<div class="container-fluid" ng-controller="PhoneListCtrl"> 
 <div class="row-fluid">  
  <div class="span2"> <!--Sidebar content--> 
 	Search: <input ng-model="query"> 
  </div> 	
 <div class="span10"> <!--Body content-->
	 <ul class="phones"> 
	  <li ng-repeat="phone in phones | filter:query"> 
	   <p></p> 
	  </li> 
	 </ul> 
  </div> 
 </div> 
</div>
 

####双向绑定

 function PhoneListCtrl($scope) {
 $scope.query = "hello";
}
watch(expression, function(){});
 

####XHR & 依赖注入

function PhoneListCtrl($scope, $http) { 
  	 $http.get('phones/phones.json').success(function(data) { 
  	 $scope.phones = data; 
  	 }); 
 	  $scope.orderProp = 'age'; 
 }

为了使用AngularJS的服务,你只需要在控制器的构造函数里面作为参数声明出所需服务的名字,就像这样:

  	function PhoneListCtrl($scope, $http) {...}

当控制器构造的时候,AngularJS的依赖注入器会将这些服务注入到你的控制器中。当然,依赖注入器也会处理所需服务可能存在的任何传递性依赖(一个服务通常会依赖于其他的服务)。

####路由

  	angular.module('phonecat', []). 
   	config(['$routeProvider', function($routeProvider) { 
  	 $routeProvider. 
 	 when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}). 
	 when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: 		PhoneDetailCtrl}). 
	  otherwise({redirectTo: '/phones'}); 
}]);
 

####过滤器

  angular.module('phonecatFilters', []).
  filter('checkmark', function() { 
  return function(input) { return input ? '\u2713' : '\u2718'; 
   	}; 
  });
 <dl> 
  <dt>Infrared</dt> 
  	<dd></dd> 
  <dt>GPS</dt> 
  <dd></dd> 
</dl>
 

####事件监听

 function PhoneDetailCtrl($scope, $routeParams, $http) 
 { $scope.setImage = function(imageUrl) { $scope.mainImageUrl = imageUrl; } }
 	 <ul class="phone-thumbs"> 
  	 <li ng-repeat="img in phone.images"> 
  	 <img ng-src="" ng-click="setImage(img)"> 
  	 </li> 
 	 </ul>
 

####REST和定制服务

  	angular.module('phonecatServices', ['ngResource']). 
	  factory('Phone', function($resource){ 
	   return $resource('phones/:phoneId.json', {}, 
 	  { query: {method:'GET', params:{phoneId:'phones'}, isArray:true} 
 	  }); 
 	 });
	  function PhoneListCtrl($scope, Phone) { 
 	  $scope.phones = Phone.query(); $scope.orderProp = 'age'; 
	  }

服务有三种方式: