H5与JS笔记

HTML5

来源：HTML 基础 - 学习 Web 开发 | MDN (mozilla.org)

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。

HTML的主要元素包括：开始标签（Opening tag），结束标签（Closing tag），内容（Content）和元素（Element）。元素也可以有属性（Attribute）。

属性应该包含：

在属性与元素名称（或上一个属性，如果有超过一个属性的话）之间的空格符。
属性的名称，并接上一个等号。
由引号所包围的属性值。

将一个元素置于其他元素之中——称作嵌套。

不包含任何内容的元素称为空元素。比如元素。

<img src="images/firefox-icon.png" alt="My test image" />

图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。但图像元素可以添加alt作为图像注释，在图像加载不出来的时候使用。

链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的元素 — <a> — a 是 "anchor" （锚）的缩写。

A link to my favorite website.

剖析HTML 文档

<!doctype html>  声明类型文档
<html lang="zh-CN">   HTML元素，又称为根元素
  <head>        head元素，包含了所有你想包含在 HTML 页面中但不在 HTML 页面中显示的内容。
    <meta charset="utf-8" />        meta元素，代表了不能由其他 HTML 元相关元素表示的元数据
    <title>我的测试站点</title>   页面标题
  </head>
  <body>  body元素：包含了访问页面时所有显示在页面上的内容
    <p>这是我的页面</p>  
  </body>
</html>

在 HTML 元素的内容中使用多少空格（包括一个或多个空白字符或换行），当渲染这些代码的时候，HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。

描述列表

描述列表使用与其他列表类型不同的闭合标签——dl；此外，每一项都用 dt（description term）元素闭合。每个描述都用 dd（description definition）元素闭合。

JavaScript

[JavaScript 基础 - 学习 Web 开发 | MDN](JavaScript 基础 - 学习 Web 开发 | MDN (mozilla.org))

JavaScript（缩写：JS）是一门完备的动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。

HTML引用JS脚本：

<script src="scripts/main.js" defer></script>

变量是存储值的容器。要声明一个变量，先输入关键字 let 或 var，然后输入合适的名称。

条件语句

let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("我最喜欢巧克力冰淇淋了。");
} else {
  alert("但是巧克力才是我的最爱呀……");
}

函数

function multiply(num1, num2) {
  let result = num1 * num2;
  return result;
}

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是点击事件，鼠标的点击操作会触发该事件。

document.querySelector("html").addEventListener("click", function () {
  alert("别戳我，我怕疼。");
});
document.querySelector("html").addEventListener("click", () => {
  alert("别戳我，我怕疼。");
});
// 匿名函数的两种写法

JavaScript

JS数组

Push方法:改变原始数组，并且可以接受多个参数，每个参数都会作为一个单独的元素被添加到数组的末尾。

concat方法是将两个或多个数组拼接并返回一个新的数组。

JS字符串

在JavaScript中，你可以使用反引号 \ 或者单引号\' 和双引号 \" 来创建字符。反引号允许在字符串内直接嵌入变量和表达式，这被称为模板字符串（Template Literals）。单引号用来创建普通的字符串。如果你要在字符串中插入变量或表达式的值，你需要使用字符串拼接操作符 +`。

前端本地开发，URL如何设置？ - 个人文章 - SegmentFault 思否

前端请求中body和query传参的区别

通常情况下，Get请求只能传Query参数，POST可以传Query和Body（常用）两种形式的参数。Query代表请求的参数，URL以?key=value的形式呈现。Query的值只能是一个字符串，不能传递对象类型的参数，如果参数中涉及到了传递对象，就要选择Body传参，一般json等都是Body传参。

Get传Query参数

// 其他文件中需要传递的参数
let queryParams = {
    project_id: ID
};

// get请求
export function getIDSearchProject(params) {
    return http.get('api路径', {params});
}
// 使用方法
getIDSearchProject(queryParams)

POST传Body参数

// 其他文件中需要传递的参数
let queryParams = {
    project_id: ID
};

// post请求
export function getSearchProject(param) {
    return http.post('api路径', param);
}
// 使用方法
getSearchProject(queryParams)

不同页面间的数据传递

通过URL跳转

跳转页面

对于大部分页面，只需要在跳转URL后面加上参数即可。其中，URL也可使用反引号的形式来表示。

    gotoHomeProject(id){
        uni.navigateTo({
            url: '/pages/home/index?id='+ id
            // url: `/pages/home/index?id=${id}` // 使用反引号的另一种写法
        });
    }

然而，在uni-app中，使用uni.navigateTo无法跳转至tabBar页面。而使用uni.switchTabs跳转时不能携带参数。要在uni-app中实现带参数跳转至tabBar可以使用uni.reLaunch来实现。但需要注意的是该方法会关闭所有页面。

        gotoHomeProject(id){
            uni.reLaunch({ //关闭所有页面，打开到应用内的某个页面。
                url: '/pages/tabBar/home/index?id='+ id
            });
        }

接收页面

要实现接收，只需在onload中将url中所携带的参数赋值给页面中的参数。

    onLoad(option){
        if(JSON.stringify(option)!='{}'){
            this.projectId = option.id;
            }
    }

异步JS

在同步程序中，浏览器是按照书写代码的顺序一步一步执行。异步可以使程序在执行一个可能长期运行的任务的同时继续对其他事件做出反应而不必等待该任务完成。若使用回调函数进行异步，面对嵌套回调时会造成代码难以阅读和调试的问题。JavaScript 中异步编程主要通过Promise实现。

Promise

在基于 Promise 的 API 中，异步函数会启动操作并返回一个 Promise 对象。然后，可以将处理函数附加到 Promise 对象上，当操作完成时（成功或失败），这些处理函数将被执行。

在控制台中，Promise { <state>: "pending" }表示有一个 Promise 对象，它有一个 state属性，值是 "pending"。"pending" 状态意味着操作仍在进行中。

链式使用Promise

为了支持错误处理，Promise 对象提供了一个 catch() 方法。这很像 then()：你调用它并传入一个处理函数。然后，当异步操作成功时，传递给 then() 的处理函数被调用，而当异步操作失败时，传递给 catch() 的处理函数被调用。

如果将 catch() 添加到 Promise 链的末尾，它就可以在任何异步函数失败时被调用。于是，我们就可以将一个操作实现为几个连续的异步函数调用，并在一个地方处理所有错误。

// 先获取id并通过用户id获取信息
method() {
    // 调用接口
    this.$api.common.getmethod().then((res) => {
        if (res.length < 1) {
            throw new Error(`。。。。`);
        }
        uni.setStorageSync('Id', res[0].id);
        return res[0].id;
        }).then((id) => {

        this.getInfoById(id);

    }).catch((err) => {
        this.$u.toast(err.msg);
    });
},

workers

通过workers可以实现多线程。

有三种不同类型的 workers：

dedicated workers
shared workers
service workers

钩子（hook）

JavaScript中的钩子(钩子机制\钩子函数\hook)是什么？ - 个人文章 - SegmentFault 思否

钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作。一段用以处理系统消息的程序，用以处理系统消息的程序，是说钩子函数是用于处理系统消息的。回调函数是留了个函数，但是这个函数不是立即执行，而是绑定了个事件。当事件触发时，自动执行函数，而非必须执行。

CSS布局

盒模型 - 学习 Web 开发 | MDN (mozilla.org)

在 CSS 中，一般分为区块盒子（block boxes）和行内盒子（inline boxes）。类型指的是盒子在页面流中的行为方式以及与页面上其他盒子的关系。盒子有内部显示（inner display type）和外部显示（outer display type）两种类型。

外部显示类型

block

盒子会产生换行。
width 和 height 属性可以发挥作用。
如果未指定 width，方框将沿行向扩展，以填充其容器中的可用空间。在大多数情况下，盒子会变得与其容器一样宽，占据可用空间的 100%。

inline

盒子不会产生换行。
width 和 height 属性将不起作用。
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于 inline 状态的盒子推开。

内部显示类型

区块和行内布局是网络上的默认行为方式。默认情况下，在没有任何其他指令的情况下，方框内的元素也会以标准流的方式布局，并表现为区块或行内盒子。

常用的display: flex;，该元素仍将使用外部显示类型 block 但内部显示类型将变为 flex。该方框的任何直接子代都将成为弹性（flex）项，并按照弹性盒子规范执行。

盒模型的各个部分

常规流布局

默认情况下，一个块级元素会填充其父元素所有的行向空间，并沿着其块向伸长以容纳其内容。行级元素的大小就是其本身的大小。你可以为某些 display 属性值默认为 inline 的元素。 display 仍将保持为 inline。

H5与JS笔记

HTML5

剖析HTML 文档

描述列表

JavaScript

JavaScript

条件语句

函数

JavaScript

JS数组

JS字符串

前端请求中body和query传参的区别

不同页面间的数据传递

通过URL跳转

异步JS

Promise

workers

钩子（hook）

CSS布局

外部显示类型

内部显示类型

盒模型的各个部分

常规流布局

弹性盒子

Grid 布局

定位技术

发送评论编辑评论

H5与JS笔记

HTML5

剖析HTML 文档

描述列表

JavaScript

JavaScript

条件语句

函数

JavaScript

JS数组

JS字符串

前端请求中body和query传参的区别

不同页面间的数据传递

通过URL跳转

异步JS

Promise

workers

钩子（hook）

CSS布局

外部显示类型

内部显示类型

盒模型的各个部分

常规流布局

弹性盒子

Grid 布局

定位技术

发送评论 编辑评论

推荐文章

发送评论编辑评论