8.模块化
8.1 什么是模块？ 模块（modules)就是使用不同的方式加载的js文件．模块代码和脚本(script)有不同的语义. 模块代码自动运行在严格模式下,并且没有任何办法跳出严格模式 在模块代码的顶级作用域创建的变量,不会被自动添加到共享的全局作用域,只会在模块顶级作用域的内部存在 模块的顶级作用域的this值为undefined, 模块不允许在代码中使用HTML风格注释 对于需要让模块外部代码访问的内容,必须导出它们 允许模块从其它模块导入绑定._ 模块的主要能力是按需导出和导入代码的能力.,不用把所有的内容放在同一个文件内 基本的导出 可以使用export 关键字把已经写好的功能代码,拆分之后给其它的模块.最直接的方法就是export放置在任意的变量,函数或类声明之前. export var user = "ggb"; export let age = 11; export const a = 1; export function num(){ return 1; } export class users { constructor(){ this.len = 1; this.str = '2' } } function sub(){ return 2; } export default sub export […]
7.Promise
背景 Promise 主要的功能就是为了更好的解决异步编程问题.工作方式就是用于延迟代码执行并在未来执行当前这个作业. 一个Promise指定一些稍后要执行的代码,这个工作机制就和我jquery AJAX 中回调函数一样.明确标示作业代码是..否执行成功.以成功处理或失败处理为准.把promise串联在一起. 异步编程的背景 JS引擎建立在单线程事件循环的概念上,什么是单线程:单线程意味着同一时刻只能执行一段代码.这和其它语言比C++,JAVA,可以同时执行多段不同代码的多线程语言不一样. 多段代码可以同时访问或修改状态.但是维护很难. JS引擎因为同一时刻只能执行一段代码.所以不用管另外的可能会运行的代码.js代码在执行中会把代码放置在作业队列中(job qeeue) ,在我们js代码中每一段准备被执行,就会被添加进作业队列.当结束当前代码执行后,就会进入下一个代码作业.这就是所谓的事件循环.是一个内部处理线程,可以监视代码执行并管理作业队列,因为是队伍.所以一定是依次进行.直到最后一个. 7.1 事件模型 当用户点击一个按扭或在键盘上按下一个健时.一个事件(event),比如onclick被触发.这个事件可能会对此交互进行响应,从而把一个新的代码作业添加到我当前的作业的队列尾部.这就是异步编程的最基本的形式.事件事处理程序代码一直到事件发生后才会被执行.比如: let oBtn = document.getElementById('btn'); oBtn.onclick=function(){ alert('中国') } 以上代码,alert(中国) 直到oBtn点击之后才会执行.当被点击之后.赋值给onclick的匿名函数就被添加到了作业队列的尾部,并在队列前所有的任务结束之后再执行 7.2 回调模式 回调函数模式类似于事件模型.因为也会在后面一个时间点执行.不同的地方是回调是以参数的形式传入. //下课后补全 $.ajax({ url:'1.txt', success:function (res) { $.ajax({ url:'1.txt', success:function(){ $.ajax({ url:'1.txt', success:function(){ $.ajax({ url:'1.txt', success:function(){ $.ajax({ url:'1.txt', success:function(){ } } ) } } ) } } ) } […]
7.Set与Map
7.1 Set 是一个无重复值的有序列表.允许对它包含的数据进行快速的访问.增加了一个追踪离散值的方式. 7.1.1 创建set并添加项目. let set = new Set(); set.add(1) set.add('1') console.log(set.size) 以上使用了add()方法向set中添加了项目.可以通过size属性能查看有多少项. Set不会使用强制类型的转换来判断当前值是否重复.允许存在不同类型的相同值,但是有一个例外 0 -0 和 +0 被认为是一样的 let set = new Set(); set.add(1) set.add(-1) set.add(0) set.add(-0) set.add(+0) set.add('1') console.log(set.size) //4 也可以添加多个对象,但是多个对象并不会认为是一同一项 let set = new Set(), a = {}, b = {}; set.add(a) set.add(b) console.log(set.size) //2 如果add()方法对相同的值进行多次调用,会在第一次之后被忽略; let set = new Set(); […]
6.符号 Symbol
新的基本类型:符号 (Symbol),刚刚设计出来的时候的被用于创建对象的私有成员.也是javascript开发者一直期待的一个功能特性.这个私有名称最后就成了ES6 中的符号. 6.1 创建symbol Symbol没有字面量的形式.可以用全局的symbol函数来创建一个符号值: let first = Symbol('frist'); let obj = {}; obj[first] = '大明王朝1566'; console.log(obj[first]) 以上代码创建了一个symbol类型 frist 变量.并把它作为obj对象的一个属性.每次访问属性都要使用这个symbol符号值. 因为symbol基本类型值.因为不能使 new 操作符,如果使用会报错.但是可以通过 new Object(Symbol()) 来创建一个符号实例,在经验中和 Symbol() 没有任何的区别. Symbol还可以接受一个参数用于描述符号值.可用开发调试.比如: let first = Symbol('frist'); let obj = {}; obj[first] = '大明王朝1566'; console.log(obj[first]) console.log(first) //Symbol(frist) 符号的描述信息存在内部属性[[desription]]中.当Symbol的toString()方法被调用(隐式或显示).这个信息就会被读取. 因为是基本类型,所以可以使用typeof 操作符来判断一个变量是否为Symbol类型 let first = Symbol('frist'); console.log(typeof first) //symbol 6.2 […]
5.解构 – 更方便的数据访问
对象和数组的字面量是我们最常用的两种方式,已经是我们这门语言很重要的组成部分.在写代码的时候,基本上任何时候都会在定义对象和数组.定义之后再从这些结构中取出数据. ES6增加了解构功能.是一个把数组结构分解到更小更精更细的部分的过程 .今天的课程以此展开. 5.1 解构有什么用 在ES6之前,从对象或是数组中获取数据,或是信息.需要写很多相似的代码 比如: let options = { x:true, y:false } let x = options.x, y = options.y; 以上的代码显示了从对象中取出数据,赋值给了同名的本地变量上.如果只有这样两个.其实也还好.但是如果想象一下有100个.我们是不是需要一个个拿出来赋值,并且如果有一个嵌套的数据结构还要遍历寻找信息,在这种情况下.可能我们只是想要拿出其中一个小节的数据.去深挖整个数据结构。 基于这种情况。ES6增加了个解构赋值的功能。 5.2 对象解构 对象解构在赋值语法的左侧用了对象字面量，比如： let user = { name:"赵中", age:20 } let {name,age} = user; console.log(name) console.log(age) 以上代码中.user.name的值被赋值给了本地的变量 name ,user.age给了本地变量age.以上这种写法,属于简写的属性初始化器.name,age标识符代表了本地变量.也读取了相应的属性值 当使用解构来配合var,let,const 来声明变量时.必须提供初始化(也就是等号右边的值) 比如: var {name,age}; //语法错误 let {name,age}; //语法错误 const {name,age} //语法错误 const […]
对象的扩展
在ES6当中把对象这块内容做了提升的效用.因为js中基本上所有的值,都是某些类型的对象. 4.1 对象字面量语法的扩展 对象字面量是js中最常用的模式之一,(json就是基于这种语法.对象字面量的一个普遍性.是因为它的简洁可以少写很多不必要的代码.对 于程序员来说.能少一个字母都是好的. 在我们之前的es5当中,对象字面量必须是名/值对的组合.但是有可能属性值在被始化的时候有些重复.比如 function creFn(name,age){ return { name:name, age:age } } 以上属性名和参数名相同,这个结果重复了name和age.在返回的值当中.左边的name是名 右边是值.然后右边的name赋值给了左边的name. 哪么在ES6中.可以更加简洁.比如: function creFn(name,age){ return { name, age } } 当对象中的字面量中的属性只有名称时,js解释器会在周边作用域查找同名的变量.如果找到了,就会把值赋值给同名的属性. 4.2 方法简写 ES6改进了为对象字面量的方法赋值的语法.在早期ES5之前.我们必须指定一个名称并且完整的函数定义来为对象添加方法,比如: var obj = { run:function(){ return 'hello world' } } 哪么通过es6可以更简洁.比如: var obj = { run(){ return 'hello world' } } 以上这个案例具有和ES5方法的所有的相同特征和能力,唯一的区别是简写的方法不能使用super, 4.3 需要计算的属性名 需要计算的属性名.其实是在ES5或更加的版本.用于对象实例.只要用方括号表示法来代替小数点表示法就可以. 比如: […]
函数
3. 函数 函数在任何语言中都是最重要的一部分,没有之一!js函数中.从这门语言诞生到现在…除了遇到了es6之后.发生了一次比较大的化.之前其实都是没有什么变化.但是并不是说完美的…还是有改进的空间. 3.1 在ES5中模拟默认的参数 function ajax(url,type,timeout,callback){ timeout = timeout || 5000 ; type = type || 'get'; callback = callback || function(){return 1} // 其它代码 } 以上这个例子.type和callback 参数是可选的,因为在没有参数的时候,会使用默认值,||或运算符在左侧为假的情况下.返回右侧的内容,因为我们的参数在没有传递的时候返回的是undefined.在逻辑或运算符中用来给缺失的参数提供默认值.但是有一个BUG,因为传进来的参数可能是 0 ,或运算符遇到0为假.所以timeout会被替换成5000 基于以上的情况.我们应该使用一种更加合理更加案例的方法 function ajax(url,type,timeout,callback){ timeout = (typeof timeout !== 'undefined') ? timeout : 5000 // 其它代码 } 这种方法,在今天也是比较常见的用法.虽然是安全的..但是代码量过多.而且代码了一个公共的模式.流行的js库中基本上这种写法到处都是..而在ES6当中有更方便的写法, 3.2 es6中的参数默认值 function ajax(url,type = 'get',timeout = […]
npm 教程
简介 npm，全名 node package manger。 npm 是Node的开放式模块登记和管理系统，是Node.js包的标准发布平台，用于Node.js包的发布、传播、依赖控制，网址：https://www.npmjs.com/ npm 提供了命令行工具，可以方便地下载、安装、升级、删除包，也可以让你作为开发者发布并维护包 npm 如何使用 npm 在按照 Node.js 时会连带被安装。但有可能不是最新版本，需要 npm install npm@latest -g 升级到最新版本。 基本命令： # 查看 npm 命令列表 $ npm help # 查看各个命令的简单用法 $ npm -l # 查看 npm 的版本 $ npm -v # 查看 npm 的配置 $ npm config list -l npm 的使用 npm init 初始化 package.json […]
模板字面量
2. 模板字面量 es6之前.想实现多行字符串,要么使用一个原来js,语言级bug来实现一个多行. 把字符串替换已存在的变量值的能力 HMTL转义 2.1 基本语法 使用一个反引号 “ 用来包含普通字符串,而不是之前的双引号或单号 let msg = `hello ES6`; console.log(msg) 在以上这 个案例中,并没有感受到和之前有什么不一样. 如果想要输出反引号 “ 可以使用 转义符 \ let msg = `\`hello ES6\“; console.log(msg) 在模板字符串里面.如果想要输出单引号或双引号.就不需要转义符 \ let msg = `"hello"'ES6'`; console.log(msg) 2.1 多行字符串 在ES6之前想要实现多行字符串.可以使用一个语法BUG,在换行之前使反斜线 ( \ ),可以用于创建多行字符串.为什么不用.因为是一个语言级的BUG.你不知道什么时候他被修复了. var msg = "hello \ ES6"; console.log(msg) 这里确实换行了.并且可以被输出.但是打印的时候并不会真正的换行.因为反斜线 ( \ )是延续符号,而不是新行的符号.如果你想要在输出中换行.可以这样写 var msg […]
ES6 块级绑定
1. 块级绑定 基本上在类C语言中,变量的创建总是在它被声明的地方.但javascript并非如此.变量实际的位置是取决于开发着如何声明它..基于这样的一个存在,ES6闪亮登场.提供了一个let,可以让你更容易更直观的控制变量的作用域. 1.1. 所谓的变量提升 如果我们使用var 声明变量.如果在函数内.不管我写在什么地方,都会被视为写在函数顶部.如果不在函数内.则视为全局作用域的顶部.就是所谓的变量提升 function getVal(cond){ if(cond){ var color = ‘blue’; return color; }else{ // color 在此处可以被访问 值为 undefined return null } } 以上代码在js解释器中会为被修改为 function getVal(cond){ var color if(cond){ color = ‘blue’; return color; }else{ // color 在此处可以被访问 值为 undefined return null } } 为了解决这个BUG..引入了块级作用域 块级声明也就是让所声明的变量在指定的块的作用域外无法被访问.块级作用域(词法作用域) 在一个函数内部 在一个代码块内部 {} 块级作用域是类C语言的工作机制. 1.2. let 声明 使用方法和var语法一致,基本上你可以用let来代替var进行变量声明,但是会把变量的作用域限制在当前的代码块当中.如果想要提升,需要手动操作 以下示例: function resu(val){ if(val){ let color = ‘blue’; return color; }else{ // […]