三鲜豆皮

前端开发规范

说明

字体颜色

红色标识为重点
绿色标识为技巧
蓝色标识为提示
黄色标识为警告

通用要求

目的

代码一致性
通过保持代码风格和传统的一致性，我们可以减少遗留系统维护的负担，并降低未来系统崩溃的风险。
最佳实践
通过遵照最佳实践，我们能确保优化的页面加载、性能以及可维护的代码。

核心

表现、内容和行为的分离
标记应该是结构良好、语义正确以及普遍合法
Javascript应该起到渐进式增强用户体验的作用

基本原则

缩进
统一四个空格缩进（总之缩进统一即可），不要使用 Tab或者Tab、空格混搭。建议设置开发工具一个Tab为四个空格。
文件编码
使用不带 BOM 的 UTF-8 编码。
- 在 HTML中指定编码
- 使用scss编写css文件头部需设置@charset “utf-8”；，否则添加中文注释报错。一般css文件不用设置。
一律使用小写字母

统一注释
通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

HTML 注释
1.模块注释


<div class="article-list">
...
div>

2.区块注释

CSS 注释
组件块和子组件块以及声明块之间使用一空行分隔，子组件块之间三空行分隔。

 
 /*         ==========================================================================
组件块
========================================================================= */

  /* 子组件块
     ============================================================================ */
     
    .selector-secondary {
      display: block; /* 注释*/
    }

Javascript注释
1.单行注释
必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。
2.多行注释
避免使用 /*…*/ 这样的多行注释。有多行注释内容时，使用多个单行注释。
3.函数/方法要注释
- 注释包括函数说明，有参数和返回值时必须使用注释标识。参数和返回值注释必须包含类型信息和说明。
- 当函数是内部函数，外部不可访问时，可以使用 @inner 标识。
```
Javascript
  /**
  * 函数描述
  *
  * @param {string} p1 参数1的说明
  * @param {string} p2 参数2的说明，比较长
  *     那就换行了.
  * @param {number=} p3 参数3的说明（可选）
  * @return {Object} 返回值描述
  */
  function foo(p1, p2, p3) {
  var p3 = p3 || 10;
  return {
     p1: p1,
     p2: p2,
     p3: p3
  };
  } 
```

文件注释
文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息。如下:

Javascript
  /**
   * @fileoverview Description of file, its uses and information
   * about its dependencies.
   * @author [email protected] (Firstname Lastname)
   * Copyright 2015 Meizu Inc. All Rights Reserved.
   */

代码验证
- 使用 W3C HTML Validator 来验证你的HTML代码有效性和规范化。
- 使用 W3C CSS Validator 来验证你的CSS代码有效性

HTML

尽量遵循 HTML 标准和语义，但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。

标签

自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )，img和input标签尾部需加斜杠/以免后台编译出现错误，br标签遵循标准写法
。
除以上标签其它标签必须闭合，包括可选闭合的标签（例如：

段落分隔符要使用实际对应的
元素，而不是用多个
标签。

列表中的条目必须总是放置于

中，永远不要用一组

或

来表示。

给每个表单里的字段加上标签，其中的 for 属性必须和对应的输入字段对应，这样用户就可以点击标签。

在某些闭合的

标签旁边加上一段html注释，说明这里闭合的是什么元素。这在有大量嵌套和缩进的情况下会很有用。

不要把表格用于页面布局。

对于页眉和标题，永远使用首字母大写格式。不要在标记中使用全部大写或小写的标题，而是应用CSS属性 text-transform:uppercase/lowercase 。

尽量减少标签数量。

Class 与 ID

class 应以功能或内容命名，不以表现形式命名。
class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔，不要采用驼峰命名法和下划线。
使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class。

属性

在HTML5规范里并没有严格要求属性值两边加引号。但考虑到一些属性可以接受空白值，为了保持一致性，我们所有属性值必须加上双引号。
HTML 属性应该按照特定的顺序出现以保证易读性。
- id
- class
- name
- dta-xxx
- src, for, type, href
- title, alt
- aria-xxx, role

嵌套

语义嵌套约束

用于

,
用于
下。
, , , , 用于下。
严格嵌套约束
- a 标签不允许嵌套 div 这种约束属于语义嵌套约束。如果 a 标签若要包含块元素，设置内部容器元素为 span ，样式设置为 diaplay：block。
- 里不可以嵌套交互式元素、
1
2
3
4
5
6
7
8
9
10
11
<html lang="zh-Hans">

<html lang="zh-cmn-Hans">

<html lang="zh-cmn-Hant">

<html lang="en">

IE 兼容模式
优先使用最新版本的IE 和 Chrome 内核

viewport
为移动端设备优化，设置可见区域的宽度和初始缩放比例

favicon
在未指定 favicon 时，大多数浏览器会请求 Web Server 根目录下的 favicon.ico 。为了保证 favicon 可访问，避免404，必须遵循以下两种方法之一：

在 Web Server 根目录放置 favicon.ico 文件
使用 link 指定 favicon

CSS

通用约定

代码组织
- 以组件为单位组织代码段
Class 和 ID
- 使用语义化、通用的命名方式
- 使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线
- 避免选择器嵌套层级过多，尽量少于 3 级
- 避免选择器和 Class、ID 叠加使用
声明块格式
- 选择器分组时，保持独立的选择器占用一行
- 声明块的左括号 { 前添加一个空格
- 声明块的右括号 } 应单独成行
- 声明语句中的 : 后应添加一个空格
- 声明语句应以分号 ; 结尾
- 一般以逗号分大专栏前端开发规范隔的属性值，每个逗号后应添加一个空格
- rgb()、rgba()、hsl()、hsla() 或 rect() 括号内的值，逗号分隔，但逗号后不添加一个空格
- 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）
- 十六进制值应该全部小写或者大写和尽量简写，不要大小写混用，例如，#fff 代替 #ffffff
- 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;

声明顺序

相关属性应为一组，推荐的样式编写顺序
1. Positioning
2. Box model
3. Typographic
4. Visual

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型决定了组件的尺寸和位置，因此排在第二位。


       
        
       
       
       
         
        
        
        
          
         
         
         
           
          
          
          1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

           
          
          
          .declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box model */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;

  /* Typographic */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;

  /* Other */
  cursor: pointer;
}

注：根据个人习惯可适度调整，总体属性顺序不能改变。

z-index的值目前以底部固定导航菜单设置为20为准，弹层遮罩等需盖住底部导航菜单的元素可设置大于20，但不建议超过40，页面中其它元素值要小于20。不允许出现随意设置的情况（例如：z-index：99999）。
引号使用
url() 、属性选择符、属性值使用双引号。
url()若不加双引号，引用地址文件名如果包含空格，就会引用失败。

不要使用 @import
- 与相比，@import 要慢很多，不光增加额外的请求数，还会导致不可预料的问题。
  
  替代办法：
  - 使用多个元素
  - 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
  - 其他 CSS 文件合并工具
    参考 don’t use @import
尽量使用类名，避免使用标签选择器。
链接的样式顺序
- a:link -> a:visited -> a:hover -> a:active（LoVeHAte）
无需添加浏览器厂商前缀
- 使用 Autoprefixer 自动添加浏览器厂商前缀，编写 CSS 时不需要添加浏览器前缀，直接使用标准的 CSS 编写。
尽量使用两个单词及以上的类名命名方法，避免css文件过大时类名重复混乱的情况。
一般情况避免使用！important，css样式发生冲突解决办法：
- 添加新的类名设置样式
- 精确查找，添加父元素类名以便区分。
注： h1 >=20px; h2 18px; h3 16px; h4 14px; h5 12px; h6 < 12px; 单个页面建议h1标签只出现一次，避免过多出现其它标题标签防止搜索引擎鉴定为作弊。

性能优化

注意事项：
- 慎重选择高消耗的样式
  - box-shadows
  - border-radius
  - transparency
  - transforms
  - CSS filters（性能杀手）
- 避免使用通用选择器
- 避免使用标签或 class 选择器限制 id 选择器
  .menu-left#newMenuIcon {…} //Bad
  #newMenuIcon {…} //Good
- 避免使用标签限制 class 选择器
  treecell.indented {…} //Bad
- 避免使用多层标签选择器。使用 class 选择器替换，减少css查找
  treeitem[mailfolder="true"] > treerow > treecell {…} //Bad
  .treecell-mailfolder {…} //Good
- 避免使用子选择器
- 使用继承

CSS 选择器的执行效率从高到低
- id选择器（#myid）
- 类选择器（.myclassname）
- 标签选择器（div,h1,p）
- 子选择器（ul < li）
- 后代选择器（li a)
- 通配符选择器（*）
- 属性选择器（a[rel=”external”]
- 类选择器（a:hover, li:nth-child）
正确使用 Display 的属性
- display: inline后不应该再使用 width、height、margin、padding 以及 float。
- display: inline-block 后不应该再使用 float。
- display: block 后不应该再使用 vertical-align。
- display: table-* 后不应该再使用 margin 或者 float。
不滥用 Float Float在渲染时计算量比较大，尽量减少使用

开启硬件加速，但不能滥用。

.classname {
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
}

Javascript

通用约定

注意事项

99%的代码必须封装在外部Javascript文件中。这些文件必须在 BODY 标签的尾部引入，让页面的性能最大化。
不要使用 document.write()。
给变量和函数的命名要有逻辑意义。
不要人为缩短命名到最小。除了传统的 for 循环中的计数器 i 等简化的情况，变量命名必须长到有明确意义。
常量或配置变量（例如动画持续时间等）必须放在文件的顶部。
尽力编写可通用化的函数，让它接受参数并返回值。这样有利于充分的代码重用，而且一旦与引入及外部脚本配合起来，能在脚本需要修改时减少开销。
最小化全局变量。给代码添加注释。
不要用隐含的类型转换。
不要用 eval()，with()和void()。
用 parseInt() 进行数字转换。
构造器首字母大写。

命名

变量, 使用 Camel 命名法。变量名 = 类型 + 对象描述
- Int 整型 i
- Float 浮点 fl
- Boolean 布尔 b
- String 字符串 s
- Array 数组 a
- Object 对象 o
- Function 函数 fn
- Regular Expression 正则 re
私有属性、变量和方法以下划线 _ 开头。
常量, 使用全部字母大写，单词间下划线分隔的命名方式。
函数, 使用 Camel 命名法。
函数的参数, 使用 Camel 命名法。
类, 使用 Pascal 命名法，首字母大写。
类的方法 / 属性, 使用 Camel 命名法。
枚举变量使用 Pascal 命名法，首字母大写。
枚举的属性，使用全部字母大写，单词间下划线分隔的命名方式。

命名语法

类名，使用名词。
函数名，使用动宾短语。
boolean 类型的变量使用 is 或 has 开头。

Promise 对象用动宾短语的进行时表达。

1 2	var loadingData = ajax.get('url'); loadingData.then(callback);

True 和 False 布尔表达式

类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 == null。
以下的布尔表达式都返回 false:
null / undefined / ‘’ 空字符串 / 0 数字0
注意以下类型返回true：
‘0’ 字符串0 / [] 空数组 / {} 空对象

其它注意事项

不要在 Array 上使用 for-in 循环
- for-in 循环只用于 object/map/hash 的遍历, 对 Array 用 for-in 循环有时会出错. 因为它并不是从 0 到 length - 1 进行遍历, 而是所有出现在对象及其原型链的键值。
二元和三元操作符 .操作符
- 操作符始终写在前一行, 以免分号的隐式插入产生预想不到的问题。
&& 和 || 二元布尔操作符是可短路的, 只有在必要时才会计算到最后一项。

性能优化

总结中…

移动端

总结中…

前端工具和资源一览表

你可能感兴趣的:(前端开发规范)

深度解析智能问答系统：如何打造精准、高效的AI对话架构？和老莫一起学AI 人工智能架构自然语言处理产品经理语言模型学习 ai
在人工智能的飞速发展中，智能问答系统（QA系统）逐渐成为了企业内部管理、客户服务、搜索引擎等多个领域中的关键技术。今天，我们将深入探讨一个基于大模型、自然语言处理、知识检索的智能问答系统的架构，详细介绍其技术原理、流程以及未来应用前景。一、系统整体概览在这个智能问答系统中，整个流程可以大致划分为两大部分：前端问答生成与后端离线数据处理。前端部分是用户交互的核心，通过用户的输入、关键词提取、检索和问
《中型 Vue 项目：挑战与成长》计算机毕设定制辅导-无忧学长 #Vue vue.js flutter 前端
一、引言在当今的前端开发领域，Vue作为一款渐进式JavaScript框架，以其强大的功能和灵活性备受开发者青睐。对于中型Vue项目而言，其重要性不言而喻。中型Vue项目通常在功能复杂度和规模上介于小型项目和大型项目之间，既需要应对一定的业务需求挑战，又要考虑开发效率和可维护性。中型Vue项目面临着诸多挑战与机遇。挑战方面，随着项目规模的扩大，代码的复杂性增加，如何进行有效的状态管理、组件化开发以
httpslocalhostindex 配置的nginx，一刷新就报404了 m0_74824112 nginx 运维
当你的Nginx配置导致页面刷新时报404错误时，通常是由于以下几个原因造成的：静态文件路径配置错误：Nginx没有正确地指向静态文件的目录。前端路由问题：如果是SPA（单页应用），刷新页面时Nginx没有正确地将请求重定向到入口文件（如index.html）。反向代理配置错误：如果Nginx作为反向代理，后端服务可能没有正确处理请求。检查和解决步骤1.检查静态文件路径配置确保Nginx配置文件中
深度解析 React 合成事件：机制、作用及与 Vue 事件机制的对比前端vue.jsreact
在前端开发领域，React与Vue作为两款备受瞩目的框架，凭借独特的设计理念和技术架构，为开发者打造出截然不同的开发体验。React的合成事件是其核心亮点之一，Vue则采用了别具一格的事件处理机制，二者的差异背后蕴藏着多方面的考量。一、React合成事件的底层剖析（一）事件创建与封装细节当DOM事件触发，React会第一时间在内部事件池中检索对应的合成事件实例。若未找到，便依据原生事件类型，像cl
告别代码堆砌！AI生成前端页面，让开发效率飞升前端
在当今快节奏的数字世界中，前端开发效率至关重要。面对日益增长的市场需求和复杂的项目，开发者们常常面临着巨大的压力。而一款优秀的AI生成前端页面工具，无疑能成为提升效率的利器。本文将深入探讨谷歌Gemini的强大功能，并结合ScriptEcho——一款基于大模型AI技术的前端代码生成工具，展现如何将AI技术应用于前端开发，从而实现效率的显著提升。谷歌Gemini：AI赋能的未来谷歌Gemini的出现
零售业的AI赋能与前端开发效率革命：ScriptEcho 的助力前端
零售业正经历着前所未有的数字化转型，但同时也面临着巨大的挑战。库存管理混乱、个性化客户体验不足等问题，严重制约着零售企业的盈利能力。而人工智能（AI）的兴起，为解决这些问题提供了新的思路。通过AI驱动的实时库存管理和客户行为分析，零售企业可以显著提升运营效率和客户满意度。然而，构建这些AI赋能的零售应用，需要强大的前端开发能力，这正是AI代码生成器ScriptEcho能够发挥关键作用的地方。AI赋
AI时代的前端开发：技能提升与职业发展之路前端
在瞬息万变的科技时代，个人职业发展的重要性日益凸显。提升技能，不断学习，已经不再是锦上添花，而是立足之本，是我们在竞争激烈的职场中脱颖而出的关键。而人工智能（AI）技术的快速发展，为我们提供了前所未有的机遇，特别是对于前端开发领域，AI正以前所未有的速度改变着我们的工作方式和学习方式。AI赋能前端开发：个性化学习路径前端开发领域的技术栈庞大而复杂，涵盖HTML、CSS、JavaScript、各种框
出海工具集 web前端进阶者前端
群聊分享的一个工具集合，看了几个，感觉有点子用，收藏一波，下面有GitHub的地址；吃水不忘挖井人；GitHub地址分类目录导航Web开发框架或模板Chrome插件开发前端开发后端开发数据库管理对象关系映射（ORM）样式与UI框架原型设计认证与授权支付集成邮件服务网站分析在线客服和反馈服务部署与托管网站管理域名注册文档管理协议生成图标资源字体资源图片视频素材图片视频处理工具屏幕录制短链或长链信息渠
Arch - 架构安全性_验证（Verification）小小工匠【凤凰架构】架构验证 Verification
文章目录OverView导图1.引言：数据验证的重要性概述2.数据验证的基本概念3.数据验证的层次前端验证后端验证4.数据验证的标准做法5.自定义校验注解6.校验结果的处理7.性能考虑与副作用8.小结OverView即使只限定在“软件架构设计”这个语境下，系统安全仍然是一个很大的话题。接下来我们将对系统安全架构的各个方面进行详细分析，包括认证、授权、凭证、保密、传输安全和验证，结合案例实践，展示如
如何利用 Dexie.js 管理前端状态或持久化复杂数据 maply Node.js vue 前端 javascript 状态模式 Dexie.js 前端状态管理前端状态持久化 vue.js
使用Dexie.js管理前端状态或持久化复杂数据Dexie.js是一个功能强大的IndexedDB封装库，不仅适用于简单的离线存储，还非常适合管理前端状态和持久化复杂数据。以下是如何利用Dexie.js管理前端状态或持久化复杂数据的详细介绍：1.Dexie.js管理前端状态的优势数据持久化：将应用状态存储在浏览器中，即使刷新页面或关闭浏览器，状态仍然存在。异步数据操作：支持异步读取和写入，提高性能
SpringBoot3使用Swagger3 m0_74825260 java
SpringBoot3使用Swagger3项目中的后端接口进行简单的前端展示一、依赖引入二、快速启动1.在application.yml中配置2.或者properties文件,则配置3.启动项目访问swagger三、使用注解标注接口Swagger配置文件Swagger注解迁移举例五种常用@Api@ApiOperation@ApiImplicitParam@ApiModel@ApiModelProp
Microi 吾码与 JavaScript：前端低代码平台的强大组合小周不想卷 javascript
目录一、引言二、Microi吾码概述三、JavaScript在Microi吾码前端开发中的应用（一）前端V8引擎与JavaScript（二）接口引擎与JavaScript四、JavaScript在Microi吾码后端开发中的协同（一）与C#后端框架的交互（二）利用gRPC实现跨语言通信五、Microi吾码中JavaScript与数据库的交互六、Microi吾码中JavaScript在表单与模板引擎
一款前端开源的，在线电子表格univer介绍
Univer是一款颠覆性的在线电子表格解决方案，为数据输入和协作带来了全新的方式。作为一款开源、免费的平台，Univer专注于在线电子表格管理，为用户提供了处理数据、创建动态报告和高效协作的无缝体验。具体可以看他们的官网univer.ai.Excel作为广受欢迎的电子表格软件，Univer的兼容性和功能性使其成为Excel爱好者的理想选择。用户可以体验到与Excel相关的功能，并且能够轻松使用带公
Axios封装一款前端项目网络请求实用插件 smart_ljh 前端 vue.js vuejs axios 网络
前端项目开发非常经典的插件axios大家都很熟悉，它是一个Promise网络请求库，可以用于浏览器和node.js支持的项目中。像一直以来比较火的Vue.js开发的几乎所有项目网络请求用的都是axios。那么我们在实际的项目中，有时候为了便于维护、请求头信息统一处理、统一拦截器设置以及响应数据统一处理，需要在项目中针对axios封装一个网络请求插件。接下来就介绍一下针对以上这些输出具体的解决方案和
解锁新技能：Windows Forms与ASP.NET API的梦幻联动步、步、为营 windows asp.net 后端
一、开篇引入嘿，各位开发小伙伴们！在日常开发的“战场”上，我们常常会遭遇一个棘手的难题：如何让前端应用与后端服务实现高效且稳定的交互呢？特别是在使用WindowsForms构建桌面应用程序时，这个问题尤为突出。想象一下，你精心打造了一个功能强大的WindowsForms应用，满心期待它能与后端的ASP.NETAPI顺畅“对话”，实现数据的实时获取与更新，为用户带来绝佳的体验。但现实却可能给你泼一盆
云原生前端开发：打造现代化高性能的用户体验大梦百万秋知识学爆状态模式
引言：前端开发的新风向在过去的几年中，前端开发领域经历了快速的演变，从早期的静态网页到如今复杂的单页应用（SPA），再到微前端架构和渐进式Web应用（PWA），前端技术一直处于技术变革的中心。而随着云原生的理念在后端开发中逐渐成熟，前端开发也迎来了新的机遇和挑战。云原生前端开发意味着应用的架构设计和开发方式需要更加注重现代化的开发工具链、灵活性、性能优化和可扩展性。本文将从技术角度讨论如何运用云原
一句话就能回答的前端面试题（2024年10月最新版）小姐姐呀～前端 javascript vue
1、v-if和v-show的区别相同点:v-if和v-show都可以控制dom元素的展示和隐藏不同点：v-if的显示隐藏是将dom元素整个添加或删除而v-show的隐藏是为该元素添加CSS样式display:none,dom元素还在一般进入页面不需要频繁显示或隐藏就用v-if2、data()为什么是一个函数为了防止多个组件实例对象共用一个data，产生数据污染3、什么是闭包闭包就是内部函数定义一个
JSON数据格式转换百事老饼干前端积累 json
在前端Vue3中，处理JSON数据通常涉及到从API获取JSON、解析JSON数据、或者将JavaScript对象转换为JSON字符串。这里是几种常见的JSON转换操作一、从JSON字符串解析为JavaScript对象如果你从API或其他地方收到一个JSON字符串，可以使用JSON.parse()来将它转换为JavaScript对象。letjsonString='{"name":"John","a
VUE前端实现防抖节流 Lodash 百事老饼干前端积累前端
方法一：采用Lodash工具库Lodash是一个一致性、模块化、高性能的JavaScript实用工具库。（1）采用终端导入Lodash库$npmi-gnpm$npmi--savelodash（2）应用示例：搜索框输入防抖在这个示例中，我们希望用户在输入框中停止输入500毫秒后才执行搜索操作，避免频繁请求.//假设这是一个执行搜索操作的函数functionperformSearch(query){c
学生作业-学生选课系统，后端SpringBoot + maven，前端vue。涉及管理员、学生和教师三个角色。教师可设置课程信息以及学生成绩录入；学生可选课和查看成绩。源码中包含MySQ数据表sql。程序员WANG vue.js 前端 spring boot
1、学生作业-学生选课系统，后端SpringBoot+maven，前端vue。涉及管理员、学生和教师三个角色。教师可设置课程信息以及学生成绩录入；学生可选课和查看成绩。2、源码中包含数据表，sql文件，mysql数据库，可一键导入。3、管理员账号和密码root、root；学生和教师的账号请查看数据表，密码均为123456。4、Management是后端代码，vue是前端vue代码，按照正常启动（v
【前端】Layui的表格常用功能，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件 m0_74824823 vip1024p 前端 layui javascript
欢迎来到《小5讲堂》大家好，我是。这是《前端》系列文章，每篇文章将以博主理解的角度展开讲解，特别是针对知识点的概念进行叙说，大部分文章将会对这些概念进行实际例子验证，以此达到加深对知识点的理解和掌握。温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！目录前言核心方法常用模块表单按钮事件表格字段事件文章推荐前言最近在维护老系统，尽量使用过layui，但是时间久了，总会忘记一些方法的使用。因此
[20250119]-前端面试题——React篇前端
[20250119]-前端面试题——React篇面试问题记录问题1请简单介绍一下React18有哪些更新。回答：React18的主要更新包括：并发渲染：React18引入了并发渲染（ConcurrentRendering），使得React能在后台进行渲染工作，避免阻塞UI更新，提升性能。自动批处理：React18会自动批处理多次setState更新，减少不必要的渲染，提升性能。useIdHook：
探索JavaScript的宇宙：《JS星球系统》潘俭渝Erik
探索JavaScript的宇宙：《JS星球系统》solar-system-of-jsVisualizethelanguagesontheJSplatform项目地址:https://gitcode.com/gh_mirrors/so/solar-system-of-js在快速发展的前端世界中，JavaScript已经成为无可争议的主宰，围绕它的语言和框架如群星璀璨，构成了一个壮观的“JS星球系统”
HarmonyOS 开发实战 —— 模块化架构组件（使用系统路由表+注解+hvigor插件自动配置项目模块化） CTrup 鸿蒙开发 HarmonyOS 移动开发 harmonyos 架构 ui ArkUI 组件化插件化 hvigor
往期笔录记录：鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……@satis/oh-router简介@sati
HarmonyOS 开发实践——模块化架构组件（使用系统路由表+注解+hvigor插件自动配置项目模块化）我是你叶 HarmonyOS 鸿蒙开发移动开发 harmonyos 架构鸿蒙开发 ui Arkui 移动开发组件化
往期推文看点鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……@satis/oh-router简介@satis
放弃传统模板语言，前后端分离架构和传统架构相比到底强在哪？博远~ 前端架构
引言在当今Web开发中，后端SpringBoot和前端Vue通过前后端分离架构来结合，已经是一个成熟的主流技术栈了。这种前后端分离的架构方式，目前广泛应用于约90%以上通过Java开发的Web应用中。但是，对于为何弃用了之前服务端渲染页面的方式，而选择了前后端分离架构，现有大多数开发者和企业都是懵懵懂懂，甚至有些公司还觉得，之前一个人能干的项目，现在变成了两个人干，增加了成本和复杂度，降低了效益。
从0到1：AI微信红包开发全攻略，小白也能轻松上手！人工智能cursor程序员
AI编程时代真的来了！最近我重度沉迷AI编程，发现它简直是开发神器，前端页面、后端服务，都能轻松搞定，效率直接起飞！最近临近过年，我突然冒出一个想法：为什么不试试用AI来做个微信红包呢？说干就干！1.明确需求要用AI做红包，首先得了解微信红包的规则。简单来说，我们需要一张精美的红包封面图，它会出现在发红包、消息气泡、拆红包、详情页等四个地方。而且尺寸也有要求，是957×1278像素。看起来有点复杂
Java全栈项目 - 校园跑腿服务系统天天进步2015 Java项目实战 java 开发语言
项目介绍校园跑腿服务系统是一个面向高校师生的互助平台,旨在解决校园内取快递、买饭、打印等日常跑腿需求。系统采用前后端分离架构,基于SpringBoot+Vue实现。技术栈后端SpringBoot2.xSpringSecurityMyBatisPlusMySQL8.0RedisRabbitMQJWT前端Vue2.xElementUIAxiosVuexVueRouter核心功能1.用户模块注册/登录实
CSS 布局的四大宗师：破解 BFC、IFC、GFC 和 FFC 的深层奥秘 dorabighead 前端八股总结 css 前端
CSS布局的四大宗师：破解BFC、IFC、GFC和FFC的深层奥秘在CSS的江湖中，布局问题犹如无形的桎梏，困扰着每一位前端开发者。有人为浮动塌陷而抓狂，有人被复杂的响应式布局逼得手足无措。而在布局的巅峰，有四位宗师——BFC、IFC、GFC和FFC，它们分别掌控着块级、行内、网格和弹性布局的精髓。掌握它们，不仅仅是技术的进步，更是开启布局新境界的钥匙。今天，我们不再止步于表面，而是深入到它们的核
vue项目中使用mockjs模拟后端接口上趣工作室 vue3.x vue2.x uniapp vue.js javascript ecmascript
Vue2中使用Mock.js来模拟数据是一个非常常见的做法，尤其是在前端开发时需要与后端接口交互但后端尚未完成的情况下。下面是一个简单的案例，演示如何在Vue2项目中使用Mock.js来模拟数据。1.安装Mock.js首先，确保在你的项目中安装了Mock.js。可以使用npm或yarn来安装：npminstallmockjs--save-dev或者yarnaddmockjs--dev2.将Mock
jsonp 常用util方法 hw1287789687 jsonp jsonp常用方法 jsonp callback
jsonp 常用java方法 (1)以jsonp的形式返回:函数名(json字符串) /*** * 用于jsonp调用 * @param map : 用于构造json数据 * @param callback : 回调的javascript方法名 * @param filters : <code>SimpleBeanPropertyFilter theFilt
多线程场景 alafqq 多线程
0 能不能简单描述一下你在java web开发中需要用到多线程编程的场景？0 对多线程有些了解，但是不太清楚具体的应用场景，能简单说一下你遇到的多线程编程的场景吗？ Java多线程 2012年11月23日 15:41 Young9007 Young9007 4 0 0 4 Comment添加评论关注(2) 3个答案按时间排序按投票排序 0 0 最典型的如： 1、
Maven学习——修改Maven的本地仓库路径 Kai_Ge maven
安装Maven后我们会在用户目录下发现.m2 文件夹。默认情况下，该文件夹下放置了Maven本地仓库.m2/repository。所有的Maven构件(artifact)都被存储到该仓库中，以方便重用。但是windows用户的操作系统都安装在C盘，把Maven仓库放到C盘是很危险的，为此我们需要修改Maven的本地仓库路径。
placeholder的浏览器兼容 120153216 placeholder
【前言】自从html5引入placeholder后，问题就来了，不支持html5的浏览器也先有这样的效果，各种兼容，之前考虑，今天测试人员逮住不放，想了个解决办法，看样子还行，记录一下。【原理】不使用placeholder，而是模拟placeholder的效果，大概就是用focus和focusout效果。【代码】 <scrip
debian_用iso文件创建本地apt源 2002wmj Debian
1.将N个debian-506-amd64-DVD-N.iso存放于本地或其他媒介内，本例是放在本机/iso/目录下 2.创建N个挂载点目录如下： debian:~#mkdir –r /media/dvd1 debian:~#mkdir –r /media/dvd2 debian:~#mkdir –r /media/dvd3 …. debian:~#mkdir –r /media
SQLSERVER耗时最长的SQL 357029540 SQL Server
对于DBA来说，经常要知道存储过程的某些信息： 1. 执行了多少次 2. 执行的执行计划如何 3. 执行的平均读写如何 4. 执行平均需要多少时间列名 &
com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 7454103 eclipse
今天eclipse突然报了com/genuitec/eclipse/j2eedt/core/J2EEProjectUtil 错误，并且工程文件打不开了，在网上找了一下资料，然后按照方法操作了一遍，好了，解决方法如下：错误提示信息： An error has occurred.See error log for more details. Reason: com/genuitec/
用正则删除文本中的html标签 adminjun java html 正则表达式去掉html标签
使用文本编辑器录入文章存入数据中的文本是HTML标签格式，由于业务需要对HTML标签进行去除只保留纯净的文本内容，于是乎Java实现自动过滤。如下： public static String Html2Text(String inputString) { String htmlStr = inputString; // 含html标签的字符串 String textSt
嵌入式系统设计中常用总线和接口 aijuans linux 基础
嵌入式系统设计中常用总线和接口任何一个微处理器都要与一定数量的部件和外围设备连接，但如果将各部件和每一种外围设备都分别用一组线路与CPU直接连接，那么连线
Java函数调用方式——按值传递 ayaoxinchao java 按值传递对象基础数据类型
Java使用按值传递的函数调用方式，这往往使我感到迷惑。因为在基础数据类型和对象的传递上，我就会纠结于到底是按值传递，还是按引用传递。其实经过学习，Java在任何地方，都一直发挥着按值传递的本色。首先，让我们看一看基础数据类型是如何按值传递的。 public static void main(String[] args) { int a = 2;
ios音量线性下降 bewithme ios音量
直接上代码吧 //second 几秒内下降为0 - (void)reduceVolume:(int)second { KGVoicePlayer *player = [KGVoicePlayer defaultPlayer]; if (!_flag) { _tempVolume = player.volume;
与其怨它不如爱它 bijian1013 选择理想职业规划
抱怨工作是年轻人的常态，但爱工作才是积极的心态，与其怨它不如爱它。一般来说，在公司干了一两年后，不少年轻人容易产生怨言，除了具体的埋怨公司“扭门”，埋怨上司无能以外，也有许多人是因为根本不爱自已的那份工作，工作完全成了谋生的手段，跟自已的性格、专业、爱好都相差甚远。
一边时间不够用一边浪费时间 bingyingao 工作时间浪费
一方面感觉时间严重不够用，另一方面又在不停的浪费时间。每一个周末，晚上熬夜看电影到凌晨一点，早上起不来一直睡到10点钟，10点钟起床，吃饭后玩手机到下午一点。精神还是很差，下午像一直野鬼在城市里晃荡。为何不尝试晚上10点钟就睡，早上7点就起，时间完全是一样的，把看电影的时间换到早上，精神好，气色好，一天好状态。控制让自己周末早睡早起，你就成功了一半。有多少个工作
【Scala八】Scala核心二：隐式转换 bit1129 scala
Implicits work like this: if you call a method on a Scala object, and the Scala compiler does not see a definition for that method in the class definition for that object, the compiler will try to con
sudoku slover in Haskell (2) bookjovi haskell sudoku
继续精简haskell版的sudoku程序，稍微改了一下，这次用了8行，同时性能也提高了很多，对每个空格的所有解不是通过尝试算出来的，而是直接得出。 board = [0,3,4,1,7,0,5,0,0, 0,6,0,0,0,8,3,0,1, 7,0,0,3,0,0,0,0,6, 5,0,0,6,4,0,8,0,7,
Java-Collections Framework学习与总结-HashSet和LinkedHashSet BrokenDreams linkedhashset
本篇总结一下两个常用的集合类HashSet和LinkedHashSet。它们都实现了相同接口java.util.Set。Set表示一种元素无序且不可重复的集合；之前总结过的java.util.List表示一种元素可重复且有序
读《研磨设计模式》-代码笔记-备忘录模式-Memento bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; /* * 备忘录模式的功能是，在不破坏封装性的前提下，捕获一个对象的内部状态，并在对象之外保存这个状态，为以后的状态恢复作“备忘”
《RAW格式照片处理专业技法》笔记 cherishLC PS
注意，这不是教程！仅记录楼主之前不太了解的一、色彩（空间）管理作者建议采用ProRGB（色域最广），但camera raw中设为ProRGB，而PS中则在ProRGB的基础上，将gamma值设为了1.8（更符合人眼）注意：bridge、camera raw怎么设置显示、输出的颜色都是正确的（会读取文件内的颜色配置文件），但用PS输出jpg文件时，必须先用Edit->conv
使用 Git 下载 Spring 源码编译 for Eclipse crabdave eclipse
使用 Git 下载 Spring 源码编译 for Eclipse 1、安装gradle，下载 http://www.gradle.org/downloads 配置环境变量GRADLE_HOME，配置PATH %GRADLE_HOME%/bin，cmd，gradle -v 2、spring4 用jdk8 下载 https://jdk8.java.
mysql连接拒绝问题 daizj mysql 登录权限
mysql中在其它机器连接mysql服务器时报错问题汇总一、[running][email protected]:~$mysql -uroot -h 192.168.9.108 -p //带-p参数，在下一步进行密码输入 Enter password: //无字符串输入 ERROR 1045 (28000): Access
Google Chrome 为何打压 H.264 dsjt apple html5 chrome Google
Google 今天在 Chromium 官方博客宣布由于 H.264 编解码器并非开放标准，Chrome 将在几个月后正式停止对 H.264 视频解码的支持，全面采用开放的 WebM 和 Theora 格式。 Google 在博客上表示，自从 WebM 视频编解码器推出以后，在性能、厂商支持以及独立性方面已经取得了很大的进步，为了与 Chromium 现有支持的編解码器保持一致，Chrome
yii 获取控制器名和方法名 dcj3sjt126com yii framework
1. 获取控制器名在控制器中获取控制器名: $name = $this->getId(); 在视图中获取控制器名: $name = Yii::app()->controller->id; 2. 获取动作名在控制器beforeAction()回调函数中获取动作名: $name =
Android知识总结（二） come_for_dream android
明天要考试了，速速总结如下 1、Activity的启动模式 standard：每次调用Activity的时候都创建一个（可以有多个相同的实例，也允许多个相同Activity叠加。） singleTop：可以有多个实例，但是不允许多个相同Activity叠加。即，如果Ac
高洛峰收徒第二期：寻找未来的“技术大牛” ——折腾一年，奖励20万元 gcq511120594 工作项目管理
高洛峰，兄弟连IT教育合伙人、猿代码创始人、PHP培训第一人、《细说PHP》作者、软件开发工程师、《IT峰播》主创人、PHP讲师的鼻祖！首期现在的进程刚刚过半，徒弟们真的很棒，人品都没的说，团结互助，学习刻苦，工作认真积极，灵活上进。我几乎会把他们全部留下来，现在已有一多半安排了实际的工作，并取得了很好的成绩。等他们出徒之日，凭他们的能力一定能够拿到高薪，而且我还承诺过一个徒弟，当他拿到大学毕
linux expect heipark expect
1. 创建、编辑文件go.sh #!/usr/bin/expect spawn sudo su admin expect "*password*" { send "13456\r\n" } interact 2. 设置权限 chmod u+x go.sh 3.
Spring4.1新特性——静态资源处理增强 jinnianshilongnian spring 4.1
目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
idea ubuntuxia 乱码 liyonghui160com
1.首先需要在windows字体目录下或者其它地方找到simsun.ttf 这个字体文件。 2.在ubuntu 下可以执行下面操作安装该字体： sudo mkdir /usr/share/fonts/truetype/simsun sudo cp simsun.ttf /usr/share/fonts/truetype/simsun fc-cache -f -v
改良程序的11技巧 pda158 技巧
有很多理由都能说明为什么我们应该写出清晰、可读性好的程序。最重要的一点，程序你只写一次，但以后会无数次的阅读。当你第二天回头来看你的代码时，你就要开始阅读它了。当你把代码拿给其他人看时，他必须阅读你的代码。因此，在编写时多花一点时间，你会在阅读它时节省大量的时间。让我们看一些基本的编程技巧：尽量保持方法简短永远永远不要把同一个变量用于多个不同的
300个涵盖IT各方面的免费资源（下）——工作与学习篇 shoothao 创业免费资源学习课程远程工作
工作与生产效率: A. 背景声音 Noisli:背景噪音与颜色生成器。 Noizio:环境声均衡器。 Defonic:世界上任何的声响都可混合成美丽的旋律。 Designers.mx:设计者为设计者所准备的播放列表。 Coffitivity:这里的声音就像咖啡馆里放的一样。 B. 避免注意力分散 Self Co
深入浅出RPC uule rpc
深入浅出RPC-浅出篇深入浅出RPC-深入篇 RPC Remote Procedure Call Protocol 远程过程调用协议它是一种通过网络从远程计算机程序上请求服务，而不需要了解底层网络技术的协议。RPC协议假定某些传输协议的存在，如TCP或UDP，为通信程序之间携带信息数据。在OSI网络通信模型中，RPC跨越了传输层和应用层。RPC使得开发

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他