发表于

jQuery API

1
2
3
4
5
6
window.jQuery = ???
window.$ = jQuery

var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

实现上述API

分析： 显而易见，$ 是一个函数，它可以接收一个 CSS 选择器字符串参数，然后返回一个包含了选择器对应元素的对象（按照CSS选择器规则所能选中的元素），这个对象具有addClass和setText方法。

  1. jQuery是全局可调用的,可以将其声明为全局变量或直接将其作为 window对象的属性,并赋值为一个函数,这个函数接收一个 CSS 选择器字符串参数。

    1
    2
    3
    window.jQuery = function (selector){
    	// 函数体...
    }

  2. 在函数体中，首先要实现的功能就是根据选择器找到对应的元素，可以使用window.querySelectorAll 方法实现。

    1
    let elements = windown.querySelectorAll(selector)  //根据传入的CSS选择器找到对应元素

  3. 由于我们要返回的是一个包含了选择器选中的各个元素的对象，接下来先声明一个空对象，然后遍历elements NodeList，将每一个元素依次放入这个空对象。

    1
    2
    3
    4
    5
    6
    7
    let temp = {}
    let length = elements.length

    for (let i=0;i<length;i++){
    	temp[i] = elements[i]
    }
    temp.length = length

  4. 现在我们已经得到了一个包含了选择器对应的各个元素的对象temp，是时候给它添加addClass和setText方法了。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // addClass 方法，给temp对象中包含的每一个元素对象都增加一个class
    temp.addClass = function (className){
    	for (let i=0;i<temp.length;i++){
    		temp[i].classList.add(className)    //遍历temp对象，得到其中的各个元素后使用 DOM API 添加类
    	}
    }
    // setText 方法，给temp对象中包含的每一个元素对象都设置一段文本
    temp.setText = function (text){
    	for (let i=0;i<temp.length;i++){
    		temp[i].textContent = text
    	}
    }

  5. 至此，temp对象中已经包含了选择器对应的各个元素，并且拥有了两个方法可以对它拥有的各个元素进行相应操作，只需把temp返回即可。

    1
    return temp

  6. 完整的代码如下：

    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
    windown.jQuery = function (selector){
    	//根据传入的CSS选择器找到对应元素
    	let elements = windown.querySelectorAll(selector)
    	//创建用于存放各个元素的空对象
    	let temp = {}
    	let length = elements.length
    	//遍历NodeList，将各个元素放入temp对象
    	for (let i=0;i<length;i++){
    		temp[i] = elements[i]
    	}
    	temp.length = length
    	// addClass 方法，给temp对象中包含的每一个元素对象都增加一个class
    	temp.addClass = function (className){
    		for (let i=0;i<temp.length;i++){
    			temp[i].classList.add(className)    //遍历temp对象，得到其中的各个元素后使用 DOM API 添加类
    		}
    	}
    	// setText 方法，给temp对象中包含的每一个元素对象都设置一段文本
    	temp.setText = function (text){
    		for (let i=0;i<temp.length;i++){
    			temp[i].textContent = text
    		}
    	}
    	//将temp对象返回
    	return temp
    }
    // 将jQuery函数赋值给$,就可以使用简称"$"。
    window.$ = windown.jQuery

总结改进

        通过这样的一系列封装，实现了类似jQuery选择器的功能，初步了解了jQuery背后的原理。同时发现这种实现的方法每次返回的temp对象的那两个方法都是temp的实例方法，都会各自占用内存而没有共享方法。我觉得可以定义一个Temp构造函数，这两个方法都定义在Temp函数的原型上，然后每次调用$时不是新建一个空对象temp，而是实例化一个Temp对象，再将各个元素依次放入。

改进后的代码

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
windown.jQuery = function (selector){
	//根据传入的CSS选择器找到对应元素
	let elements = windown.querySelectorAll(selector)
	let length = elements.length
	//实例化一个空的Temp对象用于盛放各个被选中的元素
	let temp = new Temp()
	temp.length = length	
	//遍历NodeList，将各个元素放入temp对象
	for (let i=0;i<length;i++){
		temp[i] = elements[i]
	}
	//将temp对象返回
	return temp
}

// 将jQuery函数赋值给$,就可以使用简称"$"。
window.$ = windown.jQuery

//Temp的原型上添加方法
function Temp(){}
Temp.prototype.addClass = function (className){
	for (let i=0;i<this.length;i++){
		this[i].classList.add(className)
	}
}

Temp.prototype.setText = function (text){
	for (let i=0;i<this.length;i++){
		this[i].textContent = text
	}
}

发表于

hexo简介

理解为使用Markdown语法写文档,hexo 将Markdown文档翻译为HTML文件。

步骤

  1. cd ~/Desktop 进入桌面
  2. mkdir myblog 创建一个文件，之后博客的文件都放在这里面
  3. sudo npm install -g hexo-cli 安装hexo
  4. npm i 作用不明
  5. hexo new 开博大吉 新建一篇标题为开博大吉的博客
  6. xdg-open ~/Desktop/myblog/source/_posts/开博大吉.md 打开.md文件开始编辑博客
  7. xdg-open _config.yml 打开网站配置文件,修改后保存
  8. npm install hexo-deployer-git –save 安装 git 部署插件
  9. hexo deploy 上传到github远程仓库
  10. 打开github page 功能,就可以看到博客页面(但是看不到第一篇博客<开博大吉>)
  11. 之后再写博客或者更新已有博客，只需 hexo new 博客名;hexo generate;hexo deploy 即可。
  12. 在github上创建一个空的仓库用来保存myblog里的文件，将本地的myblog文件初始化为一个本地仓库，与guthub上的仓库关联后讲本地myblog仓库推送到远程空仓库，每次更新博客后记得将myblog的更新推送到远程仓库。
完

发表于

使用hexo+github写博客

hexo简介

理解为使用Markdown语法写文档

##步骤

  1. cd ~/Desktop 进入桌面
  2. mkdir myblog 创建一个文件，之后博客的文件都放在这里面
  3. sudo npm install -g hexo-cli 安装hexo
  4. npm i 作用不明
  5. hexo new 开博大吉 新建一篇标题为开博大吉的博客
  6. xdg-open ~/Desktop/myblog/source/_posts/开博大吉.md 打开.md文件开始编辑博客

发表于

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment