class语法糖,尝尝嘛~~

最新推荐文章于 2024-05-12 22:40:26 发布

小确觞

最新推荐文章于 2024-05-12 22:40:26 发布

阅读量316

点赞数

分类专栏：笔记文章标签： javascript class

本文链接：https://blog.csdn.net/weixin_46178124/article/details/105857352

版权

笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

语法糖（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写法让对象原型的写法更加清晰、更像面向对象编程的语法。

小确觞

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
class语法糖,尝尝嘛~~

语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响,但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。那么我们接下来就用案例来看看吧.ES6的class写法原理是构造函数 + 原型先来一个小学生必背...
复制链接

扫一扫