前端面试总结(二)

1.window和document的常用的方法和属性有哪些,请列出来

window
    1. window对象常见的属性
        defauleStatus:指定窗口状态栏中的信息
        status:指定当前窗口状态栏中的信息
        frames:是一个数组,其中的内容是窗口中所有的框架
        parent:指当前窗口的父窗口
        self:指当前窗口
        top:代表当前所有窗口的最顶层窗口
        window:代表当前窗口
    2.window对象常见的方法
        alert:显示带有一个“确定”按钮的对话框
        confirm:显示带有“确定”和“取消”两个按钮的对话框
        prompt:显示带有输入区的对话框
        open:打开一个新的窗口
        close:关闭用户打开的窗口

document
    1.document常见的属性
        title :设置文档标题,也就是html的标签
        bgColor:设置页面的背景色
        fgColor:设置文本颜色(前景色)
        linkColor:未点击过的链接颜色
        alinkColor:焦点在此链接上的颜色
        vlinkColor:已点击过的链接颜色
        URL:设置url属性,从而在同一个窗口打开另一网页
        fileCreateDate:文件建立日期,只读属性
        fileModifiedDate:文件修改日期,只读属性
        fileSize:文件大小,只读属性
        cookie:设置和读取cookie
        charset:设置字符集
    2.document常见的方法
        write():动态向页面写入内容
        createElement(Tag):创建一个HTML标签对象
        getElementById(ID):获得指定id的对象
        getElementsByName(Name):获得之前Name的对象
        body.appendChild(oTag):向HTML中插入元素对象

2.如何显示/隐藏一个DOM元素?
有2种方法
第一种:设置css display属性为none,效果:元素不显示,不占位
第二种:设置css visibility属性为hidden,效果:元素不显示,但占位

3.块级元素(如div)和行内元素(如a,b)都有哪些?
行内元素列表:

        <a>标签可定义锚
        <abbr>表示一个缩写形式
        <acronym>定义只取首字母缩写
        <b>字体加粗
        <bdo>可覆盖默认的文本方向
        <big>大号字体加粗
        <br>换行
        <cite>引用进行定义
        <code>定义计算机代码文本
        <dfn>定义一个定义项目
        <em>定义为强调的内容
        <i>斜体文本效果
        <img>向网页中嵌入一幅图像
        <input>输入框
        <kbd>定义键盘文本
        <label>标签为
        <input> 元素定义标注(标记)
        <q>定义短的引用
        <samp>定义样本文本
        <select>创建单选或多选菜单
        <small>呈现小号字体效果
        <span>组合文档中的行内元素
        <strong>语气更强的强调的内容
        <sub>定义下标文本
        <sup>定义上标文本
        <textarea>多行的文本输入控件
        <tt>打字机或者等宽的文本效果
        <var>定义变量

块级元素列表:

        <address>定义地址
        <caption>定义表格标题
        <dd>定义列表中定义条目
        <div>定义文档中的分区或节
        <dl>定义列表
        <dt>定义列表中的项目
        <fieldset>定义一个框架集
        <form>创建 HTML 表单
        <h1>定义最大的标题
        <h2>定义副标题
        <h3>定义标题
        <h4>定义标题
        <h5>定义标题
        <h6>定义最小的标题
        <hr>创建一条水平线
        <legend>元素为 
        <fieldset>元素定义标题
        <li>标签定义列表项目
        <noframes>为那些不支持框架的浏览器显示文本,于 frameset 元素内部
        <noscript>定义在脚本未被执行时的替代内容
        <ol>定义有序列表
        <ul>定义无序列表
        <p>标签定义段落
        <pre>定义预格式化的文本
        <table>标签定义 HTML 表格
        <tbody>标签表格主体(正文)
        <td>表格中的标准单元格
        <tfoot>定义表格的页脚(脚注或表注)
        <th>定义表头单元格
        <thead>标签定义表格的表头
        <tr>定义表格中的行

**4.开发移动端页面要注意什么?如何适配不同尺寸屏幕?
**
机设备屏幕尺寸不一,做移动端的Web页面,需要考虑在安卓/IOS的各种尺寸设备上的兼容

1)viewport视口
     viewport是严格的等于浏览器的窗口。

visual viewport 可见视口 屏幕宽度
layout viewport 布局视口 DOM宽度
ideal viewport 理想适口:使布局视口就是可见视口
设备宽度(visual viewport)与DOM宽度(layout viewport), scale的关系为:

(visual viewport)= (layout viewport)* scale
获取屏幕宽度(visual viewport)的尺寸:window. innerWidth/Height。
获取DOM宽度(layout viewport)的尺寸:document. documentElement. clientWidth/Height。

设置理想视口:把默认的layout viewport的宽度设为移动设备的屏幕宽度,得到理想视口(ideal viewport):

<meta name="viewport" content="width=device-width,initial-scale=1">

2)动态设置视口缩放为1/dpr
对于安卓,所有设备缩放设为1,对于IOS,根据dpr不同,设置其缩放为dpr倒数。
在iPhone6上,缩放为0.5,即CSS像素2px最终显示效果为1px,而在scale=1的设备,CSS像素1px显示效果为1px,那么,为了达到显示效果一致,以px为单位的元素(比如字体大小),其样式应有适配不同dpr的版本,为了方便写,在动态设置viewport: scale的时候,同时在html根元素上加上data-dpr=[dpr],样式示例:

.p {
    font-size: 14px;

  [data-dpr="2"] & {
    font-size: 14px * 2;
  }

  [data-dpr="3"] & {
    font-size: 14px * 3;
  }
}

为写样式方便,可以借助sass的mixin写代码片段:


// 适配dpr的字体大小
@mixin font-dpr($font-size){
  font-size: $font-size;

  [data-dpr="2"] & {
      font-size: $font-size * 2;
  }

  [data-dpr="3"] & {
      font-size: $font-size * 3;
  }
}
@mixin px-dpr($property, $px) {
  #{$property}: $px;

  [data-dpr="2"] & {
    #{$property}: $px * 2;
  }

  [data-dpr="3"] & {
    #{$property}: $px * 3;
  }
}

// 使用
@include font-dpr(14px);
@include px-dpr(width, 40px); @include px-dpr(height, 40px);

3)rem
公式:

(function(win,doc){
    function change(){
        doc.documentElement.style.fontSize=
100*doc.documentElement.clientWidth/1366+'px';
    }
     change();
    win.addEventListener('resize',change,false);    
})(window,document)

4)flex布局
点击查看详情

5.开发过程中遇到哪些内存泄漏情况,如何解决的?
点击查看详情

6.什么是闭包?并用代码表示出来
1)、什么是闭包 闭包,官方对闭包的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。闭包的特点:
  ①. 作为一个函数变量的一个引用,当函数返回时,其处于激活状态。
  ②. 一个闭包就是当一个函数返回时,一个没有释放资源的栈区。 
 简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。
2)、闭包的几种写法和用法

//第1种写法  
function Circle(r) {  
      this.r = r;  
}  
Circle.PI = 3.14159;  
Circle.prototype.area = function() {  
  return Circle.PI * this.r * this.r;  
}  
  
var c = new Circle(1.0);     
alert(c.area());
//第2种写法  
var Circle = function() {  
  var obj = new Object();  
  obj.PI = 3.14159;  
    
  obj.area = function( r ) {  
      return this.PI * r * r;  
  }  
  return obj;  
}  
 
var c = new Circle();  
alert( c.area( 1.0 ) );
//第3种写法  
var Circle = new Object();  
Circle.PI = 3.14159;  
Circle.Area = function( r ) {  
       return this.PI * r * r;  
}  
  
alert( Circle.Area( 1.0 ) );  
//第4种写法  
var Circle={  
   "PI":3.14159,  
 "area":function(r){  
          return this.PI * r * r;  
        }  
};  
alert( Circle.area(1.0) ); 

3)Javascript闭包的用途

事实上,通过使用闭包,我们可以做很多事情。比如模拟面向对象的代码风格;更优雅,更简洁的表达出代码;在某些方面提升代码的执行效率。
①、匿名自执行函数

var data= {    
    table : [],    
    tree : {}    
};    
     
(function(dm){    
    for(var i = 0; i < dm.table.rows; i++){    
       var row = dm.table.rows[i];    
       for(var j = 0; j < row.cells; i++){    
           drawCell(i, j);    
       }    
    }    
       
})(data);

②结果缓存

var CachedSearchBox = (function(){    
    var cache = {},    
       count = [];    
    return {    
       attachSearchBox : function(dsid){    
           if(dsid in cache){//如果结果在缓存中    
              return cache[dsid];//直接返回缓存中的对象    
           }    
           var fsb = new uikit.webctrl.SearchBox(dsid);//新建    
           cache[dsid] = fsb;//更新缓存    
           if(count.length > 100){//保正缓存的大小<=100    
              delete cache[count.shift()];    
           }    
           return fsb;          
       },    
     
       clearSearchBox : function(dsid){    
           if(dsid in cache){    
              cache[dsid].clearSelection();      
           }    
       }    
    };    
})();    
     
CachedSearchBox.attachSearchBox("input");   

③封装

var person = function(){    
    //变量作用域为函数内部,外部无法访问    
    var name = "default";       
       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
}();    
     
print(person.name);//直接访问,结果为undefined    
print(person.getName());    
person.setName("abruzzi");    
print(person.getName());    
   
得到结果如下:  
   
undefined  
default  
abruzzi  

④实现类和继承

function Person(){    
    var name = "default";       
       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
    };   
 
    var p = new Person();
    p.setName("Tom");
    alert(p.getName());
 
    var Jack = function(){};
    //继承自Person
    Jack.prototype = new Person();
    //添加私有方法
    Jack.prototype.Say = function(){
        alert("Hello,my name is Jack");
    };
    var j = new Jack();
    j.setName("Jack");
    j.Say();
    alert(j.getName());
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容