一、面向对象、面向过程和构造函数
1、面对对象：把数据及对数据的操作方法放在一起，作为一个相互依存的整体——对象。对同类对象抽象出其共性，形成类。类中的大多数数据，只能用本类的方法进行处理。类通过一个简单的外部接口与外界发生关系，对象与对象之间通过消息进行通信。程序流程由用户在使用中决定。
2、面向过程：自顶向下顺序执行，逐步求精；其程序结构是按功能划分为若干个基本模块，这些模块形成一个树状结构；各模块之间的关系尽可能简单，在功能上相对独立；每一模块内部均是由顺序、选择和循环三种基本结构组成；其模块化实现的具体方法是使用子程序。程序流程在写程序时就已决定。
3、实际上js里没有类的概念，所以也就没有面向对象，但是new的方法却模拟了面向对象，因此new的方法（var 变量名 = new 函数()）也就成了唯一能够区别一般函数和构造函数的区别。
4、如果一个函数的返回值是引用类型（对象）的数据，那么这个函数作为构造函数用new运算符执行构造时，运算的结果将被它的返回值取代，这时候，构造函数体内的this值丢失了，取而代之的是被返回的对象；如果一个函数的返回值是一个值类型（this或者非对象），那么这个函数作为构造函数用new运算符执行构造时，它的返回值将被丢弃。new 表达式的结果仍然是this所引用的对象
function test(){
this.a = 10;
//return function(){return 1;} //返回值是对象
//return 1; //或者返回this.a //返回值是值类型
}
var m = new test();
var n = test();
alert(m);//分别返回return后面的闭包和Object
alert(n);//分别返回return后面的闭包和1
5、原型和原型链
每个对象都连接到一个原型对象，并可从中继承属性。所有通过字面量创建的对象都具有同一个原型对象——Object.prototype既原型对象的引用。通过new关键字后跟构造函数创建的对象的原型，就是构造函数的prototype属性的值，比如通过new Object()创建的对象和字面量创建的对象一样也继承自Object.prototype
var arr = {"0":111,"1":22,"2":3,"length":3};
// var arr=[111,22,3];
arr=Array.prototype.slice.call(arr); //将伪数组转化为数组
Object.prototype.numSort = function(){ //原型上添加一个numSort方法
var temp;
for(var i=0;i<this.length;i++){
for(var j=0;j<i-1;j++){
if(arr[i]<arr[j]){
temp=arr[j];
arr[j]=arr[i];
arr[i]=temp;
}
}
}
console.log(arr);
}
arr.numSort();
二、响应式布局
1、概念：Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。
2、响应式设计的步骤
(1)设置meta属性
大多数移动浏览器将HTML页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
（2）通过媒介查询来设置Media Queries
Media Queries 是响应式设计的核心。
它根据条件告诉浏览器如何为指定视图宽度渲染页面。假如一个终端的分辨率小于 980px，那么可以这样写：
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}
(3)设置多种视图样式
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}
(4)ps:
a.宽度需要使用百分比
.head{width:100%;}
.content{width:100%;}
b.处理图片缩放的方法
1）简单的解决方法可以使用百分比，但这样不友好，会放大或者缩小图片。那么可以尝试给 图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。
img { width: auto; max-width: 100%; }
三、 弹性盒模型（flexbox）理论
-
flex-direction：主轴的方向（即项目的排列方向） row | row-reverse | column | column-reverse;row（默认值） 主轴为水平方向，起点在左端。row-reverse 主轴为水平方向，起点在右端。column 主轴为垂直方向，起点在上沿。column-reverse 主轴为垂直方向，起点在下沿。
-
flex-wrap：如果一条轴线排不下，如何换行nowrap | wrap | wrap-reverse; nowrap（默认）：不换行。 wrap：换行，第一行在上方。 wrap-reverse：换行，第一行在下方。
-
flex-flow：flex-direction属性和flex-wrap属性的简写 默认值为row nowrap
-
justify-content ：定义了项目在主轴上的对齐方式 flex-start | flex-end | center | space-between | space-around;它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。flex-start（默认值） 左对齐flex-end 右对齐center 居中space-between 两端对齐，项目之间的间隔都相等。space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
-
align-items：定义项目在交叉轴上如何对齐 flex-start | flex-end | center | baseline | stretch; 它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。flex-start 交叉轴的起点对齐。flex-end 交叉轴的终点对齐。center 交叉轴的中点对齐。baseline 项目的第一行文字的基线对齐。stretch（默认值） 如果项目未设置高度或设为auto，将占满整个容器的高度。
-
align-content：多根轴线的对齐方式，一根轴该属性无效 flex-start | flex-end | center | space-between | space-around | stretch;flex-start 与交叉轴的起点对齐。flex-end 与交叉轴的终点对齐。center 与交叉轴的中点对齐。space-between 与交叉轴两端对齐，轴线之间的间隔平均分布。space-around 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值） 轴线占满整个交叉轴。
.wrap{
display: flex;
flex-wrap: wrap;
/* 中心 */
/* justify-content:space-around; */
/* 上中 */
/* justify-content:center;
align-items:flex-start; */
/* 上右 */
/* justify-content: flex-end; */
/* 右中 */
/* justify-content: flex-end;
align-items: center; */
/* 右下 */
/* justify-content: flex-end;
align-items: flex-end; */
/* 左中 */
/* justify-content: flex-start;
align-items: center; */
/* 左下 */
/* justify-content: flex-start;
align-items: flex-end; */
/* 下中 */
/* justify-content:space-around;
align-items: flex-end; */
}
四、算法题
不使用第三方变量交换两个变量的值
//必须是数字 this[i]=this[i]+this[j]; this[j]=this[i]-this[j]; this[i]=this[i]-this[j]; this[i]=[this[i],this[j]]; this[j]=this[i][0]; this[i]=this[i][1];
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
