字节跳动青训营--前端day3

news2024/9/30 9:29:35

文章目录

  • 前言
  • 一、写好JavaScript的一些原则
  • 二、各司其职
  • 三、组件封装
  • 四、过程抽象


前言

仅以此文章记录学习


一、写好JavaScript的一些原则

  • 各司其职:让HTML、CSS和JavaScript职能分离
  • 组件封装:好的UI组件具备正确性、扩展性、复用性
  • 过程抽象:应用函数式编程思想

二、各司其职

  • HTML/CSS/JS 各司其责
  • 应当避免不必要的由 JS 直接操作样式
  • 可以用 class 来表示状态
  • 纯展示类交互寻求零JS 方案

人话:能不用css实现的就页面效果就不用js

三、组件封装

组件是指Web页面上抽出来一个个包含模版 (HTML)功能(JS) 和样式(CSS) 的单元。

  • 组件设计的原则:封装性正确性扩展性复用性
  • 实现组件的步骤:结构设计展现效果行为设计
  • 三次重构:插件化、模板化、抽象化(组件框架)

四、过程抽象

  • 用来处理局部细节控制的一些方法
  • 是函数式编程思想的基础应用

HOF(高阶函数):

  • 以函数作为参数
  • 以函数作为返回值
  • 常用于作为函数装饰器
  • 常用高阶函数(Once,Throttle(节流),Debounce(防抖),Cosunmer(延时调用),isIterable(批量操作(迭代)))

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/174182.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

JVM堆内存分配策略(深入理解Java虚拟机第三章)

堆内存模型: 年轻代: 根据分代算法,默认小于15岁的对象称作年轻代,年轻代分为Eden区、幸存者区(Survivor Form,Survivor To),三者比例为:8:1:1 Eden 分区:对象出生分区…

Java 实现几种 异步的实现方式

前言 异步执行对于开发者来说并不陌生,在实际的开发过程中,很多场景多会使用到异步,相比同步执行,异步可以大大缩短请求链路耗时时间,比如:发送短信、邮件、异步更新等,这些都是典型的可以通过…

FL水果21最新版本电脑编曲软件FL Studio更新

电脑编曲软件也就是我们常说的宿主软件,英文简称DAW。 FL Studio俗称水果,是一款开发初衷为了电子音乐制作的宿主软件。内置了非常多优秀的合成器以及效果器插件,极为适合于电子音乐的编排。同时FL Studio支持第三方音源插件导入,…

[RootersCTF2019]ImgXweb

目录 信息收集 JWT伪造 工具使用 寻找秘钥 curl 补充知识 信息收集 进入查看源码未发现重要信息 注册admin失败,猜测应该需要垂直越权 先随意注册个账户coleak 登录后发现可以文件上传,上传shell后发现不能连接,执行命令也没有回显…

Linux常用命令——tailf命令

在线Linux命令查询工具(http://www.lzltool.com/LinuxCommand) tailf 在屏幕上显示指定文件的末尾若干行内容,通常用于日志文件的跟踪输出。 补充说明 tailf命令几乎等同于tail -f,严格说来应该与tail --followname更相似些。当文件改名之后它也能继…

微服务注册中心-Eureka

微服务注册中心-Eureka微服务注册中心-Eureka一、注册中心(Eureka)二、Euraka实现1.eureka-server端(1)新建项目,引入pom依赖(2)编写启动类,引入开启注册中心的注解(3&am…

py第八章 面向对象 笔记

8.1类与对象的基础运用类是抽象的,对象是类的实例8.1.1类的定义class 类名:属性名属性值def 方法名(self):方法体类名:大驼峰命名法:首字母一般为大写方法参数列表中的第一个参数是一个指代对象的默认参数selfclass Car:wheels4def drive(self):print(行…

非常好用,绝对未来黑马的 Python 开源测试框架 PySimpleTest

非常好用,绝对未来黑马的 Python 开源测试框架 PySimpleTest 简单介绍 PySimpleTest 是一个非常简洁开源的python代码测试框架,作者是 https://github.com/Time-Coder?tabstars 你可以在以下网站找到PyPI索引:https://pypi.org/project/P…

CSS 排行榜

CSS 排行榜 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>排行榜</title><style type"text/css">* {margin: 0;padding: 0;}/* 容器 */.rank-container {width: 400px;color: #333;font-size: 14p…

go 常用命令

巩固学习最好的方法是通过go help看文档 GO语言规范文档 终端执行命令 go help environment GOBIN The directory where ‘go install’ will install a command. go 命令使用 go <command> [arguments]command&#xff1a; The commands are:bug start a b…

十、MySQL 聚合函数、分组查询及过滤分组

文章目录一、聚合函数1.1 COUNT()函数1.2 SUM()函数1.3 AVG()函数1.4 MAX()函数1.5 MIN()函数二、分组查询及过滤分组2.1 创建分组2.2 使用HAVING过滤分组2.3 WHERE和HAVING的对比前置知识&#xff1a; 一、数据库开发与实战专栏导学及数据库基础概念入门 二、MySQL 介绍及 MyS…

你知道这些快捷键吗?

今天就给大家带来常用的电脑快捷键&#xff0c;让你的办公和学习效率加倍&#xff0c;一起来看看吧&#xff01; 快捷键一&#xff1a;快速切换窗口 想要快速切换电脑正在使用的窗口程序&#xff0c;就可以使用“AltTab”键即可快速切换。先按住“Alt”按键&#xff0c;再按“T…

GO语言的实战学习(猜谜游戏和在线词典)| 青训营笔记

一.GO语言的实战学习 1.1 前言 在上文我们急速学习了Go语言的入门&#xff0c;今天我们来学习一下Go语言的实战 本专栏代码&#xff0c;源码打包下载地址如下&#xff1a; https://download.csdn.net/download/weixin_52908342/87389481 二.猜谜游戏 1.导入依赖包&#xff…

模拟实现一个简单的命令行解释器(shell)

目录 前言 环境变量与本地变量 和环境变量相关的命令 获取环境变量的三种方法 第一种 第二种 第三种 进程地址空间 页表 为什么存在进程地址空间 第一 第二 第三 进程控制 进程的产生 进程终止 进程等待 进程替换 模拟实现一个shell 前言 我们通过各种指令来实现…

脚手架2 以nacos为注册中心,基于Gateway构架网关

在前一步上已经说明&#xff0c;组件脚手架的第一步就是构建注册中心&#xff0c;由于采用nacos&#xff0c;这些将直接放在配置文件中实现&#xff0c;不再单独搭建eureka。 spring nacos jdk各组件依赖版本推荐 Spring Boot&#xff0c;Spring Cloud&#xff0c;Spring Clo…

HTC Cosmos手柄的坑

HTC Cosmos手柄的坑Unreal蓝图通过手柄射线操作UI用浏览器插件进行游戏界面设计Cosmos手柄遇到的问题Unreal蓝图通过手柄射线操作UI Unreal蓝图通过手柄射线操作UI很简单&#xff0c;虚幻提供一个WidgetInteraction的组件&#xff0c;可以模拟键盘和鼠标操作。 Enable Hit Te…

【最优潮流】二阶锥松弛在配电网最优潮流计算中的应用(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

组件化 – 额外知识补充

1、组件的生命周期 1.1、认识生命周期 什么是生命周期呢&#xff1f; 生物学上&#xff0c;生物生命周期指得是一个生物体在生命开始到结束周而复始所历经的一系列变化过程&#xff1b;每个组件都可能会经历从创建、挂载、更新、卸载等一系列的过程&#xff1b;在这个过程中…

升级 Node 版本教程

【node】升级 Node 版本教程 文章目录 Window 系统Mac 或 Linux系统 Window 系统 window系统升级node只能到node官网下载window安装包来覆盖之前的node。node 安装教程附下载地址&#xff1a;https://blog.csdn.net/qq_45677671/article/details/114535955因为 n 模块是不支…

transformers学习笔记3

创建model的方法automodel创建预训练模型使用automodel直接创建&#xff0c;使用的是hug face官网上的预训练好的模型参数&#xff0c;完成创建后再使用自己本地的数据集进行迁移训练automodel api 去官网上下载用户指定类型模型的config file 和model file&#xff0c;config说…