整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者:极客小俊
一个专注于web技术的80后
你不用拼过聪明人，你只需要拼过那些懒人 你就一定会超越大部分人!
面向对象的英文全称:Object Oriented Programming , 简称OOP
首先我们要先了解面向过程的编程思想, 就是代码从上到下都没有封装的意思，某些代码裸露在外、没有模块化、代码杂乱无章的写法. 并且还不好维护，也不便于后期二次修改
面向对象的编程思想: 通俗地说就是要具备代码好维护、代码重用性高、耦合度低、高内聚、模块化、便于修改
名词解释:
高内聚: 指一个软件模块是由相关性很强的代码组成，只负责一项任务，也就是常说的单一责任原则。
低耦合: 指让每个模块尽可能地独立完成某个特定的子功能。
面向对象的主要特点:
js是一门基于对象的语言
js是一门解释型的语言
js是一门脚本语言、弱类型语言!
分析什么是对象?
对象:具有特征和行为或者说 有属性和方法, 具体特指的某一个事物
属性 就是变量 表示一个对象的状态 对象下面的变量就叫做:属性
方法 就是函数 表示一个对象的行为过程 对象下面的函数就叫做:方法
创建对象也叫实例化对象, Object是系统的构造函数
//语法
var 变量名=new Object();如何添加对象的属性和方法
添加属性: 如何添加属性？
var 变量名=new Object();
变量名.属性名=值;添加方法: 如何添加方法?
var 变量名=new Object();
变量名.方法名=function(){
..代码段...
}
或
function 函数名(){
}
变量名.方法名=函数名;案例:
var obj=new Object();
obj.name='张三';
obj.age=33;
obj.city='重庆';
obj.say=function(){
alert('张三说话了!');
}
console.log(obj);这种创建方式的缺点是:
1.如果使用这种方式创建了多个对象、会产生对象不能分辨出到底属于哪一个类型!
2.每创建 一个对象都需要new Object() 一次 耗费内存空间、 不能一次性创建多个对象
小知识: 如何判断某一个对象引用变量是不是属于某一个类型?
语法: 对象引用变量名称 instanceof 类名称 返回true就是属于这个类 返回false不属于这种类型
this关键字的基本使用
在当前的对象方法中，可以使用this关键字代表当前对象
小知识: 访问对象属性和方法的另一种写法: 对象[“属性名”] 或 对象方法名
案例代码如下:
var obj2=new Object();
obj2.name='李四';
obj2.age=66;
obj2.city='北京';
obj2.say=function(){
console.log('李四说话了');
console.log(this.name);
}
console.log(obj2["name"]);
obj2["say"]();
工厂方式也可以叫做封装函数
优点: 代码复用性提升、不同的数据当做参数进行传递
自定义构造函数创建对象
了解一下如何一次性创建多个对象?
工厂方法 方法1: 首先把创建对象的系统构造对象相关代码封装在一个函数中,不同的数据当做参数进行传递,然后返回创建好的对象
案例代码如下:
function createObject(username,age){
var obj=new Object();
obj.name=username;
obj.age=age;
obj.city='重庆';
obj.say=function(){
console.log(this.name+'的年龄是:'+this.age);
}
return obj;
}
var obj1=createObject('张三',23);
var obj2=createObject('李四',66);
obj1.say();
obj2.say();工厂方法 方法2:自定义构造函数创建对象, 自己定义一个构造函数,创建对象
优点: 可以区分出对象引用属于哪一类
案例代码如下
//Person就是构造函数
function Person(username,age,city){
this.name=username;
this.age=age;
this.city=city;
this.say=function(){
console.log(this.name+'的年龄是:'+this.age);
}
}
var obj1=new Person('张三',33,'北京市');
var obj2=new Person('李四',66,'重庆市');
obj1.say();
obj2.say();小结: 通过上面的案例可以小结出一个概念: 就是函数如果前面有new关键字，那么这个函数就是构造函数，否则就是一个普通函数
==在javascript中使用new关键字来修饰一个 普通函数的解答
系统做4件事情
json对象是创建对象的一种字面量表示形式
var 变量名={ } //这就叫字面量方式创建对象
案例代码
var obj={};
obj.name='张三';
obj.age=22;
obj.city='北京市';
obj.fn=function () {
console.log('我的名字叫'+this.name+' 我的年龄是:'+this.age+' 我在'+this.city+'生活和工作!');
}
obj.fn();推荐写法:
字面量优化后的形式:其实就是json数据格式的形式 [推荐写法]
案例代码
var obj2={
name:'张三',
age:22,
city:'北京市',
fn:function () {
console.log(this);
console.log('我的名字叫'+this.name+' 我的年龄是:'+this.age+' 我在'+this.city+'生活和工作!');
}
};
obj2.fn();注意: var obj=new Object() 与 var obj={ } 是完全一样的 只是一个在内存中的堆区中开空间 而另一个在栈区开辟空间
function Obj() {
}
var test=new Obj(); //在内存中的堆区中开空间
console.log(test);
var json={} //在栈区开辟空间 用完即释放
console.log(json);极客小俊@，首发原创技术文章
如果喜欢话请 "点赞 评论 收藏" 一键三连
大家的支持就是我坚持下去的动力!
多时候，我们在学习前端开发的时候，都以为只要学习好前端开发的语法就行了，或者说做做几个动效，能写出来就行了，却都不知道，其实前端开发的设计模式也很重要！
设计模式（design pattern）是一套反复使用、思想成熟、经过分类和无数实战设计经验的总结。
是为了代码可重用、可扩展、可解耦、更容易被人理解和保证代码可靠性。
设计模式共有23种，今天我们来讲的是工厂模式，其他模式我们后面会继续给大家讲
工厂模式，正像它的名字一样，可以像工厂一样生产出我们想要的东西，只要我们提供原料。在我们日常编写代码过程中，很可能，我们不知不觉中就已经使用过工厂模式。我们看一个简单的例子：
简单的demo
在这个函数中，我可以通过传入不同的参数，创建具有不同参数值得对象。可以看到，工厂模式其实很简单。
工厂模式（Factory Pattern）主要分为简单工厂模式和抽象工厂模式。
简单工厂（Simple Factory Pattern）模式主要用于创建同一类的对象，比如我们创建需要一个身份，老师或者学生。可以通过下面这个函数：
简单工厂模式
我们可以传入不同的 type 比如"student"或“teacher”去创建不同的对象，然后再通过不同的person对象去给里面的属性赋值。无论是"student"或者"teacher"都是person，所以说简单工厂函数就是用来创建同一类对象的不同实例。
上面的代码通过原型_prototype_去添加两个函数，（关于原型的知识，不是一两句可以讲完的，如果不懂得话，大家可以到网上去搜索相关的资料进行了解）然后通过this[type]去选择不同的方法，如果这里不明白的话我可以解释一下，this是一个对象，指向当前函数（在JavaScript里函数是对象），然后this[属性名/方法名] 去调用内部的属性或方法，那么this[type] (person)就是调用对应的方法去实例化一个具体的类（student或teacher）。通过this[type] (person)去调用。
这就是简单工厂函数。
抽象工厂模式 ：与简单工厂函数不同的是，抽象工厂函数会先设计好接口，具体的实现在子类中进行。这样看概念有点模糊，我们来看一个例子:
我们定义一个父类，abstractCreatePerson也就是创建一个人，然后这个人有一个自我介绍的方法方法selfIntroduction，那么不同的人就有不同的介绍内容，这个时候我们就可以用到抽象工厂模式：
抽象工厂模式
可以看到这段代码，父类 abstractCreatePerson 中先声明了一个方法，然后通过 Object.create() 方法去继承这个父类，（因为这样不会覆盖原有的原型链），然后我们再在子类中去实例化方法，不同的子类就有了不同的实例方法。
这就是工厂模式，他提高了我们代码的可重用性，降低了模块之间的耦合度。
最后总结一下
jQuery对象是一个数组，可以通过数组下标转为DOM对象
// jQuery和DOM对象的互转
// 相当于window.onload
$(function(){
$("button").click(
function () {
alert("helloWorld");
var $btn=$("button");
alert($btn.length);
// 使用数组下标来转为DOM对象
alert($btn[0].firstChild.nodeValue);
var btn=document.getElementById("btn");
// 使用$()进行包装将DOM对象转为jQuery对象
alert($(btn).text());
}
)
})
基本选择器根据id，class和标签名来查找DOM元素
$("#id")
$(".class")
$("div")
("prev ~ siblings")选择器只能选择"#prev"元素后面的同辈元素，而jquery中的方法siblings()与前后位置无关，只要是同辈节点就可以选取
<div id="content">
<span></span>
<p>
<span></span>
</p>
<p>
<span></span>
</p>
<p>
<span></span>
</p>
</div>
$(function () {
// 派生选择器 $("div span") 选取div的所有span(后代)元素 不考虑层次
var ele=$("div span");
alert(ele.length); // 4
// 父子选择器 $("parent > child") 选取parent元素下的child元素
var ele1=$("div > span");
alert(ele1.length); // 1
// 直接兄弟选择器 $("prev + next") 选取紧接在prev元素后的下第一个兄弟关系的next元素
var ele2=$("div span + p");
alert(ele2.length); // 1
// 后续全部兄弟节点选择器 $("prev ~ siblings") 选取prev元素后的所有兄弟关系的siblings元素
var ele3=$("div span ~ p");
alert(ele3.length); // 3
})
过滤选择器通过特定的过滤规则来筛选出所需的DOM元素，该选择器都以":"开头
按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器
使用text()方法
// 读取文本
$("#bj").text();
// 修改文本 将文本改成北京
$("bj").text("北京");
### 操作属性节点
使用attr()方法
//获取属性 获取value属性
$("input[name='username']").attr("value");
//修改属性 修改value属性值为张三
$("input[name='username']").attr("value","张三");
使用jquery的工厂函数$(html) 会根据html来创建一个DOM对象，并把这个DOM对象包装成一个jQuery对象
创建好节点之后需要将创建的节点插入文档中
$("<li id='bj'>北京</li>").appendTo($("#city"));
$("<li id='sh'>上海</li>").insertAfter($("#bj"));
$("#bj").remove();
$("#city").empty();
可以使用attr()方法来进行属性操作
jQuery中提供了很多方法来实现获取和设置某些属性。
removerAttr()可以删除指定元素的指定属性
$(document).ready() 网页中所有的DOM绘制完毕后执行，可能DOM元素关联的东西并没有加载完，简写$() 与window.onload类似
对匹配的元素进行特定的事件绑定 bind()
$(".class").bind("click",function(){
alert("点击事件绑定");
})
*请认真填写需求信息，我们会在24小时内与您取得联系。
