面向对象篇
面向对象编程介绍两大编程思想 面向过程 面向对象 面向过程编程面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候再一个一个的依 次调用就可以了。 举个例子:将大象装进冰箱,面向过程做法。 面向过程,就是按照我们分析好了的步骤,按照步骤解决问题。 面向对象编程在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工。 面向对象编程具有灵活、代码可复用、容易维护和开发的优点,更适合多人合作的大型软件项目。 面向对象的特性: 封装性 继承性 多态性 面向过程和面向对象的对比面向过程 优点:性能比面向对象高,适合跟硬件联系很紧密 的东西,例如单片机就采用的面向过程编程。 缺点:没有面向对象易维护、易复用、易扩展 面向对象 优点:易维护、易复用、易扩展,由于面向对象有 封装、继承、多态性的特性,可以设计出低耦合的 系统,使系统 更加灵活、更加易于维护 缺点:性能比面向过程低 ES6 中的类和对象面向对象面向对象更贴近我们的实际生活, 可以使用面向对象描述现实世界事物. 但是事物分为具体的事物和抽象的事物 手机 是抽象的(泛指的),小米手机 ...
内置对象篇
内置对象 JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对 前面两种对象是JS 基础 内容,属于 ECMAScript; 第三个浏览器对象属于我们JS 独有的, 我们JS API 讲解 内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法) 内置对象最大的优点就是帮助我们快速开发 JavaScript 提供了多个内置对象:Math、 Date 、Array、String等 查文档MDN学习一个内置对象的使用,只要学会其常用成员的使用即可,我们可以通过查文档学习,可以通过MDN/W3C 来查询。 Mozilla 开发者网络(MDN)提供了有关开放网络技术(Open Web)的信息,包括 HTML、CSS 和万维网及 HTML5 应用的 API。 MDN: https://developer.mozilla.org/zh-CN 如何学习对象中的方法 查阅该方法的功能 查阅该方法的功能 查阅该方法的功能 通过 demo 进行测试 Math 对象Math 概述Math 对象不是构造函数, ...
函数篇
函数的概念在 JS 里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。 虽然 for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用 JS 中的函数。 函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。 function getSum(a,b){ var sum=0 for(var i=a;i<=b;i++){ sum+=i } console.log(sum); } getSum(1,100) getSum(50,100) 声明的使用函数在使用时分为两步:声明函数和调用函数。 声明函数// 声明函数function 函数名() { //函数体代码} function 是声明函数的关键字,必须小写 由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数 ...
对象篇
对象什么是对象现实生活中,万物皆对象,对象就是一个具体的事物,看得见摸得着的实物。例如,一本书,一脸汽车,一个人可以是“对象”,一个数据库,一张网页,一个服务器也可称“对象”。 在javascript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如:字符串、数组、数值、函数。 对象是有属性和方法组成。 属性:事物的特征,在对象中用属性来表示。 方法:事物的行为,在对象中用方法来表示。 为什么需要对象保存一个值时,可以用变量,保存多个值(一组值)时,可以使用数组。如果要保存一个人的完整信息呢 例如,将“张三”的个人信息保存在数组中的方式为 var arr = ['张三','男','30','176']; J s中的对象表达结构更清晰,更强大,张三的个人信息在对象中的表达结构如下 张三.姓名='张三';张三.性别=‘男';张三.年龄= 128;张三.身高=154 ;person . name =张三';person . sex =男';per ...
弹性布局
容器样式属性/*开启弹性布局首先在容器样式中写 display: flex;,以下样式才生效*/flex-direction:;flex-wrap:;flex-flow:;justify-content:;align-items:;align-content:; 容器样式属性的用法flex-direction用法flex-direction是设置主轴方向的,值为:row 行 | column: 列 /* 主轴方向默认x轴,y轴为交叉轴 */flex-direction:row ;/* 主轴方向设置为y轴 ,x轴则为交叉轴*/flex-direction: column;/*主轴为x轴,项目从右至左排列*/flex-direction: row-reverse;/*主轴为Y轴,项目从下至上排列*/flex-direction: column-reverse; flex-wrap用法flex-wrap:nowrap;flex-wrap: wrap;flex-wrap:wrap-reverse;/*nowrap为默认值不换行wrap为换行wrap-reverse 换行 第一行在最下面 ...
浮动篇
在前端开发中,使用float浮动常常让几个快级元素一行排列,不过浮动后会出现高度塌陷问题,以下是解决浮动带来的高度塌陷的问题。建议使用的清除浮动的四种方法。如下图所视,子元素使用浮动后,父元素没被撑开。 <div class="box"> <div>盒子1</div> <div>盒子2</div> <div>盒子3</div> </div> *{ margin: 0; padding: 0; box-sizing: border-box; } .box{ width: 1200px; border: 1px solid red; } .box>div{ width: 150px; ...