jQuery不过如此
首先要理解,JavaScript的语法是需要引擎来实现的.引擎是用其他语言写的(一般是c或者java).因为JavaScript语言在浏览器中已经实现了.所以可以用JavaScript写API; API就是给别人用的代码,可以说是工具,JavaScript实现这种工具一般就是用函数(可以执行代码的对象就是函数,对象就是基本类型的集合,因为数据结构不同,具体区分了单纯对象+函数+数组)
这堂课是要通过实现类似jQuery的函数库,来体会jQuery究竟是什么东西.首先就来,封装一个函数体验一下
- 通常来说，使用nodeType属性确定一个节点的类型，比较方便
document.querySelector('a').nodeType === 1 - Node.nodeValue属性返回一个字符串，表示当前节点本身的文本值，该属性可读写。
- Node.textContent属性返回当前节点和它的所有后代节点的文本内容。textContent属性自动忽略当前节点内部的HTML标签，返回所有文本内容。
- 属性和方法的区别在于,函数属性就是方法,因为函数可以返回一个东西.
- 阮一峰,jquery设计思想
- 库是什么呢?库是特定种类的API //全球浏览器使用量登录builtwith查看
自己写,就懂什么是jQuery了//代码如下
var allChild = itme3.parentNode.children
var array= {length:0}
for(let i=0;i<allchild.length,i++){
if (allChild[i]!==item3){
array[array.length]=allChild[i]
array.length+=1
}
}
这是实现一个伪数组的代码.伪数组就是hash;
- 然后给他封装,也就是写个函数取个名字呗~~~~~
具体实现获取一个元素所有兄弟的代码如下::::::::
function 获取所有兄弟(node){
var allChild =node.parentNode.children
var array= {length:0}
for(let i=0;i<allchild.length,i++){
if (allChild[i]!==node){
array[array.length]=allChild[i]
array.length+=1
}
return array
}
}// 这样就通过代码封装出一个'获取所有兄弟'的API了
现在来写第二个,添加多个class的API
var classes = { 'a':true,'b':false,'c':true}
for ( let key in classes){
var value = classes[key]
if ( value) {
item3.classList.add(key)
} else{
item3.classList.remove(key)
}
}
//// 我们来封装一下,把他放进一个函数里面,让别人使用// 这个过程中就要考虑到多个问题了,首先要处理的对象要被人给,所以留出参数给别人使用,也就意味着不能写死代码.
function addClass(node,classes){
for(let key in classes){
var value = classes[key]
if(value){
node.classList.add(key)
}else{
node.classList.remove(key)
}
}
}
写了两个API 那么就来优化一下,体验整个过程
代码优化守则第一个: 有类似的代码就存在优化的可能//我们来优化上面的代码
function addClass(node,classes){
for( let key in classes){
var value = classes[key]
var methodName = value ? 'add':'remove'
node.calssListmethodName
}
}// 这不单可以加calss,还可以减class要是简单实现加,那么使用以下代码,更简单
function addClass(node,classes){
classes.forEach((value)=>node.classList.add(value))
}
接下来讲命名空间//程序员觉得一个东西好就会娶个专业名词~~~因为代码是开源的,你可以写组件,别人也写了组件,那么在使用的时候,你要区分开来,当然最直观的是靠名字来区分啦~~~~所谓的命名空间,一个是彰显自己的牛逼,还有就是区分不同人写的不同组件,模块
//真实的意义:
- 如果没有命名空间,别人就不知道你的库叫什么
- 如果没有命名空间,你会不知不觉把所有全局变量覆盖了,比如说,你要在一家公司做前端,之前的员工肯定写了属于他自己的库,他的函数库有很多的不知名字的函数可以调用,可是不知道他都写了哪些API,就算有名字你也记不全,那么工作的时候,你觉得自己的API好用,又写了,因为功能相似,名字恰巧又一样了.完了~~~~你的API是不是把别人的给覆盖了? 那么之前经他手的代码是不是都出问题了,因为通用的函数名,让你给覆盖了.
Windows.jasonDom = {}
jasonDom. getSiblings = getSliblings
原型链其实就是公有属性链:Element_proto_ === Node.prototype(//这就是公有属性)
那么久出现一个问题:A 好用还是B好用呢?当然是B好用啊!!! 如何实现呢?有两个办法,第一个是修改原型代码,也就是修改原型链的顶端代码; 另外一个就是用this
调用函数一般就是简单加个(),就可以了,这种方式的this是隐式的,谁调用就是this;另外一种就是用call()来调用函数,这种是明确指定this的.
item3.getSiblings.call(item3)// 等价于item3.getSiblings
this;使用闭包的目的——隐藏变量;所以函数套函数只是为了造出一个局部变量，跟闭包无关。
关于闭包的谣言
闭包会造成内存泄露？
错。
说这话的人根本不知道什么是内存泄露。内存泄露是指你用不到（访问不到）的变量，依然占居着内存空间，不能被再次利用起来。
闭包里面的变量明明就是我们需要的变量（lives），凭什么说是内存泄露？
这个谣言是如何来的？
因为 IE。IE 有 bug，IE 在我们使用完闭包之后，依然回收不了闭包里面引用的变量。
这是 IE 的问题，不是闭包的问题。参见司徒正美的这篇文章。
1.可以访问其他函数内变量的函数，叫做闭包。
2.闭包可以用来保存一个需要持久保存的变量，可以模拟命名空间。
this详细文章请看 方老师的文章
总结:
- this 就是你 call 一个函数时，传入的 context。
- 如果你的函数调用形式不是 call 形式，请按照「转换代码」将其转换为 call 形式。以后你遇到所有跟 this 有关的笔试题，都不会有疑问了。
上面对this的阐述是不完整的,因为根据上面所有,那么调用API的时候,由于API是浏览器预先封装好的,源代码也看不见,鬼知道谁调用了函数~~~~这也是个大问题
- 总结一下如何确定 this 是值
- 看源码中对应的函数是怎么被 call 的（这是最靠谱的办法）
- 看文档
- console.log(this)
- 不要瞎猜，你猜不到的
前面提到可以修改Node的原型属性,来实现新的方法属性,但是这种做法是很不规范的,因为要是有人已经改写了同名函数,你又去改写,是不是把他给覆盖了,这是很不负责任的做法.所以我们只能选择第二种方法,重新写一个Node2属性//代码如下
window.Node2 = function (node){
return {
getSilbings:function(){},
addClass:function(){}
}
}
var node2 Node2(item3)
node2.getSiblings()
node2.addClass()
也就是说,jQuery实质上是一个构造函数,接受一个参数,这个参数可能是节点,然后返回一个方法对象去操作节点~~~~~这就是本质~~~~~!!!!! 一百分
闭包不是JavaScript可以造出来的,是因为函数的作用域的特性衍生出来的一种情况.
-
也就是一个函数,调用了外部环境变量的一个变量// 也就是说穿越时空了~~~;这个变量,和这个函数统称为闭包
-
闭包的作用就是隐藏变量,避免被错误调用
