json和xml区别
(1).可读性方面。
JSON和XML的数据可读性基本相同,JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,XML可读性较好些。
(2).可扩展性方面。
XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的。
(3).编码难度方面。
XML有丰富的编码工具,比如Dom4j、JDom等,JSON也有json.org提供的工具,但是JSON的编码明显比XML容易许多,即使不借助工具也能写出JSON的代码,可是要写好XML就不太容易了。
(4).解码难度方面。
XML的解析得考虑子节点父节点,让人头昏眼花,而JSON的解析难度几乎为0。这一点XML输的真是没话说。
(5).流行度方面。
XML已经被业界广泛的使用,而JSON才刚刚开始,但是在Ajax这个特定的领域,未来的发展一定是XML让位于JSON。到时Ajax应该变成Ajaj(Asynchronous Javascript and JSON)了。
(6).解析手段方面。
JSON和XML同样拥有丰富的解析手段。
(7).数据体积方面。
JSON相对于XML来讲,数据的体积小,传递的速度更快些。
(8).数据交互方面。
JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互。
(9).数据描述方面。
JSON对数据的描述性比XML较差。
(10).传输速度方面。
JSON的速度要远远快于XML。
js设计模式
举例说一下构造器模式、工厂模式、模块化模式
//构造器模式
// function Person(name,age){
// this.name = name
// this.age = age
// return '对象初始化成功。。。'
// }
// var p1 = new Person('xiaohong',20)
// var p2 = new Person('xiaohong',30)
// console.log(typeof p1)
// console.log(p1 instanceof Array)
// console.log(p1.constructor())
//module模式,模块化开发
// var User = {
// add:function(msg){
// console.log('添加成功')
// }
// }
// function User(name){
// return {
// add:function(msg){
// console.log('用户'+name+msg)
// },
// delete:function(msg){
// console.log('用户'+name+msg)
// },
// update:function(msg){
// console.log('用户'+name+msg)
// },
// find:function(msg){
// console.log('用户'+name+msg)
// }
// }
// }
// User('张三').add('添加一个用户')
// User('张三').delete('删除一个用户')
//factory模式,工厂模式,根据你传的值判断走向
function User(idcard){
if(idcard){
return function(){
return 'vip'
}
}else{
return function(){
return '普通用户'
}
}
}
var p1 = User('sjsa')
console.log(p1())
垃圾回收机制有哪几种,原理是什么
事件代理或者事件委托,写代码
<input type="button" id="add" value="添加"/>
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
//用事件委托
window.onload = function(){
var oul = document.getElementById('ul1')
var btn = document.getElementById('add')
var num = 4
//鼠标移入li上变红,移出变白
oul.onmouseover = function(ev){
var ev = ev||window.event
var target = ev.target || ev.srcElement
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = 'red'
}
}
oul.onmouseout = function(ev){
var ev = ev||window.event
var target = ev.target || ev.srcElement
if(target.nodeName.toLowerCase() == 'li'){
target.style.background = '#FFFFFF'
}
}
//添加新节点
btn.onclick = function(){
num++
var oli = document.createElement('li')
oli.innerHTML = 111*num
oul.appendChild(oli)
}
}
事件循环
语义化标签有哪些
语义化HTML:用最恰当的HTML元素标记的内容。
优点:
1 提升可访问性;
2 SEO;
3 结构清晰,利于维护;
title、header、nav(标记导航)、main、article、section、aside、footer、video、canvas
作用域
变量的作用域无非就是两种:全局变量和局部变量。
全局作用域: 最外层函数定义的变量拥有全局作用域,即对任何内部函数来说,都是可以访问
局部作用域: 和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,而对于函数外部是无法访问的,最常见的例如函数内部
需要注意的是,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!
<script>
function fn(){
innerVar = "inner";
}
fn();
console.log(innerVar);// result:inner
</script>作用域链
根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,想要知道js怎么链式查找,就得先了解js的执行环境(参考上一节作用域的文档)
原型
原型链
变量提升
再来看一个代码:
<script>
var scope = "global";
function fn(){
console.log(scope);//result:undefined
var scope = "local";
console.log(scope);//result:local;
}
fn();
</script>
第一个输出居然是undefined,原本以为它会访问外部的全局变量(scope=”global”),但是并没有。这可以算是javascript的一个特点,只要函数内定义了一个局部变量,函数在解析的时候都会将这个变量“提前声明”:
java设计模式
页面模板引擎(原生写法)
vue的生命周期
ajax的生命周期
ajax创建过程
ajax:在不切换页面的情况下完成异步的HTTP请求
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
rem和px的区别
前端性能和安全
多平台兼容和适配
需要补充一些思路
了解SVG、canvas动画
补充代码实例
搜索引擎优化
vue父组件和子组件直接的传参、组件和组件之间的传参
补充代码实例
js内存管理
dom有哪些操作
MVC、MVP、MVVM的区别以及各自的代表框架
前端性能优化的看法
雅虎性能优化军规
怎么优化网络请求
get/post的区别,在数据传输及强度及传输数据类型方面?还有其他区别吗?
tcp三次握手和四次挥手
浏览器崩掉有哪些原因
写出一个vue模板
闭包输出问题
函数声明和函数定义输出问题
es6里面的promise/let/回调等新特性
同步和异步的区别,实际情景举例
回调函数
产生浮动的情况以及怎么清除浮动
首先我们要知道,css中的块级元素在页面中是独占一行的,自上而下排列,也就是我们所说的流,通常我们称之为标准流。
div是独自占用一行的,这是在标准流中的理论,但是,有些时候,我们的需求不仅仅是这样,我们想着如何在一行中显示多个div元素,所以,标准流已经不能满足我们的需求,这个时候我们就需要用到浮动,我们这样理解,浮动就是让这个div元素脱离标准流,漂浮在标准流的上面。
清除浮动:1、在需要清除浮动的元素前面添加一个空的div,给这个div添加一个css属性,clear:both;
2、浮动产生外层div(没有设置高度的)高度塌陷:给外面的div添加overflow:hidden或auto
3、公共的样式-用来清除样式:就是利用伪类元素来清除有浮动的标签,也就定义一个公共的类clearfix,给这个类添加css属性,在里面进行清除浮动的操作,只要哪里需要清除浮动,就在哪里添加一个清除浮动的类
.clearfix:after{
content:"";
display:table;
height:0;
visibility:both;
clear:both;
}
.clearfix{
*zoom:1; /* IE/7/6*/
}apply和call的定义和区别
外边距重叠及其影响
闭包的概念
截取url参数,写代码
对jsonp理解
产生随机数并排序
在不知道div宽度的情况下如何居中
什么是盒子模型
HTML行内元素、块状元素、行内块状元素的区别
HTML可以将元素分类方式分为行内元素、块状元素和行内块状元素三种。首先需要说明的是,这三者是可以互相转换的,使用display属性能够将三者任意转换:
(1)display:inline;转换为行内元素
(2)display:block;转换为块状元素
(3)display:inline-block;转换为行内块状元素
行内元素和块级元素
请描述一下cookies,sessionStorage和localStorage的区别?
sessionStorage和localStorage统称为web storage
web storage和cookie的区别
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。
sessionStorage和localStorage区别
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
什么是渐进增强(progressive enhancement)、优雅降级(graceful degradation)呢?
css命名规范
首先来理解一下什么是
B:即block,这个block不是css中样式的block,而是模块的意思,将所有的样式类分成一些模块,有点类似于语义化的html,比如将样式列分为header,section,footer等。
E:Element,元素,比如说这个组件是按钮,即可将元素名起为btn,BEM的命名中只包含三个部分,元素名只占其中一部分,所以不能出现多个元素名的情况。
M:modefiy,修饰器名。在编写前端页面代码的时候我们经常会遇到以下的状态:比如写一个下拉菜单,我们通常会编一个.active用来表示当前点击的项,那么,在BEM中,这个就可以放在modefiy中。
总结的来说,BEM的命名规则就是:block-name_element-name--modefiy-name。
同步和异步的区别
js创建对象的几种方式
Ajax解决浏览器的缓存问题
1、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。
2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。
3、在URL后面加上一个随机数: "fresh=" + Math.random();。
4、在URL后面加上时间搓:"nowtime=" + new Date().getTime();。
5、如果是使用jQuery,直接这样就可以了$.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不需要保存缓存记录。