分类 JavaScript 下的文章

Web前端UI框架组件

【React】And Design Pro

【Vue】Eleme

【Vue】Week

  • 介绍:Weex是一个使用Web开发体验来开发高性能原生应用的框架。它并不是一个前端框架,目前主要支持Vue.js和Rax作为其内置的前端框架。
  • 官网网站:http://weex.apache.org/cn/guide/

【Angular】NG-ZORRO

  • 介绍:NG-ZORRO 是一个企业级的 UI 组件库,是 Ant Design 的 Angular 4.0 实现,开发和服务于企业级后台产品。NG-ZORRO由阿里计算平台事业部、阿里云等不同部门的一些小伙伴在原业务组件的基础上共同构建而成,而且已开源,现在是0.6.0的版本,组件功能已经很齐全了,更符合我们国人使用习惯,已兼容Angular 5.0版本。是目前最全面、最好、最符合国人使用习惯的管理后台angular 2 UI模板。
  • 官网网站:https://ng.ant.design

JavaScript总结

js.png

一、JavaScript语言

1.JavaScript特性
• 高级函数:将函数作为参数;可以返回一个函数。
• 动态类型:晚绑定;可以赋给变量任意类型的值,并可随时更改类型。
• 灵活的对象模型:JavaScript的对象模型使用一种相对不常见的方式进行继承,称为原型;不是Java语言中更常见的基于类的对象模型。

2.作用域、作用域链、闭包
作用域(Scope):作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。
在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

全局作用域(Global Scope):在代码中任何地方都能访问到的对象拥有全局作用域。
以下几种情形有全局作用域:
1)最外层的函数和在最外层函数外面定义的变量拥有全局作用域
2)所有未定义直接赋值的变量自动声明为拥有全局作用域
3)所有window对象的属性拥有全局作用域

局部作用域(Local Scope):和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所以也被称为函数作用域。

作用域链(Scope Chain):在JavaScript中,函数也是对象,函数对象和其他对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]],由ECMA-262标准第三版定义,该内部属性被称为函数的作用域链,它决定了哪些数据能被函数访问。
1)当一个函数创建后,它的作用域链会被创建此函数的作用域中可访问的数据对象填充,如this、window、document、函数名等。
2)执行此函数时会创建一个称为"运行期上下文(execution context)"的内部对象,运行期上下文定义了函数执行的环境。每个运行期上下文都有自己的作用域链,用于标识符解析,当运行期上下文被创建时,它的作用域链初始化为当前运行函数的[[Scope]]所包含的对象。
3)在函数的运行过程中,每遇到一个变量,都会经历一次标识符解析过程以决定从哪里获取或存储数据。过程为:搜索运行期上下文的作用域链,从作用域链顶层开始,也就是运行函数的活动对象;如果找到则使用这个标识符,没有则继续搜索下一个作用域链中的下一个对象;如果最后都没有找到则返回undefined。

闭包:闭包就是能读取其他函数内部变量的函数。在JavaScript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以,在本质上,闭包就是将函数内部和函数外部连接起来的桥梁。
当内部函数 在定义它的作用域 的外部 被引用时,就创建了该内部函数的闭包 ,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被 释放,因为闭包需要它们。
其他说法:
• 闭包是函数和执行它的作用域组合的综合体——《JavaScript权威指南》
• 闭包是一种在函数内访问和操作外部变量的方式
• 所有的函数都是闭包
• 函数可以访问它被创建时上下文环境,称为闭包——《JavaScript语言精辟》
• 内部函数比它的外部函数具有更长的生命周期

闭包应用场景:
• 实现私有成员
• 保护命名空间
• 避免污染全局变量
• 变量需要长期驻留在内存
闭包用处:
• 读取函数内部的变量
• 让这些变量的值始终保存在内存中
使用闭包注意事项:
• 闭包会使得函数中的变量保存在内存中,内存消耗比较大,所以不能滥用闭包,否则容易造成网页性能问题,在IE中可能会导致内存泄漏。解决办法是:在退出函数之前,将不使用的局部变量全部删除。
• 闭包在父函数外部,改变父函数内部变量的值。

参考:学习Javascript闭包(Closure)

3.函数式编程
函数式编程是种编程规范,它将电脑运算视为函数的计算。函数式编程的重点是函数的定义而不是像命令式编程那样强调状态机(state machine)的实现。

JavaScript中函数的特性:
• 函数并不总是需要名称
• 函数可以像其他值一样分配给变量
• 函数表达式可以编写并放在括号中,留待以后应用
• 函数可以作为参数传递给其他函数
JavaScript中函数式编程的一些特性:
• 函数是顶层对象:function是JavaScript中最基础的模块,本身是一种特殊的对象;不依赖与任何其他对象可以独立存在;一切皆是可传入function的值,连function本身也不例外
• 高阶函数:对函数的进一步抽象。如Array.sort(function)是JS引擎提供的一个高阶函数。(传入的function是比较函数,如果没有传入参数,默认通过转换后的ASCII码进行比较)
• 闭包
• 函数柯里化(Currying):在计算机科学中,柯里化是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并返回接受余下的参数而且返回结果的新函数的技术。
柯里化就是预先将函数的某些参数传入,得到一个简单的函数。但是预先传入的参数被保存在闭包中,因此会有一些奇特的特性。
• 函数式代码风格:连续运算,如连续赋值(var a=b=c=5;),短路条件(a=a||''; a&&a++;),三元表达式(a>b?a++:a--);链式调用

使用函数式编程的优点:
• 函数内的运算对函数外无副作用
• 便于调试和单元测试
• 编写更加优美的回调
• 高内聚,低耦合的一种体现

二、引擎
1.主流浏览器的JS引擎
JavaScript引擎是一个专门处理JavaScript脚本的软件程序,一般会附带在网页浏览器中。正是由于浏览器JS引擎不同,导致JavaScript的不兼容。
常见的JS引擎有:
V8(chrome),Carakan(opera),JaegerMonkey(firefox),Nitro(safair),Jscript(IE)

2.加载和执行
从源码到可执行代码:编译(complied)——>解释(interpreted)
JavaScript代码执行的过程:语法检查(词法分析->语法分析)——>运行时(预编译->运行)
预编译时:1.将上下文的var申明变量放入"栈"中并赋值为undefiend;2.读入"定义"的函数

常见问题:
判断变量存在:alert(a === undefiend); 推荐:alert(typeof a === 'undefiend');

3.垃圾回收
JavaScript不需要手动的释放内存,它使用一种自动垃圾回收机制(garbage collection)。当一个对象无用的时候,即程序中无变量引用这个对象时,就会从内存中释放掉这个变量。如果两个对象相互引用,没有第三个对象来引用,那么这两个对象也会被回收。

三、Web性能
1.快速响应的用户界面

异步执行JavaScript:Web Worker Web Worker的使用

2.DOM编程
减少Reflow/paint:性能攸关的大事
Repaint:透明度改变;文字颜色变化;背景颜色变化;背景图片变化
Reflow:页面渲染过程中;Dom结构变化;浏览器窗口大小改变;布局变化

javascript_dom_time

优化提升,使用事件代理:
• 避免重复绑定
• 减少事件绑定的处理时间
• 减少内存的使用
• 对新插入的节点不用再次绑定

3.Ajax性能
• 两种主流的请求方式
• 两种发送数据技术
• 数据格式
• Ajax性能指南