javascript组件
自定义精美商品分类列表组件 侧边栏商品分类组件 category组件(适配vue3)
随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随意的进行组合。大大提升开发效率低,降低维护成本。 组件化对 ......
JavaScript的设计模式—构造器模式
设计模式介绍 设计模式是我们在 解决问题的时候针对特定问题给出的简洁而优化的处理方案 在JS设计模式,最核心的思想:封装变化 将变与不变分离,确保变化的部分灵活,不变的部分稳定 构造器模式 var employee1={ name:'Kerwin', age:100 } var employee2= ......
防御式CSS—设置组件间距
我们开发人员需要考虑不同的内容长度。这意味着,应该向组件添加间距,即使它看起来不需要。 在这个例子中,我们在右侧有一个章节标题和一个操作按钮。目前,它看起来不错。但是让我们看看当标题更长时会发生什么。 注意到文本离操作按钮太近了吗?你可能会想到多行包装,但我会在另一节谈到这一点。现在,让我们把注意力 ......
【趣味JavaScript】一文让你读懂JavaScript原型对象与原型链的继承,探秘属性的查找机制! 《重置版》
🚀 个人主页 极客小俊 ✍🏻 作者简介:web开发者、设计师、技术分享博主 🐋 希望大家多多支持一下, 我们一起学习和进步!😄 🏅 如果文章对你有帮助的话,欢迎评论 💬点赞👍🏻 收藏 📂加关注 前言 有些新手朋友可能听说过这么一句话,就是js中存在两个链条,它们分别为:作用域链和原 ......
富文本里解析vue、react组件
react 封装的渲染富文本的组件: RenderRtf.tsx import { useState, useEffect, useRef } from "react"; import parse from "html-react-parser"; import ReactDOM from "rea ......
JavaScript中的原型链
JavaScript中的原型链 奇舞团 360最大的前端团队。 关注他 122 人赞同了该文章 本文作者为奇舞团前端开发工程师 概述 JavaScript 是 Web 的编程语言,简单易学,功能强大,但由于过于灵活设计理念,导致初学者经常一脸懵,本文要谈的是JavaScript中难点之一原型链。 ......
前端学习-JavaScript学习-js基础-API02-轮播图案例
自己写的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docu ......
Vue3 + TS 搭建组件库
开始 在编写组件库之前,我们首先要对整个代码项目的解构有一个清晰的划分,以及用到的大多数规范,和代码风格有一个约定,这篇文章主要就围绕着下面图中的几个问题展开描述一下。 1、搭建 monorepo 环境 我们使用pnpm当做包管理工具,用pnpm workspace来实现monorepo。可以看下面 ......
HTML5 Video视频组件支持的视频编码格式
一、HTML5 Video 视频格式与浏览器的支持情况 当前, <video> 元素支持三种视频格式: MP4, WebM, 和 Ogg: 浏览器MP4WebMOgg Internet Explorer YES NO NO Chrome YES YES YES Firefox YES YES YES ......
深入理解Async/Await:从原理到实践的JavaScript异步编程指南
理解 async/await 的原理和使用方法是理解现代JavaScript异步编程的关键。这里我会提供一个详细的实例,涵盖原理、流程、使用方法以及一些注意事项。代码注释会尽量详尽,确保你理解每个步骤。 实例:使用async/await进行异步操作 <!DOCTYPE html> <html lan ......
python网站创建008:初始JavaScript
JavaScript:是一门可以操作html标签的一门语言。可以实现类似“弹框”的功能 实现需求:假如我想在一个输入框内输入“hello world”,点击某个按钮,然后在“弹框”上显示出“hello world”, 这该怎么做呢? 1.首先将“输入框”和“点击”按钮写出来,如下: <!DOCTYP ......
javascript 数据变形 key:value转换
[javascript - Convert key/value pairs to object using lodash - Stack Overflow](https://stackoverflow.com/questions/50399034/convert-key-value-pairs-to ......
vue2+element 表单内使用el-rate组件时,校验失败后重新校验通过了,但校验提示信息未消除
问题:el-rate组件自定义的校验规则,必填项。打开表单,不做任何动作,点击提交,这时表单校验一次,然后再选择el-rate组件的评分,校验提示却并未消除。 问题复现: 1.打开表单,直接点确定 2.填写完所有的选项后,仍未消除提示 解决:首先排除了v-model是否绑定正确,单词有无错误,校验有 ......
使用Angular创建组件,并发布到npm上
1.组件准备工作 1.先新建一个组件库项目 ng new angular-npm-demo 2.新建一个存放组件库的目录 ng g library demo --prefix=demo; 3.进入 projects/demo/src/lib目录下新建一个组件,我的组件名叫做list-page ng ......
JavaScript面试题
列举常用的字符串方法 indexOf(要查找的字符,开始索引) 查找某个字符串第一次出现的位置 lastIndexOf(要查找的字符,开始索引) 查找某个子字符串最后一次出现的位置 replace(被替换的内容,要替换的内容) 替换好的字符串 substr(从哪个索引开始,截取多少个) 返回截取到的 ......
el-check省市区选择组件 vue3
引用组件 // city_dialog.vue //PopWindow 弹出层组件 //AreaList 省市区数据组件 //areaData 省市区数据 <PopWindow :dialogVisible="dialogVisible" title="省市区选择" sizeType="large" ......
父组件 同步修改/传值 子组件 vue3
父组件 //引入子组件 <jyqk :selectData="selectData" ref="jyqk_ref"></jyqk> import fxjy from "./components/fxjy.vue"; const jyqk_ref = ref<any>(); const change_ ......
vue3 标题组件
<template> <div class="header_body"> <div class="header_inner"> <div class="title_line"></div> <el-row class="titleBodyComl"> <div class="icon"> <div ......
1、自定义上传组件实现动态指定action
1、增加 ynamicAction:String 2、修改 const uploadImgUrl = ref(props.dynamicAction || import.meta.env.VITE_APP_BASE_API + "/common/upload"); // 上传的图片服务器地址 <el ......
前端学习-JavaScript学习-js基础-API01
学习视频:黑马程序员视频链接 DOM简介 DOM简介 DOM树:将HTML文档标签以树状形式表现出来 DOM对象:每个标签都是DOM对象 DOM核心思想:将网页内容当作对象处理 DOM中最大的对象:document,其次是<html> <!DOCTYPE html> <html lang="en"> ......
突发:鸿蒙之祖华为在 Inula 官网声称可“避免重复运行组件”但“组件渲染次数”是写死的
突发:鸿蒙之祖华为在 Inula 官网声称可“避免重复运行组件”但“组件渲染次数”是写死的 消息来源 看到群里这个消息,我的想法是:群里怎么炸锅了?华为之前的鸿蒙被指疑似安卓二开不说,现在出个 openInula 好像是什么欧拉又被人挖出幺蛾子?哦有 la 后缀但好像又不像欧拉。 到底怎么回事?我也 ......
记录--组件阅后即焚?挂载即卸载!看完你就理解了
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 上家公司有个需求是批量导出学生的二维码,我一想这简单啊,不就是先批量获取学生数据,然后根据QRcode生成二维码,然后在用html2canvas导出成图片嘛。 由于公司工具库有现成的生成压缩包方法,我只需要获得对应的图片blob就可 ......
JavaScript for循环递减(-)
for (var i = 5; i > 0; --i) { console.log(i) }打印: 5 4 3 2 1 ......
当多个使用弹窗类组件,可使用这种方式封装组件。(以下使用antd-vue、vue3)
1.代码 点击查看代码 <template> <slot :openDialog="openDialog" :closDialog="modalCancel"></slot> <a-modal v-model:open="open" title="Basic Modal" @cancel="moda ......
Uniapp导入uView组件
npm导入组件 npm install uview-ui@2.0.36 后面跟上自己的版本 或者 npm install uview-ui //检查 console.log(uni.$u.config.v);可以查看自己是否导入成功 【main.js】import uView from 'uview ......
JavaScript中return await究竟有无用武之地?
有没有区别? 先上一个 Demo,看看async函数中return时加和不加await有没有区别: function bar() { return Promise.resolve("this from bar()."); } async function foo1() { return await ......
JavaScript 防抖和节流
JavaScript 防抖和节流 防抖 以下js类库实现方法: lodash.debounce underscore - debounce 最初接触实现一个防抖函数的需求,是在前端封装 React 组件的过程中,当时是要实现一个搜索下拉框,根据输入提示搜索内容。根据 <input> 的input事件 ......
javascript运行时报"未定义"错误怎么办
https://www.php.cn/faq/508703.html Javascript是一种非常流行的编程语言,它广泛地应用于网页开发、动态效果实现、数据处理等领域。然而,Javascript也存在一些常见的错误,在开发的过程中需要我们注意和处理。其中之一的运行时错误:""未定义,下面就来详细介 ......
关于layui使用弹出层模版后对应上传组件不工作的问题记录
这里页面的聊天室是使用的弹出层: util.on('lay-on', { 'open-chat-room': function () { layer.open({ title: '项目聊天室', type: 1, offset: 'b', anim: 'slideUp', // 从下往上 area: ......