元素坐标

本文主要是针对pageX、clientX、screenX、offsetX、X展开的分析

screenX

鼠标在屏幕中的位置，指的是鼠标到电脑屏幕左侧的距离。 各个浏览器相同。

pageX、clientX、offsetX、 X

e.pageX——相对整个页面的坐标
e.offsetX——相对当前元素的border左上角开始的坐标
e.clientX——相对可视区域的坐标
e.x——相对可视区域的坐标

浏览器支持情况如下

chrome

e.pageX  ——支持
e.offsetX——支持
e.clientX——支持
e.x      ——支持

safari:(这个和chrome是一样的)

ff

e.pageX  ——支持
e.offsetX——不支持
e.clientX——支持
e.x      ——支持

opera

e.pageX  ——支持
e.offsetX——支持
e.clientX——支持
e.x      ——支持

IE9

e.pageX——支持
e.offsetX——支持
e.clientX——支持
e.x——支持

IE8

e.pageX  ——不支持
e.offsetX——支持
e.clientX——支持
e.x      ——支持

IE7

e.pageX  ——不支持
e.offsetX——支持
e.clientX——支持
e.x      ——支持

2016-09-27

ES6新特性

没有太多啰嗦，说那么多介绍也没多少人会看，我们直接看特性吧，ES6多数人认为主要的十大特性如下，排名不分先后：

Default Parameters（默认参数）
Template Literals （模板文本）
Multi-line Strings （多行字符串）
Destructuring Assignment （解构赋值）
Enhanced Object Literals （增强的对象文本）
Arrow Functions （箭头函数）
Promises
Block-Scoped Constructs Let and Const（块作用域构造Let and Const）
Classes（类）
Modules（模块）

Default Parameters（默认参数）

before

var fn = function (height) {
    var height = height || 50;
       ...;
}

now

var fn = function (height=50) {
       ...;
}

Template Literals（模板对象）

before

var name = 'Your name is ' + first + ' ' + last + '.';

now

var name = `Your name is ${first} ${last}. `;

Multi-line Strings （多行字符串）

before

var roadPoem = 'Then took the other, as just as fair,nt'
                + 'Had worn them really about the same,nt';

now

var roadPoem = `Then took the other, as just as fair,
                Had worn them really about the same,`;

Destructuring Assignment （解构赋值）

before

someArray=[1,2,3];
var first = someArray[0];
var second = someArray[1];
var third = someArray[2];

var obj={ foo: "lorem", bar: "ipsum" };
var foo = obj.foo;
var bar = obj.bar;

now

someArray=[1,2,3];
var [first, second, third] = someArray;
console.log(first);  // 1
console.log(second); // 2
console.log(third);  // 3

var { foo, bar } = { foo: "lorem", bar: "ipsum" };
console.log(foo); // "lorem"
console.log(bar); // "ipsum"

Enhanced Object Literals （增强的对象字面量）

before

var obj = {
    handler: handler,
    toString: function() {
        return "d " + super.toString();
    },
    prop42: 42

};

now

var obj = {
    handler,   //ES6特性 === handler: handler,
    toString() {   //ES6函数
        return "d " + super.toString();
       },
    [ 'prop_' + (() => 42)() ]: 42  
    //主要是这个可以在字面量中加入变量 == prop42: 42
};

Arrow Functions in（箭头函数）

以前我们使用闭包，this总是预期之外地产生改变，而箭头函数的迷人之处在于，现在你的this可以按照你的预期使用了，身处箭头函数里面，this还是原来的this。

有了箭头函数在ES6中，我们就不必用that = this或 self = this 或 _this = this 或.bind(this)如下:

before

var _this = this;
$('.btn').click(function(event){
     _this.sendData();
})

now

$('.btn').click((event) =>{
      this.sendData();
})

Promises in ES6

before

setTimeout(function(){
      console.log('Yay!');
      setTimeout(function(){
        console.log('Wheeyee!');
      }, 1000)
}, 1000);

now

var wait1000 =  ()=> new Promise((resolve, reject)=> {setTimeout(resolve, 1000)});
wait1000()
    .then(function() {
        console.log('Yay!')
        return wait1000()
    })
    .then(function() {
           console.log('Wheeyee!')
       });

好吧，我也没看出来哪里好用了…

Block-Scoped Constructs Let and Const（块作用域和构造let和const）

Let是一种新的变量申明方式，它允许你把变量作用域控制在块级里面。用大括号定义代码块（作用域）

const，它就是一个不变量，也是块级作用域就像let一样。
before

for(var i=0; i<1; i++){
    var a=1;
    {
        var  a=2;
        console.log(a) //2
    }
    console.log(a)  //2
}
console.log(i) //1
console.log(a) //2

now

for(let i=0; i<1; i++){
    const a=1;
    {
        const  a=2;
        console.log(a) //2
    }
    console.log(a)  //1
}
console.log(a) // not defined
console.log(i) // not defined

Classes （类）

before

function Circle(x) {
   this.x = x;
}
Circle.classFn = function() { ... }

Circle.prototype = {
   fn1() {
       return ..;
   },

   get fn2() {
       return this.x;
   },
   set fn2(x) {
       this.x = x*2;
   }
};

now

class Circle {
    constructor(x) {
        this.x = x;
    };

    static classFn() { ... };

    fn1(){
        return ..;
    }
    get fn2() {
        return this.x;
    };
    set fn2(val) {
        this.x = x*2;
    };
 }

Modules （模块）

before

module.js有port变量和getAccounts 方法:

module.exports = {  port: 3000,  getAccounts: function() {    ...  }}

main.js需要依赖require(‘module’) 导入module.js：

var service = require('module.js');console.log(service.port); // 3000

now

导出module.js
export var port = 3000;export function getAccounts(url) {  ...}

导入方式一
import {port, getAccounts} from 'module';console.log(port); // 3000

导入方式二
import * as service from 'module';//导入全部模块
console.log(service.port); // 3000

2016-09-21

HEXO搭建个人博客

我们搭建的前提是你有一个github账号(现在默认有喽)，跟着步骤走吧,下面以我自己的博客为例(记得改为自己的账号)

1. $ sudo npm install hexo -g 安装博客搭建环境hexo

2. $ git clone https://github.com/Jasonellen/Jasonellen.github.io.git到本地

3. $ cd Jasonellen.github.io仓库

4. $ hexo init 初始化文件夹

5. 初始化OK可以用$ hexo server开启服务器查看个人搭建的博客

6. 进入_config.xml 修改个人相关信息

title: 奋斗蚁🐜
subtitle: 前端拼搏中的小小蚁🐜
description:
author: Jasonellen

7. $ npm install hexo-deployer-git --save

8. 同步到github账号

_config.xml拉倒最底部修改文件
deploy:
      type: git
      repo: https://github.com/Jasonellen/Jasonellen.github.io.git

9. 写博客

$ hexo new 论天气

新建文件，对应生成到source下面的.MD文件，可以用markdown编写，Markdown简易语法教程请查看我上一篇的博客

hexo g
```
编译生成对应的html文件
```

hexo server 预览

开启服务器，本地预览写好的文章

hexo d 发布
```
同步到github账号
```

10. 博客Markdown css样式修改

样式修改的地址是 themes--languages--source--css
如果博客打开后台有jq引入报错是因为默认引入的是谷歌CDN文件不稳定，可以修改为其他在线jquery文件即可，修改路径为themes--landscape-layout-_partial-after-footer.ejs

11. 添加评论系统--这里用的是多说评论

进入多说官网
点击我要安装
填完注册信息（记得有一个多说域名 xxx.duosho.com）自己写的xxx要记得后面会用到
注册完会生成一段html代码如下(就是通用代码)
进入前面的配置文件_config.xml,找个空白地新增 duoshuo_shortname: 上面注册时用的xxx
进入themes\landscape\layout_partial\article.ejs

把最后一段这个代码
<% if (!index && post.comments && config.disqus_shortname){ %>
  <section id="comments">
    <div id="disqus_thread">
      <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>
  </section>
  <% } %>

1
2
3

'换成上面注册信息后生成的通用代码,然后把多说评论start全部替换为下面这段
 <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>

OVER 喜欢就点个赞吧

2016-09-15

MarkDown 语法

导语

Markdown 是一种轻量级的「标记语言」，它的优点很多，目前也被越来越多的写作爱好者，撰稿者广泛使用。看到这里请不要被「标记」、「语言」所迷惑，Markdown 的语法十分简单。常用的标记符号也不超过十个，这种相对于更为复杂的 HTML 标记语言来说，Markdown 可谓是十分轻量的，学习成本也不需要太多，且一旦熟悉这种语法规则，会有一劳永逸的效果。

工具

在 Mac OS X 上，我强烈建议你用 Mou 这款免费且十分好用的 Markdown 编辑器。它支持实时预览，既左边是你编辑 
Markdown 语言，右边会实时的生成预览效果。在Win上推荐使用 MarkdownPad 或者 MarkPad。

Markdown 语法的简要规则

图片与链接

图片为：![图片名](图片地址http://)
       如果是本地图片请使用绝对路径
链接为：[显示的链接名](链接地址http://..)

myGitHub

标题

#~######分别表示一级-六级标题

title

注意在符号后需要一个空格，这是最标准的 Markdown 语法。

粗体与斜体

用一对*号括起来的是斜体，两对*号括起来的是粗体
*斜体*   **粗体**

表格

表格是我觉得 Markdown 比较累人的地方，冒号表明文字对齐方式，例子如下：
| Tables        | Are           | Cool  |
| :-----------: |:-------------:|------:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

代码框

比如我这些有背景的文字描述都是框框括起来的
实现：tab键后再输入文字

分割线

直接输入三个星号

高亮

用一对``号括起来

个人博客：https://jasonellen.github.io

引用

大于号后面的内容就是引用：> 这里是引用的内容

列表

只需要在文字前加上 - 或 * 即可变为无序列表，有序列表则直接在文字前加1. 2. 3. 符号要和文字之间加上一个字符的空格。

title

无序列表

1
2
3
有序列表

2016-09-14