前端基础概述-JavaScript|青训营笔记前端基础概述-JavaScript|青训营笔记这是我参与「第四届青训营」

这是我参与

「第四届青训营」笔记创作活动的第3天

什么是JavaScript

JavaScript是一门轻量级脚本语言,被广泛应用于web页面，是能够插入HTML的编程代码。

JavaScript决定了用户能对页面进行的操作行为。

如何使用JavaScript

JavaScript代码写在<script></script>标签中，在HTML的<head>和<body>都能放置，也能引用外部JS文件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>一个简单的JavaScript实例</title> 

//声明JS脚本
<script>
function myFunction(){
	document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>


</head>
<body>	
<h1>我的 Web 页面</h1>
<p id="demo">显示文本。</p>

//按钮调用JS函数
<button type="button" onclick="myFunction()">点击这里</button>

</body>
</html>

这个实例写了一个按钮被点击的事件：

通过function函数形式实现修改文本的方法，在button按钮标签中被onclick事件调用。

<script>
function myFunction(){
	document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>

在方法中document.getElementById通过id获取元素，然后再进行操作。

引用外部JS文件的方法：

<script src="myScript.js"></script>

myScript.js为外部JS文件名

JavaScript语法

JavaScript能够运用绝大部分编程语言的语法格式，有以下几点较为不同

字符串（string）可以使用单引号或双引号
通过使用var关键字创建变量（也能使用let），const创建常量
var object={FirstName:Henry，LastName:border}能够直接创建对象
JavaScript对大小写是十分敏感的
可用typeof操作符查看数据类型：typeof [1，2，3，4]；返回object
能通过对象名[参数]的形式调用对象参数

this关键字

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

如何写好JavaScript

各司其职

让HTML，CSS，JavaScript承担各自的责任，互不影响，降低耦合

//通过JavaScript切换夜间模式，
const button = document.getElementById('darkMode');
button.addEventListener('click',(e)=>{
    const body = document.body;
    if(e.target.innerHTML === 'light'){
        body.style.backgroundColor = 'black';
        body.style.color = 'white';
        e.target.innerHTML = 'dark';
    }
    else{
        body.style.backgroundColor = 'white';
        body.style.color = 'black';
	e.target.innerHTML = 'light';
	}
})

通过判断元素的状态并使用DOM API修改界面样式，将行为与样式耦合后期较难维护代码

优化代码：

//通过JavaScript切换夜间模式，不在方法中对样式进行修改
const button = document.getElementById('darkMode');
button.addEventListener('click',(e)=>{
    const body = document.body;
    if(body.className === 'light'){
        body.className = 'dark'
    }
    else{
        body.className = 'light'
	}
})

纯样式改变可尝试不使用JS代码

组件封装

重构

插件化
- 将控制元素抽取成插件
- 插件与组件之间通过依赖注入建立联系
模板化
- 将HTML做成模板（代码生成HTML）
抽象化
- 将组件抽象成通用方法，组件内可以注册若干个插件，子类可以作为父类的插件被使用

过程抽象

对应不同事件处理都有一个相同的需求，便将这个需求剥离出来，称为过程抽象

纯函数
高阶函数
- 将函数作为参数
- 以函数作为返回值
- 常用作函数装饰器

编程范式

声明式和命令式

//命令式，偏向于论述如何做
let list = [1,2,3,4];
let map = [];
for(let i = 0; i < list.length; i++)
{
	map.push(list[i] * 2);
}

//声明式
let list = [1,2,3,4];
const double = x => x * 2;
list.map(double);

前端基础概述-JavaScript|青训营笔记