lyuke / warehouse Goto Github PK

在Java和C语言的编程语言中，花括号内的每一段代码都具有各自的作用域，而且变量在声明他们的代码段之外是不可见的，这被称为块级作用域。而JavaScript中却使用的是函数作用域。变量在声明他们的函数体内以及这个函数嵌套的任意函数体内都是有意义的。

function test(o){
    var i=o;
    if(typeof o == "object"){
        var j=o;  
        for(var k=0;k<10;k++){
            console.log(k);      //输出0-9
        }
        console.log(k);    //输出10
    }
    console.log(j);
}

JavaScript中的函数作用域是指在函数声明的所有变量在函数体内书中是可见的。JavaScript的这个特性被非正式的成为声明提前。即JavaScript函数里声明的所有变量（但不涉及赋值）都被“提前”至函数体的顶部。

typescript中的一个核心**是类型检查，通常这个方式叫做鸭式类型，或者叫结构化子类型。在typescript中interfaces弥补了命名变量的方式，是一种在你的代码和项目之外定义数据类型的格式的有利方式。

first interface

interface LabelledValue {
    label: string;
}

function printLabel(labelledObj: LabelledValue) {
    console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

上面是一个interface的例子，说明interface只是一种定义数据格式方式。只需要传入数据中含有该数据类型，就能满足要求。而且值得注意的是这些类型检查不需要这些属性按照顺序来排列，只要interface中的属性满足传入参数中的属性就行。

option interface
interface中的属性并不都是必须的，一些属性只有在特定条件下才能存在或者根本不存在，例如流行的“option bags”模式，可以向函数中传入部分需要的参数。

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
    let newSquare = {color: "white", area: 100};
    if (config.color) {
        newSquare.color = config.color;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

let mySquare = createSquare({color: "black"});

带有可选属性的interface只要在变量后加上 **？**就行。

1.规则1--减少http请求

• 图片地图
• css sprites
• 合并脚本和样式表

2.规则2--使用内容发布网络（cdn）
3.规则3--添加expires
4.规则4--压缩组件

• Gzip
• 代理缓存

5.规则5--将样式表放在顶部
6.规则6--将脚本放在底部
7.规则7--避免css表达式
8.规则8--使用外部JavaScript和css
9.规则9--减少CDN查找

• 采用cdn缓存
• TTL(Time-to-live)

10.规则10--精简JavaScript
11.规则11--避免重定向
12.规则12--移除重复脚本
13.规则13--配置Etag
应该配置或者移除Etag, 可能会影响网站性能,还会有安全问题。

14.规则14--使Ajax可缓存

Promise 主要用于异步计算的对象，promise代表这个操作现在未完成，但是会在预期完成。

var p=new Promise(function(resolve,reject){
     if(/*-------good----------*/){
        resolve("worked");
     }else{
       reject("error");
     }
})

通过new 一个Promise对象来进行一个生成一个promise对象。resolve()用于处理执行成功的场景，reject()用于处理执行失败的场景。

一个Promise的状态可以是

• pending 初始状态
• fulfilled 成功的状态
• rejected 失败的状态
• settled 结束的状态

p.then(function(result){
   console.log(result);
},function(err){
  console.log(error);
});

当promise被执行的时候，在then中，前一个函数执行成功的数据，后一个函数负责处理错误，由于在resolve中可以继续传入promise对象，所以可以采用以下的方式来进行链式调用。这种方式可以防止回调地狱。

p.then(function(){})
 .then(function(){}).
 .catch(function(){})

Promise中的方法

• Promise.all(array )创建一个 Promise，当且仅当传入数组中的所有 Promise 都肯定之后才肯定，如果遇到数组中的任何一个 Promise 以否定结束，则抛出否定结果。每个数组元素都会首先经过 Promise.resolve，所以数组可以包含类 Promise 对象或者其他对象。肯定结果是一个数组，包含传入数组中每个 Promise 的肯定结果（且保持顺序）；否定结果是传入数组中第一个遇到的否定结果。
• Promise.race(array) 这个方法返回一个promise，这个promise在iterable中的任意一个promise被解决或拒绝后，立刻以相同的解决值被解决或以相同的拒绝原因被拒绝。我理解的是array中的promise在赛跑，谁先完成，父promise就做出相同的操作。
• Promise.reject(value) 调用Promise的rejected句柄，并返回这个Promise对象。
• Promise.resolve(value) 用成功值value完成一个Promise对象。如果该value为可继续的（thenable，即带有then方法），返回的Promise对象会“跟随”这个value，采用这个value的最终状态；否则的话返回值会用这个value满足（fullfil）返回的Promise对象。

浏览器兼容性
目前IE浏览器是完全不兼容promise，其他浏览器部分兼容。详细见http://kangax.github.io/compat-table/es6/

/-------------------------------------------------------------------------------------------------------------/
angular 1.5.5 中可以采用$q 来实现部分promise。

function asyncGreet(name) {
  // perform some asynchronous operation, resolve or reject the promise when appropriate.
  return $q(function(resolve, reject) {
    setTimeout(function() {
      if (okToGreet(name)) {
        resolve('Hello, ' + name + '!');
      } else {
        reject('Greeting ' + name + ' is not allowed.');
      }
    }, 1000);
  });
}

var promise = asyncGreet('Robin Hood');
promise.then(function(greeting) {
  alert('Success: ' + greeting);
}, function(reason) {
  alert('Failed: ' + reason);
});

Reference:
http://www.html5rocks.com/en/tutorials/es6/promises/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
https://docs.angularjs.org/api/ng/service/$q

1.什么是Flex
Flex是一种弹性布局，相比于之前的基于盒模型的布局，flex对于布局的控制更加简单。
目前大部分现代浏览器已经支持了flex布局。
任何一个容器都可以指定为Flex布局。

div{
   display:flex;
}

行内元素也可以使用Flex布局。

div{
 display:inline-flex;
}

Webkit内核的浏览器，必须加上-webkit前缀

div{
  display:-webkit-flex;
  display:flex;
}

设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

2.flex 基本概念

弹性容器(Flex container)

包含着弹性项目的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。

弹性项目(Flex item)

弹性容器的每个子元素都成为弹性项目。弹性容器直接包含的文本将包覆成匿名弹性项目。

轴(Axis)

每个弹性框布局包含两个轴。弹性项目沿其依次排列的那根轴称为主轴(main axis)。垂直于主轴的那根轴称为侧轴(cross axis)。
flex-direction属性决定主轴的方向（即项目的排列方向）
总共有4个值
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿
justify-content 属性定义了在当前行上弹性项目沿主轴如何排布
flex-start
从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。
flex-end
从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。
center
伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。
space-between
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。
space-around
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半
align-items 属性定义了在当前行上弹性项目沿侧轴默认如何排布
flex-start
元素向侧轴起点对齐。
flex-end
元素向侧轴终点对齐。
center
元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。
baseline
所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。
stretch
弹性元素被在侧轴方向被拉伸到与容器相同的高度或宽度。
align-self 属性定义了单个弹性项目在侧轴上应当如何对齐，这个定义覆盖由 align-items 所确立的默认值.

方位(Direction)

弹性容器的各个边（主轴起点(main start)/主轴终点(main end)和侧轴起点(cross start)/侧轴终点(cross end)）描述了弹性条目流的起点与终点。它们具体取决于弹性容器的主轴与侧轴以及由 writing-mode 确立的方向（从左到右、从右到左，等等）

order 属性将元素与序号组关联起来，并决定哪些元素先出现
数值越小，排列越靠前，默认为0。order 可以设置负数。
flex-flow 属性是 flex-direction 和 flex-wrap 属性的简写，决定弹性项目如何排布。
flex-wrap 描述了flex 条目行的是被强制放在一行中或者是被放在多个行上 。如果允许换行，这个属性允许你控制行的堆叠方向。
nowrap
flex的元素被摆放到到一行，这可能导致溢出flex容器。 cross-start 会根据 flex-direction 的值 相当于start 或before。
wrap
flex 元素 被打断到多个行中。cross-start 会根据 flex-direction 的值 相当于start 或before。cross-end 为cross-start 的相对值
wrap-reverse
和wrap的表现一样但是 cross-start和cross-end 交替排列。

尺寸(Dimension)

根据弹性容器的主轴与侧轴，弹性项目的宽和高相应称为主轴尺寸(main size) 与 侧轴尺寸(cross size)。
min-height 与 min-width 属性初始值为 0。
flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写，确立弹性项目的伸缩性。
flex-grow CSS属性定义弹性盒子项（flex item）的拉伸因子。
CSS flex-shrink 属性指定了flex item的收缩规则
CSS 属性flex-basis 指定了flex item在主轴方向上的初始大小。如果不使用box-sizing来改变盒模型的话，那么这个属性就决定了flex item的内容盒（content-box）的宽或者高（取决于主轴的方向）的尺寸大小

reference：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

1.Boolean
最基本的是true/false类型

let isSuccess: boolean = true;

2.Number
和在javascript中一样，typescript中的数字都是二进制浮点数。typescript支持十进制，16进制，二进制和8进制的表示。

let decimal: number = 3;

let hex: number = 0xffff;

let binary: number = 0b1010;

let octal: number = 0o744;

3.String
Typescript中string表示字符串。和JavaScript中相同，字符串可以采用“ 或‘ ，字符串连接采用”+“。对于长字符串可以采用反引号 来表示，并且在可以使用${expr}`的表达式。

let text1: string = hello;

let name: string = Tom;

let sentence: string = hello ${name}

4.Array
有两种方式在Typescript中声明数组一种是使用[],另一种是使用Array

let list:number[]=[1,2,3];

let list2: Array=[1,2,3];

5.Tuple
元组类型是能够让你声明一种已知固定元素数量类型的数组，这些类型不必相同。
6.Enum
Typescript为JavaScript添加了枚举类型

enum Color {Red, Green, Blue};
let c: Color = Color.Green;

枚举类型默认值从0开始，也可以设置从1开始。

enum Color {Red = 1, Green, Blue};
let c: Color = Color.Green;

也可以为每个枚举类型设置数值

enum Color {Red = 1, Green = 2, Blue = 4};
let c: Color = Color.Green;

还可以通过枚举类型的对应的数字来获取枚举类型的名称。

enum Color {Red = 1, Green, Blue};
let colorName: string = Color[2];
alert(colorName);

7.Any
Any类型可以用于表示不确定或者会动态变化的类型。

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false;

8.Void
void 表示函数不返回任何值

function warnUser(): void {
    alert("This is my warning message");
}

声明一个void的变量是没用的，因为你只能给它赋值null或undefined

9.Type assertions
类型推断是比较有用的。能够告诉编译器我明确知道该变量的类型。
类型推断有两种写法。
一种是angle-bracket。

let someValue: any = "this is a string";
let strLength: number = (someValue).length;

另一种是as

let someValue:any="hello world";
let strLength: number = (someValue as string).length;
这两种没什么区别，但在jsx中只能用第二种。