apply的参数是数组形式,call的参数是单个的值,除此之外在使用上没有差别,重点理解这两个函数调用的this改变
Array.concat( ) 连接数组
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.length 数组的大小
Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 给数组添加元素
Array.reverse( ) 颠倒数组中元素的顺序
Array.shift( ) 将元素移出数组
Array.slice( ) 返回数组的一部分
Array.sort( ) 对数组元素进行排序
Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串
Array.unshift( ) 在数组头部插入一个元素
Object.hasOwnProperty( ) 检查属性是否被继承
Object.isPrototypeOf( ) 一个对象是否是另一个对象的原型
Object.propertyIsEnumerable() 是否可以通过for/in循环看到属性
Object.toLocaleString( ) 返回对象的本地字符串表示
Object.toString( ) 定义一个对象的字符串表示
Object.valueOf( ) 指定对象的原始值
严格来讲js中并没有类的概念,不过js中的函数可以作为构造函数来使用,通过new来实例化,其实函数本身也是一个对象。
理解JavaScript的预解析机制,js的运行主要分两个阶段:js的预解析和运行,预解析阶段所有的变量声明和函数定义都会提前,但是变量的赋值不会提前
使用 DocumentFragment 优化多次 append
通过模板元素 clone ,替代 createElement
使用一次 innerHTML 赋值代替构建 dom 元素
使用 firstChild 和 nextSibling 代替 childNodes 遍历 dom 元素
使用 Array 做为 StringBuffer ,代替字符串拼接的操作
将循环控制量保存到局部变量
顺序无关的遍历时,用 while 替代 for
将条件分支,按可能性顺序从高到低排列
在同一条件子的多( >2 )条件分支时,使用 switch 优于 if
使用三目运算符替代条件分支
需要不断执行的时候,优先考虑使用setInterval
闭包,循环
1. 工厂模式
2. 构造函数模式
3. 原型模式
4. 混合构造函数和原型模式
5. 动态原型模式
6. 寄生构造函数模式
7. 稳妥构造函数模式
1. 原型链继承
2. 借用构造函数继承
3. 组合继承(原型+借用构造)
4. 原型式继承
5. 寄生式继承
6. 寄生组合式继承
53、eval是做什么的?
1. 它的功能是把对应的字符串解析成JS代码并运行
2. 应该避免使用eval,不安全,非常耗性能(2次,一次解析成js语句,一次执行)
1. 原型对象也是普通的对象,是对象一个自带隐式的__proto__ 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为 null 的话,我们就称之为原型链
2. 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链
1. 我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为
2. 事件处理机制:IE是事件冒泡、firefox同时支持两种事件模型,也就是:捕获型事件和冒泡型事件
3. ev.stopPropagation();
注意旧ie的方法:ev.cancelBubble = true;
他们是动态的样式语言,是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。
变量符不一样,less是@,而Sass是$;
Sass支持条件语句,可以使用if{}else{},for{}循环等等。而Less不支持;
Sass是基于Ruby的,是在服务端处理的,而Less是需要引入less.js来处理Less代码输出Css到浏览器
相同点:两个方法产生的作用是完全一样的
不同点:方法传递的参数不同
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
apply()接收两个参数,一个是函数运行的作用域(this),另一个是参数数组。
call()方法第一个参数与apply()方法相同,但传递给函数的参数必须列举出来。
闭包用的多的两个作用:读取函数内部的变量值;让这些变量值始终保存着(在内存中)。
同时需要注意的是:闭包慎用,不滥用,不乱用,由于函数内部的变量都被保存在内存中,会导致内存消耗大。
在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是,指向该函数所属的对象。
全局的this → 指向的是Window
函数中的this → 指向的是函数所在的对象
对象中的this → 指向其本身
join()用于把数组中的所有元素拼接起来放入一个字符串。所带的参数为分割字符串的分隔符,默认是以逗号分开。归属于Array
split()即把字符串分离开,以数组方式存储。归属于Stringstring
slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。返回的是含有被删除的元素的数组。
让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!
阻止浏览器的默认行为
window.event?window.event.returnValue=false:e.preventDefault();
停止事件冒泡
window.event?window.event.cancelBubble=true:e.stopPropagation();
原生JavaScript中,return false;只阻止默认行为,不阻止冒泡,jQuery中的return false;既阻止默认行为,又阻止冒泡
obj.appendChidl()
obj.removeChild()
obj.replaceChild()
obj.innersetBefore()
(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。
递归即是程序在执行过程中不断调用自身的编程技巧,当然也必须要有一个明确的结束条件,不然就会陷入死循环。
/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
1、尽量减少 HTTP 请求
2、使用浏览器缓存
3、使用压缩组件
4、图片、JS的预载入
5、将脚本放在底部
6、将样式文件放在页面顶部
7、使用外部的JS和CSS
8、精简代码
Undefined、null、关键字false、NaN、零、空字符串
第一个是重复执行每500毫秒执行一次,后面一个只执行一次。
会出现乱码,加charset=”GB2312”;
Trident (['traɪd(ə)nt])--IE,Gecko (['gekəʊ])--Firefox,Presto (['prestəʊ])--opera,webkit—谷歌和Safari
浏览器内核又可以分成两部分:渲染引擎和 JS 引擎。它负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。JS 引擎则是解析 Javascript 语言,执行 javascript 语言来实现网页的动态效果。
* 原型对象也是普通的对象,是对象一个自带隐式的 __proto__ 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为null的话,我们就称之为原型链。
* 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链。
* JavaScript的数据对象有那些属性值?
writable:这个属性的值是否可以改。
configurable:这个属性的配置是否可以删除,修改。
enumerable:这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。
value:属性值。
* 当我们需要一个属性的时,Javascript引擎会先看当前对象中是否有这个属性,如果没有的话,就会查找他的Prototype对象是否有这个属性。
function clone(proto) {
function Dummy() { }
Dummy.prototype = proto;
Dummy.prototype.constructor= Dummy;
return new Dummy(); //等价于Object.create(Person);
}
function object(old) {
function F() {};
F.prototype = old;
return new F();
}
var newObj = object(oldObject);
`// event(事件)工具集,来源:https://github.com/markyun
markyun.Event = {
// 页面加载完成后
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 视能力分别使用dom0||dom2||IE方式 来绑定事件
// 参数: 操作的元素,事件名称 ,事件处理程序
addEvent : function(element, type, handler){
if (element.addEventListener) {
//事件类型、需要执行的函数、是否捕捉
element.addEventListener(type,handler, false);
}else if (element.attachEvent) {
element.attachEvent('on' + type,function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type,handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type,handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type,handler);
} else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡,因为IE不支持事件捕获)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默认行为
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 获取事件目标
getTarget : function(event) {
return event.target ||event.srcElement;
},
// 获取event对象的引用,取到事件的所有信息,确保随时能使用event;
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event ==ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};
1. 我们在网页中的某个操作(有的操作对应多个事件)。例如:当我们点击一个按钮就会产生一个事件。是可以被 JavaScript 侦测到的行为。
2. 事件处理机制:IE是事件冒泡、火狐是 事件捕获;
3. ev.stopPropagation();
执行say667()后,say667()闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript的垃圾回收机制GC不会收回say667()所占用的资源,因为say667()的内部函数的执行需要依赖say667()中的变量。这是对闭包作用的非常直白的描述.
function say667() {
// Local variable that ends up withinclosure
var num = 666;
var sayAlert = function() { alert(num); }
num++;
return sayAlert;
}
var sayAlert = say667();
sayAlert()//执行结果应该弹出的667
使用instanceof (待完善)
if(a instanceof Person){
alert('yes');
}
1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
JSON(JavaScript ObjectNotation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小
{'age':'12', 'name':'back'}
defer和async、动态创建DOM方式(用得最多)、按需异步载入js
立即执行函数,不暴露私有成员
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
(1) defer,只支持IE
(2) async:
(3) 创建script,插入到DOM中,加载完毕后callBack
documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
(function(x){
delete x;
alert(x);
})(1+5);
函数参数无法delete删除,delete只能删除通过for in访问的属性。
当然,删除失败也不会报错,所以代码运行会弹出“1”。
例子中用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4);
注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
function add(a,b){
alert(a+b);
}
function sub(a,b){
alert(a-b);
}
add.call(sub,3,1);
*jQuery是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等。
*jQuery UI则是在jQuery的基础上,利用jQuery的扩展性,设计的插件。
提供了一些常用的界面元素,诸如对话框、拖动行为、改变大小行为等等
jQuery中没有提供这个功能,所以你需要先编写两个jQuery的扩展:
$.fn.stringifyArray = function(array) {
return JSON.stringify(array)
}
$.fn.parseArray = function(array) {
return JSON.parse(array)
}
然后调用:
$("").stringifyArray(array)
其他部分
(HTTP、正则、优化、重构、响应式、移动端、团队协作、SEO、UED、职业生涯)
*基于Class的选择性的性能相对于Id选择器开销很大,因为需遍历所有DOM元素。
*频繁操作的DOM,先缓存起来再操作。用Jquery的链式调用更好。
比如:varstr=$("a").attr("href");
*for (var i = size; i < arr.length; i++){}
for 循环每一次循环都查找了数组 (arr) 的.length属性,在开始循环的时候设置一个变量来存储这个数字,可以让循环跑得更快:
for (var i = size, length = arr.length; i< length; i++) {}
(1) 减少http请求次数:CSSSprites, JS、CSS源码压缩、图片大小控制合适;网页Gzip,CDN托管,data缓存 ,图片服务器。
(2) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
(3) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能。
(4) 当需要设置的样式很多时设置className而不是直接操作style。
(5) 少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。
(6) 避免使用CSS Expression(css表达式)又称Dynamicproperties(动态属性)。
(7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。
(8) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢。
100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。
400 语义有误,当前请求无法被服务器理解。
401 当前请求需要用户验证
403 服务器已经理解请求,但是拒绝执行它。
500-599 用于支持服务器错误。
503 – 服务不可用
要熟悉前后端的通信流程,最好把动态网站的背后细节也介绍一遍
考察学习知识的态度,是否仅仅是停留在使用层面,要知其然知其所以然
this执行init构造函数自身,其实就是jQuery实例对象,返回this是为了实现jQuery的链式操作
$.parseJSON('{"name":"John"}');
递归赋值
Jquery.extend用来扩展jQuery对象本身;jquery.fn.extend用来扩展jQuery实例
可以同时绑定多个事件,低层实现原理是使用addEventListner与attachEvent兼容处理做事件注册
jQuery是操作dom的框架,jQueryUI是基于jQuery做的一个UI组件库
jQuery主要用于pc端,当然有对应的jQuerymobile用于移动端,zepto比jQuery更加小巧,主要用于移动端
优先使用ID选择器
在class前使用tag(标签名)
给选择器一个上下文
慎用 .live()方法(应该说尽量不要使用)
使用data()方法存储临时变量
点透主要是由于两个div重合,例如:一个div调用show(),一个div调用hide();这个时候当点击上面的div的时候就会影响到下面的那个div;
解决办法主要有2种:
1.github上有一个叫做fastclick的库,它也能规避移动设备上click事件的延迟响应,https://github.com/ftlabs/fastclick
将它用script标签引入页面(该库支持AMD,于是你也可以按照AMD规范,用诸如require.js的模块加载器引入),并且在dom ready时初始化在body上,
2.根据分析,如果不引入其它类库,也不想自己按照上述fastclcik的思路再开发一套东西,需要1.一个优先于下面的“divClickUnder”捕获的事件;2.并且通过这个事件阻止掉默认行为(下面的“divClickUnder”对click事件的捕获,在ios的safari,click的捕获被认为和滚屏、点击输入框弹起键盘等一样,是一种浏览器默认行为,即可以被event.preventDefault()阻止的行为)。
知识面的宽度,流行框架要多多熟悉
Underscore的熟悉程度
在表达式中转换数据<p>姓名为 {{ lastName | uppercase }}</p>
currency,是什么过滤器——格式化数字为货币格式,单位是$符。
移动端的点击事件的有延迟,时间是多久,为什么会有?怎么解决这个延时?(click 有 300ms 延迟,为了实现safari的双击事件的设计,浏览器要知道你是不是要双击操作。)
*(优点)因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,
因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。
此外,与Node代理服务器交互的客户端代码是由javascript语言编写的,
因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。
*(缺点)Node是一个相对新的开源项目,所以不太稳定,它总是一直在变,
而且缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子。
至少给出自己的思路(url-hash,可以使用已有的一些框架history.js等)
1)、实时应用:如在线聊天,实时通知推送等等(如socket.io)
2)、分布式应用:通过高效的并行I/O使用已有的数据
3)、工具类应用:海量的工具,小到前端压缩部署(如grunt),大到桌面图形界面应用程序
4)、游戏类应用:游戏领域对实时和并发有很高的要求(如网易的pomelo框架)
5)、利用稳定接口提升Web渲染能力
6)、前后端编程语言环境统一:前端开发人员可以非常快速地切入到服务器端的开发(如著名的纯Javascript全栈式MEAN架构)
Nodejs相关概念的理解程度
流行的MVC架构模式
熟悉前后端通信相关知识
优点:
1. 因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。
2. 与Node代理服务器交互的客户端代码是由javascript语言编写的,因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。
缺点:
1. Node是一个相对新的开源项目,所以不太稳定,它总是一直在变。
2. 缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子(第三方库现在已经很丰富了,所以这个缺点可以说不存在了)。
使用率较高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery,超过91%。
轻量级框架有Modernizr、underscore.js、backbone.js、Raphael.js等。(理解这些框架的功能、性能、设计原理)
前端开发工具:Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。
开发过的插件:城市选择插件,汽车型号选择插件、幻灯片插件。弹出层。(写过开源程序,加载器,js引擎更好)
Formatting Context:指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用。
网站重构:应用web标准进行设计(第2版)
html5 websoket
WebSocket通过Flash
XHR长时间连接
XHR Multipart Streaming
不可见的Iframe
<script>标签的长时间连接(可跨域)
加班就像借钱,原则应当是------救急不救穷
先期团队必须确定好全局样式(globe.css),编码模式(utf-8) 等
编写习惯必须一致(例如都是采用继承式的写法,单样式都写成一行);
标注样式编写人,各模块都及时标注(标注关键样式调用的地方);
页面进行标注(例如 页面 模块 开始和结束);
CSS跟HTML 分文件夹并行存放,命名都得统一(例如style.css)
JS 分文件夹存放 命民以该JS 功能为准英文翻译;
图片采用整合的 images.png png8 格式文件使用尽量整合在一起使用方便将来的管理
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
Node.js、Mongodb、npm、MVVM、MEAN、react、angularjs
因为我想去阿里,所以我针对阿里的说
最羡慕就是在双十一购物节,350.19亿元,每分钟支付79万笔。海量数据,居然无一漏单、无一故障。太厉害了。
融入自己的设计理念,注重用户体验,选择合适的技术
压缩、合并,减少请求,代码层析优化。。。
知识面宽度,最好熟悉一些后台语言,比如php,展现出自己的技术两点
考虑问题的深入,不仅仅停留在完成任务上,要精益求精
表现出对前端的认同与兴趣,关注相关技术前沿
A.fget();B.file_open();C.fopen();D.open_file();
A.任何文件夹都可以删除 B.空文件夹可以删除
C.有权限的任何文件夹都可以删除 D.有权限的空文件夹可以删除
1、empty函数
用途:检测变量是否为空
判断:如果 var 是非空或非零的值,则 empty() 返回 FALSE。换句话说,""、0、"0"、NULL、FALSE、array()、var $var; 以及没有任何属性的对象都将被认为是空的,如果 var 为空,则返回 TRUE。注意:empty() 只检测变量,检测任何非变量的东西都将导致解析错误。换句话说,后边的语句将不会起作用;
2、isset函数
用途:检测变量是否设置
判断:检测变量是否设置,并且不是 NULL。如果已经使用 unset() 释放了一个变量之后,它将不再是 isset()。若使用 isset() 测试一个被设置成 NULL 的变量,将返回 FALSE。同时要注意的是一个NULL 字节("\0")并不等同于 PHP 的 NULL 常数。
1.减少css,js文件数量及大小(减少重复性代码,代码重复利用),压缩CSS和Js代码
2.图片的大小
3.把css样式表放置顶部,把js放置页面底部
4.减少http请求数
5.使用外部 Js 和 CSS
熟悉相关设计规范,自己总结的一些经验
团队协作,个人能力。实践经验
考察解决问题的能力
前端是最贴近用户的程序员,比后端、数据库、产品经理、运营、安全都近。
1、实现界面交互
2、提升用户体验
3、有了Node.js,前端可以实现服务端的一些事情
前端是最贴近用户的程序员,前端的能力就是能让产品从 90分进化到 100 分,甚至更好,
参与项目,快速高质量完成实现效果图,精确到1px;
与团队成员,UI设计,产品经理的沟通;
做好的页面结构,页面重构和用户体验;
处理hack,兼容、写出优美的代码格式;
针对服务器的优化、拥抱最新前端技术。
其它相关的加分项:
1.都使用和了解过哪些编辑器?都使用和了解过哪些日常工具?
2.都知道有哪些浏览器内核?开发过的项目都兼容哪些浏览器?
3.瀑布流布局或者流式布局是否有了解
4.HTML5都有哪些新的API?
5.都用过什么代码调试工具?
6.是否有接触过或者了解过重构。
7.你遇到过比较难的技术问题是?你是如何解决的?