基本语法

查询记录

嵌套查询

获取文章列表及其评论内容

1
2
3
4
5
6
7
8
9
10

{
  articles {
    datas {
      title
      comments {
        content
      }
    }
  }
}

带参数的搜索

1
2
3
4
5
6
7
8
9
10
11
12
13
14

{
  articles(limit:1, page:2) {
    pageInfo {
      totalPages
      perPage
    }
    datas {
      title
      comments {
        content
      }
    }
  }
}

聚合查询

同时查询多个不关联的Schema，常用于同一个前端页面中不同信息的获取

1
2
3
4
5
6
7
8
9
10
11
12
13

query All {
  articles(limit:1, page:2) {
    datas {
      title
    }
  }
  
  authors (limit:1){
  	datas {
      name
    }  
  }
}

使用别名查询相同对象

得到的结果将会以别名进行命名

1
2
3
4
5
6
7
8

{
  articleA: article(title: "标题4") {
    content
  }
  articleB: article(title: "标题3") {
    content
  }
}

使用片段查询相同字段

即使能使用别名查询相同的对象，但是在大多数情况，依然会取相同对象的相同字段，这时候可以使用片段来定义我们需要取用的字段，而不用每个对象都去重复写了。并且片段内同样可以定义变量

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
  articleA: article(title: "标题4") {
    ...articleFields
  }
  
  articleB: article(title: "标题3") {
    ...articleFields  
  }
}

fragment articleFields on ArticleSchema {
    id
    content
    createdAt
    updatedAt
}

带变量的查询

页面上，左下角可以输入查询参数QUERY VARIABLES，可以输入变量的值{ "limit": 2 }，下面的查询中limit默认值为1

1
2
3
4
5
6
7
8
9
10
11
12
13

query Test($limit: Int = 1) {
  articles(limit: $limit, page:2) {
    datas {
      title
    }
  }
  
  authors (limit: $limit){
  	datas {
      name
    }  
  }
}

为操作命名

前面的语法大多数都省略了查询名称，这是因为查询名称的有无对查询结果并无影响，但是在写入或者是需要详细记录用户查询日志的时候，我们可以让用户传入查询名称，甚至可以用这个来做鉴权。

一个简单的查询名称如下所示，其中操作类型可以为query、mutation或subscription。

1
2
3
4
5

query myArticle {
  article (title:"文章4") {
    content
  }
}

使用指令(Directives)实现条件查询

当我们要通过某个条件来判断是否获取某个字段的时候可以使用指令来实现，指令包括两种，@include(if: Boolean)表示在参数为true时包含此字段，@skip(if: Boolean)表示在参数为true时跳过此字段。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

query Test($limit: Int = 1, $withComments: Boolean!) {
  articles(limit: $limit, page:2) {
    datas {
      title
      comments @include(if: $withComments) {
        id
        content
      }
    }
  }
  
  authors (limit: $limit){
  	datas {
      name
    }  
  }
}

对应的参数为，如果改变withComments的真假会得到不同的结果。

1
2
3
4

{
  "limit": 2,
  "withComments": false
}

使用内联片段(Inline Fragments)实现接口类型查询

这里的接口并不是指API接口，而是指对象类型的接口，例如PHP/Java开发中的interface类，在python里面直接就是某个基类，基于接口可以实现不同的对象。下面的方式就能查询出作者信息，并根据业余作者和专业作者的不同查询出不同的字段。__typename可以在结果中返回其Schema名称，即元字段。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

{
  authors {
    datas {
      name
      writer {
        authorId
        __typename
        ... on OrdinaryWriterSchema {
          job
        }
        ... on ProfessionalWriterSchema {
          publishingHouse
        }
      }
    }
  }
}

添加记录

添加文章操作

1
2
3
4
5
6
7
8
9
10

// 根据文章ID删除文章操作
mutation {
  createArticle(authorId:123, content:"abc",title:"def") {
    ok
    article {
      content
      title
    }
  }
}

删除记录

1
2
3
4
5
6

// 根据文章ID删除文章
mutation {
  deleteArticle(articleId:6) {
    ok
  }
}

更新记录

1
2
3
4
5
6
7
8
9
10

// 根据文章ID更新文章内容
mutation {
  updateArticle(articleId:2, content:"更新内容") {
    ok
    article {
      title
      content
    }
  }
}

类型系统

demo中涉及到了GraphQL的大部分对象类型，总结一下，GraphQL包含如下几种类型系统

查询和变更类型

即query和mutation

标量类型

包含Int(32位有符号整数)、Float(有符号双精度浮点数)、String(UTF-8字符序列)、Boolean、自定义类型。

枚举类型

列表和非空

类型定义的时候，后面加感叹号表示非空，它也可用在变量查询中。

1
2
3
4

type ArticleSchema {
  title: String!
  comments: [CommentSchema]!
}

接口类型(Interfaces)

类似基类或者抽象类，上面查询示例中有实际的例子。

1
2
3

interface AuthorWriterInterface {
  author_id: Int!
}

联合类型(Union Types)

和接口类型非常相似，但是它不用指定类型间的相同字段。这样表示：

1

union writers = OrdinaryWriterSchema | ProfessionalWriterSchema

输入类型(Input Types)

将一组需要复用的输入字段作为一个整体进行输入，只能用于输入，与返回的Schema无关。例如

1
2
3
4

input addArticleInput {
  title: String!
  content: String!
}

那么可以定义一个包含该输入类型的动作：

1
2
3
4
5

mutation CreateArticle($request: addArticleInput!) {
  createArticleMutation(request: $request) {
    article
  }
}

然后直接在variables中这样定义

1
2
3
4
5
6

{
  "request": {
    "title": "标题",
    "content": "内容"
  }
}

1.三元操作符

当想写if…else语句时，使用三元操作符来代替。

1
2
3
4
5
6
7

const x = 20;
let answer;
if (x > 10) {
    answer = 'is greater';
} else {
    answer = 'is lesser';
}

简写： const answer = x > 10 ? 'is greater' : 'is lesser'; 也可以嵌套if语句： const big = x > 10 ? " greater 10" : x

2.短路求值简写方式

当给一个变量分配另一个值时，想确定源始值不是null，undefined或空值。可以写撰写一个多重条件的if语句。

1
2
3

if (variable1 !== null  variable1 !== undefined  variable1 !== '') {
     let variable2 = variable1;
}

或者可以使用短路求值方法： const variable2 = variable1 'new';

3.声明变量简写方法

1
2
3

let x;
let y;
let z = 3;

简写方法： let x, y, z=3;

4.if存在条件简写方法

if (likeJavaScript === true) 简写： if (likeJavaScript) 只有likeJavaScript是真值时，二者语句才相等 如果判断值不是真值，则可以这样：

1
2
3
4

let a;
if ( a !== true ) {
// do something...
}

简写：

1
2
3
4

let a;
if ( !a ) {
// do something...
}

5.JavaScript循环简写方法

for (let i = 0; i < allImgs.length; i++) 简写： for (let index in allImgs) 也可以使用Array.forEach：

1
2
3
4
5
6
7
8

function logArrayElements(element, index, array) {
  console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[2] = 9

6.短路评价

给一个变量分配的值是通过判断其值是否为null或undefined，则可以：

1
2
3
4
5
6

let dbHost;
if (process.env.DB_HOST) {
  dbHost = process.env.DB_HOST;
} else {
  dbHost = 'localhost';
}

简写： const dbHost = process.env.DB_HOST 'localhost';

7.十进制指数

当需要写数字带有很多零时（如10000000），可以采用指数（1e7）来代替这个数字： for (let i = 0; i < 10000; i++) {} 简写：

1
2
3
4
5
6
7
8
9

for (let i = 0; i < 1e7; i++) {}

// 下面都是返回true
1e0 === 1;
1e1 === 10;
1e2 === 100;
1e3 === 1000;
1e4 === 10000;
1e5 === 100000;

8.对象属性简写

如果属性名与key名相同，则可以采用ES6的方法： const obj = { x:x, y:y }; 简写： const obj = { x, y };

9.箭头函数简写

传统函数编写方法很容易让人理解和编写，但是当嵌套在另一个函数中，则这些优势就荡然无存。

1
2
3
4
5
6
7
8
9
10
11

function sayHello(name) {
  console.log('Hello', name);
}

setTimeout(function() {
  console.log('Loaded')
}, 2000);

list.forEach(function(item) {
  console.log(item);
});

简写：

1
2
3
4
5

sayHello = name => console.log('Hello', name);

setTimeout(() => console.log('Loaded'), 2000);

list.forEach(item => console.log(item));

10.隐式返回值简写

经常使用return语句来返回函数最终结果，一个单独语句的箭头函数能隐式返回其值（函数必须省略{}为了省略return关键字） 为返回多行语句（例如对象字面表达式），则需要使用()包围函数体。

1
2
3
4
5
6
7

function calcCircumference(diameter) {
  return Math.PI * diameter
}

var func = function func() {
  return { foo: 1 };
};

简写：

1
2
3
4
5

calcCircumference = diameter => (
  Math.PI * diameter;
)

var func = () => ({ foo: 1 });

11.默认参数值

为了给函数中参数传递默认值，通常使用if语句来编写，但是使用ES6定义默认值，则会很简洁：

1
2
3
4
5
6
7

function volume(l, w, h) {
  if (w === undefined)
    w = 3;
  if (h === undefined)
    h = 4;
  return l * w * h;
}

简写：

1
2
3

volume = (l, w = 3, h = 4 ) => (l * w * h);

volume(2) //output: 24

12.模板字符串

传统的JavaScript语言，输出模板通常是这样写的。

1
2
3

const welcome = 'You have logged in as ' + first + ' ' + last + '.'

const db = 'http://' + host + ':' + port + '/' + database;

ES6可以使用反引号和${}简写：

1
2
3

const welcome = `You have logged in as ${first} ${last}`;

const db = `http://${host}:${port}/${database}`;

13.解构赋值简写方法

在web框架中，经常需要从组件和API之间来回传递数组或对象字面形式的数据，然后需要解构它

1
2
3
4
5
6
7
8
9

const observable = require('mobx/observable');
const action = require('mobx/action');
const runInAction = require('mobx/runInAction');

const store = this.props.store;
const form = this.props.form;
const loading = this.props.loading;
const errors = this.props.errors;
const entity = this.props.entity;

简写：

1
2
3

import { observable, action, runInAction } from 'mobx';

const { store, form, loading, errors, entity } = this.props;

也可以分配变量名：

1
2

const { store, form, loading, errors, entity:contact } = this.props;
//最后一个变量名为contact

14.多行字符串简写

需要输出多行字符串，需要使用+来拼接：

1
2
3
4
5
6

const lorem = 'Lorem ipsum dolor sit amet, consectetur\n\t'
    + 'adipisicing elit, sed do eiusmod tempor incididunt\n\t'
    + 'ut labore et dolore magna aliqua. Ut enim ad minim\n\t'
    + 'veniam, quis nostrud exercitation ullamco laboris\n\t'
    + 'nisi ut aliquip ex ea commodo consequat. Duis aute\n\t'
    + 'irure dolor in reprehenderit in voluptate velit esse.\n\t'

使用反引号，则可以达到简写作用：

1
2
3
4
5
6

const lorem = `Lorem ipsum dolor sit amet, consectetur
    adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim
    veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse.`

15.扩展运算符简写

扩展运算符有几种用例让JavaScript代码更加有效使用，可以用来代替某个数组函数。

1
2
3
4
5
6
7

// joining arrays
const odd = [1, 3, 5];
const nums = [2 ,4 , 6].concat(odd);

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = arr.slice()

简写：

1
2
3
4
5
6
7
8

// joining arrays
const odd = [1, 3, 5 ];
const nums = [2 ,4 , 6, ...odd];
console.log(nums); // [ 2, 4, 6, 1, 3, 5 ]

// cloning arrays
const arr = [1, 2, 3, 4];
const arr2 = [...arr];

不像concat()函数，可以使用扩展运算符来在一个数组中任意处插入另一个数组。

1
2

const odd = [1, 3, 5 ];
const nums = [2, ...odd, 4 , 6];

也可以使用扩展运算符解构：

1
2
3
4

const { a, b, ...z } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a) // 1
console.log(b) // 2
console.log(z) // { c: 3, d: 4 }

16.强制参数简写

JavaScript中如果没有向函数参数传递值，则参数为undefined。为了增强参数赋值，可以使用if语句来抛出异常，或使用强制参数简写方法。

1
2
3
4
5
6

function foo(bar) {
  if(bar === undefined) {
    throw new Error('Missing parameter!');
  }
  return bar;
}

简写：

1
2
3
4
5
6
7

mandatory = () => {
  throw new Error('Missing parameter!');
}

foo = (bar = mandatory()) => {
  return bar;
}

17.Array.find简写

想从数组中查找某个值，则需要循环。在ES6中，find()函数能实现同样效果。

1
2
3
4
5
6
7
8
9
10
11
12
13

const pets = [
  { type: 'Dog', name: 'Max'},
  { type: 'Cat', name: 'Karl'},
  { type: 'Dog', name: 'Tommy'},
]

function findDog(name) {
  for(let i = 0; i<pets.length; ++i) {
    if(pets[i].type === 'Dog' && pets[i].name === name) {
      return pets[i];
    }
  }
}

简写：

1
2

pet = pets.find(pet => pet.type ==='Dog' && pet.name === 'Tommy');
console.log(pet); // { type: 'Dog', name: 'Tommy' }

18.Object[key]简写

考虑一个验证函数

1
2
3
4
5
6
7
8
9

function validate(values) {
  if(!values.first)
    return false;
  if(!values.last)
    return false;
  return true;
}

console.log(validate({first:'Bruce',last:'Wayne'})); // true

假设当需要不同域和规则来验证，能否编写一个通用函数在运行时确认？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// 对象验证规则
const schema = {
  first: {
    required:true
  },
  last: {
    required:true
  }
}

// 通用验证函数
const validate = (schema, values) => {
  for(field in schema) {
    if(schema[field].required) {
      if(!values[field]) {
        return false;
      }
    }
  }
  return true;
}


console.log(validate(schema, {first:'Bruce'})); // false
console.log(validate(schema, {first:'Bruce',last:'Wayne'})); // true

现在可以有适用于各种情况的验证函数，不需要为了每个而编写自定义验证函数了

19.双重非位运算简写

有一个有效用例用于双重非运算操作符。可以用来代替Math.floor()，其优势在于运行更快，可以阅读此文章了解更多位运算。 Math.floor(4.9) === 4 //true 简写： ~~4.9 === 4 //true 本文翻译于SitePoint：www.sitepoint.com/sho…

Adobe Creative Cloud套装近日迎来了全新的2017年版本，所有组件都焕然一新，包括Photoshop、Illustrator、InDesign、Dreamweaver、Lightroom、After Effects、Premiere Pro等等，并且支持简体中文。 Photoshop自然是最受关注的，这次最新的Photoshop CC 2017也没有让我们失望，加入了大量实用、强悍的新功能，这里简单说说几个最常见的。 首先是程序内搜索(搜索图标或Ctrl+F)，可以直接查找菜单、面板、工具、资源、模板、教程甚至是图库照片等等。 而这只是新版便捷使用的一部分，同时你还可以直接访问预设(获取免费模板)、直接应用Adobe Stock市场模板和素材，还能分享到公共云上。 作为PS的传统绝技，抠图和液化功能更加强大，可以更高效快捷地抠出复杂的图片，对付各种毛发边缘也很轻松，而液化的时候甚至可以智能识别自动处理人的两只眼睛。  SVG格式图片现在可以一键粘贴直接导入Adobe XD，图层右键中也能复制SVG，同时对SVG格式字体的支持也更好，包括多种颜色和渐变，栅格或矢量格式。 新建窗口做了全新设计，功能更加丰富，而且号称速度更快。属性面板也做了小改动。

全套cc2017下载地址：百度云  密码：nijk

本文主要展示使用canvas来实时的获取video并动态播放的例子。

function drawCanvas() {
if (videoElement.paused videoElement.ended) {
return;
}
var canvas = $(“#canvas”);
var _canvas = canvas.get(0);
context = _canvas.getContext(“2d”);
canvas.attr({
width: videoElement.videoWidth,
height: videoElement.videoHeight
})

context.clearRect(0, 0, videoElement.videoWidth, videoElement.videoHeight);
context.fillStyle = ‘red’;
context.fillStyle = ‘rgba(255,255,0,0.5)’;
context.drawImage(videoElement, 0, 0, videoElement.videoWidth, videoElement.videoHeight, 0, 0, videoElement.videoWidth, videoElement.videoHeight);
if (videoElement.videoWidth > 0 && videoElement.videoHeight > 0) {
var filters = “blur(“ + (_blur.getCurVal() / 10) + “px) brightness(“ + (_brightness.getCurVal() / 10) + “) contrast(“ + (_contrast.getCurVal() / 10) + “) grayscale(“ + (_grayscale.getCurVal() / 100) + “) hue-rotate(“ + (_hue_rotate.getCurVal()) + “deg) invert(“ + (_invert.getCurVal() / 100) + “) saturate(“ + (_saturate.getCurVal() / 10) + “) sepia(“ + (_sepia.getCurVal() / 100) + “)”;
$(“#canvas”).css({
‘-webkit-filter’: filters,
‘max-width’: ‘100%’
});
}
setTimeout(drawCanvas, 24);
}

TableCell 对象代表一个 HTML 表格单元格。 在一个 HTML 文档中 标签每出现一次，一个 TableCell 对象就会被创建。

元素两端对齐

.container{
display: table;
border: 1px solid #06c;
padding: 15px 5px;
max-width: 1000px;
margin: 10px auto;
min-width: 320px;
width: 100%;
}
.container_box {
width: 10px;
height: 10px;
background:#000;
text-align: center;
display: inline-block;
font-size: 40px;
line-height: 100px;
}
.container_right {
text-align: right;
display: table-cell
}
.container_left {
text-align: left;
display: table-cell
}

字体图标加鼠标悬停效果

CSS3 transition 属性

transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

语法

transition: property duration timing-function delay;

transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性值 一、transition-property: 语法：

transition-property ： none all [ ] [ ‘,’ ]*

  transition-property是用来指定当元素其中一个属性改变时执行transition效果，其主要有以下几个值：none(没有属性改变)；all（所有属性改变）这个也是其默认值；indent（元素属性名）。当其值为none时，transition马上停止执行，当指定为all时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。其对应的类型如下： 1、color: 通过红、绿、蓝和透明度组件变换（每个数值处理）如：background-color,border-color,color,outline-color等css属性； 2、length: 真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width,min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position等属性； 3、percentage:真实的数字 如：word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width,max-height,line-height,height,background-position等属性； 4、integer离散步骤（整个数字），在真实的数字空间，以及使用floor()转换为整数时发生 如：outline-offset,z-index等属性； 5、number真实的（浮点型）数值，如：zoom,opacity,font-weight,等属性； 6、rectangle:通过x, y, width 和 height（转为数值）变换，如：crop 7、visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”,如：visibility 8、shadow: 作用于color, x, y 和 blur（模糊）属性,如：text-shadow 9、gradient: 通过每次停止时的位置和颜色进行变化。它们必须有相同的类型（放射状的或是线性的）和相同的停止数值以便执行动画,如：background-image 10、paint server (SVG): 只支持下面的情况：从gradient到gradient以及color到color，然后工作与上面类似 11、space-separated list of above:如果列表有相同的项目数值，则列表每一项按照上面的规则进行变化，否则无变化 12、a shorthand property: 如果缩写的所有部分都可以实现动画，则会像所有单个属性变化一样变化 具体什么css属性可以实现transition效果，在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型，。这里需要提醒一点是，并不是什么属性改变都为触发transition动作效果，比如页面的自适应宽度，当浏览器改变宽度时，并不会触发transition的效果。但上述表格所示的属性类型改变都会触发一个transition动作效果。 二、transition-duration: 语法：

transition-duration ： [, ]*

  transition-duration是用来指定元素 转换过程的持续时间，取值：为数值，单位为s（秒）或者ms(毫秒),可以作用于所有元素，包括:before和:after伪元素。其默认值是0，也就是变换时是即时的。 三、transition-timing-function: 语法：

transition-timing-function ： ease linear ease-in ease-out ease-in-out cubic-bezier(, , , ) [, ease linear ease-in ease-out ease-in-out cubic-bezier(, , , )]*

  取值： transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率，transition-timing-function有6个可能值： 1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). 2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0). 3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0). 4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0). 5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。 其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值，如下曲线所示，通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default. 其他几个属性的示意图： 四、transition-delay: 语法：

transition-delay ： [, ]*

  transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值：为数值，单位为s（秒）或者ms(毫秒)，其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。 默认大小是”0”，也就是变换立即执行，没有延迟。 有时我们不只改变一个css效果的属性,而是想改变两个或者多个css属性的transition效果，那么我们只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：transition-delay与transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的怭值为transition-duration第二个为transition-delay。如：

a {
-moz-transition: background 0.5s ease-in,color 0.3s ease-out;
-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
-o-transition: background 0.5s ease-in,color 0.3s ease-out;
transition: background 0.5s ease-in,color 0.3s ease-out;
}

  如果你想给元素执行所有transition效果的属性，那么我们还可以利用all属性值来操作，此时他们共享同样的延续时间以及速率变换方式，如：

a {
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}

  综合上述我们可以给**transition一个速记法：transition:    **如下图所示： 相对应的一个示例代码：

p {
-webkit-transition: all .5s ease-in-out 1s;
-o-transition: all .5s ease-in-out 1s;
-moz-transition: all .5s ease-in-out 1s;
transition: all .5s ease-in-out 1s;
}

  浏览器的兼容性: 因为transition最早是有由webkit内核浏览器提出来的，mozilla和opera都是最近版本才支持这个属性，而我们的大众型浏览器IE全家都是不支持，另外由于各大现代浏览器Firefox,Safari,Chrome,Opera都还不支持W3C的标准写法，所以在应用transition时我们有必要加上各自的前缀，最好在放上我们W3C的标准写法，这样标准的会覆盖前面的写法，只要浏览器支持我们的transition属性，那么这种效果就会自动加上去：

//Mozilla内核
-moz-transition ： [<’transition-property’> <’transition-duration’> <’transition-timing-function’> <’transition-delay’> [, [<’transition-property’> <’transition-duration’> <’transition-timing-function’> <’transition-delay’>]]*
//Webkit内核
-webkit-transition ： [<’transition-property’> <’transition-duration’> <’transition-timing-function’> <’transition-delay’> [, [<’transition-property’> <’transition-duration’> <’transition-timing-function’> <’transition-delay’>]]*
//Opera
-o-transition ： [<’transition-property’> <’transition-duration’> <’transition-timing-function’> <’transition-delay’> [, [<’transition-property’> <’transition-duration’> <’transition-timing-function’> <’transition-delay’>]]*
//W3C 标准
transition ： [<’transition-property’> <’transition-duration’> <’transition-timing-function’> <’transition-delay’> [, [<’transition-property’> <’transition-duration’> <’transition-timing-function’> <’transition-delay’>]]*

  通过上面，我想大家对CSS3的Transition属性的使用有一定的概念存在了，下面为了加强大家在这方面的使用，我们一起来看下面的DEMO。我们通过实践来巩固前面的理论知识，也通过实践来加强transition的记忆。 点击查看DEMO

CSS3 @font-face 规则 Internet Explorer 9, Firefox, Opera,Chrome, 和 Safari支持@font-face 规则. 但是, Internet Explorer 9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体. 注意： Internet Explorer 8 及更早IE版本不支持@font-face 规则. @font-face规则，网页设计师再也不必使用的”web-safe”的字体之一。 字体的名称，font - face规则： font-family: myFirstFont; 字体文件包含在您的服务器上的某个地方，参考CSS： src: url(‘Sansation_Light.ttf’) 如果字体文件是在不同的位置，请使用完整的URL： src: url(‘http://www.w3cschool.css/css3/Sansation\_Light.ttf') 现在准备使用该字体，下面是如何使用它所有的div元素的一个例子：

@font-face{font-family: FontName;src: url(‘url…’); /* IE9+ */}
div{font-family: FontName;}

首先制作自己的字体图标（制作方法请暂时百度，有空写个文章）

第一种方法

font-class引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。 与unicode使用方式相比，具有如下特点：

• 兼容性良好，支持ie8+，及所有现代浏览器。
• 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
• 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
• 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

使用步骤如下：

第一步：引入项目下面生成的fontclass代码：

<link rel="stylesheet" type="text/css" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<i class="iconfont icon-xxx"></i>

“iconfont”是你项目下的font-family。可以通过编辑项目查看，默认是”iconfont”。

第二种方法

symbol引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。
• 兼容性较差，支持 ie9+,及现代浏览器。
• 浏览器渲染svg的性能一般，还不如png。

使用步骤如下：

第一步：引入项目下面生成的symbol代码：

<script src="./iconfont.js"></script>

第二步：加入通用css代码（引入一次就行）：

<style type="text/css"> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true"> <use xlink:href="#icon-xxx"></use> </svg>

第三种方法

unicode引用

unicode是字体在网页端最原始的应用方式，特点是：

• 兼容性最好，支持ie6+，及所有现代浏览器。
• 支持按字体的方式去动态调整图标大小，颜色等等。
• 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。

注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式

unicode使用步骤如下：

第一步：拷贝项目下面生成的font-face

@font-face { font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); }

第二步：定义使用iconfont的样式

.iconfont{ font-family:"iconfont" !important; font-size:16px;font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale; }

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33;</i>

“iconfont”是你项目下的font-family。可以通过编辑项目查看，默认是”iconfont”。

简介

Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。

这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。

主进程

在 Electron 里，运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。

渲染进程

由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。

在一般浏览器中，网页通常会在沙盒环境下运行，并且不允许访问原生资源。然而，Electron 用户拥有在网页中调用 io.js 的 APIs 的能力，可以与底层操作系统直接交互。

主进程与渲染进程的区别

主进程使用 BrowserWindow 实例创建网页。每个 BrowserWindow 实例都在自己的渲染进程里运行着一个网页。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。

由于在网页里管理原生 GUI 资源是非常危险而且容易造成资源泄露，所以在网页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。

在 Electron，我们提供用于在主进程与渲染进程之间通讯的 ipc 模块。并且也有一个远程进程调用风格的通讯模块 remote。

打造你第一个 Electron 应用

大体上，一个 Electron 应用的目录结构如下：

1
2
3
4

your-app/
├── package.json
├── main.js
└── index.html

package.json的格式和 Node 的完全一致，并且那个被 main 字段声明的脚本文件是你的应用的启动脚本，它运行在主进程上。你应用里的 package.json 看起来应该像：

1
2
3
4
5

{
  "name"    : "your-app",
  "version" : "0.1.0",
  "main"    : "main.js"
}

注意：如果 main 字段没有在 package.json 声明，Electron会优先加载 index.js。

main.js 应该用于创建窗口和处理系统时间，一个典型的例子如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

var app = require('app');  // 控制应用生命周期的模块。
var BrowserWindow = require('browser-window');  // 创建原生浏览器窗口的模块

// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，
// window 会被自动地关闭
var mainWindow = null;

// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {
  // 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前
  // 应用会保持活动状态
  if (process.platform != 'darwin') {
    app.quit();
  }
});

// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function() {
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加载应用的 index.html
  mainWindow.loadURL('file://' + __dirname + '/index.html');

  // 打开开发工具
  mainWindow.openDevTools();

  // 当 window 被关闭，这个事件会被发出
  mainWindow.on('closed', function() {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 但这次不是。
    mainWindow = null;
  });
});

最后，你想展示的 index.html ：

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using io.js <script>document.write(process.version)</script>
    and Electron <script>document.write(process.versions['electron'])</script>.
  </body>
</html>

运行你的应用

一旦你创建了最初的 main.js， index.html 和 package.json 这几个文件，你可能会想尝试在本地运行并测试，看看是不是和期望的那样正常运行。

electron-prebuild

如果你已经用 npm 全局安装了 electron-prebuilt，你只需要按照如下方式直接运行你的应用：

1

electron .

如果你是局部安装，那运行：

1

./node_modules/.bin/electron .

手工下载 Electron 二进制文件

如果你手工下载了 Electron 的二进制文件，你也可以直接使用其中的二进制文件直接运行你的应用。

Windows

1

$ .\electron\electron.exe your-app\

Linux

1

$ ./electron/electron your-app/

OS X

1

$ ./Electron.app/Contents/MacOS/Electron your-app/

Electron.app 里面是 Electron 发布包，你可以在这里下载到。

                                                   ——————————–转至w3cschool

有浏览器的地方就有Fundebug

Fundebug是前端JavaScript错误实时监测平台，经过大量兼容性调试，Fundebug的JavaScript监测插件已经能够在各种主流浏览器中自动捕获错误，并且可以获取最全面的错误信息，帮助开发者更快的Debug。而对于近来不怎么受待见的IE浏览器，我们也进行了全面支持，从IE 6到IE 11。

接入插件

接入Fundebug插件非常简单，将fundebug.min.js放在head标签中就可以了。 注意，Fundebug插件必须置于其它脚本之前，这样才能捕获到所有其他JavaScript脚本的错误。

1

<script src="https://og6593g2z.qnssl.com/fundebug.0.3.1.min.js" apikey="API-KEY"></script>

其中，获取apikey需要免费注册帐号并且创建项目。 Fundebug插件兼容CommonJS，AMD以及CMD标准，因此也可以使用NPM或者RequireJS接入。 如果有需要的话，也可以动态加载Fundebug插件。 类似平台：raygun