前端— js(脚本语言ES Dom Bom层次讲的)

js介绍：

一、js编程基础
（1）js 数据类型
（2）js字符串比较 https://blog.csdn.net/qq_42445490/article/details/88819093

二、Dom操作（文档对象模型window.document，即操作我们写的html页面）
获取dom节点，节点的增删改查，可以修改样式、属性，节点设置事件函数处理动态逻辑等。可以拿到3大家族属性（用于获取元素自身的位置和大小）
目前vue、react框架都是基于虚拟dom开发的，不进行dom操作，通过数据驱动。如果想获取到dom节点驱动组件实际方法或dom方法，可使用ref转发。

   1、offect系列(偏移量上、左、自身宽、高及定位元素)，若有滚动包
   （1）el.offsetParent 元素的祖先中最近的定位元素，若都没有定位则返回body（不能是static静态定位 ）
           元素自身有fixed定位，返回null。元素自身无fixed定位，层层父级无定位此时body,有的话就是最近的元素。body自身的null(document.body.offsetParent)
   （2）el.offsetTop：表示元素距离其offsetParent上方的偏移（即距离定位元素的垂直距离）
   （3）el.offsetLeft ：表示元素距离其offsetParen左边框的偏移
   （4）el.offsetWidth：元素实际宽度 左右border+左右padding+width
   （5）el.offsetHeight：元素实际高度 上下border+上下padding+height
   
   offset VS style

offset VS style （基本通过父定位自己定位设置的 top样式属性值，或设置自身宽高）
获得的数据没有单位，数字值30 带单位的字符串 ‘30px’
得到任意样式表样式 只获取行内样式(直接在htnl标签设置的)
offsetWidth包含三部分边框、内边距、width style.width只包含width
offsetWidth只读属性 style.width可以读写

   2、cliect系列（可以动态获取元素边框大小、自身大小） 不常用,一般指可视区域，即不包滚动。跟border是无关的
   （1）el.clientTop：返回元素上边框宽度
   （2）el.clientLeft：返回元素左边框宽度
   （3）el.clientWidth：返回元素宽度 padding+内容宽 （与offsetWidth不同的是没有border）
   （4）el.clientHeight:返回元素高度 padding+内容高 结果不带单位

   3、scroll系列
   (1)  el.scrollTop: 被卷去的上侧距离
   (2)  el.scrollLeft: 被卷去的左侧距离
   (3)  el.scrollWidth:自身实际宽度 不含边框，若有滚动包
   (4)  el.scrollHeight:自身实际高度 不含边框，卷上去的总共高度

三、Bom操作（浏览器对象模型。获取或操作浏览器的属性和方法）：url中 的属性、历史记录、屏幕属性和一些方法等
1、window,location(当前窗口的url的各个信息)
window.location 只读属性，返回location对象，包含当前文档的信息
用法：
（1）window.location 会输出当前文档地址的信息对象

（2）window.location.assign(“http://www.mozilla.org”); // or window.location = “http://www.mozilla.org”; 执行该代码会导航到新页面（同义window.location.href） 执行这三个语句都可以跳转至新的导航页，实在当前的窗口跳转的
（3）window.location.reload(true) 强制重新加载页面（同浏览器的刷新按钮）、window.location.replace(‘地址url’),该方法不会加到历史访问记录中，不能使用前进，后退
（4） window.location.href 返回当前页面的完整url
（5）window.location.protocol 返回所使用的 web 协议（'http:'或 ‘https:’）
（6）window.location.hostname 主机（即域名）
（7）window.location.host 主机：端口 （若没有端口，host与hostname一样）
（8）window.location.port 端口 ‘8887’ 无返回 ‘’
（9）window.location.pathname 返回当前页面的文件名 ‘shop-admin’。（首个 / 开始的路径名称）
（10）window.location.origin 返回当前页面的协议+域名+端口号 （常用）
（11）window.location.hash #后跟随的锚点或是片段标识符
（12）window.location.search 首个／开头的?后的查询字符串 ‘?a=1’
2、window.history（history对象提供了方法和属性，允许您在浏览器窗口的用户历史中来回导航，并操作历史堆栈的内容）

（1）window.history.back(); 向后跳转，这和浏览器点击回退按钮一样
（2）window.history.forward(); 向前跳转
（3）window.history.go(-1); window.history.go(1); 传整数，跳转至指定的页面
（4）window.history.length 该属性保存着历史记录中的数量，若是用户打开的第一个页面，此时该属性的值为0
⚠️虽然 history 并不常用，但在创建自定义的“后退”和“前进”按钮，以及检测当前页面是不是用户历史记录中的第一个页面时，还是必须使用它

3、window.screen （用于检查当前窗口所呈现的屏幕的属性,具体是屏幕的属性和显示性能的属性）

window.screen.width：用户整个屏幕宽度，与当前浏览器大小无关；
window.screen.height：用户整个屏幕高度，与当前浏览器大小无关；
window.screen.availWidth：当前window窗口可用宽度，即浏览器在屏幕上所占宽度；
window.screen.availHeight：当前window窗口可用高度，即浏览器在屏幕上所占高度；
window.screenLeft：浏览器窗口距用户屏幕左侧距离；
window.screenTop：浏览器窗口距用户屏幕顶部距离；

4、window,navigator：只读属性，返回navigator的引用，拿到运营当前代码应用的信息。例如用于检测当前浏览器名称、检测当前是什么浏览器

aKeys = [“MSIE”, “Firefox”, “Safari”, “Chrome”, “Opera”],
sUsrAg = navigator.userAgent, 返回浏览器名称

5、window.open() :用于打开一个新的浏览器窗口或查找一个已命名的窗口

window.open(url, '_blank', 'noopener');   // noopener防止重定向等获取一些私密信息，出于安全性考虑
indow.open(URL,name,specs,replace) // url是地址，可以利用它进行excel的下载（导出）或者页面的跳转
// 第二个参数
_blank - URL加载到一个新的窗口。这是默认
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集
name - 窗口名称

还可以设置宽高等各个参数。

6、window.cloce() ：关闭当前窗口或某个指定的窗口，只能关闭window.open()打开的窗口，如果关闭的对应窗口不是window.open打开的此时会跑错：
不能使用脚本关闭一个不是由脚本打开的窗口。 或 Scripts may not close windows that were not opened by script. 。

7、常用获取浏览器尺寸的方法：https://aaaaaandy.github.io/blog/2019/12/10/JavaScript/JavaScript%E5%90%84%E7%A7%8D%E5%AE%BD%E9%AB%98%E5%B1%9E%E6%80%A7/
（1）对于IE, chrome, firefox, opera, safari浏览器

window.innerHeight;
window.innerWidth

（2）对于IE8, 7, 6, 5浏览器

var wid = document.documentElement.clientWidth;
var hei = document.documentElement.clientHeight
或
var wid = document.body.clientWidth;
var hei = document.body.clientHeight;

（3）浏览器尺寸

window.innerWidth：浏览器内html可见区域的宽度；
window.outerWidth：浏览器整个窗口，包括滚动条的宽度；
window.innerHeight：浏览器内html可见区域的高度；
window.outerHeight：浏览器整个窗口，包括tab栏的高度；

vue-router、 react-router中也有封装的地址等的方法实现 location及history中的功能。看vue项目中路由的知识。

⚠️ ：鼠标键盘的相关属性，部分获取是通过事件对象event中获取的
vue项目中，事件的event参数默认在最后一个

@click = 'openArrange(scope.row, item + 1, weekList[item].label)'
openArrange(row, item, weekDay, event = {}){}

react项目中，它是事件的默认参数（默认参数和手动传参时以下写法）

onChange={event => this.change(event, index)}

Event事件对象常用属性和方法：（导致事件的元素，事件的类型以及其他与特定事件相关的信息）

pageX|pageY:光标相对网页的水平或垂直距离
screenX|screenY：光标相对屏幕的水平或垂直距离
clientX|clientY:在可视区域内相对网页的距离
target：触发 的节点
type 类型，是什么事件
preventDefault() 阻止默认行为（浏览器默认行为：点击一个链接 —— 触发导航（navigation）到该 URL。点击表单的提交按钮 —— 触发提交到服务器的行为。在文本上按下鼠标按钮并移动 —— 选中文本。事件 默认行为：点击一下超链接a标签的时候，它会有一个跳转的行为；当你在网页上点鼠标右键时会出现一个右键菜）
stopPropagation() 阻止冒泡

常用的js库及介绍：
1、moment:解析、校验、操作、显示日期和时间的 JavaScript 工具库（基于Data的封装，不会改变Data的操作）,网址https://momentjs.bootcss.com/
（1）解析（支持多种日期格式和写法）：不传参数、字符串参数、字符串带格式参数、对象参数等
（2）取值／赋值：获取或设置日期中的项
例如获取设置毫秒值

moment().millisecond(Number);
moment().millisecond(); // 数字

（3）操作：加、减等

moment().add(Number, String); //加某项值
// 增加年 月 日 天 小时 周 分钟 等都可
moment().add(7, 'days');//在当前日期上加7天
moment().subtract(7, 'days'); // 减

（4）显示（当解析和操作完成后，展示给用户的格式）

moment().format('YYYY-MM-DD HH:mm:ss');

（5）日期与时间戳的相互转换

moment().valueOf();//输出自 Unix 纪元以来的毫秒数
moment(timestamp).format('YYYY-MM-DD HH:mm:ss') // 时间戳转日期格式

2、ramda:用的 JavaScript 函数式编程库,封装了js常用的操作，函数式编程、数据不变性、函数无副作用、柯里化
3、sanctuary：js函数编程库

4、qs:更好的处理url参数(可以转成json对象或序列化数据，一般根据后端要求的传参转成对应的形式，跟头信息content-type对应的)
方法：let url = ‘http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e‘; let params = { c: ‘b‘, a: ‘d‘ };
(1) qs.parse（将序列化数据转为json对象）：et data = qs.parse(url.split(‘?‘)[1])。data:{a: 1,b: 2,c: ‘‘,d: xxx,e: ‘‘}
(2)qs.stringify(把一个参数json对象转为序列化字符串)： qs.stringify(params) // ‘c=b&a=d‘

// 常用案例，将查询参数进行格式转化或者主动更改url中的查询参数
let url = ‘http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e‘; 
// 办法1 
let querydata=url.split('?')[1]  // 拿到？后的查询参数a=1&b=2&c=&d=xxx&e
let objectQueryData=qs.parse(querydata)    // {a: 1,b: 2,c: ‘‘,d: xxx,e: ‘‘}
// 此时要替换哪个查询参数更新替换，替换后转成序列化格式拼接在url的？后
let params= qs.stringify(objectQueryData) // 'a=1&b=2&c=&d=xxx&e'

// 方法2
let url=window.location.href
if(!url||!url.includes('?')) return ''   // 当没有url或没有？时表示没有查询参数
  const index = url.lastIndexOf('?');
  const len = url.length;
  return url.substring(index + 1, len); // 截取最后一个?后的字符串，即拿到序列化的查询参数

5、Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库（https://www.lodashjs.com/）
6、jQuery:js库。jQuery是一个快速、小巧且功能丰富的JavaScript库。它使HTML文档遍历和操作（获取操作dom）、事件处理、动画和Ajax等工作变得更加简单，通过一个易于使用的、可跨多种浏览器工作的API。

7、clipboard.js：复制粘贴插件（它的实现简洁，不需要依赖flash及其他框架，不需要加载数百KB的js文件）使用中需考虑浏览器的剪切板是否可用（https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard）
可参考地址：https://segmentfault.com/a/1190000020651289
使用方法：
（1）下载引入项目：npm install clipboard --save。在main.js引入，或组件用到时引入。 或使用cdn轻链接
（2）通过传入dom创建实例
（3）实现方式： 从target复印目标内容，通过function 要复印的内容，通过属性返回复印的内容
通过属性返回复制的内容：:data-clipboard-text=‘storeId’ // 最后复制内容就是变量storeId

 el-button(
            class='copy'
            :data-clipboard-text='storeId'
            @click='copy'
          ) {{storeId}}
```javascript

// 复制
copy() {
const clipboard = new ClipboardJS(‘.copy’); // 获取要复制区域对应的dom,并创建实例。从而操作实例上的方法／
// 通过传递DOM选择器，HTML元素或HTML元素列表实例化
clipboard.on(‘success’, (e) => { // 复制成功的回调
this.$message.success(‘复制成功，内容为：${e.text}`);
e.clearSelection();
// 释放内存
clipboard.destroy();
});
clipboard.on(‘error’, () => { // 复制失败的回调
// 不支持复制
this.$message.error(‘该浏览器不支持自动复制’);
// 释放内存
clipboard.destroy();
});
},
// 按钮被点击时返回的是对应的text

从target复印目标内容：data-clipboard-target指向复印节点，这里指input的目标id
data-clipboard-action这里使用copy，同时也可以使用cut，则点击按钮后，内容里的值被剪切。如果没有指定，则默认值是copy。cut只能在input和textare中起作用

```html
<input id="foo" type="text" value="hello">  // 需要复制的节点内容
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

 var clipboard = new Clipboard('.btn'); //创建实例
        clipboard.on('success', function(e) {
        // 注意，成功事件中可获取，对应的操作内容text  操作节点的dom元素triger   是什么操作（复制剪切等）.action
        this.message.success(`复制成功，内容为：${e.text}`);
        e.clearSelection();
          // 释放内存
        clipboard.destroy();
        });

        clipboard.on('error', function(e) {
               // 不支持复制
        this.$message.error('该浏览器不支持自动复制');
          // 释放内存
        clipboard.destroy();
        });
通过function规定要复制的内容：

```html
<button class="btn">Copy_target</button>
    <div>hello</div>

 var clipboard = new Clipboard('.btn', {
    // 通过target指定要复印的节点
        target: function() {
                   ==return document.querySelector('div');==
              }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });

8、echarts.js:是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求(图表工具库):https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
（1）项目引入
（2）使用（vue有两种方式使用）
方式1:直接引入echarts（npm install echarts --save 或使用cdn）(前端项目通用的方式)

// 在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器
<div id="main" style="width: 600px;height:400px;"></div>

//通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法配置图形
// （1）基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // （2）指定图表的配置项和数据
        var option = { // 根据需求具体配置所需的图形及设置对应的数据
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        //（3） 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

方式2: 使用vue-echarts 组件（npm install vue-echarts -S）

ECharts(:options='option(value)')  // pug写法

// 利用组件实现图表
import ECharts from 'vue-echarts/components/ECharts';
import 'echarts';
// 主要配置option
{
 title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
}
// 具体配置用时查文档

9、生成二维码的js库：qrcode.react js库，不依赖其他任何库
10、用于生成唯一标识符的js库： uuid （前后端交互中有讲解）
11、易于操作cookie的js库：js-cookie
12、汉字转拼音的js库：js-pinyin （经常用于suggest搜索，不仅支持label，还支持对应的拼音搜索）可以拿到拼音、声母、韵目等信息

// 案例
import pinyin from 'js-pinyin';
pinyin.getFullChars('汉语拼音').toLowerCase() // 得到小写的拼音 hanyupinyin

数据格式化 网址 ：https://www.json.cn/