Loading... ~~算上国庆那段时间的话这其实应该算是第三周的笔记。~~ 这周学习的依旧是网页布局相关的内容,前半周在分别学习PC端页面布局和手机端的布局,后半周开始学习响应式布局以及bootstrap入门基础,另外一提**弹性布局真的无敌好用**。( ̄︶ ̄)↗ 也许我可以获得提前转正的机会,有一定的工程思维学起来真的轻松—— # HTML与CSS篇 ## viewport 响应式网页常用的一段位于head标签内的代码,用于设置网页的视口(viewport)的元数据,可以实现**自适应屏幕大小、禁止用户缩放**、隐藏浏览器的地址栏和导航栏等。 ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui, minimum-scale=1.0, maximum-scale=1.0"> ``` 各标签作用如下: * width=device-width:将视口的宽度设置为设备的宽度,即自适应屏幕宽度。 * initial-scale=1.0:设置初始的缩放比例为 1.0。 * user-scalable=no:禁止用户进行缩放操作。 * minimal-ui:启用 Safari 的最小化用户界面模式,隐藏地址栏和导航栏,提供更大的显示区域。 * minimum-scale=1.0:设置最小的缩放比例为 1.0,禁止缩小网页。 * maximum-scale=1.0:设置最大的缩放比例为 1.0,禁止放大网页。 ## 响应式布局 通过使用 CSS 媒体查询、弹性盒子布局等技术,使网页能够根据用户设备的屏幕大小和分辨率进行自适应调整。 ### CSS 媒体查询 用于针对不同设备屏幕尺寸应用不同样式,根据屏幕宽度、高度、设备方向等条件来调整布局和样式。 Example: ```css @media (max-width: 767px) { /* 在屏幕宽度小于 768px 时应用的样式 */ // some code... } ``` ### 断点 断点(breakpoints),设备屏幕宽度的特定点应用不同的样式,可以实现针对不同屏幕尺寸的布局调整。 Example: ```css @media (max-width: 767px) { /* 在屏幕宽度小于 768px 时应用的样式 */ // some code... } @media (min-width: 768px) and (max-width: 1023px) { /* 在屏幕宽度大于等于 768px 且小于等于 1023px 时应用的样式 */ // some code... } @media (min-width: 1024px) { /* 在屏幕宽度大于等于 1024px 时应用的样式 */ // some code... } ``` ### 流式布局 使用百分比单位来设置元素宽度,将容器和元素的宽度设置为百分比,可以使它们相对于父容器自适应调整。 Example: ```css .container { width: 100%; } .box{ width: 90%; } ``` ## Sass 和 Less Sass(Syntactically Awesome Stylesheets)和 Less(Leaner CSS)是两种流行的 CSS 预处理器,为 CSS 提供了一些额外的特性。 ### 语法: * Sass:Sass 有两种语法。旧语法被称为缩进语法,是一种简洁的语法。新语法("SCSS",Sassy CSS)则完全兼容 CSS3,在 CSS3 语法的基础上增加了 Sass 的特性。 * Less:Less 的语法与 CSS 非常相似,所以从 CSS 切换到 Less 非常容易。大括号和分号都是必须的,和CSS 中一样。 ### 变量: * Sass:使用 $ 符号来定义变量。 Example: ```scss $primary-color: white; ``` * Less 使用 @ 符号来定义和引用变量。 Example: ```less @primary-color: ``` ### 嵌套 Sass 和 Less 都支持选择器的嵌套,也更易于维护。 ```css nav { ul { list-style: none; } li { display: inline-block; } a { text-decoration: none; } } ``` ### 混合(Mixins) Sass:使用 @mixin 指令来定义混合,然后通过 @include 来调用。 ```scss @mixin border-radius($radius) { border-radius: $radius; } .box { @include border-radius(.375rem); } ``` Less:定义混合,然后通过类名直接调用。 ```less .border-radius(@radius) { border-radius: @radius; } .box { .border-radius(.375rem); } ``` ## BootStrap 另外本周还学习了BootStrap v3。它是一个流行的前端框架。使用栅格系统来创建响应式的布局,将屏幕分为最多 12 列,可以通过指定元素应该占用的列数,来控制元素在不同的屏幕尺寸上的显示方式。提供了UI组件、自定义主题、JavaScript 插件等功能。支持所有现代浏览器,以及 **Internet Explorer 8** 及以上版本。 # JavaScript篇 JavaScript 是一种基于对象的编程语言。但是,JavaScript 对象并不是类的实例,而是通过原型继承从其他对象继承属性。本周主要学习了原型、原型链以及继承。 ## 对象 三种创建对象的方法 ### 对象字面量 ```javascript let Dragon = { name: "Dracowyn", age: 300, sayName: function() { console.log("Hello, " + this.name); } }; ``` ### 构造函数 定义一个构造函数,然后使用 new 关键字来创建对象。 ```javascript function Dragon(name, age) { this.name = name; this.age = age; this.sayName = function() { console.log("Hello, " + this.name); }; } let Dracowyn = new Dragon("Dracowyn", 300); ``` ### Object.create() 从现有对象创建新对象 ```javascript let Dragon = { name: "Dracowyn", age: 300, sayName: function() { console.log("Hello, " + this.name); } }; let Dracowyn = Object.create(Dragon); ``` ~~Dracowyn其实已经三百多岁了.jpg~~ ## 原型 函数都有一个特殊的属性 prototype,prototype 是一个对象,包含了通过这个函数(作为构造函数)创建的所有实例共享的属性和方法。 Example: ```JavaScript function Dragon(name) { this.name = name; } Dragon.prototype.sayName = function() { console.log("Hello, " + this.name); }; let Dracowyn = new Dragon("Dracowyn") Dracowyn.sayName() // Hello, Dracowyn ``` 在 Dragon.prototype 上定义了一个 sayName 方法。这样,所有由 Dragon 构造函数创建的实例都可以访问这个 sayName 方法。 ## 原型链 访问一个对象的某个属性时,如果找不到,会沿着这个对象的原型链往上查找,直到找到这个属性或者到达原型链的顶端(null)。 原型链的构建是通过创建对象的方式决定的: * **使用对象字面量创建一个对象时,这个对象的原型就是 Object.prototype**。 * **使用构造函数创建一个对象时,这个对象的原型就是构造函数的 prototype 对象。** Example: ```JavaScript function Dragon(name) { this.name = name; } Dragon.prototype.sayName = function() { console.log("Hello, " + this.name); }; let Dracowyn = new Dragon("Dracowyn"); Dracowyn.sayName(); // Hello, Dracowyn console.log(Dracowyn.toString()); // [object Object] ``` Dragon 对象上找不到 sayName 方法,于是沿着原型链查找,找到了 Dragonprototype.sayName,然后调用它。当调用 toString 方法时,Dragon 对象和 Person.prototype 都没有 toString 方法,于是 JavaScript 继续沿着原型链查找,最后在 Object.prototype 上找到了 toString 方法,然后调用它。 ## 继承 ### 原型继承 JavaScript 中的对象具有指向其原型对象的链接。 ```JavaScript function Dragon(name) { this.name = name; } Dragon.prototype.sayName = function() { console.log("Hello, " + this.name); }; function Employee(name, title) { Dragon.call(this, name); this.title = title; } Employee.prototype = Object.create(Dragon.prototype); Employee.prototype.constructor = Employee; let Dracowyn = new Employee("Dracowyn", "Engineer"); Dracowyn.sayName(); // "Hello, Dracowyn" Dracowyn // Employee {name: 'Dracowyn', title: 'Engineer'} ``` 定义了一个 Dragon 构造函数,然后定义了一个 Employee 构造函数。将 Employee 的原型设置为 Dragon 的实例,从而实现了 Employee 对象继承 Dragon 对象的属性和方法。 ### 构造函数继承 也称为经典继承或借用构造函数继承,一种通过在子类构造函数中调用父类构造函数来实现继承的方式。 通过在子类构造函数中调用父类构造函数,来继承父类的属性和方法。在子类构造函数内部,可以使用 call() 或 apply() 方法来调用父类构造函数,并将子类对象绑定到 this 关键字上,从而实现继承。**缺点是无法继承父类原型对象上的方法。** Example1: ```JavaScript function Dragon(name) { this.name = name; } Dragon.prototype.sayName= function () { console.log("Hello, " + this.name); }; function Employee(title) { Dragon.apply(this, Array.prototype.slice.call(arguments, 1)); this.title = title; } let Dracowyn = new Employee("Engineer", "Dracowyn"); ``` Example2: ```JavaScript function Dragon(name) { this.name = name; } Dragon.prototype.sayName = function() { console.log("My name is " + this.name); } function Color(name, color) { Dragon.call(this, name); this.color = color; } let Dracowyn = new Color("Dracowyn", "white"); Dracowyn.sayName(); // 报错,因为 Dracowyn.prototype 中没有 sayName 方法 ``` ### 组合继承 也被称为伪经典继承,结合了原型链继承和构造函数继承的优点。 1. 原型链继承: 原型链继承使得子类型能够使用父类型的方法。这是通过将子类型的原型设置为父类型的实例来实现的。 2. 构造函数继承: 构造函数继承则解决了原型继承的一个主要问题,即多个实例共享原型中的引用类型属性。通过在子类型的构造函数中调用父类型的构造函数,可以确保每个实例都有自己的属性。 Example: ``` function Dragon(name) { this.name = name; this.colors = ['white']; } Dragon.prototype.getName = function () { return this.name; }; function Child(name, age) { Dragon.call(this, name); this.age = age; } Child.prototype = new Dragon(); Child.prototype.constructor = Child; let Dracowyn = new Child('Dracowyn', '300'); Dracowyn.colors.push('black'); // 其实Dracowyn没有黑色的版本 ``` 定义了一个 Dragon 构造函数,然后定义了一个 Child 构造函数。在 Child 的构造函数中调用 Person.call(this, name);,从而实现了属性继承,然后将 Child 的原型设置为 Dragon 的实例 Child.prototype = new Person();,从而实现了方法继承。 Last modification:October 18, 2023 © Reprint prohibited Support Appreciate the author AliPayWeChat Like If you think my article is useful to you, please feel free to appreciate