封装自己的 jquery 框架
说到jquery，那就给大家先简单的介绍一下什么是jquery
jquery是JavaScript函数的一种封装。jQuery封装了JavaScript常用的功能代码（函数），提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
- jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John
Resig发布。 - jquery是指一种封装好的JavaScript函数库，一个轻量级的"写的少，做的多"的JavaScript库。
- jQuery封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
- jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
详情请去jquery官网 查看！
目录
- 说到`jquery`，那就给大家先简单的介绍一下什么是`jquery`
- 一，封装jquery`
-
- 1，jqery的封装原理：
- 2，如何封装自己的 jQuery
- 2，jquery 方法封装
- 二，下面是我封装jquery的代码
一，封装jquery`
接下来就说我封装jquery的一些心得和在网上查找的一些资料，由什么问题和错误望告知，谢谢！`
1，jqery的封装原理：
1、js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖。‘
2、使用对象封装，将代码封装到对象中，但对象如果被覆盖，则全部失效，风险极高。
3、使用工厂模式，将代码进行封装，但是并没有解决问题。
4、将封装的函数名字去除，避免覆盖，但是函数没有办法调用了
5、匿名自调用。’可以在页面加载的时候调用一次，但是不能重复调用，并且数据没有办法获取。
6、使用闭包，在全局区中不能够获取函数体内的数据。使用更大作用域的变量来记录小作用域变量的值。
2，如何封装自己的 jQuery
返回new 一个初始化函数
function jQuery(selector){
// 返回new 一个初始化函数
return new jQuery.fn.init(selector);
}
定义其构造函数显式原型
// 定义JQuery构造函数的显示原型
jQuery.fn =jQuery.prototype = {
constructor:jQuery,
jquery:"9.0.0",
length:0,
get(index){
return this[index];
},
这里使用沙箱模式，可以防止全局污染
<script>
(function(window,undefined){
var jQuery = function (ele){
return new jQuery.prototype.init(ele)
}
原型替换
jQuery.fn = jQuery.prototype ={
constructor:jQuery,
init:function(ele){
var ele = document.querySelectorAll(ele);
[].push.apply(this,ele);
},
这里用 css () 举例子
css:function(name,value){
if(arguments.length == 2){
设置 css 样式
}else if(arguments.length == 1){
if( typeof name === 'object'){
设置多个样式
}else if(typeof name == 'string'){
// 通过 getComputedStyle 获取
}
}
return this;
}
}
最关键的一步
jQuery.prototype.init.prototype = jQuery.fn;
暴露给全局
window.jQuery = window.$ = jQuery;
})(window)
</script>
2，jquery 方法封装
给jquery 身上设置全局方法；
// 方法一：
jQuery.myFunction = function(str){
console.log(str);
}
//方法一调用：
$.myFunction('直接给jq身上设置全局方法');
//方法二：
// 同时添加多方法
jQuery.extend({
myFunction:function(str){
console.log(str);
},
myFunction1:function(str){
console.log(str);
}
})
//方法二调用：
$.myFunction('给jq身上同时添加多个全局方法');
//方法三：
jQuery.nameSpaces = {
myFunction:function(str){
console.log(str);
},
myFunction1:function(str){
console.log(str);
}
}
//方法三调用：
$.nameSpaces.myFunction('用命名空间的方式给jq添加多个全局方法');
二，下面是我封装jquery的代码
jquer.js
;(function(){
// 匿名函数自执行
// jQ的构造函数
function jQuery(selector){
// 返回new 一个初始化函数
return new jQuery.fn.init(selector);
}
// 定义JQuery构造函数的显示原型
jQuery.fn =jQuery.prototype = {
constructor:jQuery,
jquery:"9.0.0",
length:0,
get(index){
return this[index];
},
/* click(callback){
// 单击时候让this的每个元素执行callback回调函数
for(var i=0;i
/* toggle(){
// 遍历每个元素如果display不是none就隐藏，否则就显示
for(var i=0;i
each(callback){
for(var i=0;i<this.length;i++){
callback(this[i])
}
return this;
},
click(callback){
// item指向的被遍历的每个元素
this.each(function(item){
// 让每个元素注册click事件 执行callback方法
// 也就是click 括号里面的回调函数
item.addEventListener("click",callback);
})
return this;
},
toggle(){
this.each(function(item){
if(item.style.display!="none"){
item.style.display="none"
}else{
item.style.display="block";
}
})
}
}
// jq初始化函数
jQuery.fn.init =function(selector){
// 获取到选择列表
var list = document.querySelectorAll(selector);
// 当前对象的长度
this.length = list.length;
for(var i=0;i<list.length;i++){
//遍历类别对 this赋值
this[i] = list[i];
}
}
// 如何让new init 产生对象拥有JQuery显示原型上的所有方法呢？
jQuery.fn.init.prototype = jQuery.fn;
// 全局对jQuery与$可以访问
window.$=window.jQuery = jQuery;
})()
jquery.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-9.0.0.js"></script>
</head>
<body>
<h1>jquery还是大哥吗？</h1>
<p>是的</p>
<h1>市场占用96.8%</h1>
<button>切换</button>
<script>
// jq实现链式操作
// 给button注册一个点击事件
// each函数编写
$("button").click(function(){
// 让h1切换显示与隐藏
$("h1").toggle().click(function(){
alert(this.innerText);
});
})
</script>
</body>
</html>
