浮动元素居中
<style>
.box1{
width:100px;
height:100px;
background-color:red;
float:left;
margin-left:50%;
position: relative;
left:-50px;
}
</style>
描述flex布局
flex称为弹性盒子,采用flex布局的元素称为容器,子元素成为容器成员,flex有两条轴,一条称为主轴,一条称为交叉轴;
有很多属性可以控制局部方式
flex-direction|flex-wrap|justify-content|align-items|align-content|flex-flow
order|align-self
cookie,sessionStorage,localStorage
相同点:三者都可以存储数据,都有大小限制
cookie主要用于和交互,二localstorage和sessionstorage主要用于存贮数据
cookie有时效性,可以设置什么时候失效,而localstorage在用户不清理的时候一直存在,sessionstroage是会话性质,在结束会话后会清除
cookie可以设置路径,有作用域
对前端进行优化
1,使用合并压缩的文件,使用css spirits
2,使用外部引入的js和css文件,css文件放在头部,js放在尾部
3减少空src的标签,删除无用的dom节点,将资源放在不同的域名
4,使用cdn服务,合理的设置http缓存
5,合理的使用cookie和webstorage
做两套响应式,如何判断和跳转
navigator.useagent的字符串,使用正则进行匹配,可以得知,然后通过window.location.hreg进行跳转
第三方插件
;(function($, window, document, undefined) {
var defaults = {};
function Drag(opt) {
var config = $.extend({},
defaults, opt || {});
}
Drag.prototype.say = function() {
console.log('hello')
}
$.fn.myplugin = function(opt) {
var a = new Drag(opt);
return a.say();
}
})(jQuery, window, document)
$(function(){
$('#btn').myplugin();
})
angular
1,双向数据绑定(mvvm, mvc是单向数据绑定)
2,依赖注入,帮助开发者更容易理解,开发和测试
3,指令
4,过滤器
5,控制器
6,ui路由
7,三种通信方式:1.servise 2.$rootscope 3.events事件
8.$rootscope是所有的$scope的父对象
9,$watch $q,$digest,$apply
10,ng-show,ng-if
冒泡排序
var a =[1,23,12,32,34,112,12,89];
//第一个数和后面每个数两两进行比较,如果有比较大的数就就换位置,
//小的就跑到最上面,每次都从a[0]开始排序
//每运行一次就拍好一个数,所以就要减去i
for(var i =0;i<a.length-1;i++){
for(var j=0 ;j<a.length-i-1;j++){
if(a[j]<a[j+1]){
var temp = a[j+1];
a[j+1]=a[j];
a[j] = temp;
}
}
}
console.log(a);
angular相关
1.directive中可以设置 A 属性 C 类 E 标签 M 注释
app.directive('xheader',function(){
return {
restrict: ec,
scope:false,
remplateUrl:,
replace:false,
link:function(scope,ele,attr){
}
}
})
2.通信方式 service $rootscope 指定绑定事件
3.尽量使用angular.element $http.$timeout
4. ng-repeat 时数组有相同的值,可以在后面添加track by $index
5. 页面不能调用原生方法
6. filter |filterName:argument 或者 $filter(data)(argument)
7.app.filter('name',function(){
return function(data,argument){
return a;
}
})
8.app.service('ajax',function(){
this.say=function(){
}
})
9.脏检查机制:Angular 在 scope 模型上设置了一个 监听队列，用来监听数据变化并更新 view 。每次绑定一个东西到 view 上时 AngularJS 就会往 $watch 队列里插入一条 $watch，用来检测它监视的 model 里是否有变化的东西。当浏览器接收到可以被 angular context 处理的事件时，$digest 循环就会触发，遍历所有的 $watch，最后更新 dom。
10.不利于 SEO
因为所有内容都是动态获取并渲染生成的，搜索引擎没法爬取。
