目录
align-items是哪个方向?justify-content呢?text_align?
1.项目
1.自我介绍
2.了解angularjs的依赖注入Dependency Injection吗?
指对象是被动接受依赖类而不是自己主动去找,换句话说就是指对象不是从容器中查找它依赖的类,而是在容器实例化对象的时候主动将它依赖的类注入给它。在实例化一个类时,它会自动去实例化它里面所用到的其它实例。所以这就叫依赖注入。在Angular里面,services作为单例对象在需要到的时候被创建,只有在应用生命周期结束的时候(关闭浏览器)才会被清除。而controllers在不需要的时候就会被销毁了。
优点:松耦合,可重用;提高了组件的可测试性
AngualrJs中可用来注入的有三种类型,service、factory、provider,这三种写法不样,用法也都不一样。其中,service只实例化一次,其实就是单例模式的思想。无论我们在什么地方注入我们的service,将永远使用同一个实例。所以对很多在controller层中的操作就可以放到serivce层中去。AngularJS提供例如许多内在的服务,如:$http, $route, $window, $location等。每个服务负责例如一个特定的任务,$http是用来创建AJAX调用,以获得服务器的数据。 $route用来定义路由信息等。内置的服务总是前缀$符号。
3.ajax和angular框架?
angular 的ajax使用的是链式调用的方式,比较省事,简单易懂
$http({ method: "POST", url: "./ajax.php", data:{'username':$scope.username, 'email':$scope.email } }). success(function(data, status) { }). error(function(data, status) { });
$http的配置项
method:请求方式,有GET/DELETE/HEAD/JSONP/POST/PUT
url:绝对的或者相对的请求目标
data或者 params:请求的数据传送,data是post请求的数据,params是get请求的数据
headers:请求的头部
timeout:设置请求超时的时间,以毫秒计算,1000就相当于一秒
4.脏值检查?
https://blog.csdn.net/weixin_45440502/article/details/109729016 6.angular-js脏值检查、angular
5.数据库三大范式?
1.第一范式(1NF):列不可再分
1.1.每一列属性都是不可再分的属性值,确保每一列的原子性
- 考虑这样一个表:【联系人】(姓名,性别,电话) 。如果在实际场景中,一个联系人有家庭电话和公司电话,那么这种表结构设计就没有达到 1NF。要符合 1NF 我们只需把列(电话)拆分,即:【联系人】(姓名,性别,家庭电话,公司电话)
1.2.两列的属性相近或相似或一样,尽量合并属性一样的列,确保不产生冗余数据
2.第二范式(2NF)属性完全依赖于主键
首先是 1NF,另外包含两部分内容,一是表必须有一个主键;二是没有包含在主键中的列必须完全依赖于主键,而不能只依赖于主键的一部分。
- 考虑一个订单明细表:【OrderDetail】(OrderID,ProductID,UnitPrice,Discount,Quantity,ProductName)。 因为我们知道在一个订单中可以订购多种产品,所以单单一个 OrderID 是不足以成为主键的,主键应该是(OrderID,ProductID)。显而易见 Discount(折扣),Quantity(数量)完全依赖(取决)于主键(OderID,ProductID),而 UnitPrice,ProductName 只依赖于 ProductID。所以 OrderDetail 表不符合 2NF。不符合 2NF 的设计容易产生冗余数据。 可以把【OrderDetail】表拆分为【OrderDetail】(OrderID,ProductID,Discount,Quantity)和【Product】(ProductID,UnitPrice,ProductName)来消除原订单表中UnitPrice,ProductName多次重复的情况。
第三范式(3NF)属性不依赖于其它非主属性 属性直接依赖于主键
首先是 2NF,另外非主键列必须直接依赖于主键,不能存在传递依赖。即不能存在:非主键列 A 依赖于非主键列 B,非主键列 B 依赖于主键的情况。
- 考虑一个订单表【Order】(OrderID,OrderDate,CustomerID,CustomerName,CustomerAddr,CustomerCity)主键是(OrderID)。 其中 OrderDate,CustomerID,CustomerName,CustomerAddr,CustomerCity 等非主键列都完全依赖于主键(OrderID),所以符合 2NF。不过问题是 CustomerName,CustomerAddr,CustomerCity 直接依赖的是 CustomerID(非主键列),而不是直接依赖于主键,它是通过传递才依赖于主键,所以不符合 3NF。 通过拆分【Order】为【Order】(OrderID,OrderDate,CustomerID)和【Customer】(CustomerID,CustomerName,CustomerAddr,CustomerCity)从而达到 3NF。
英文名称是 Normal Form。范式是关系数据库理论的基础。三大范式只是一般设计数据库的基本理念,可以建立冗余较小、结构合理的数据库
A B C D
A B 为主键
C -> B 依赖 违反了范式吗?违反的第几条?
违反了第二范式(2NF):没有包含在主键中的列必须完全依赖于主键,而不能只依赖于主键的一部分
2.CSS
1.盒模型?
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
width是什么?
当指定一个 CSS 元素的宽度和高度属性时,只是设置内容区域Content的宽度和高度。
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
怎么改变width?
p
{
height:100px;
width:100px;
}
怎么改变盒子模型?
盒子模型分为两种:第一种是W3c标准的盒子模型(标准盒模型);第二种IE标准的盒子模型(怪异盒模型)。
怪异盒模型:大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距Padding和边框Border的宽度的总和。虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距Padding,而是尝试将内边距或外边距添加到元素的父元素和子元素。IE8 及更早IE版本不支持设置填充的宽度和边框的宽度属性。解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。
2.子元素如何垂直居中?
https://blog.csdn.net/weixin_45440502/article/details/109729016 第4点:实现parent全局布局,children左右上下垂直
百分比布局、平移、Flex、定位、内联元素
不知道父元素的宽度呢?
transform: translate(-50%, -50%)
//与负margin-left和margin-top实现居中不同的是,margin-left必须知道自身的宽高,而translate可以在不知道宽高的情况下进行居中:往上(x轴),左(y轴)移动自身长宽的 50%,以使其居于中心位置。translate()函数是css3的新特性.在不知道自身宽高的情况下,可以利用它来进行水平垂直居中.。
transform的原理?
CSS3中,
transform
属性允许盒子模型被进行二维或三维空间坐标的变换。使用该属性之后,元素主要可以进行以下变换:旋转(rotate),平移(translate),缩放(scale),倾斜(skew)
有这些方法:
translate(),translateX(),translateY(),translateZ(),translate3d()
向X轴平移,填正数往右平移,填负数,往左平移;向Y轴平移,填正数往下平移,填负数,往上平移。
Matrix:矩阵,transform模板函数。是线性方程组,通过建立一种对应关系,得到目标结果的一种工具。 下图是一个矩阵方程,它的作用就是将原有坐标值(X0,Y0)通过某种变换,转换目标值(X1,Y1)。
其中,(x0,y0)为起始点坐标,(x1,y1)就是我们要输出的目标坐标值。
不难发现,e,f就是我们想要的横纵坐标上的偏移量。
flex如何实现?
justify-content: center;
align-items: center;
align-items是哪个方向?justify-content呢?text_align?
侧轴(纵轴)方向上的对齐方式;主轴(横轴)方向上的对齐方式。元素中的文本在所在标签内水平居中
align-items和text_align的区别?
text-align:center 实现文字居中对齐; align-items:center:实现div内所有标签居中
3.两个div,一个bottom-margin = 10px,一个top-margin = 20 px, margin为多少?
合并外边距:20px
3.JS
1.封装Ajax成promise,返回一个promose
如果不使用promise,$.ajax请求的时候成功和失败的回调函数是写在参数里的,他是对象参数的一个值
$.ajax({ method:"post", url:"/xxx", data:"username=mtt&password=1", dataType:'json', success:()=>{}//成功后的回调函数 error:()=>{}//失败后的回调函数 } )
如果使用jQuery.axja()发送请求,并使用promise,代码如下
let myButton = document.getElementById('myButton'); function success(responseText){ console.log("成功") console.log(responseText);//responseTex } function fail(request){ console.log("失败") console.log(request); } myButton.addEventListener("click",(e)=>{ //使用ajax $.ajax({ method:"post", url:"/xxx", data:"username=mtt&password=1", dataType:'json'//预期服务器返回的数据类型,如果不写,就是响应里设置的 } ).then(success,fail)//$.ajax()返回一个promise })
2.代码输出:
2.1 promise
promise 的状态
https://blog.csdn.net/weixin_45440502/article/details/109823333 12.了解promise的哪些方法?promise.all是干嘛的?了解promise的链式调用吗?
Promise的then的第二个参数和catch的区别一样吗?有什么区别?
1. promise.then(f1,f2)
2. promise.then(f1)
.catch(f2)
1.reject是用来抛出异常的,catch是用来处理异常的;
2.reject是Promise的方法,而then和catch是Promise实例的方法(Promise.prototype.then 和 Promise.prototype.catch)。
区别:如果在then的第一个函数里抛出了异常,后面的catch能捕获到,而then的第二个函数捕获不到。
catch只是一个语法糖而己,还是通过then 来处理的:
Promise.prototype.then(null,onRejected);then的第二个参数和catch捕获错误信息的时候会就近原则,如果是promise内部报错,reject抛出错误后,then的第二个参数和catch方法都存在的情况下,只有then的第二个参数能捕获到,如果then的第二个参数不存在,则catch方法会捕获到。
第二种写法要好于第一种写法,理由是第二种写法可以捕获前面then方法执行中的错误,也更接近同步的写法(try/catch)。因此,建议总是使用catch方法,而不使用then方法的第二个参数。
可以这样写吗:
promise
.then(f1)
.catch(f2)
.then(f3)
//promise rejected 状态
可以。return的值会
作为新Promise对象下一个then的回调函数的参数值
2.2 this,箭头函数
var a = {
f1: () => { console.log(this) },
f2: function() {console.log(this)}
}
a.f1() // window
a.f2() // a
var b = new a.f2(); // b
a.f1() // window:箭头函数:法则三
a.f2() // a:对象:法则一
var b = new a.f2(); // b
判断法则:
- 对象方法中的this指向对象本身(箭头函数形式的除外)
- 多层嵌套函数中的this指向等同于包含该this的最近一个function的this
- 箭头函数以及非指向对象方法中的function的情况下this指向window
- 在构造函数中,this上的值会在创建实例的时候被绑定到新创建的实例上
JS代码有三种运行环境
- Global Code : JavaScript代码开始运行的默认环境 this=> window
- Function Code: 代码进入一个JavaScript函数 this => 调用函数的对象
- Eval Code : 使用eval()执行代码
判断this的值分为两个部分,第一个部分是确认出函数被调用的位置,级、第二个部分是结合第一步分析出的结果,根据四个规则来确认this的值。
一. 我们判断this的值首先第一步应该是判断出函数的调用栈信息
二. 结合第一步的调用栈信息,结合四个规则来判断this的值
1. 隐式绑定,可能有些地方是这样描述这个规则的,“调用一个对象的方法时,该方法的this指向该对象”,但是这样不是很准确,应该是,当一个函数拥有上下文对象时,该函数的this指向离函数最近的上下文对象(其实就是刚刚的调用栈信息)
2. 显式绑定,即用bind,call,apply来调用函数,可以为函数来绑定一个值
3.使用new时 new FunctionName() 时,先会创建一个新的对象,然后如果没有return对象的话,就return这个新对象
4. 默认绑定 默认情况就是说如果一个函数的调用方式匹配不了以上的三种方式,就会采用的方式
三. 优先级问题
new > 显示绑定 > 隐式绑定 > 默认绑定
new 绑定:我们首先先要了解下通过 new 来调用函数,发生了哪些步骤。
1. 创建一个全新的对象
2. 新对象会被执行原型连接
3. 新对象会绑定到函数调用的 this
4. 如果函数没有返回其他对象,那么 new 表达式中的函数调用会自动返回这个新对象
new的过程
https://blog.csdn.net/weixin_45440502/article/details/110098282 6.原型+原型链+构造
3.for in的用途?
for in循环本质上是forEach循环,用于枚举对象中的非符号键属性。for(const propName in Window){...}
因为对象的属性是无序的,因此不能保证返回对象属性的顺序。
它主要有两个作用
- 遍历数组
var a = ['a', 'b', 'c'];
for(var index in a) {
console.log(index);//0,1,2
}
- 遍历JavaScript对象
var json = {a:{num:1},b:{num:2}};
for(var name in json){
console.log
(name);//a,b}
可以用在对象模型的定义属性吗?
取决于这个属性的enumerable的值为true还是false
了解defineProperty吗?
let obj = Object.create(null);
let descriptor = {
configurable:true,
writable:true,
enumerable:true,
value:undefined
};
Object.defineProperty(obj,'hello',descriptor);
obj.hello = "hello world";console.log(obj.hello);//hello world
枚举?
enumerable:表示该属性是否可以枚举,即可否通过for..in访问属性。默认为true。
4.跨域的解决办法?jsonp 的原理、cors、options、img?cors可以携带cookie吗?
https://blog.csdn.net/weixin_45440502/article/details/109586398 2.了解跨域吗?
4.算法
题目:给一棵树,输出这棵树从右边看到的值
var rightList = function(root){
if(root == null) return null
let result = [];
let row = [root];
while(row.length != 0){//这里我写反了循环结束的条件
result.push(row[0].val);//需要加上val
let rowLength = row.length;//这里应该先定义length,不能在for循环里写
for(let i = 0;i<rowLength;i++){
if (row[i].right!=null){//需要判断是否null,因为数组里没有null这个结果
row.push(row[i].right);
}
if (row[i].left!=null){
row.push(row[i].left);
}
row.shift();
}
}
return result
}