关于HarmonyOS的学习

最新推荐文章于 2024-10-15 10:20:47 发布

yiyiy111yiy

最新推荐文章于 2024-10-15 10:20:47 发布

阅读量1.2k

点赞数 29

文章标签：学习前端 javascript

本文链接：https://blog.csdn.net/m0_72035166/article/details/142206063

版权

day30

一、自执行函数

+ IIFE + 语法 => (function(){}()) => (function(){})() => !function(){}() => ~function(){}() + 特点 => 当函数调用完毕后，存储空间会默认被销毁 + 作用 => 页面初始化 => 配合闭包使用 => 做模块化（伪模块化）

    let fn = (function(){
        console.log('hello')
    })()
    console.log(fn) // undefined

    let fn2 = function(){
        console.log('hello')
    }
    fn2()
    console.log(fn2)

二、伪模块化（解决命名冲突，便于依赖管理）

1.AMD（异步模块定义）依赖前置：提前引入，文件开头把需要的模块一次性全部引入，后面直接用前期消耗大，后期执行效率高

2.CMD（通用模块定义）按需加载：在代码执行过程中需要一个模块了再去加载整个曲线比较平滑

3.CommonJS 适用于服务端的js模块化，node.js

4.ES6 Module 现在大多主流浏览器都支持条件： ①服务器环境下打开，vscode插件 live server ②在script标签中加入type="module" 导出： => export => export default 导入： ①单个导出的代码，在接收的时候必须以解构赋值的方式接收。如果遇到导出的文件里面有相同的命名的变量，可以使用as关键字来取别名，避免发生冲突问题 ②导入的语法（默认导入），都会默认进行声明提升，会提升到最顶端。但是建议，导入的语法一般放在代码最上面 ③导入（接收的是默认导出的文件里面的代码） => import { } from '路径' => import 变量名称 from '路径'（这种语法默认只能在顶层导入，不能在事件里面使用） => import().then(res=>{})（按需加载）

三、防抖和节流

1.防抖指的是用户触发事件过于频繁，只要最后一次事件的操作

    let txt = document.querySelector('input')
    let timer = null
    let count = 0
    txt.oninput = function(){
        count++
        console.log(count)
        if(timer != null){
            clearTimeout(timer)
        }
        timer = setTimeout(()=>{
            console.log(this.value)
        }, 500)
    }

2.节流控制事件执行的次数

    let flag = true
    window.onscroll = ()=>{
        if(flag){
            flag = false
            setTimeout(()=>{
                console.log('hello')
                flag = true
            }, 500)
        }
    }

四、自定义属性方式

<!-- <button data-id="1">按钮</button> -->

<button>按钮</button>
<script>
    let btn = document.querySelector('button')
    // console.log(btn.dataset.id)

    btn.dataset.id = 1

    console.log(btn.dataset.id)