代码整洁之道学习笔记

2020-03-29

代码整洁之道

1.要有代码

代码的整洁是非常重要的，很多时候我们不是在敲写代码，而是在试着读懂代码。糟糕的代码只能让人望而生畏，无从下手;
而整洁的代码则会使我们轻松的了解代码书写者的意图以及代码所做的事。而大家对代码整洁有着不同的认知，不过整洁的代码
一定是要减少重复，提高表达力，构建简单抽象。也可以说成：消除重复，

2.有意义的命名

代码中命名的地方有很多，要给变量、函数、类、包、文件等等进行命名，取个好的名字能让我们一眼看出他的作用而不需要添加多余的注释
好的名字有以下规则：

1. 名副其实：命名应该告诉我们他为什么存在，他做什么事，应该怎么用
1. 避免误导：避免留下掩藏带啊吗本意的错误线索
1. 使用有意义的区分：不能给命名添加数字系列和废话
1. 使用读的出来的名称：命名可以读出来，而不是全是单词缩写
1. 使用可搜索的名称：避免使用单字符名称
1. 避免使用编码：不要把类型或作用域编进命名中
1. 避免思维映射：明确即是王道
1. 类名：类名和对象名一般是名词或名词短语
1. 方法名：方法名一般是动词或动词短语
1. 别扮可爱：避免使用俚语
1. 每个概念对应一个词：每个抽象概念选一个词并且一以贯之，不要出现control和manager这样表达一个概念用不同的单词的现象
1. 别用双关语：避免同一单词用于不同目的，同意术语用于不同概念
1. 使用解决方案领域的名称：尽量用计算机科学术语，算法名，模式名毕竟读你代码的也是程序员
1. 使用源自所涉问题领域的名称：当不能使用程序员所熟悉的术语时使用所涉问题领域的术语
1. 添加有意义的语境，避免添加没用的语境

3. 函数

我们以前的系统由程序和子程序构成，再后来系统由程序、子程序和函数构成，后来只有函数存活下来。函数是所有程序中的第一组代码，
因此写好函数对我们程序员来讲尤为重要，好的函数一般有以下规则：

1. 短小：一个函数能够在20行封顶最佳
1. 只做一件事：函数应该做一件事，做好这件事，只做这件事。
1. 每个函数一个抽象层级：函数的语句要在统一抽象层级上
1. switch语句：无法避免switch语句，但是要确保每个switch都隐藏在较低的抽象层级中，并且永远不重复
1. 使用描述性的名称：给你的函数取个好名字，让他深合己意
1. 函数参数：最理想的参数数量是0，其次是1个，再次是2，应尽量避免三个参数的函数

代码整洁之道

代码是我们必不可少的，整洁的代码就像讲好一个故事一样，让人能够跟着书写者的思路把一个“故事”了解透彻。好的代码能够提高我们对代码的修改和迁移的效率。果断决绝，就事论事，没有犹豫和不必要的细节这些都是整洁代码的体现。我们要做到减少重复代码，提高表达力，构建简单抽象等方面才能写出整洁的代码。整洁代码的体现有：

1. 你程序中的命名都是有意义的。你的类名应该是名词或者名词短语，你的方法名应该是动词或动词短语。好的命名是名副其实，不存在歧义的，他不是通过编码来区分彼此的。因此，你的命名要避免使用编码，每个命名都是可以读出来的。同样，在你的程序中尽量一个概念对应一个词，不要使用多个词来表述同一个概念。我们要尽量使用计算机领域所长使用的一些单词来进行命名，给你的命名加上一些特定的语境，让别人通过命名就大概知道你在做什么。

2. 我们要尽可能的不去写注释，因为好的程序通过代码来告诉你他在做什么，而不是通过注释。最好的注释就是没有注释。在一些无法避免的情况下你可以写注释，比如提供法律信息，函数的返回值，对代码意图（代码本身不能体现其意义时）的解释，TODO注释，警示和放大一些不常规代码的使用意义。那些多余的，喃喃自语的，给人带来误导的，HTML注释，还有不是本地信息的，作为位置标记的，注释掉的代码等等这些坏的注释不要出现在代码中。

3. 函数使我们程序的重要组成部分，而对JavaScript这样的函数式编程语言来讲，函数更加的重要，因此写好函数才能让我们的程序代码更加的健壮和可用。好的函数一定是只用来做一件事的短小的且只有一个抽象层级的代码段，在函数中尽量避免使用大量的if else语句。给你的函数起一个好名字，让你函数没有副作用，把错误处理从你的函数中抽离，尽量不要重复的去写同一个用处的函数，结构化编程。总的来讲写好一个函数不是一蹴而就的，我们要反复的推敲和斟酌自己所写的函数，使他尽量的短小，一目了然。

4. 代码是有格式的，格式的好坏没有固定的评判标准。但是我们要尽量让自己的代码格式与主流的代码格式一样，当然如果在一个团队中，那么以团队所规定的的代码格式为标准来书写自己的代码。好的格式会让你的代码看起来整齐，赏心悦目，才让人有兴趣去了解你的代码在做些什么。

5. 抽象和数据结构，我们都知道有两种编程思想，一种是面向过程变成（也就面向方法编程），一种是面向对象编程。在面向过程编程中我们使用的是数据结构，即在数据结构中我们暴露其数据，但是没有提供有意义的函数，然后外层写方法根据数据结构的类型来编写这个方法；而面向对象恰好相反，对象将数据隐藏在抽象之后，暴露操作数据的函数。总结来说，对象暴露行为，隐藏数据，它方便我们添加新的对象类型而无需修改既有行为，但同时也难以在既有对象中添加新的行为；而数据结构暴露数据，没有操作数据的行为，它便于我们向既有数据结构中添加行为，但同时难以向既有函数中添加新的数据结构。因此在编程是我们要看自己的业务需求来选择这两种编程思想中的一种。德墨忒尔律：模块不应该了解他所操作的对象的内部结构！

6. 整洁的代码是将错误处理进行隔离对待，独立于我们代码的主要逻辑。为什么会产生错误，一方面是一种我们无法避免的情况：设备失效，网络错误等；一种是我们程序中代码所产生的错误，这类错误我们要尽量避免，比如不要写一些返回null值得函数，也不要在函数之间传递null值。好的错误处理应该使用异常处理而非返回码，因此在写可以产生错误的函数时，应该先写try-catch-finally 语句，同时尽量使用不可控异常处理方法，给我们的异常方法的环境进行说明，可以定义一些异常类对我们要写的异常处理方法进行封装。记住我们的目的是为了让错误处理不去搞乱我们的代码逻辑。

7. 边界

8. 测试

展开全文 >>

Vue学习

2020-03-20

Vue的基本使用

我们可以在Vue的官网进行Vue的学习，Vue是尤雨溪编写的，因此中文文档很详细。下边是链接
链接： https://cn.vuejs.org/

从Vue的官网我们可以看到Vue的定于：
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue的指令系统

Vue的数据双向绑定

展开全文 >>

WebPack

2020-03-13

webpack是一个打包工具，可以将JS，CSS， image等资源当成一个个模块进行打包。打包的好处有：

减少了页面的衍生请求次数，提高网站效率
将ES6等高级语法进行转化编译，以兼容浏览器
打包的同时将代码混淆，提高代码安全性

webpack 的核心都写在他的配置文件webpack.config.js中，具体的属性有

入口：entry: 打包的起点，一个或者多个。一般是一个js文件，从该文件寻找依赖
输出： outpur: 一个对象，包含两个属性:

path: 打包的目标文件夹；
filename: 打包后的文件名称
加载器：Loader: webpack本身只能识别js文件，如果要加载非js文件我们需要只当额外的加载器，常用的有babel转码器可以将ES6,ES7,JSX,等高级语法转化为浏览器支持的ES5。loader的配置项（写在rules[]中）有:

test: 必须项，以匹配loaders所处理文件的扩展名的正则表达式
loader: 必须项，loader的名称，一般放到use对象中
include/exclude: 可选项，手动添加必须处理或者不处理的文件夹。
query: 可选项，为loader提供额外的设置选项

插件： plugins：数组可选项，为webpack添加插件
一个完整的webpack.config.js如下

modudle.export = {
    mode: "development",
    devtool: 'eval-source-map',
    devServer: {
        contentBase: "./common",
        historyApiFallback: true,
        inline: true
    },
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/common",
        filename: "index.js"
    },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }
}

当然最好的做法就是自己设置一个webpack打包的项目，大家可以根据下边的链接一步一步实现以下：

转载和借鉴：
作者：秉持本心
链接：https://www.jianshu.com/p/1192cfd4a012

展开全文 >>

TypeScript

2020-03-13

TypeScript和JavaScript

TypeScript 是JavaScript 的一个超集，支持ES6标准
TypeScript的实际目标是开发大型应用，他可以编译成纯的JavaScript
TypeScript增加的功能有：

类型批注和编译时类型检查
类型推断
接口
枚举
Mixin
泛型编程
名字空间
元组
Await

从ES6反移植来的：类、模块、lambda函数的箭头语法、可选参数和默认参数

TypeScript安装

如果你想让自己的TS代码转化成JS代码，可以通过NPM来进行安装
//全局安装typescript工具
npm install -g typescript
//将ts文件生成一个同名的js文件，放在同一目录下
tec test.ts
另外一种方法就是使用IDE,比如VSCode

TypeScript的基础语法

TS(TypeScript的简写)程序由模块、函数、变量、语句和表达式、注释等组成

TypeScript的一些语法特性

保留字： in break if try continue implements等等
TS会忽略程序中出现的空格、制表符和换行符
TS区分大小写
分号可选，但尽量不省略
TS注释：// 行注释 / 块注释 /

TS是面向对象的，如下边的例子

class Site{
    name(): void{
        console.log("Me");     
    }
}
var obj = new Site();
obj.name();

TypeScript的基础类型

数据类型	关键字	描述
任意类型	any	声明为any的变量可以赋予任意类型的值
数字类型	number	双精度64为浮点数
字符串类型	string	使用’或者”来表示，反引号`来定义多行字符串和内嵌表达式
布尔类型	boolean	true或false
数组类型	无	let arr: number[]
元组	无	let x: [string, number]
枚举	enum	枚举类型用于定义数值集合
void	void	用于表示方法返回值的类型，表示该方法没有返回值
null	null	表示对象值缺失
undefined	undefined	初始化变量为一个未定义的值
never	never	never是其他类型包括null和undefined

这里着重说一下TS的``多行字符串，他还可以作为字符串模板使用，和对字符串模板进行拆分

多行字符串

var str = `aaa
bbb
ccc`; 
对应JS的var str = "aaa\nbbb\nccc";

字符串模板：

1 2	var name = "myName"; console.log(`my name is ${name}`);

字符串模板拆分

function test(templete, name, age){
    console.log(templete);
    console.log(name);
    console.log(age);
}
var myName = "Guoruiyang";
var getAge = function(){
    return 18;
}
test`hello my name is ${myName}, i'm ${getAge()}`
//注意这里的test后没有()

TypeScript的变量声明

TS的变量的声明只是多了类型声明，其他同JS一样。如：

var username:string = "Guoruiyang";
function test(): void{
    //没有返回值
}

TypeScript的运算符

TS的运算符、条件语句、循环、Number、String、Array同JS无区别

TypeScript的函数

TS的函数参数与JS不同

传入函数的参数可以指定类型

1
2
3

var getAge(num: number){
    return num;
}

传入函数的参数可以指定默认值

// 带默认值的参数放在必选参数的的后边
function test(a:string, b:string, c:string = "jojo"){
    console.log(a);
    console.log(b);
    console.log(c);
}
//输出xx\n yy\n zz
test("xx", "yy", "zz");
//输出xx\n yy\n jojo
test("xx", "yy");
//报错
test("xx");

可选参数

//第二个参数是可选的，可选参数放在必选参数的的后边
function test(a:string, b?:string, c:string = "jojo"){
    console.log(a);
    console.log(b);
    console.log(c);
}
//输出xx\n yy\n zz
test("xx", "yy", "zz");
//输出xx\n yy\n jojo
test("xx", "yy");
//输出xx\n undefine jojo
test("xx");

函数新特性

Rest和Spread操作符 …可以传入函数任意数量的参数

function func1(...args){
    args.forEach(function(arg){
        console.log(arg);
    })
}
var args = [1,2,3];
//输出1\n 2\n 3
func1(args);
function func2(a, b, c){
    console.log(a);
    console.log(b);
    console.log(c);
}
var args = [1,2];
//输出1\n 2\n undefine
func1(...args);
var args1 = [1, 2, 3, 4];
//输出1\n 2\n 3\n 
func1(...args1);

generator函数控制函数的执行
generator函数的声明和调用如下：

//函数后边跟*表示是generator函数
function* doThings(){
    console.log("start");
    yield;
    console.log("end");
}
//doThings不能直接调用
var func1 = doThings;
//输出start
func1.next();
//输出end
funxc1.next();

destructuring析构表达式
通过destructuring表达式将对象或数组拆解成任意数量的变量

//返回一个对象
function getStock(){
    return {
        code: "IBM",
        price: 100,
        other: 123
    }
}
// 等同于var a = getStock(); a.code="IBM"; a.price=100;
var {code, price} = getStock();
//错误
var {codex, price} = getStock();
//正确 codex的值就是code的值
var {code: codex, price} = getStock();
var array1 = [1, 2, 3, 4, 5];
//num1 = 1; num2 = 2
var [num1. num2] = array1;
//num1 = 3; num2 = 4
var [,,num1,num2] = array1;
//num1 = 1; args = [2, 3, 4, 5]  
var [num1, ...args] = array1;

箭头表达式
通过=> 箭头表达式来声明匿名函数，消除了传统匿名函数中this指针的问题

function getSockt(name:string){
    this.name = name;
    setInterval(function(){
        console.log("my name is " + this.name);
    }, 1000);
}
function getSockt2(name:string){
    this.name = name;
    setInterval(() => {
        console.log("my name is " + this.name); 
    }, 1000);
}
//调用getSockt("IBM")函数输出my name is 
var stock = new getSockt("IBM");
//调用getSockt2("IBM")函数输出my name is IBM
var stock2 = new getSockt2("IBM");

TypeScript元组

在我看来元组解释特殊的数组，元组里的数据类型可以不一样

var mytuple = [10,"Runoob"]; // 创建元组
console.log(mytuple[0]) ; //10
console.log(mytuple[1]); //Runoob
mytuple[0] = 100;// 更新元组元素
console.log(mytuple[0]) ; //100
mytuple.push(12);//增加元组元素
mytuple.pop();//12删除元素
var [b, c] = mytuple;// b = 10, b= Runoob

TypeScript联合类型

TypeScript接口

学过面向对象的我们都知道接口，接口就是一系列抽象方法的声明
TS的接口定义如下：interface interface_name{ }

接口实例，实现接口的属性和方法
接口继承，接口用过其他接口来扩展自己，关键字是extends
单接口：Child_interface_name extends super_interface_name
多接口：Child_interface_name extends super_interface_name, super_interface1_name

TypeScript类

TS的类和其他卖你想对象的语言一样，描述了所创建的对象的公共的属性和方法
定义方式如： class class_name { // 类作用域 }
类的继承：

类可以继承其他类，类继承也是使用extends关键字
子类除了不能继承父类的私有成员和构造函数，其他都可以继承。TS一次只能继承一个类，不支持继承多个类。但支持多重继承
class child_name extends parent_name
子类对父类方法的重写叫做方法的重写
类可以继承接口，继承接口使用implements关键字
class class_name implements interface_name
类中属性方法的控制修饰符
static: 指定类的数据成员为静态的，静态成员可以直接通过类名来调用
public: 默认值，☞共有，可以在任何地方被访问
protected: 受保护的，可以在其自身以及其父类和子类访问
private: 私有，只能在其所定义的类访问

TypeScript命名空间、模块、声明文件

TS的命名空间
TS的命名空间可以说是ES6的模块化，通过TS明明空间namespace来定义的代码会编译成基于闭包将局部变量暴露给外部，命名空间最好不要和模块一起混用。如：

namespace MyMath{//使用namespace 指令来申明命名空间MyMath
    //使用export指令将属性和方法暴露给域外部
    export const PI = 3.14;
    export function sumValue(num1: number, num2: number){
        return num1 + num2;
    }
}
// 在外部使用命名空间
MyMath.PI;
MyMath.sunValue(2, 3);

模块
TS对ES6和CommonJS两种模块系统都有很好的支持。可以沿用以前JS的写法
我们默认一个文件就是一模块
这里着重来说一下ES6模块系统和CommonJS模块系统的区别：

CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值的引用
CommonJS模块是运行时加载，ES6模块是编译时输出接口
两者的写法也不同：

//ES6导入
//从module_a模块导入a和b
import {a, b} from './es6/module_a';
//从module_a模块导入a,并重新起名为f
import {a as f} from './es6/module_a'
//从module_a模块导入所有对象并重新起名为All
import * as All from './es6/module_a';
//从module_a模块导入Obj
import Obj from './es6/module_a';
//ES6导出
export defalut Obj;
export {a, b, c};
export {d as D};
//ComonJS导入
let c1 = require('./node/a.ts');
let c2 = require('./node/b');
//CommonJS导出
module.exports = a;
module.exports = {};

从上边代码可以看出：
导出： ES6允许同时存在export default和export多个变量，而CommonJS只允许有一种形式的导出，其中一种会把另外一种覆盖掉。
导入： ES6可以按需导入也可以全部导入，而CommonJS只能全部导入。
ES6是未来的模块化标准，而且可以按需导入，是未来的发展方向。

声明文件
声明文件以.d.ts为后缀
runoob.d.ts
声明文件和模块的语法
declare module Module_Name{ }
导入声明文件语法：
///
可以看出声明文件也是模块化的一种方式，基本不使用

总结

感谢你读到了这里，如果你把这边介绍读完，基本上你就会使用TypeScript语法了。那就在开发中使用他吧。

展开全文 >>

JQuery廖雪峰学习笔记

2017-08-07

JQuery使用

在head中直接引用JQuery文件
$是JQuery符号，JQuery把所有功能全部封装在一个全局变量JQuery中，而$就是JQuery的别名。JQuery（$）本质上是一个函数，因此也是一个对象，$除了直接调用还有其他的属性。
这里说一句，JQuery采用这种方式将他的方法和属性都包装到一个函数中，保护了他的属性和方法对外隐藏，是JS闭包的一种运用。

选择器

选择器是JQuery的核心，其实JQuery的选择器很像CSS的格式

JS的DOM操作	JQuiery的DOM操作
document.getElementById(‘idName’)	$(‘#idName’)
document.getElementsByTagName(‘tagName’)	$(‘tagName’)
document.getElementsByClassName(‘className’)	$(‘.className’)

通过$()查询返回的都是JQuery对象，JQuery对象类似数组，他的每个元素应用了DOM节点对象
如果查询的id不存在，返回[], 因此JQuery的选择器不会返回undefined或者null，JQuery的强大之处在于可以按照属性进行查找：

1
2
3

var email = $('[name = email]');
var psd = $('[type = password]');
var J = $('[属性 = 属性值]');

当然你还可以使用正则进行这样的查询:

1 2	var icons = $('[name ^= icon]'); //找出所有name属性值以icon开头的DOM var names = $('[name $= waith]'); //找出所有name属性值以with结尾的DOM

这个方法适合通过class属性进行查找，且不受包含多个class名称的影响

1	var icons = $('[class ^= "icon-"]'); // 找出所有class包含只少一个以icon-开头的DOM

也可以进行组合查找:

1 2	var emailInput = $('input[name=email]');//找到找出所有name属性值为email的input标签 var tr = $('tr.red');//找到类名为.red的tr标签

还可以用,隔开进行组合一块选择：

1	$('p, div'); // 把<p>和<div>都选出来

DOM对象和JQuery对象转化:

DOM对象转换为JQuery对象： $(aDomObject); 这样就可以调用JQuery的API了
JQuery对象转换为DOM对象： JQueryObj.get(index)获得数组中的一个DOM对象

选择器	例子
层级选择器空格隔开	$(‘ul p input’)
子选择器 > 隔开	$(parent>child)

过滤器

选择器	作用
:first-child	选择第一个节点
:last-child	选择最后一个节点
:nth-child(n)	选择第n个节点,N从以开始
:nth-child(odd)	选择序号为奇数的节点元素
:nth-child(even)	选择序数为偶数的节点元素

查找和过滤

查找

在当前节点的子节点中进行查找，用find()方法，find本身能接受任意一种选择器
从当前节点向上查找，用parent()方法
对于同一级的节点，用next()和prev()方法
过滤
filter()方法可以过滤掉不符合选择器的节点，参数可以是一个函数，函数内部的this被绑定为DOM对象而不是JQuery对象
map()方法把一个JQuery对象包含的若干个DOM节点转化为其他对象
如果JQuery对象包含了不止一个DOM节点，first(), last()和slice()方法可以返回一个新的JQuery对象

操作DOM

修改Text和HTML

jQuery对象的text()和html()方法分别获得节点的文本和原始的HTML文本，如果无参调用就是获取，传入参数就变成了设置文本。
由于JQuery对象可以包含多个或者0个DOM对象，所以操作是在一组DOM对象上进行的，同样即使没有DOM对象也不会报错

修改CSS

JQuery的‘批量操作’使得修改CSS很方便，调用JQuery对象的方法css(‘name’, ‘value’)，而且支持链式操作
css()方法将作用于DOM节点的style属性，具有高优先级。修改class属性可以采用以下方法：
jQueryObj.hasClass(‘className’); // 判断是否包含
jQueryObj.addClass(‘className’); // 添加class
jQueryObj.removeClass(‘className’); // 删除class

显示和隐藏DOM

隐藏一个DOM可以设置CSS的属性display属性为none,但是显示的时候要知道之前的display属性，而JQuery直接提供了show()和hide()方法，隐藏了修改display的细节
显示和隐藏DOM不改变DOM数的结构

获取DOM信息

通过jQuery对象的若干方法可以直接获得DOM的宽高信息
// 浏览器可视窗口的大小
$(window).width();
$(window).height();
// HTML文档的大小
$(document).width();
$(document).height();
// 某个DIV的大小
var div = $(‘#test-div’);
div.width();
div.height();
div.width(400);
div.height(‘200px’); // 设置CSS属性，是否生效要看CSS是否有效

attr()和removeAttr()用于操作DOM节点的属性

// <div id = "test-div" name = "Test" start="1"> ... </div>
var div = $('#test-div');
div.attr('data'); // undefined 属性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name属性变成了'hello';
div.removeAttr('name'); // 删除name属性
div.attr('name'); // undefined

prop()跟attr()类似，但是对于那种在节点中没有值，只有出现和不出现的属性例如 checked
1
2
3
var radio = $('#test-radio');
radio.attr('checked'); // 'checked'
radio.prop('checked'); // true

不过对于这种属性，用is最好 radio.is(‘:checked’); // true 类似的属性有selected is(‘:selected’)

操作表单

对于表单元素，JQuery对象提供val()方法获取和设置对应的value属性，无参是获取，传入参数是设置

修改DOM结构

添加DOM节点

添加DOM节点除了使用html()这种暴力的方法外，还可以用append()方法，调用append()传入HTML片段（append()是添加子节点在最后）

1 2	var ul = $('#test-div>ul'); ul.append('<li><span>Hask</span></li>');

append()除了接收字符串，还可以传入原始的DOM对象，JQuery对象和函数对象，传入函数时，要求返回一个字符串，DOM对象或者JQuery对象。因为JQuery对象可能是一组DOM对象，只有传入函数才能针对不同的DOM对象生成不同的子节点
prepend()把DOM添加在最前面
after()和before()方法用于同级节点

删除节点

remove()方法删除jQuery对象包括的所有DOM节点

事件

由于浏览器绑定事件的方法不同，JQuery来写代码就屏蔽了浏览器的差异
on()用来绑定一个事件，传入事件名称和对应的处理函数，也可以直接调用事件方法
a.on(‘click’, function(){alter(‘Hello!’);}); 等价于 a.click(function(){alter(‘Hello!’);});
jQuery 能够绑定的事件如下

鼠标事件
click: 鼠标点击时触发;
dbclick: 鼠标双击时触发;
mouseenter: 鼠标进入时触发;
mouseleave: 鼠标移开时触发;
hover: 鼠标进入和移开时触发两个函数，相当于mouseenter加上mouseleave
键盘事件
键盘事件仅作用于当前焦点的DOM上，通常是<input>和<textarea>
keydown: 键盘按下时触发
keyup: 键盘松开时触发
keypress: 按一次键后触发
其他事件
focus: 当DOM获得焦点时触发;
blur: 当DOM失去焦点时触发;
change: 当<input> <textarea> <select> 的内容发生改变时触发;
submit: 当 <form>提交时触发;
ready: 当页面被载入并且DOM树完后才能初始化后触发; 仅作用于document对象
ready事件在DOM完成初始化后触发，且触发一次。适合用来写其他的初始化代码
$(docement).on(‘ready’, function () { … ;}); 等价于 $(document).ready(function (){ … ;}); 等价于 $(function () {});

事件参数

有些事件，如mousemove和keypress, 我们需要获得鼠标的位置和按键的值，这些事件都会传入Event对象作为参数，可以从Event对象上获得更多的信息

$(function() {
    $('#testMouseMove-div').mousemove(function(e) {
        $('#testMouseMove-span').text('PageX = ' + e.pageX + ', PageY = ' + e.pageY);
    })
});

取消绑定

通过off(‘click’, function)实现，移除的函数必须跟绑定的函数是同一个，如果是匿名函数就无法移除，可以使用off(‘click’)一次性移除已绑定的click事件的所有处理函数
同理无参调用off()一次性移除已绑定所有类型的事件处理函数

事件触发条件

事件的触发是通过用户操作引起的，如果我们通过JS代码去修改文本框的内容将不会触发change事件；如果希望用代码触发change事件，可以直接调用无参数的change()方法来触发该事件： input.val(‘change it’); input.change(); input.change() 相对于 input.trigger(‘change’), 它是trigger()方法的简写

浏览器安全限制

在浏览器中有些JS代码只有在用户的触发下才能执行。例如window.open()函数在JSdiamante中是不会被执行的，只有通过用户事件进行触发

动画

这里我在工作中用的是Tween一系列的js库，感兴趣的可以关注我之后的文章更新。

这里介绍jQuery内置的几种动画

show()和hide(),无参调用show()和hide()会显示和隐藏DOM元素，但是，传入一个时间参数，就变成了动画。如 show(3000); // 在3秒内逐渐显示
时间以ms为单位，但也可以是’slow’(0.6) ‘fast’这些字符串 show()和hide()是从左上角逐渐展开或者收缩的
toggle()方法根据当前状态决定是show()还是hide()
slideUp()和slideDown()在垂直方向上逐渐展开或者收缩的
slideUp()把一个DOM元素收起来，slideDown()相反，而slideToggle()是根据元素是否可见进行下一步操作的
fadeIn()和fadeOut()的动画效果是淡入淡出，也就是通过不断地设置DOM元素的opacity属性来实现的 fadeToggle()根据当前状态决定下一步操作
自定义动画
animate()可以实现任意动画效果，需要传入的参数就是DOM元素的最终CSS状态和时间
1
2
3
4
5
6
var div = $('#test-div');
div.animate({
opacity: 0.25;
width: '256px';
height: '256px';
}, 3000);

animate()还可以接受第三个参数，参数是一个回调函数，当动画结束时这个动画被调用

var div = $('#test-div');
div.animate({
    opacity: 0.25;
    width: '256px';
    height: '256px';
}, 3000， function(){
    console.log('动画结束');
});

串行动画

jQuery的动画可以串行执行，通过delay()方法还可以实现暂停，这样我们可以实现复杂的动画效果

var div = $('#test-animates');
div.slideDown(2000)
    .delay(1000)
    .animate({
        width: 200px;
        height: 256px;
    }, 2000)
    .delay(1000)
    .animate({
        width: 100;
        height: 128;
    }, 2000)

动画执行需要时间所以JQuery不断地返回新的Promise对象才能执行后续操作。

其他问题

有时候动画没有效果，是因为你执行动画的那个DOM元素不是块级元素可能有些属性没有。
此外JQuery也没有实现background-color的动画效果，可以通过CSS3的transition实现动画效果。

展开全文 >>

代码整洁之道

1.要有代码

2.有意义的命名

3. 函数

代码整洁之道

7. 边界

8. 测试

Vue的基本使用

Vue的指令系统

Vue的数据双向绑定

webpack 的核心都写在他的配置文件webpack.config.js中，具体的属性有

TypeScript和JavaScript

TypeScript安装

TypeScript的基础语法

TypeScript的基础类型

TypeScript的变量声明

TypeScript的运算符

TypeScript的函数

TS的函数参数与JS不同

函数新特性

TypeScript元组

TypeScript联合类型

TypeScript接口

TypeScript类

TypeScript命名空间、模块、声明文件

总结

JQuery使用

选择器

过滤器

查找和过滤

查找

过滤

操作DOM

修改Text和HTML

修改CSS

显示和隐藏DOM

获取DOM信息

操作表单

修改DOM结构

添加DOM节点

删除节点

事件

事件参数

取消绑定

事件触发条件

浏览器安全限制

动画

这里介绍jQuery内置的几种动画

自定义动画

串行动画

其他问题