保存到桌面加入收藏设为首页
java开发
当前位置:首页 > java开发

校招季 献给前端求职路上的你们(JS)-安度博客

时间:2019-02-04 14:53:21   作者:   来源:   阅读:105   评论:0
内容摘要:javascript1、函数与数据类型[UndefinedNullBooleanNumberStringobject](1)var 预编译,当前作用域内的变量声明被提前到作用域顶部,但赋值保留在原处。(2)函数声明提前分两种函数声明 function a();函数表达式var a......

  • javascript


    1、函数与数据类型

    [UndefinedNullBooleanNumberStringobject]

    (1)var 预编译,当前作用域内的变量声明被提前到作用域顶部,但赋值保留在原处。
    (2)函数声明提前分两种

    函数声明

     function a();

    函数表达式

    var a = function();

    只有var a被提前; //照旧undefined,不能先调用。
    (3) Null==undefined null是一个object undefined是一个windows工具,Undifeind

    (4)method.call(this arg1arg2) method.apply(obj[arg1arg2..])或者直接是arguments工具。两者的作用都是改变函数的运行情况,执行上下文。[1]改变函数执行上下文,将this指向一个obj工具。
    (5)匿名函数。
    (function(ab))–匿名函数的引用,
    (function(ab))(cd)函数的调用,jQuery就是一个匿名函数。
    全局变量是妖怪,匿名函数执行一次就被销毁了,不会在内存中驻留,不会造玉成局变量污染。
    注意与闭包的区别,其实两者就没关系。

    2、 javascript作用域链

    (1)javascript并没有块及作用域,只有函数级作用域:变量在声明它们的函数体及其子函数内是可见的。函数唯一拥有自身作用域的结构(for 循环没有自身作用域)。
    (2)代码在一个情况中执行的时候,会建设变量工具的一个作用域链,来保证变量的有序会见,作用域链的第一个工具是当前执行的情况,下一个是父函数的执行情况—>直到最外边一个全局作用域,这个链叫作用域链。

    (3)js剖析是沿着作用域链一级一级搜索的历程,从第一个工具开始,逐级向后回溯直到window工具,找到同名标识符停止,找到后不再继续遍历,找不到就报错。父函数界说的变量在子函数的作用域链中,子函数没有被销毁,其作用域链中所有变量和函数就会被维护,不会被销毁(闭包的原理)

    3、 javascript原型继续与原型链

    (1)每个函数都有一个prototype属性(new出来的普通工具是_proto_属性),都市指向该工具的原型工具Person.prototype. 当我们用结构函数new一个实例后,从原型工具继续属性和要领。

    (2)为什么prototype?因为不prototype话,new两个工具,工具里的属性和要领同名,但确实差异的引用,对属性来说,没问题,可是对同名的要领,功效是一样,却一直在复制一样的工具,这就要prototype。两个数组push一个操作不影响另外一个。自己的属性和要领在结构器中用this公用的要领用prototype;

    (3)原型链:今世码去读取某个工具的属性是,会执行一遍搜索,先从工具自己的属性查找,如果没有,则从工具的原型工具查找,在没有原型工具prototype上查找。。。知道
    object原型上没有就报错,因为object的原型是null。
    p—p原型—p原型的原型-obj hasOwnProperty()
    (4)继续:子类继续父类的属性和要领,将父类的实例复制给子类的原型,或者调用apply或者call要领。

    4、 闭包(闭的是谁?)

    (1)闭包是指在 javascript 中,内部函数总是可以会见其所在
    的外部函数中声明的参数和变量,纵然在其外部函数被返回(寿命终结)了之后。内部function会闭外部function的局部变量直到内部function竣事。这意味着当前作用域总是能够会见外部作用域中的变量。举个实例吧:

    function a() { var i = 0; function b() { alert(++i); } return b;}var c = a();c();

    原理:凭据js垃圾接纳机制,标志清除,引用清除嘛。
    使用这个特性,恰好 a–>b —>c引用着。这样被引的着就不会被接纳了,因为b的执行,依赖a,所以a的变量,没有被接纳。

    (2)利益。

    [1]制止全局变量的污染,因为不加var就是全局变量,这样的暂时变量是GV有许多坏处,有些只要执行一次,组件初始化。我们可以用闭包,构建匿名自执行函数,执行完很快就被释放了。return该要的工具就行。

    [2]缓存,一个处置惩罚很耗时的函数工具,每次调用都花费很好的时间,我们只要将盘算出来的值存储起来,当下次调用的是要,先查找,有就直接用,没有再盘算并存起来。闭包恰好,使用这一点,因为他不会释放外部的引用,内部函数的值得以生存。

    [3]实现封装,防止变量跑到外面的作用域,造成命名冲突(和第一点类似)。 [4]模拟面向工具中的工具
    function Person(){ var name = 'default'; return { getName : function(){ return name; } setName : function(newName){ this.name = newName; } }};

    (3)坏处,

    [1]内存消耗,一般函数的运动工具会随着执行上下文一起销毁,可是闭包引用另外一个函数的运动工具,因此工具无法被销毁。垃圾接纳是凭据引用标志来销毁工具,如果最后一个属性没有被引用才会销毁改工具,这也意味着闭包需要更多的内存消耗。IEnk" target="_blank">浏览器中,如果存在循环应用,可能会造成内存泄露的问题。 [2]闭包可能引起跨域会见,影响性能。如果一个跨作用域的工具被引用了一次以上,则先把它存储到局部变量里再使用。Var doc = document;

    5、js事件流

    从页面上吸收到事件的顺序。IE事件流是事件冒泡,W3C事件流恰好相反是事件捕捉

    事件冒泡:如果单击了内层标签按钮,他会一层一层网上走,直到document。
    事件捕捉: 相反,从外到内,document->-body->div1-div2.
    可是要使支持事件捕捉addEventListener('click'functiontrue);第三个参数为true默认false为事件冒泡。

    (1) 事件处置惩罚的三个阶段:事件捕捉,目的阶段,事件冒泡阶段,IE8不支持mp.
    (2) 一个标签绑定多个事件

    IE: attachEvent(“onclick”function) – detach先绑定后触发, W3C: addEventListener(“click”function false) remove先绑定先触发。
    区别btn.onclick=function 作用域是this—当前dom节点。attachEvent()中的this是windows.

    (3)兼容性代码:

    w3C事件工具是:event IE:windows.event 事件目的event.target IE:windows.event.srcElement |currentTarget:当前正在处置惩罚的元素 target:目的元素 取消默认行为:event.returnValue = false; IE:preventDefault 事件冒泡:event.stopPropagation || event.cancleBubble = true;
    function addEvent(obj type  callback){ if(windows.attachEvent{ obj.attachEvent(“on”+typecallback)} else{ obj.addEventListener(typecallback) }}function stopBubble(event){ if(windows.event) { event.cancleBubble = true; } else{ event.stopPropagation }}var table = document.getElementById( 'table' ); table.onclick = function( e ){ var e = e || window.event; var target = e.srcElement || e.target; if( target.tagName.toUpperCase() == 'td' ){ …. }; 

    (4)事件委托/署理:使用事件冒泡的原理,把事件处置惩罚器添加到1父级元素上
    优:(1)可以节约大量内存的占用,淘汰事件注册,table—署理td
    (2)新增子元素时,无需举行事件保定,动态部门很适合。
    缺:不能什么都署理,很可能事件误判,劲酒虽好,不要贪杯哦。

    6、Es6新特性

    转译工具Traceur ,Babel 编译成ES5. 你们现在的项目中有用SE6的这些新特性吗?
    (1)一些新增的api. [“a””b””c”].keys()values()entries()和map一样了。有荟萃Set, Map

    (3)生成器genrators function* nk" target="_blank">qq(name){yield 暂停,} 。next()要领执行下一句。

    (4)可变参数—取代arguments Map.set(document”the document”); for (var [keyvalue] of map){…}

    (5)箭头 Input(function的参数)=>Output(return…) 不要function,也不要return了array.filter(obj => job.isSelect()) 写一些回调函数的时候很好用array.filter(function(job){ return job.isSelect()});

    (6)有署理Proxy, 尚有类Class. 模块Moudules export import 导入 导出模块。

    (7)有let界说块级作用域,不会像var一样,作用域是函数体的全部,好比for 循环的变量i是共享的。

    let是更完美的var(1)有块级作用域,let最外面声明的不是全局变量,windows会见不到,let不能重界说。
    const用于声明长粮食,在声明的时候赋值,不能修改。

    7、 设计模式

    js开发前端UI组件中会经常涉及,纯粹的页面业务逻辑可能涉及不多。果真出哪些要领,应该提供 哪些接口,哪部门逻辑流程应该开放出去让用户自行编写。如何实现高内聚低耦合,如何实现组件的高复用。常用的一些设计模式
    - (1)单例模式:划分命名空间很好用。Var XGP={Util:{}CSS:{}Ajax:{}} 惰性单体:懒加载,return 判断没有在建设实例
    (2)视察者模式: (3)职责链模式: (4)工厂模式:

    8、组件开发

    问题(1)复用性:通过继续来复用。改变的是一点点。属性:父类.call(this) 要领继续原型=new 父类();
    遇到的问题:(2)差异组件的传参是纷歧样的,怎么弄? 通报的顺序也纷歧样,结构一个json配置参数有则用配置的参数,没有就用默认的。extend( this.settings opt );

    9. Js函数节约

    主要思路是,通过一个定时器,阻断一连重复的函数调用。
    特征:1. 短时间内一连多次重复触发 ; 2. 频繁的 DOM 操作,操作DOM价钱大,在用户察觉规模外,降低函数调用的频率,从而提升性能。

    function(){ clearTimeout(timer); timer = setTimeout(function () { } 100)};

    JS模块化—-require.js/sea.js

    优点:
    (1) 防止js加载阻塞页面渲染。 Js中有alert();
    (2) 更好的疏散。一堆script剧本, html中只需引入一个主入口就好了。然后在依赖进来
    (3) 更好的组织代码,大型项目的维护,多人开发,代码气势派头纷歧样,业务逻辑混杂,一个文件一个模块,这样控制了文件的粒度,一个萝卜一个坑。单一职责原则,体现OOP思想
    (4) 按需加载,虽然js压缩在一个js中可以淘汰请求,可是只需依赖少数几个文件时,体积与数量的折中
    (5) 制止命名冲突,闭包,匿名自执行函数, 模块化只向外面袒露该模块的接口。
    (6) 更好的依赖治理,A依赖B用A之前要script加载好B,如果过段时间不依赖B,依赖C,很难维护的。

    缺点:
    (1).系统分层,调用链会很长
    (2).模块间通信模块间发送消息会很耗性能 。如果有许多jquery插件,那这样要是实现一个很庞大的交互时,模块间的依赖会许多

    requriejs 异步加载,依赖前置,提前执行
    AMD是requirejs的模块化界说的的规范,CMD是sea.js模块化规范。
    define 界说模块

     define([‘require’’foo’]function(){return}); baseUrl + paths

    require加载模块 require([‘foo’’bar’]function(foobar){});

    非AMD模块输出插件不切合切合AMD规范。 用功效:shim require.config({ shim{‘chajian’:exports|| deps:}})

    Sea.js —同步加载,依赖就近,延迟执行
    define 界说, exports导出,对外提供单个接口, define(function(requireexportsmodule){});
    module上存储了当前模块的一些工具,可以直接导出一个工具。module.exports =a; 提供整个接口
    require(./a)直接引入, require.async异步引入。 这就是 CMD 模块界说规范的所有内容。


最近更新

精彩推荐

阅读排行

本站所有站内信息仅供娱乐参考,不作任何商业用途,不以营利为目的,专注分享快乐,欢迎收藏本站!
所有信息均来自:百度一下 (威尼斯人官网)