L3F.WIN

Github及Hexo的使用

0%

Javascript与jQuery技术精粹

发表于 更新于

第一章 JavaScript基础篇

缩略标记

  • 对象
1
2
3
4
5
var car = new Object();
car.color = 'red';
car.wheels = 4;
car.hubcaps = 'spinning';
car.age = 4;

👇

1
2
3
4
5
6
var car = {
    color: 'red',
    wheels: 4,
    hubcaps: 'spinning',
    age: 4
}
  • 数组
1
var arrayN = new Array('Transformers', 'Transformers2', 'Avatar', 'Indiana Jones4');

👇

1
var arrayN = ['Transformers', 'Transformers2', 'Avatar', 'Indiana Jones4'];
  • 三重标记
1
2
3
4
5
6
var direction;
if(x < 200>){
    direction = 1;
}else{
    direction = -1;
}

👇

1
var direction = x < 200 ? 1 : -1;

JSON 数据格式

JSON 是 JavaScript Object Notation的缩写，使用JSON可以更方便的存储数据

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var band = {
    "name": "The Red Hot Chili Peoppers",
    "members":[
        {
            "name": "Anthony",
            "role": "lead vocals"
        },
        {
            "name": "xxxxx",
            "role": "lead yyyy"
        }
        ……
    ]
}

JavaScript自带函数（数学，数组以及字符串函数）

自带的函数可以帮我们省略n多代码。

举例如 sort(), Math.max(), split(), join()

事件代理

当某一特定的元素或者其上DOM层的所有元素发生某一事件时，可以通过单一的处理程序对父元素进行处理来简化事件处理过程，而不是使用大量的程序。

匿名函数和模块模式

为了减少无用的全局变量，通常的解决办法就是创建匿名函数

1
2
3
4
5
6
7
8
9
var name = "Chris";
var age = '34';
var status = 'single';
function createMember(){
    //[……]
}
function getMemberDetails(){
    //[……]
}

👇

匿名函数myApplication

1
2
3
4
5
6
7
8
9
10
11
var myApplication = function(){
    var name = "Chris";
    var age = '34';
    var status = 'single';
    function createMember(){
        //[……]
    }
    function getMemberDetails(){
        //[……]
    }
}();

👇

外部可调用时

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var myApplication = function(){
    var name = "Chris";
    var age = '34';
    var status = 'single';
    return{
        function createMember(){
            //[……]
        }
        function getMemberDetails(){
            //[……]
        }
    }
}();
//myApplication.createMember() and myApplication.getMemeberDetails()可以工作。

👇

揭示模块模式（更方便）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var myApplication = function(){
    var name = "Chris";
    var age = '34';
    var status = 'single';
    function createMember(){
        //[……]
    }
    function getMemberDetails(){
        //[……]
    }
    return{
        create: createMember,
        get: getMemberDetails
    }
}();
//myApplication.create() and myApplication.get()可以工作。

允许配置

编程的最后阶段，为了使代码易于被其他开发人员使用和更改，添加配置功能，如

  • CSS和ID名称
  • 生成的字符串
  • 数据
  • 地点，语言等

与后台交互

Ajax + JSON-P

库文件

YUI, jQuery, Dojo

第二章 复查JavaScript代码的启示

简介

复查可以帮助开发者发现各种错误，学习更多经验，更好的维护编码标准。

哪里可以复查？

  • JSMentors
  • freenode IRC
  • Code Review
  • Twitter
  • GitHub

构造复查请求

找到有经验的人员

  • 隔离出复查代码，确保其可运行级有完整的注释
  • 使复查者能够查看演示更改代码
  • 不要提交全部项目文件
  • 标出可以改进的地方
  • 有耐心

代码复查人员需要提供的信息

  • 复查代码应提供的内容
  1. 正确性
  2. 功能复杂性
  3. 目标一致性
  4. 代码可维护性
  5. 可扩缩性
  6. 维持编码风格
  • 复查者守则
  1. 清晰的评论
  2. 提出不足
  3. 提供内容的详细资料
  4. 给出解决方案

协作代码复查

七步测试法

问题的关键不在于你

不要仅及于你或客户开发，为使用你产品的用户开发，删减不可维护臃肿的内容，创建易于使用，便于维护的产品。

七步测试法介绍

  1. 关闭JavaScript
    网页是否能正常显示，功能是否能够实现（解决方案： 利用JavaScript为文件添加类，然后让所有的CSS依附于这个类）
  2. 怎样改变外观、感受和内容
    尽量不将外观，文字等元素写入到JavaScript文档中。
  3. 最终产品的可用性和语义性
  4. 基本原理
  5. 与其他语言的交互性
  6. 维护人员是否专注
  7. 测试方案，升级维护是否简单易行

JavaScript十个古怪之处和秘密

数据类型及定义

  1. NULL是一个对象，但不能看作对象的实例，因为它什么也没有。
  2. NaN是一个数字
  3. 空数组==FALSE

正则表达式