语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响,但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。
那么我们接下来就用案例来看看吧.
ES6的class写法原理是 构造函数 + 原型
先来一个小学生必背的九九乘法表.
<script>class Cfb {// 构造函数,输入参数n 为n*n乘法表constructor(n) {this.n = n//创建 str ,乘法表内容刚在 div 里面this.str = '<div>'// 调用 循环和打印功能this.init()this.print()}//原型init(){//业务逻辑: 两个 for 循环嵌套 for (let index = 1; index <= this.n; index++) {for (let j = 1; j <= index; j++) {// 每一个 乘法式 放在 span 里,this.str += `<span>${j} x ${index} = ${index * j}</span>`}this.str += '<br>'}this.str += '</div>'}//执行后,页面打印print(){ document.write(this.str)}}//最后 直接调用new Cfb(9)</script>
来看看打印效果
感觉差点什么,加个样式渲染下页面
<style>div {width: 909px; /* 设置宽 */margin: 30px auto;/* 居中 */border-left: 1px solid #333;border-bottom: 1px solid #333;}span {/*span 为行内元素,设置为行内块元素*/display: inline-block;width: 100px;height: 25px;text-align: center;/* 文本水平居中 */line-height: 25px;/* 文本垂直居中 */border-top: 1px solid #333;border-right: 1px solid #333;background-color: aqua;/*背景色*/}</style>
再来看看
哈哈,看起来舒服多了.
再来写一个 tab 切换卡
首先布局
<body><div id="box"><ul><li class="active">html</li><li>css</li><li>javascript</li></ul><ol><li class="active">html是超文本标记语言</li><li>css是层叠样式表</li><li>javascrpt代表网页行为，是前端开发的核心。</li></ol></div>
</body>
接着是设置样式
<style>ul,ol,li {list-style: none; }div {width: 400px;height: 300px;margin: 30px auto;display: flex; /* 设置弹性盒 */flex-direction: column;}div>ul {height: 40px;display: flex;}div>ul>li {flex: 1;display: flex;/* 文本居中*/justify-content: center;align-items: center;color: #fff;background-color: pink;cursor: pointer;/*鼠标移入变小手*/}div>ul>li.active {background-color: orange;}div>ol {flex: 1;position: relative;}div>ol>li {width: 100%;height: 100%;position: absolute;left: 0;top: 0;background-color: skyblue;display: none;justify-content: center;align-items: center;}div>ol>li.active {display: flex;}</style>
最后是js代码
<script>//三块按钮对应三块内容。//第一个按钮对应下面的第一块内容，依次类推。class Tab {//type = 'click' : 默认点击切换constructor(id, type = 'click') {// 获取元素this.btns = document.querySelectorAll(`${id} ul li`)this.tabs = document.querySelectorAll(`${id} ol li`)this.type = type//调用切换功能this.change()}change() {for (let index = 0; index < this.btns.length; index++) {this.btns[index].i = index //把下标存起来this.btns[index].addEventListener( this.type, (e) =>{// 使用箭头函数, this 指向外层e = e || window.event//处理兼容写法for (let j = 0; j < this.btns.length; j++) {//先移除所有 class 类名this.btns[j].className = ''this.tabs[j].className = ''}//给当前 点击的按钮 设置 类名e.currentTarget.classList = 'active'this.tabs[e.currentTarget.i].classList = 'active'})}}}//直接调用new Tab('#box')// 如果不想点击切换 ,直接在括号里第二个参数添加你想使用的切换方式// 这里我使用了 鼠标移入 切换选项卡//new Tab('#box', 'mouseover')</script>
写在最后:
es引入class JavaScript 语言中，生成实例对象的传统方法是通过构造函数。
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。
通过class关键字，可以定义类。
ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法。
