CCC 的博客

真香

0%

发表于 分类于 ， Disqus：

《JavaScript高级程序设计》中介绍的几种JavaScript的引用类型，本文只记了Object跟Function类型

Object类型

创建对象

1
2
3
var person = new Object();
var person = {};
//二者效果是一样的，但使用对象字面量表示法定义对象时不会调用Object的构造函数

访问对象属性

  • 点表示法
  • 方括号表示法
1
2
3
4
5
6
7
8
person.name = '';
person['name'] = '';
// 方括号表示法能用变量来访问属性
var propertyName = 'name';
person[propertyName] = '';
//若属性名包含会导致语法错误的字符或关键字、保留字，可以使用方括号表示法表示
person['first name'] = '';

Array类型

Date类型

RegExp类型

阅读全文 »

发表于 分类于 Disqus：

在bootstrap中，我们可以使用不带任何class的

    跟
  1. 来创建一个有序列表，但是如果加上list-group类，样式有了，但列表前面的数字却没了。

Bootstrap给list-group-item应用了display:block; 所以显示不了序号，因此我们只要修改一下list item的display就能把序号找回来了

1
2
3
4
5
6
7
8
.list-group{
    list-style: decimal inside;
}

.list-group-item{
    display: list-item;
}

如果把list-style: decimal inside;写成list-style-type: decimal;，序号会显示在框外

以下附上一段测试代码及效果图：

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap list</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
        .list-group{
            list-style: decimal inside;
        }

        .list-group-item{
            display: list-item;
        }
    </style>
</head>
<body>
<div class="container">
    <ul class="list-group">
        <li class="list-group-item">First</li>
        <li class="list-group-item">Second</li>
        <li class="list-group-item">Third</li>
    </ul>
    <!--Ordered list-->
    <ol>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ol>
</div>
</body>
</html>

效果图

参考：

http://stackoverflow.com/questions/24230990/how-to-make-an-ordered-list-with-twitter-bootstrap-component

阅读全文 »

发表于 分类于 Disqus：

用原生js跟jquery实现checkbox全选反选的一个例子

原生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
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>checkbox</title>
</head>
<body>
<div id="check-all">
    <input type="checkbox" name="check-all">全选
</div>
<div id="sub-checkbox">
    <input type="checkbox" name="sub-checkbox">
    <input type="checkbox" name="sub-checkbox">
    <input type="checkbox" name="sub-checkbox">
    <input type="checkbox" name="sub-checkbox">
    <input type="checkbox" name="sub-checkbox">
</div>
<script>
    var checkAll = document.querySelector('[name=check-all]');
    var subCheckbox = document.querySelectorAll('[name=sub-checkbox]');

    //绑定全选、反选事件
    checkAll.addEventListener('change', function () {
        if (this.checked) {
            for (var i = 0; i < subCheckbox.length; i++) {
                subCheckbox[i].checked = true;
            }
        } else {
            for (var i = 0; i < subCheckbox.length; i++) {
                subCheckbox[i].checked = false;
            }
        }
    }, false);

    //绑定sub checkbox的事件
    for (var i = 0; i < subCheckbox.length; i++) {
        subCheckbox[i].addEventListener('change', function () {
            var checkboxnum = subCheckbox.length;
            var checked = document.querySelectorAll('[name=sub-checkbox]:checked').length;
            if (checkboxnum == checked) {  //如果选中的sub checkbox与全部的sub checkbox一样多，则勾选全选的checkbox
                checkAll.checked = true;
            } else {  //反之取消勾选
                checkAll.checked = false;
            }
        }, false);
    }
</script>
</body>
</html>

jquery（需引入jquery）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function () {
    //checkbox select all
    $(document).on('change', '[name=check-all]', function () {
        if ($(this).prop('checked')) {
            $('[name=sub-checkbox]').prop('checked', true);
        } else {
            $('[name=sub-checkbox]').prop('checked', false);
        }
    });

    //sub checkbox
    $(document).on('change', '[name=sub-checkbox]', function () {
        var checkboxnum = $('[name=sub-checkbox]').length;
        var checked = $('[name=sub-checkbox]:checked').length;
        if (checkboxnum == checked) {
            $('[name=check-all]').prop('checked', true);
        } else {
            $('[name=check-all]').prop('checked', false);
        }
    });
});

思路都是一样的，给总复选框绑定事件实现全选反选功能；给子复选框绑定事件，当所有的子复选框都选中时总复选框勾选，当有一个子复选框被取消勾选时，总复选框取消勾选，这个功能是通过比较被选中子复选框数量跟所有子复选框数量来实现的。
需要注意的是jquery中获取checkbox勾选状态时用prop()，不用attr()。
绑定事件 由于querySelectorAll()返回的是一个NodeList，所以要写个循环一个节点一个节点绑定。

阅读全文 »

发表于 分类于 ， Disqus：

看《JavaScript高级程序设计》做的一些笔记

ECMAScript只支持实现继承，不支持接口继承（因为函数没有签名）

原型链（实现继承的主要方法）：

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
function SuperType(){
  this.property = true;
}


SuperType.prototype.getSuperValue = function(){
  return this.property;
};


function SubType(){
  this.subproperty = false;
}


//继承SuperType
SubType.prototype = new SuperType();


SubType.prototype.getSubValue = function(){
  return this.subproperty;
};


var instance = new SubType();

inheritance_1

通过原型链实现继承时不能使用对象字面量创建原型方法，否则会重写原型链
例如：

1
2
3
4
5
6
SubType.prototype = new SuperType();

//定义SubType的原型方法
SubType.prototype = {  //这样定义会使上面那行代码无效

};

所有函数的默认原型都是Object的实例，因此SuperType.prototype中的[[Prototype]]会指向Object.Prototype

问题：
原型变成另一个类型的实例，原来的实例属性就变成原型属性了，因此包含引用类型值的属性会被所有SubType实例共享（例如数组）

借用构造函数：

阅读全文 »

发表于 分类于 ， Disqus：

看《JavaScript高级程序设计》做的一些笔记

工厂模式：

1
2
3
4
5
6
7
8
9
10
function createPerson(arguments){
  var o = new Object();
  o.name = name;
  o.age = age;
  o.sayName = function(){};
  return o;
}


var person1 = createPerson(arguments);

解决创建多个相似对象的问题

缺点：
没有解决对象识别问题

构造函数模式：

1
2
3
4
5
6
7
8
9
function Person(arguments){
  this.name = name;
  this.age = age;
  this.sayName = function(){};
}


var person1 = new Person(arguments);
var person2 = new Person(arguments);

构造函数名大写字母开头
person1有constructor（构造函数）属性，指向Person

1
2
3
person1.constructor == Person  //true
person1 instanceof Object  //true
person1 instanceof Person  //true

构造函数当做普通函数使用，属性和方法都添加给window

阅读全文 »

发表于 分类于 Disqus：

<script>
当页面解析到script标签时，会停止解析并下载对应的脚本，并马上执行，执行完毕后再继续解析页面

<script async>
async 在下载脚本的同时不会停止解析HTML，但是在下载完成后会停止解析并开始执行，执行完毕后继续解析页面

<script defer>
defer 下载脚本时跟async一样不会停止解析HTML，下载完毕后会延迟到页面解析完后执行

async跟defer都只对外部脚本有效，IE7及更早的版本对嵌入脚本也支持defer；
另外，HTML5规范中，defer要按照顺序执行，但实际上defer跟async都不一定会按照顺序执行

参考：http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

阅读全文 »

发表于 分类于 Disqus：

做拖拽相关效果时，想在ondragover时给被拖拽元素添加一些样式，于是在dragover事件的函数中通过dataTransfer.getData()获取在dragstart中设置的数据，然而发现dataTransfer.getData()所返回的数据为空。
查询资料发现dataTransfer.setData()中所设置的数据是存储在drag data store中，而根据W3C标准，drag data store有三种模式，Read/write mode, Read-only mode跟Protected mode。

W3C Working Draft中5.7.2.关于三种drag data store mode的定义

A drag data store mode, which is one of the following:

Read/write mode
For the dragstart event. New data can be added to the drag data store.

Read-only mode
For the drop event. The list of items representing dragged data can be read, including the data. No new data can be added.

Protected mode
For all other events. The formats and kinds in the drag data store list of items representing dragged data can be enumerated, but the data itself is unavailable and no new data can be added.

Read/write mode
读/写模式，在dragstart事件中使用，可以添加新数据到drag data store中。

Read-only mode
只读模式，在drop事件中使用，可以读取被拖拽数据，不可添加新数据。

Protected mode
保护模式，在所有其他的事件中使用，数据的列表可以被枚举，但是数据本身不可用且不能添加新数据。

这样就可以解释为什么dragover中dataTransfer.getData()返回的数据为空，以及在dragover时dataTransfer中的types不为0了，因为在除了dragstart,drop以外的事件，包括dragover,dragenter,dragleave中，drag data store出于安全原因处于保护模式，因此不可访问。
如果要实现dragover中访问dragstart中设置的数据，可以采用定义一个全局变量的方法，在dragstart中赋值，之后在dragend中清空。

阅读全文 »

发表于 分类于 Disqus：

在UWP开发中遇到个小问题，ComboBox的Item太多的话，列表会重复，并且无限循环，Google了一下后发现这貌似是Metro应用的老问题了，由于ComboBox的Items使用的是CarouselPanel而导致的。

解决方法：改变ComboBox的ItemsPanelTemplate为StackPanel

1
2
3
4
5
6
7
<ComboBox>  
    <ComboBox.ItemsPanel>  
        <ItemsPanelTemplate>  
            <StackPanel Orientation="Vertical"/>  
        </ItemsPanelTemplate>  
    </ComboBox.ItemsPanel>  
</ComboBox>

目前发现了这样做的一个问题，ComboBox选择非第一项的选项之后再选择第一项，会出现变成空白，或选不了的bug，暂时没有发现解决办法。

参考：http://netitude.bc3tech.net/2013/04/12/windows-8s-combobox-and-the-carouselpanel/

阅读全文 »

发表于 分类于 Disqus：

最近写ajax新增元素button绑定click事件的时候发现元素重新添加进来的时候会多执行一次事件函数，找了半天，怀疑是on()的问题，于是测试了一下，果然是因为on()的使用方式造成了有的新增元素会执行多次绑定事件函数。

当使用$(document).find('target-selector').on(event,function);时，必须在元素每次添加进来之后重新绑定，否则会无效。
而使用$(document).on(event,selector,function);时，只需执行一次绑定即可，可以在开头就写好绑定，对后面添加进来的元素都有效，如果在元素每次添加进来之后都绑定，则绑定了几次，触发事件的时候就会执行几次事件函数。

下面是一个测试来说明这个问题（需要jQuery）。

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <title>Just a test.</title>
    <style>
      button {
        margin: 10px;
      }
    </style>
    <script>
      $(document).ready(function() {
        $('.addOnTest').click(function() {
          var buttons = '<button class="onTest1">使用.find().on(event,function)的按钮</button><button class="onTest2">使用.on(event,selector,function)的按钮</button>';
          $('.test').append(buttons);
        });
        $('.delOnTest').click(function() {
          $('.onTest1').remove();
          $('.onTest2').remove();
        });
        $('.ontest').click(function() {
          $(document).find('.onTest1').on('click', function() {
            alert('111');
          });
          $(document).on('click', '.onTest2', function() {
            alert('222');
          });
        });
      });
    </script>
  </head>

  <body>
    <div class="test">
      <button class="addOnTest">新增两种类型的按钮</button>
      <button class="delOnTest">删除两种类型的按钮</button>
      <br />
      <button class="ontest">为新增按钮绑定事件</button>
      <br />
    </div>
    <p>测试步骤：
      <br /> 1、点击“新增两种类型的按钮”新增两个不同类型的按钮
      <br /> 2、点击“为新增按钮绑定事件”分别为两个新增按钮绑定点击事件
      <br /> 3、分别点击新增的两个按钮，可以发现，两个按钮点击时都执行了绑定的事件（都有alert）
      <br /> 4、点击“删除两种类型的按钮”，再点击“新增两种类型的按钮”
      <br /> 5、分别点击新增的两个按钮，可以发现，第一个按钮不执行绑定事件（没有alert），第二个按钮执行了绑定事件（有弹出alert窗口）
      <br /> 6、点击“为新增按钮绑定事件”
      <br /> 7、分别点击新增的两个按钮，可以发现，第一个按钮执行了一次绑定事件（一个alert），而第二个按钮执行了两次（两个alert）
      <br />
    </p>
  </body>

</html>

所以，对新增的元素，要么每次都使用.on(event,function);绑定，要么只要使用$(document).on(event,selector,function);绑定一次就好了。

阅读全文 »

发表于 分类于 ， Disqus：

最近研究pushState，看了网上的文章还是不怎么会用，于是自己摸索着理解使用，终于实现局部刷新同时前进后退。

首先说说pushState()，这个函数将当前的url等信息加入history堆栈中；
当点击浏览器的前进后退按钮时，会触发popstate事件，所以可以在onpopstate的时候使用ajax实现局部刷新前进后退。

我的方法(用jQuery)：
1、定义两个函数

1
2
3
4
5
6
7
8
9
10
function ajaxLoad(){
//里面加载ajax
};
function setState(){
var stateobj = ({//里面存放url等信息，stateobj将作为pushState()的第一个参数
url:url,
title:title
});
window.history.pushState(stateobj,null,url);//将当前url加入堆栈中
};

2、正常浏览使用ajax时

1
2
3
4
5
$('a').on('click',function(event){//假设点击a标签加载ajax
event.preventDefault();//防止跳转
ajaxLoad();
setState();
});

3、onpopstate

1
2
3
4
5
window.addEventListener('popstate', function(event) {
var state = event.state;//取得目标url的state，这样就可以通过state.url等方式访问之前stateobj中的内容
ajaxLoad();
//注意：此处不要调用setState();了，因为在历史记录堆栈中跳转时不需要往堆栈中写入数据
});

注意：
setState()的作用是往历史记录堆栈中添加一条记录；
ajax载入进来的元素（如a、button标签等）如有事件要在载入后重新绑定事件；

前端小白学习时所得，如有更好的方法欢迎讨论，代码写得菜求轻喷~

阅读全文 »