在DOM的attribute中直接写JS

Button中常用的onclick

有些时候某些DOM会执行一些简单的JS函数，并不需要一个script标签中定义函数然后执行，开始使用

1
<button onclick="alert("message")">Test</button>

并不会执行，查了一下，这里要使用单引号才行，不知道为什么，可能和HTML解析方式有关

1
<button onclick='alert("message")'>Test</button>

展开全文 >>

多个具有点击事件的DOM嵌套

tr中签到链接

由于tr具有点击时间，而超链接也可以被点击，所以就造成用户一次操作执行了两个时间，这是一个典型的事件嵌套问题，解决方法是 由于事件是通过冒泡顺序传递的 只需要在合适的地方阻止冒泡，就可以控制执行的步骤

一个例子

写三个具有click事件的div进行嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  </head>
<body>
  <div id="divOne" onclick="alert('我是最外层');">
    <div id="divTwo" onclick="alert('我是中间层！')">
      <a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com" onclick="alert('我是最里层！')">点击我</a>
    </div>
  </div>
</body>
</html>

通过阻止冒泡停止事件传播

停止冒泡的函数为 stopPropagation(),需要通过回调函数传入事件event

事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）

1
2
3
4
5
6
7
8
9
10
<body>
  ...
  <script type="text/javascript">
    $(function(){
      $("#hr_three").click(function(event){
        event.stopPropagation();
      });
    });
  </script>
</body>

通过return false停止事件传播

事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）

1
2
3
4
5
6
7
8
9
10
<body>
  ...
  <script type="text/javascript">
    $(function(){
      $("#hr_three").click(function(event){
        return false;
      });
    });
  </script>
</body>

可以不可以不阻止事件冒泡但是阻止默认行为呢

事件的回调函数中有一个

1
event.preventDefault();

如果把它放在头部A标签的click事件中，点击“点击我”。

会发现它依次弹出：我是最里层—->我是中间层—->我是最外层 但最后却没有跳转到百度

它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

展开全文 >>

多个Ajax共用一个回调函数或并发

多个Ajax共用一个回调函数

开始的时候猜到的大坑

在写网页时，有时多个请求可以共用一个回调函数来完成功能，进行了多次研究，整理了一些经验

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var statusUtil = {
    response:function(response) {
      alert(response.message)
    },
    sign:function() {
        $.post(url,{"id":10},this.response(response),"json")
    },
    revoke:function() {
        var handler = $.post(url,{"id":10})
        handler.done(this.response(response))
    }

}

最开始的时候使用以上的代码，会报错 TypeError: response is not a function. (In ‘response(response)’, ‘response’ is undefined) 的错误，根据我的文章JS的回调函数中分析的原因

在JS代码中()代表的意思是作为函数执行

一个取巧的解决方案

在没有意识到这一点的时候，我总觉得传递回调函数的时候应该带着参数，所以会写
**this.response(response)**来传入参数，后来发现报错，就使用返回一个函数的方法折衷获得结果

1
2
3
4
5
6
7
8
var statusUtil = {
    response:function() {
      return function(reponse) {
        alert(response.message)
      }
    },
    ....
}

此时就可以通过**this.response()**获取到回调函数

理解了回调后的正确方式（也不知道理解对没有）

由于JS的传递参数过程是一个复制的过程，我们只需要把函数的地址作为参数传入，至于函数本身的参数，并不需要关心，正确的代码

1
2
3
4
5
6
7
8
9
var statusUtil = {
    response:function(response) {
      alert(response.message)
    },
    sign:function() {
        $.post(url,{"id":10},this.response,"json")
    },
    ....
}

Ajax并发

在查询共用一个回调函数时，还发现JQuery存在一个when…done…函数

1
2
3
4
5
6
7
8
9
10
var url1 = "/resource/ar/hometab/index_tab_games.json"
var url2 = "/resource/ar/hometab/index_tab_image.json"
var ajax1 = $.ajax({url : url1})
var ajax2 = $.ajax({url : url2})

　$.when(ajax1, ajax2).done(function(){
　　　　 alert("done");
　　　　}).fail(function(){
　　　　 alert("fail");
　　　　});

该函数是并发多个Ajax请求，然后等待接收到所有返回后才会触发回调函数，根据别人总结

  1. 使用$.when()的方式会等到两个请求都返回之后才触发回调函数
  2. 只有当两个请求都成功返回时才会触发done回调

展开全文 >>

JS的for...in...

JS中的for…in…

在Java或者OC中，大家都会使用遍历方法for…in…，一般用于操作List或者NSArray，今天在操作JS的时候遇到了一个坑

1
2
3
4
5
6
7
8
9
var array = new Array()
array.push("value01")
array.push("value02")
array.push("value03")

for (var temp in array) {
  console.log(temp)
}

该代码打印出来的结果是

1
2
3
4
0
1
2

发现 temp并不是array里的value而是其index 需要修改为

1
2
3
for (var temp in array) {
  console.log(array[temp])
}

产生的原因

之所以会产生这种情况，是因为JS本身的Object结构的问题

1
2
3
4
5
6
var object  = {
  "key01":"value01",
  "key02":"value02",
  "key03":"value03",
  ...
}

Object作为根本对象，其储存方式都是Key－Value键值对的形式，所以说Array这种Object，只不过自动把Key设置成0，1，2…，而JS的for…in…循环，只能遍历Object的key对象，这种性质带与Java等不同的是，JS默认可以对任何类型进行遍历，而不仅仅是List。

1
2
3
4
5
var dict = {"key01": 5,"key02": 10, "key03": 20}

for (var temp in dict) {
  console.log(temp)
}

输出

1
2
3
4
key01
key02
key03

甚至对方法名进行遍历

1
2
3
4
5
6
7
8
9
10
11
var obj = {
  inVar01: 5,
  inVar02: 10,
  inVar03: function(){
    //do
  }
}

for (var temp in obj) {
  console.log(temp)
}

输出

1
2
3
inVar01
inVar02
inVar03

展开全文 >>

JS中的传值和传址

JS中的传值和传址

疑问的来源

在JS的函数传入参数的时候，在函数内部改变参数的值，结果不同

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function test() {
  var num = 5
  var obj = new Object()
  obj.num = 5
  doIntTest(num)
  doObjTest(obj)
  alert("int: " + num+"  obj: "+obj.num)
}

function doIntTest(param) {
  param = 10
}

function doObjTest(param) {
  param.num = 10
}

以上代码测试结果为

1
int: 5  obj: 10

为什么呢？

JS中的var

JS中的对象分为两种

  1. 基本对象： 储存的为具体的值
  2. 引用对象： 储存的为某个地址

其中引用对象中储存的地址既可以是Object对象的地址，也可以是某个函数的地址，所以才能有以下代码

1
var a = function(){//do};

传参的本质

根据JavaScript高级程序设计中68-72页介绍，JS函数的传参实质上是一种拷贝，有点类似于我的文章深拷贝与浅拷贝中的讨论,如果函数**function doTest(param)**存在参数，那么 param 本身是一个var，会对传入的var的内容进行复制

1
2
3
4
5
6
7
8
9
10
11
function doIntTest(param) {
  //param对num对内容5进行了复制，这里param函数内部的临时变量
  //这里对param进行修改，不会影响到外部变量
  param = 10
}

function doObjTest(param) {
  //param对obj的的内容——obj自身的地址 进行了复制
  //由于外部的obj和内部的param内容都为obj自身的地址，通过该地址.num修改对象，影响到了外部变量
  param.num = 10
}

展开全文 >>

JS的回调函数的坑坑坑

如何声明一个回调函数

注意在传入回调函数的时候使用的是 someCall 函数名，而不是 someCall() ,在JS中 () 代表作为函数执行的意思，并不是该函数的指针

1
2
3
4
5
6
7
8
9
10
11
12
13
function test() {
  doWithCallBack(someCall)
}

function doWithCallBack(callback) {
  console.log("Enter")
  callback()
}

function someCall() {
  console.log("CallBack")
}

输出

1
2
Enter
CallBack

如果使用了刚刚提到的后者会提示错误 TypeError: callback is not a function. (In ‘callback()’, ‘callback’ is undefined)

并且从输出日志可以看到 someCall() 首先作为函数被执行了一次，才进入doWithCallBack

1
2
CallBack
Enter

JS使用范型带来的隐患

因为回调函数传入的是一个函数名，如果传入一个var或者null，岂不是会报错，影响后续执行？所以说可以进行一次typeof检查来保证代码不错出

1
(callback && typeof(callback) === "function") && callback();

展开全文 >>

intelliJ在Mac中文输入法下CpasLock无法小写

intelliJ在Mac中文输入法下CpasLock无法小写

我比较喜欢用Mac自带的中文输入法，也习惯了使用CpasLock锁定英文和汉字，但是IDEA这个做的明显是有BUG，一旦按下了CpasLock就无法小写，这尼玛坑爹，搜索了2天终于找到了一个比较妥当的解决方案

为了更广泛的传播出去，我这里再重复一遍

Seil

关键都是这个键盘映射软件，简直是良心啊，不仅小巧轻便，而且看不到任何多余的东西官方网站和GitHub地址,我在访问的时候感觉比较卡，可能需要翻墙，下载完成后

  1. 打开系统偏好设置－键盘－键盘－修饰键，将Caps Lock键设为“无操作”
  2. 下载Seil后将Caps Lock键映射为Key Code 80（或者其他一个不存在的键，80代表F19）
  3. 打开系统偏好设置－键盘－快捷键－输入源，将切换到上一个输入法的快捷键设置为F19（通过选择后按一下Caps Lock）

这样的就可以从以往的「中文输入法－英文状态」到「中文输入法-中文状态」之间的切换，变成了「中文输入法」与「英文输入法」之间的切换。

IMLight

关于使用Seil后CapsLock按键不发光，解决方案里的作者还自己写了个小程序，Github地址，但是我感觉无所谓，而且状态栏会多个图标，不开森。

展开全文 >>

IntelliJ文件编码设置成UTF8

IntelliJ文件设置成UTF8

写这篇文章的初衷是又一次往数据库里写String，不管怎么写进去都是乱码，后来发现是因为IntelliJ本身的文件在执行和操作的时候不是UT8的编码，特此记录一下

在 「Preference」——「Editor」——「File Encodings」 里可以对当前工程设置

在 「File」——「Other Setting」——「File Encodings」 里可以对IDE的默认设置进行更改

展开全文 >>

IntelliJ注释和常用快捷键

关于注释

以前在Xcode的时候都是用VVDocument来进行写注释，到了IntelliJ才知道VVDocument是抄的Java的注释方式。

  1. 输入「/」
  2. 输入两个星号「**」
  3. 输入回车键Enter

常用快捷键

实现Implement或者Override

  • Control＋I 或者 Control＋O

实现构造函数或者Getter和Setter

  • Control＋Enter

大小写切换

  • 选中文字 Shift＋Command＋U

对Class重命名

  • Shift＋F6 有时候需要加上Fn如果你的F键是功能键

收起代码Fold

  • Shift＋Command＋减号

打开最近文件

  • Command＋E

高级检索

  • Shift＋Command＋F

快速打开文件

  • Shift＋Command＋O

选中代码(IntelliJ的下触摸板选中代码实在是难用)

  • Shift+方向键 可以配合Option和Command

实现Serializable协议时自动生成ID

  • 需要配合插件GenerateSerialVersionUID然后使用 ALT＋Enter就会生成设计好的「serialVersionUID」

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

我写的，大概率是错的。。。。。