未加星标

React全栈--现代前端技术

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏
1.ES6-- 新一代javascript标准 1.1 const和let关键字

以前只有全局变量以及函数内部的局部变量,所以以前的局部变量只能定义在函数里面,但是现在不是了,可以通过let关键字来定义局部变量。同时通过const关键字来定义常量,定义后的基本类型数据是不能改变的,但是定义的是引用类型的变量的话,还是可以改变的。

1.2 函数

1.箭头函数,在回调中很有作用,箭头函数永远是匿名的

2.this在箭头函数中的使用:在嵌套函数中,碰到setInterval, setTimeout等定时器函数时,this会发生漂移,指向windows(global对象),以前我们要将this缓存[var self = this;]()或者通过[(){}.bind(this]())来改变this的内部函数的指向,但是有了箭头函数后,再也不用更担心这个问题了; 3.函数默认参数,以前的函数默认参数 [var a = a || []]();但是ES6支持了函数的默认参数; 4.rest参数[...](),rest参数是没有指定变量名的参数数组,而arguments是所有参数的集合。而且arguments参数不是一个真正的数组,而rest参数是一个真的数组,可以调用sort和map方法。可以告别arguments参数了; 1.3.展开符操作

...可以用于函数的调用,数组字面量,以及对象的展开(ES7).

1.4.模板字符串

用反引号标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。模板字符串中嵌入变量,需要将变量名写在 ${} 之中。

// 字符串中嵌入变量 var name = "Bob", time = "today"; Hello {name}, how are you {time}? 1.5 解构赋值

解构方法可以很快的从数组或者对象中提取变量,可以用一个表达式读取整个解构;

1.6 类

JavaScript是原型继承的,但声明起来却很怪,所有提供了一个原型链的class语法糖。通过 class 关键字定义了一个“类”,可以看到里面有一个 constructor 方法,这就是构造方法,而 this 关键字则代表实例对象。constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。

注意,定义“类”的方法的时候,前面不需要加上 function 这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。类的数据类型就是函数,类本身就指向构造函数。

Class之间可以通过 extends 关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。

子类必须在 constructor 方法中调用 super 方法,否则新建实例时会报错。这是因为子类没有自己的 this 对象,而是继承父类的 this 对象,然后对其进行加工。如果不调用 super 方法,子类就得不到 this 对象。另一个需要注意的地方是,在子类的构造函数中,只有调用 super 之后,才可以使用 this 关键字,否则会报错。这是因为子类实例的构建,是基于对父类实例加工,只有 super 方法才能返回父类实例。

super 这个关键字,既可以当作函数使用,第一种情况, super 作为函数调用时,代表父类的构造函数。第二种情况, super 作为对象时,指向父类的原型对象。可以采用super(). + 方法名字来调用父类的方法。

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上 static 关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

1.7 模块

1.首先推出Require.js的AMD规范,Node.js诞生后,随之而来的是CommonJS格式,后来的browerify,知道es6推出了模块化,对模块化进行了支持;

es6模块功能主要由两个命令构成: export 和 import 。 export 命令用于规定模块的对外接口, import 命令用于输入其他模块提供的功能。通过as取别名。

export {firstName, lastName, year}; import {firstName, lastName, year} from './profile'; function setName(element) { element.textContent = firstName + ' ' + lastName; } 1.8 使用Babel

各种方案层出不穷,JavaScript不断发展,导致很多性能无法普及,babel提供了JavaScript多用途编译器。让你可以开心的使用ES6.

Babel通过安装插件(plugin)或者预设(preset,就是一组设定好的插件)来编译代码。创建一个.babelrc文件。

{ "presets":[], "plugins":[] } 2.Component组件与模块化

首先要明白两个概念:模块(module)和组件(component),模块是指的语言层面的,在前端大多数指的是一个JavaScript模块,往往变现为一个JavaScript文件,以及其对外暴露的一些属性和方法。组件更偏向于业务层面,往往是一个独立功能的实现,比如一个下拉菜单,文本编辑器,路由系统等。一个组件往往包括其所需的所有资源,包括逻辑js,样式css,模板html(template),甚至图片和文字。

2.1模块化方案的阶段

1.全局变量+命名空间:

避免污染全局作用域,模块内部通常用匿名自执行函数。问题多多:(1)依赖全局变量,污染全局变量的同时,不安去.(2)依赖约定的命名空间,不可靠。(3)要手动管理并控制执行,容易出错,在上线前要手动合并一些模块

2.AMD+CommonJs

解决时上述的问题,全局下定义require和define,不需要其他变量

通过文件路径或模块声明来定义模块

依赖与加载都是由加载器完成,提供了打包工具自动分析依赖并合并

3.ES6模块化

JavaScript带来了自己的模块化方案,相比AMD/CommonJS,功能更强大,引用和暴露的方式更多样,支持复杂的静态分析,使构建工具更细粒度地移除模块实现中的无用代码。

2.2 组件化阶段

1.基于命名空间的多入口文件

基于前面的第一种模块化方案,不同资源手动导入,最典型的就是jQuery插件;

2.基于模块的多入口文件

随着前端模块化方案的流行,组件也趋于AMD这样的规范,把组件也暴露为一个模块。一个AMD模块的JavaScript,一个CSS(Less,Sass)模块的样式,以及其他资源。

3.单JavaScript入口的组件

这是现在比较流行的方案,借助browerify、webpack这样的打包工具,允许我们将一般的资源当做JavaScript模块来对待。并一致的加载进来。

4.Web Component

这是组件化里的国家队,与2011年提出,但是还处于不温不火的状态,主要包括自定义元素(Custom Element)、HTML模板(HTML Template)、Shadow DOM、HTML 的引入(HTML Import)

3.前端开发常用工具

1.包管理工具

用来安装、管理和分享JavaScript包,同时自动处理多个包之间的依赖。主要有包管理工具,Bower、Component、Spm、以及Node.js的亲儿子npm;

2.任务流工具

在前端项目中会遇到各种各样的任务,比如压缩合并代码、验证代码格式、测试代码、监视文件等等,执行这些方法不可能每次都去手动写这些命令,非常麻烦,接触linux的肯定会想到shell脚本。现在前端比较流行的有Grunt和Gulp两个;

3.模块打包工具

主要有bundler和webpack两个,webpack作为后起之秀,它支持AMD、CommonJS类型,通过loader机制也可以使用ES6的模块格式,正向一个全能型构建工具发展。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:React全栈--现代前端技术
本站链接:http://www.codesec.net/view/534007.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(63)