前端开发规范
前端开发规范
一、概述
本规范旨在为前端程序的开发者提供规范化最新的指导,可用于程序员个人编译环境以及研发团队集成环境等场合的代码规范化检查。
不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的
二、方针
约束等级
约束效力
强制性
【强制】
违反该项将被认为代码存在严重缺陷
前端程序团队必须遵守
【推荐】
违反该项将被认为代码存在轻微缺陷
根据具体产品特性的不同,选择性地遵守
【参考】
违反该项可被认为代码存在优化空间
从产品持续优化及人员技能提升的角度,参考使用
三、环境要求
【强制】Node.js 8.9 或更高版本,你可以使用 nvm 或 nvm-windows 在一台电脑中管理多个 Node 版本
【强制】使用 Visual Studio Code (VS Code) 进行代码编写
【强制】代码提交前使用 VS Code 进行格式化(不要格式引入的外部文件)
【强制】规定 Tab 大小为 2 个空格,保证在所有环境下获得一致展现
// settings.json
{
"editor.tabSize": 2
// ...
}
【强制】安装插件 Vetur( Vue开发扩展及 Vue 文件代码格式化)
【强制】安装插件 Prettier - Code formatter( CSS / Less / JS 等其他文件代码格式化;Vetur 的格式化基于此插件实现,固可以在所有文件实现统一的格式化)
【推荐】安装插件 Chinese (Simplified) Language Pack for Visual Studio Code ( VS Code 简体中文语言包)
【推荐】使用 Chrome 浏览器并安装 Vue.js devtools 进行调试
四、编码规范
4.1 HTML / Template 编码规范
【强制】缩进使用两个空格代替 Tab
前端代码层级较深,使用短缩进有利于利用屏幕空间,提升效率
使用两个空格代替 Tab 可以保证在所有环境下获得一致展现
【强制】嵌套元素应当缩进一次(即两个空格),同层级缩进应保持一致
【强制】对于属性的定义,使用双引号,不要使用单引号
【强制】不要省略可选的结束标签(closing tag)(如 或 ) 省略可选的结束标签,虽不会违反 H5 规范;但可能会造成层级上的困扰,导致代码出现无法预料的问题
h1 text
h2 text
h1 text
h2 text
【强制】特殊符号使用 HTML 字符实体(实体名称对大小写敏感),常用如下:
符号
实体编码
空格
©
©
¥
¥
®
®
>
®
<
<
&
&
【强制】td / th 要在 tr 里面,li 要在 ul / ol 里面
【强制】ul / ol 的直接子元素只能是 li,不能包含其他元素
【强制】行内元素里面不可使用块级元素 a 标签是一个行内元素,行内元素里面套了一个 div 的标签,这样可能会导致 a 标签无法正常点击
可以使用如下代码进行修复:
【强制】不使用自定义标签,会与Vue组件系统的自定义组件冲突
【强制】不使用重复属性,重复的属性只会取第一个
【强制】不要在https的链接里写http的图片 只要https的网页请求了一张http的图片,就会导致浏览器地址栏左边的小锁没有了,一般不要写死,写成根据当前域名的协议去加载,用//开头:
【推荐】不要在自闭合(self-closing)元素的尾部添加斜线( HTML5 规范中说明这是可选的)
【推荐】不使用属性设置样式(img, table等元素)
【参考】自定义属性要以data-开头 自己添加的非标准的属性要以data-开头,否则w3c validator会认为是不规范的
HTML5 doctype 【强制】为每个 HTML 页面添加标准模式(standard mode)的声明,确保在每个浏览器中拥有一致的展现
...
语言属性 【强制】为每个 HTML 页面根元素添加 lang 属性
根据 HTML5 规范:
强烈建议为 html 根元素指定 lang 属性,从而为文档设置正确的语言。这将有助于语音合成工具确定其所应该采用的发音,有助于翻译工具确定其翻译时所应遵守的规则等等。
字符编码
【强制】通过声明一个明确的字符编码,让浏览器轻松、快速的确定网页内容渲染方式,通常指定为'UTF-8'
...
引入 CSS 和 JavaScript 文件
【强制】根据 HTML5 规范,在引入 CSS 和 JavaScript 文件时不需要指定 type 属性,因为 text/css 和 text/javascript 分别是它们的默认值
减少标签的数量
【推荐】编写 HTML 代码时,尽量避免多余的层级
属性顺序 【参考】属性应该按照特定的顺序出现以保证易读性
class
id
name
data-*
src
, for
, type
, href
, value
, max-length
, max
, min
, pattern
placeholder
, title
, alt
aria-*
, role
required
, readonly
, disabled
语义化 【参考】尽量遵循 HTML 标准和语义,但是不要以牺牲实用性为代价;任何时候都要尽量使用最少的标签并保持最小的复杂度。
4.2 CSS / Less 编码规范
命名
【强制】类名使用小写字母,以中划线分隔
【强制】id 采用驼峰式命名
【强制】less 中的变量、函数、混合等采用驼峰式命名
@mainFontColor: #444;
#companyName,
.company-name {
color: @mainFontColor;
}
语法
【强制】所有声明语句都应当以分号结尾 最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错
/* error */
.selector {
font-size: 15px
color: red
}
/* not good */
.selector {
font-size: 15px;
color: red
}
/* good */
.selector {
font-size: 15px;
color: red;
}
【强制】避免为 0 值指定单位,例如,用 margin: 0;
代替 margin: 0px;
【强制】为选择器中的属性添加双引号,例如,input[type="text"]
; 某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号
/* not good */
.selector[type=text] {
/* ... */
}
/* good */
.selector[type="text"] {
/* ... */
}
【强制】十六进制值应该全部小写,例如,#f3f6fa
【强制】不出现空的规则(声明块中没有声明语句)
【强制】不要设置太大的z-index(一个正常的系统的层级关系在 10 以内就能完成)
【强制】多写注释,且多使用句子进行描述而不是词语
/* 为了去除输入框和表单点击时的灰色背景 */
input,
form {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
【推荐】不要使用*选择器
【推荐】适当使用:before
和:after
来画页面的一些视觉上的辅助性元素,如三角形、短的分隔线、短竖线等,可以减少页面上没有用的标签
【推荐】选择器不要超过4层(在 Less 中避免嵌套超过 4 层)
【推荐】用 border: 0;
代替 border: none;
【推荐】使用简写形式的十六进制值,例如,用 #fff
代替 #ffffff
【推荐】对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5
代替 0.5
;-.5px
代替 -0.5px
)
代码风格 此处大部分工作将由代码格式化工具完成(参见环境要求),一般无需考虑
【强制】缩进使用两个空格代替 Tab
【强制】为选择器分组时,将单独的选择器单独放在一行
/* not good */
.selector, .selector-secondary, .selector[type=text] {
/* ... */
}
/* good */
.selector,
.selector-secondary,
.selector[type="text"] {
/* ... */
}
【强制】声明块的左花括号前添加一个空格
【强制】声明块的右花括号应当单独成行
【强制】每条声明语句的 : 后应该插入一个空格
【强制】每条样式声明应该独占一行
/* not good */
.selector {
font-size: 15px; color: red;
}
/* good */
.selector {
font-size: 15px;
color: red;
}
【强制】对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,box-shadow
,transition
)
/* not good */
.selector {
transition: border .2s,color .3s,padding .4s;
}
/* good */
.selector {
transition: border .2s, color .3s, padding .4s;
}
【强制】!important
前插入一个空格
【强制】注释://
后插入一个空格,/*
后插入一个空格,*/
前插入一个空格
【强制】Less 的操作符,在圆括号中的数学计算表达式的数值、变量和操作符之间均添加一个空格
【推荐】注释统一用/* */
( Less 中也不要用//
)
样式兼容性
【强制】当使用一些较新的 CSS3 语法时,应注意添加浏览器前缀( FAIS 2 打包工具包含 CSS 预处理,固无需考虑此条)
【推荐】不要使用 input 的 line-height
来做垂直居中 设置 line-height
为一个很高的值会导致 Safari 浏览器的输入光标变得巨大 (与 line-height
等高)
/* not good */
input {
height: 40px;
line-height: 40px;
}
/* good */
input {
height: 20px;
line-height: 20px;
padding: 10px 0;
}
选择器权重(样式覆盖)
权重的基本规则:
相同的权重:以后面出现的选择器为最后规则
相同的权重:以后面出现的选择器为最后规则 详细了解权重计算方法
【强制】非通用样式使用嵌套方式进行编写,避免影响其他自己不了解样式,造成样式覆盖
【推荐】Vue 中样式谨慎使用 scoped,会影响样式选择器性能,请使用第一点进行特有样式编写
【推荐】样式需要修改时,尽量找到原样式声明进行修改
【强制】无法修改原样式声明时,应通过权重关系,编写权重更高的样式进行覆盖
【强制】不使用!important
,除非原样式使用内联样式或!important
且无法直接修改
声明简写
【推荐】当你不确定自己写的属性会否影响到其他属性时,应避免使用简写
/* error */
.element {
margin: 0 0 10px;
background: red;
background: url("image.jpg");
border-radius: 3px 3px 0 0;
}
/* good */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url("image.jpg");
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
【推荐】当你确定自己的声明不会影响到其他属性时,请使用简写提升代码简洁性
/* not good */
.element {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;
}
/* good */
.element {
padding: 10px 20px 15px;
}
CSS动画
【推荐】不要使用all属性做动画
使用transition做动画的时候不要使用all所有属性,在有一些浏览器上面可能会有一些问题,如下:
transition: all 2s linear;
在Safari上面可能会有一些奇怪的抖动,正确的做法是要用哪个属性做动画就写哪个,如果有多个就用隔开,如下代码所示:
transition: transform 2s linear, opacity 2s linear;
【推荐】位移动画使用 transform 替代 position (提升动画性能)
【推荐】使用 CSS 动画替代 JS 动画
声明顺序
【参考】相关的属性声明按以下顺序做分组处理,组之间需要有一个空行
Positioning(影响其他元素和自身位置相关声明
Box model(自身盒模型相关声明)
Typographic(文本相关声明)
Visual(自身样式)
Misc(其他声明)
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
4.3 JavaScript 编码规范
命名
【强制】标准变量采用驼峰式命名(考虑与后台交换数据的情况,对象属性可灵活命名)
【强制】常量全大写,用下划线连接
【强制】变量名不应过短,要能准确完整地描述该变量所表述的事物
不好的变量名
好的变量名
inp
input, priceInput
day1, day2, param1
today, tomorrow
id
userId, orderId
obj
orderData, houseInfos
tId
removeMsgTimerId
handler
submitHandler, searchHandler
【强制】变量名不要使用计算机术语,如 texareaData,应该取和业务相关的名字,如 leaveMsg
【强制】变量名的对仗要明确,如 up/down、begin/end、opened/closed、visible/invisible、scource/target
【强制】变量名使用正确的语法
不要使用中文拼音,如 shijianchuo 应改成 timestamp ; 如果是复数的话加 s,或者加上 List,如 orderList、menuItems; 而过去式的加上 ed,如 updated/found 等; 如果正在进行的加上 ing,如 calling;
【推荐】使用临时变量时请结合实际需要进行变量命名
些喜欢取temp和obj之类的变量,如果这种临时变量在两行代码内就用完了,接下来的代码就不会再用了,还是可以接受的,如交换数组的两个元素。但是有些人取了个temp,接下来十几行代码都用到了这个temp,这个就让人很困惑了。所以应该尽量少用temp类的变量
// not good
let temp = 10;
let leftPosition = currentPosition + temp,
topPosition = currentPosition - temp;
// good
let adjustSpace = 10;
let leftPosition = currentPosition + adjustSpace,
topPosition = currentPosition - adjustSpace;
【推荐】波尔变量可以结合实际语境使用 done/found/successs/ok/available/complete 等修饰词
// good
let ajaxDone = true,
fileFound = false,
resourceUpdated = true;
【推荐】波尔变量名应使用肯定的布尔变量名,不要使用否定的名词,如 notOk、notReady,因为否定的词取反的时候就会比较奇怪,如 if (!notOk)
语法
【强制】变量不要先使用后声明
【强制】不要声明了变量却不使用
【强制】不要在同个作用域下声明同名变量
【强制】一个函数作用域中所有的变量声明尽量提到函数首部,可根据代码进行分组,但不允许出现两个连续的变量声明
// not good
let registerForm = null;
let question = "";
let calculateResult = 0;
// good
let registerForm = null,
question = "",
calculateResult = 0;
【强制】为了快速知晓变量类型,声明变量时要赋值
// not good
let registerForm,
question,
calculateResult;
// good
let registerForm = null,
question = "",
calculateResult = 0;
【强制】单一函数的返回值类型要确定(如下无法确定该函数的最终返回类型)
// not good
function calculatePrice(seatCount){
if (seatCount <= 0) {
return "";
} else {
return seatCount * 79;
}
}
【强制】debugger不要出现在提交的代码里
【推荐】使用===
代替==
,!==
代替!=
(==
会自动进行类型转换,可能会出现奇怪的结果)
null == undefined //true
'' == '0' //false
0 == '' //true
0 == '0' //true
' \t\r\n ' == 0 //true
new String("abc") == "abc" //true
new Boolean(true) == true //true
true == 1 //true
【推荐】使用三目运算代替简单的 if-else
// not good
let seatDiscount = 100;
if (seat < 5) {
seatDiscount = 90;
} else if(seat < 10) {
seatDiscount = 80;
} else {
seatDiscount = 70;
}
// good
let seatDiscount = seat < 5 ? 90 : seat < 10 ? 80 : 70;
【推荐】使用let
定义变量,const
定义常量
【推荐】使用箭头函数取代简单的函数
// not good
let _this = this;
setTimeout(function() {
_this.foo = "bar";
}, 2000);
// good
setTimeout(() => this.foo = "bar", 2000);
【推荐】在必要的地方添加非空判断以提高代码的稳健性
【推荐】将复杂的函数分解成多个子函数,方便维护和复用
代码风格 此处大部分工作将由代码格式化工具完成(参见环境要求),一般无需考虑
【强制】缩进使用两个空格代替 Tab
【强制】统一使用双引号""(与 Prettier 默认格式化配置持一致)
【强制】以下几种情况后需加分号;
变量声明
表达式
return
throw
break
continue
do-while
【强制】以下几种情况不需要空格:
二元运算符前后
三元运算符'?:'前后
代码块'{'前
下列关键字前:else
,while
,catch
,finally
下列关键字后: if
,else
,for
,while
,do
,switch
,case
,try
,catch
,finally
,with
, return
,typeof
单行注释'//'后(若单行注释和代码同行,则'//'前也需要),多行注释'*'后
对象的属性值前
for循环,分号后留有一个空格,前置条件如果有多个,逗号后留一个空格
无论是函数声明还是函数表达式,'{'前一定要有空格
函数的参数之间
数组、对象
1.【强制】对象属性名不需要加引号
2.【强制】对象以缩进的形式书写,不要写在一行
3.【强制】数组中不要存在空元素
4.【强制】不要用for in循环数组
5.【推荐】数组、对象最后不要有逗号
// not good
let a = {
'b': 1
};
let a = { b: 1 };
let a = {
b: 1,
c: 2,
};
// good
let a = {
b: 1,
c: 2
};
使用 null
【强制】正确使用 null
适用场景:
初始化一个将来可能被赋值为对象的变量
与已经初始化的变量做比较
作为一个参数为对象的函数的调用传参
作为一个返回对象的函数的返回值
不要用null来判断函数调用时有无传参
不要与未初始化的变量做比较
// not good
function test(a, b) {
if (b === null) {
// not mean b is not supply
// ...
}
}
let a;
if (a === null) {
// ...
}
// good
let a = null;
if (a === null) {
// ...
}
使用 undefined
【强制】正确使用 undefined
不要给变量赋值 undefined(undefined 本身就表示一个变量未定义)
不要直接使用 undefined 进行变量判断
使用typeof
和字符串 'undefined'
对变量进行判断
// not good
if (person === undefined) {
// ...
}
// good
if (typeof person === 'undefined') {
// ...
}
文档注释 【参考】各类标签 @param, @method 等请参考 usejsdoc 和 JSDoc Guide;
建议在以下情况下使用:
- 所有常量
- 所有函数
- 所有类
/**
* @func
* @desc 一个带参数的函数
* @param {string} a - 参数a
* @param {number} b=1 - 参数b默认值为1
* @param {string} c=1 - 参数c有两种支持的取值1—表示x2—表示xx
* @param {object} d - 参数d为一个对象
* @param {string} d.e - 参数d的e属性
* @param {string} d.f - 参数d的f属性
* @param {object[]} g - 参数g为一个对象数组
* @param {string} g.h - 参数g数组中一项的h属性
* @param {string} g.i - 参数g数组中一项的i属性
* @param {string} [j] - 参数j是一个可选参数
*/
function foo(a, b, c, d, g, j) {
// ...
}
4.4 Vue 组件编码规范
命名
【强制】组件名应该始终是多个单词的,根组件App
除外
// not good
Vue.component('todo', {
// ...
})
export default {
name: 'Todo',
// ...
}
// good
Vue.component('todo-item', {
// ...
})
export default {
name: 'TodoItem',
// ...
}
【强制】单文件组件 的文件名应该要么始终是单词大写开头( PascalCase ),要么始终是横线连接( kebab-case )
// not good
components/
|- mycomponent.vue
components/
|- myComponent.vue
// good
components/
|- MyComponent.vue
components/
|- my-component.vue
【推荐】应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 Base、App 或 V
// not good
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
// good
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue
components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue
【推荐】只应该拥有单个活跃实例的单例组件 应该以 The 前缀命名,以示其唯一性
单例组件不意味着组件只可用于一个单页面,而是每个页面只使用一次。这些组件永远不接受任何 prop,因为它们是为你的应用定制的,而不是它们在你的应用中的上下文。如果你发现有必要添加 prop,那就表明这实际上是一个可复用的组件,只是目前在每个页面里只使用一次
// not good
components/
|- Heading.vue
|- MySidebar.vue
// good
components/
|- TheHeading.vue
|- TheSidebar.vue
【强制】和父组件紧密耦合 的子组件应该以父组件名作为前缀命名
如果一个组件只在某个父组件的场景下有意义,这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件,所以这样做可以把相关联的文件排在一起
// not good
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue
//good
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
【强制】组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾
// not good
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
// good
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
【推荐】组件名应该倾向于完整单词而不是缩写
// not good
components/
|- SdSettings.vue
|- UProfOpts.vue
// good
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
语法
【强制】组件的data
必须是一个函数(除了 new Vue
外的任何地方)
// not good
export default {
data: {
foo: 'bar'
}
}
// good
export default {
data () {
return {
foo: 'bar'
}
}
}
【强制】prop
的定义应该尽量详细,至少需要指定其类型
// not good
// 这样做只有开发原型系统时可以接受
props: ['status']
// good
props: {
status: String
}
// better
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
【强制】为 v-for
设置键值;在组件上总是必须用 key
配合 v-for
,以便维护内部组件及其子树的状态在组件上总是必须用key
配合 v-for
,以便维护内部组件及其子树的状态
4.【强制】不要把 v-if
和 v-for
同时用在同一个元素上(大部分时候你可以使用计算属性实现)
【强制】自闭合组件 在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的;但在 DOM 模板里不要这样做
【强制】模版中的组件名 大小写在单文件组件和字符串模板中组件名应该总是 PascalCase 的;但是在 DOM 模板中总是 kebab-case 的
亦或者
【强制】JS/JSX 中的组件 名应该始终是 PascalCase 的
// not good
Vue.component('myComponent', {
// ...
})
import myComponent from './MyComponent.vue'
export default {
name: 'myComponent',
// ...
}
export default {
name: 'my-component',
// ...
}
// good
Vue.component('MyComponent', {
// ...
})
import MyComponent from './MyComponent.vue'
export default {
name: 'MyComponent',
// ...
}
【推荐】Prop 名大小写 ,在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case
// not good
props: {
'greeting-text': String
}
// good
props: {
greetingText: String
}
【推荐】多个特性的元素应该分多行撰写,每个特性一行(此项 Vetur 插件会自动根据行宽阈值进行自动折行处理,一般无需考虑)
【强制】组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法
// not good
{{
fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}
// good
// 在模板中
{{ normalizedFullName }}
// 复杂表达式已经移入一个计算属性
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}
【推荐】应该把复杂计算属性分割为尽可能多的更简单的属性
// not good
computed: {
finalPrice: function () {
var basePrice = this.manufactureCost / (1 - this.profitMargin)
return (
basePrice -
basePrice * (this.discountPercent || 0)
)
}
}
// good
computed: {
basePrice: function () {
return this.manufactureCost / (1 - this.profitMargin)
},
discount: function () {
return this.basePrice * (this.discountPercent || 0)
},
finalPrice: function () {
return this.basePrice - this.discount
}
}
【强制】非空 HTML 特性值应该始终带引号
【强制】可简写指令需要缩写 (用 :
表示 v-bind:
和用 @
表示 v-on:
)
代码风格
此处大部分工作将由代码格式化工具完成(参见环境要求),一般无需考虑 具体要求见 4.1 ,4.2,4.3 中代码风格部分
组件/实例的选项的顺序
【参考】组件/实例的选项应该有统一的顺序,这是我们推荐的组件选项默认顺序:
副作用 (触发组件外的影响)
全局感知 (要求组件以外的知识)
组件类型 (更改组件的类型)
模板修改器 (改变模板的编译方式)
模板依赖 (模板内使用的资源)
components
directives
filters
组合 (向选项里合并属性)
接口 (组件的接口)
inheritAttrs
model
props/propsData
本地状态 (本地的响应式属性)
事件 (通过响应式事件触发的回调)
watch
生命周期钩子 (按照它们被调用的顺序)
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
非响应式的属性 (不依赖响应系统的实例属性)
渲染 (不依赖响应系统的实例属性)
template
/
render
renderError
元素特性的顺序
【参考】元素 (包括组件) 的特性应该有统一的顺序,这是我们为元素特性推荐的默认顺序
定义 (提供组件的选项)
列表渲染 (创建多个变化的相同元素)
**条件渲染 **(元素是否渲染/显示)
v-if
v-else-if
v-else
v-show
v-cloak
渲染方式 (改变元素的渲染方式)
全局感知 (需要超越组件的知识)
唯一的特性 (需要唯一值的特性)
双向绑定 (把绑定和事件结合起来)
其它特性 (所有普通的绑定或未绑定的特性)
事件 (组件事件监听器)
内容 (覆写元素的内容)
单文件组件的顶级元素的顺序
【强制】单文件组件应该总是按照
、
和
的标签顺序
...
...
隐性的父子组件通信
【强制】应该优先通过 prop 和事件进行父子组件之间的通信,而不是 this.$parent 或改变 prop。
一个理想的 Vue 应用是 prop 向下传递,事件向上传递的。遵循这一约定会让你的组件更易于理解。然而,在一些边界情况下 prop 的变更或this.$parent
能够简化两个深度耦合的组件。 问题在于,这种做法在很多简单的场景下可能会更方便。但请当心,不要为了一时方便 (少写代码) 而牺牲数据流向的简洁性 (易于理解)。
非 Flux 的全局状态管理 【强制】应该优先通过 Vuex 管理全局状态,而不是通过 this.$root 或一个全局事件总线。
通过 this.$root
和/或全局事件总线管理状态在很多简单的情况下都是很方便的,但是并不适用于绝大多数的应用。Vuex 提供的不仅是一个管理状态的中心区域,还是组织、追踪和调试状态变更的好工具。
你可能感兴趣的:(前端开发规范)
大前端-postcss安装使用指南
黑夜照亮前行的路
postcss
PostCSS是一款强大的CSS处理工具,可以用来自动添加浏览器前缀、代码合并、代码压缩等,提升代码的可读性,并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南:一、安装PostCSS在你的项目目录中,通过npm(NodePackageManager)来安装PostCSS。打开命令行窗口,输入以下命令:bash复制代码npminstallpostcss--save-dev这将把
谷歌浏览器驱动Chromedriver(114-120版本)文件以及驱动下载教程
pigerr杨
Python python chrome drivers
ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
虚拟 DOM 的优缺点有哪些
咕噜签名分发
前端 javascript 开发语言
虚拟DOM(VirtualDOM)技术作为现代前端开发中的重要组成部分,已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势,同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点,深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异,最小化实际DOM操作,从而减少页面重渲染时的性能消耗。这种优
3、JavaWeb-Ajax/Axios-前端工程化-Element
所谓远行Misnearch
# JavaWeb 前端 ajax elementui java 前端框架
P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML,异步的JS和XMLJS网页动作,XML一种标记语言,存储数据,作用:数据交换:通过Ajax给服务器发送请求,并获取服务器响应的数据异步交互:在不重新加载整个页面的情况下,与服务器交换数据并实现更新部分网页的技术,例如:搜索联想、用户名是否可用的校验等等。同步与异步:同步:服务器在处理中客户端要处于等待状态,输入域名
java实体中返回前端的double类型四舍五入(格式化)
婲落ヽ紅顏誶
java
根据业务,需要通过后端给前端返回部分double类型的数值,一般需要保留两位小数,使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
Django forms组件
在飞行-米龙
Django django python 后端
【一】引入【1】实现登陆验证功能(1)需求分析登陆验证需要前后端交互,采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容(2)后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
Web前端Html的表单
任家伟
前端 html
表单的关键字:form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读,不可修改,但是可以提交disabled=“disabled”禁用组件不可修改,不能提交type=“password”密码框type=“radio”单
Thinkphp - 详细实现网站系统登录功能,附带 Mysql 数据库设置、Web 前端展示界面、信息校验等(详细代码,即设计过程)
王佳斌
+ Thinkphp mysql 前端 数据库
前言登录功能,是我们几乎开发每个系统都必须的模块。登录功能设计思路,主要包括几个方面。用户输入网址展示登录页面用户输入用户名,密码等点击登录进行信息校验校验通过之后,记录用户登录信息,跳转指定页面用户校验失败,提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面,我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
程序员开发技术整理
laizhixue
学习 前端框架
前端技术:vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术:webservice:soap架构:简单的通信协议,用于服务通信ORM框架:对象关系映射,如EF:对象实体模型,是ado.net中的应用技术soap服务通讯:xml通讯ado.net:OAuth2:登录授权认证:Token认证:JWT:jsonwebtokenJava后端技术:便捷工
【前端学习——js篇】7.函数缓存
笔下无竹墨下有鱼
前端学习 前端 学习 javascript
具体见:https://github.com/febobo/web-interview7.函数缓存函数缓存,就是将函数运算过的结果进行缓存本质上就是用空间(缓存存储)换时间(计算过程)常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化:①柯里化柯里化(currying)是一种函数式编程的概念,指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
Websocket服务监听收发消息
beiback
Java 服务器问题 websocket 网络协议 网络
目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范:为应用的所有servlet提供一个统一的前缀,使URL结构更加清晰和一致
Netty服务器结合WebSocke协议监听和接收数据
beiback
服务器问题 Java 服务器 运维 netty
目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa
基于SSM+Vue企业销售培训系统 企业人才培训系统 企业课程培训管理系统 企业文化培训班系统Java
计算机程序老哥
作者主页:计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言:Java数据库:MySQL系统架构:B/S后端:SSM(Spring+SpringMVC+Mybatis)前端:Vue工具:IDEA或者Eclipse,JDK1.8,Maven二、系统介绍2.1图片展示注册登录页面:登陆.png前端页面功能:首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个
javascript实现SM2加密解密
人生在勤,不索何获
javascript 前端 jquery
前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu
前端埋点解决方案
zhu_zhu_xia
前端
一、前言:基于神策数据的前端埋点解决方案JavaScript快速使用·神策分析使用手册[预览版]二、sdkgitlab下载地址https://github.com/sensorsdata/sa-sdk-javascript/releases或者npm安装npmisa-sdk-javascript三、入门3.1接入sdk以及配置(version1.17.2),入口文件接入sdk以及添加配置(func
如何提出令人爱回答的好问题?
兮若耶
我们经常会遇到这样的问题,如我适合做什么?这个名词怎么解释?大部分人面对这样的问题时,要么答非所问,要么无从下手。现在的很多事物都是速成的,只是好的问题并没有那么容易被提出来。而提不好的问题,可能会拿不到想要的信息等等。所以提出一个好问题很重要。01提问的功能我们参加各种聚会、会议时,能听到很多的比喻和新观点,而这些是在书上和网上找不到的。这些新的有用的东西,都在前端被实践着,暂时来不及把知识系统
谈谈对前端性能监控的理解和实践
Layla_c
web jave python 前端
一、谈谈对前端性能监控的理解和实践前端性能监控是确保网页或应用高效、稳定运行的关键环节,它涉及对前端页面加载速度、资源消耗、错误率等指标的实时监控和预警。通过前端性能监控,开发者和运维团队能够及时发现并解决性能瓶颈,从而提升用户体验和系统稳定性。理解前端性能监控,首先要明确其重要性。在移动互联网时代,用户对网页和应用的响应速度有着极高的要求。如果页面加载缓慢或出现卡顿,用户可能会选择离开,这对企业
mineadmin使用docker启动方式
qq_38812523
docker php 容器
找个目录,git下来mineadmin代码,在根目录,创建文件名docker-compose.yml然后复制下面代码version:'3'services:#首先下载前端,https://gitee.com/mineadmin/mineadmin-vue#在后端根目录建立mine-ui目录,把前端文件复制过来。#容器内访问宿主机的地址用:host.docker.internal#宿主机也可以在ho
为什么需要使用版本控制工具(如Git)?它如何帮助管理前端开发项目?
智伴科技
git
版本控制工具(如Git)在前端开发项目中扮演着重要的角色,主要有以下几方面的作用:1.**版本管理**:版本控制工具可以帮助开发团队管理项目的不同版本,记录每次代码变动的历史记录,方便追踪和回溯。开发人员可以通过版本控制工具轻松地查看、对比和恢复以前的版本。2.**协同合作**:多人开发同一个项目时,版本控制工具可以协助团队成员协同工作,避免代码冲突、重复工作和混乱。开发人员可以通过版本控制工具共
低代码与前端开发架构:重塑软件开发的未来
快乐非自愿
低代码 架构 前端
随着技术的不断进步和数字化转型的深入,软件开发领域正经历着一场革命性的变革。在这场变革中,低代码开发平台和前端开发架构扮演着越来越重要的角色。本文将探讨低代码与前端开发架构之间的关系,并分析它们如何共同推动软件开发的创新与发展。低代码开发平台的崛起低代码开发平台(Low-CodeDevelopmentPlatform,LCDP)是一种新型的软件开发方式,它允许开发者通过图形化界面、预构建的模块和模
接口测试之测试原则、测试用例、测试流程......
程序员老鹰
测试工具 功能测试 测试用例 测试覆盖率 系统安全
一、接口的介绍软件测试中,常说的接口有两种:图形用户接口(GUI,人与程序的接口)、应用程序编程接口(API)。接口(API)是系统与系统之间,模块与模块之间或者服务与服务之间相互调用的入口。它的本质:其实就是一种约定,在开发前期,我们约定接口会接收什么数据;在处理完成后,它又会返回什么数据。开发岗位分为前端和后端,他们相互配合完成工作,会协商接口的定义方法。一般后端定义接口,前端调用接口。前后端
【前端】CommonJS和ES Module
Lucky小维
前端 前端
区别语法差异:CommonJS:使用require()导入模块,使用module.exports或exports导出模块。ESModule:使用import导入模块,使用export导出模块。编译时vs运行时:CommonJS是在运行时加载模块,模块代码是动态执行的。ESModule是在编译时静态解析模块依赖关系,以便更好地进行优化和静态分析。异步加载:CommonJS不支持异步加载模块,只能同步
基于python+vue高校毕业生离校管理系统flask-django-php-nodejs
QQ511008285
python vue.js flask django node.js php
课题主要采用Uni-weixin、django架构技术,前端以小程序页面呈现给用户,结合后台java语言使页面更加完善,后台使用MySQL数据库进行数据存储。微信小程序主要包括学生、教务人员、宿管员、图书管理员、财务人员、离校申请、物流信息、钥匙归还、图片归还、欠费信息、催缴信息等功能,从而实现智能化的管理方式,提高工作效率。关键字:高校毕业生离校管理系统;django框架;MySQL数据库语言:
Vue项目使用process.env关键字及Vue.config.js配置解决前端跨域问题
百思不得小李
JS实战记录 vue2实战记录 javascript 前端 vue.js
1.process.env是Node.js中的一个环境1.打开命令行查看环境:2.process.env与VueCLI项目VueCli有以下三种运行模式development模式用于vue-cli-serviceservetest模式用于vue-cli-servicetest:unitproduction模式用于vue-cli-servicebuild和vue-cli-servicetest:e2
浅谈前端路由history和hash的理解
怂怂敲代码
前端 哈希算法 算法
hash和history在前端面试中是很常考的一道题目,可能很多人对于history和hash的理解差异性就是,他们两者的url字段一个没有#号一个有#号,但是有没有想过为什么这样呢,有无#号又有什么差异呢,这篇文章谈一谈我对前端路由history和hash的理解。hash和history都可以用于前后端分离项目,且两者有各自的特点和各自的使用场景。一、前端路由原理1、SPASPA,即单页面应用(
Yarn 管理的前端项目转换为使用 npm
577wq
node.js 前端 npm node.js
如果你想将一个使用Yarn管理的前端项目转换为使用npm,你需要执行一些步骤来确保成功迁移。以下是一种可能的方法:步骤:备份项目:在执行任何更改之前,确保你对项目进行了备份。这样可以防止意外的数据丢失。删除yarn.lock文件:在项目根目录中,删除yarn.lock文件。这个文件记录了使用Yarn安装的确切的依赖版本信息。修改package.json文件:打开项目的package.json文件,
accessToken
星梦清河
java spring boot 经验分享 redis
1、介绍accessToken,通常是用于身份验证和授权的令牌,它可以用于前端和后端,具体使用方式取决于应用程序的架构和需求。前端应用accessToken通常用于向后端API发送请求时进行身份验证和授权。(1)前端应用程序会在用户登录成功后获取accessToken;(2)并将accessToken存储在本地;(3)然后在每次请求API时,将accessToken作为请求头或参数发送给后端;(4
python社区垃圾分类管理平台的设计与实现flask-django-php-nodejs
QQ_511008285
python flask django vue.js php node.js
近些年来,随着科技的飞速发展,互联网的普及逐渐延伸到各行各业中,给人们生活带来了十分的便利,社区垃圾分类管理平台利用计算机网络实现信息化管理,使整个社区垃圾分类管理的发展和服务水平有显著提升。语言:Python框架:django/flask软件版本:python3.7.7数据库:mysql数据库工具:Navicat前端框架:vue.js通过比较两个不同因素的框架,可以看出Flask和Django不
springboot项目学习-瑞吉外卖(1)
两仪式quq
spring boot 学习 java 瑞吉外卖
第一天任务如下:建立基本架构完成登录、退出功能注意:本博客没有使用网上教程里的mybatis-plus,使用的是mybatis;数据库连接池也没有使用教程里的druid,使用的是spring自带的连接池基本架构common包:存放的通用类R,用来给前端返回Json格式的数据config包:存放配置类,在今天的任务中主要解决静态资源路径映射问题controller包entity包:存放实体类mapp
前端测试方法
gyqJulius_Caesar
C/C++程序设计 前端 可用性测试 压力测试 单元测试 功能测试 模块测试 集成测试
记录一些测试方法。对于前端工程师,测试是开发过程中不可或缺的环节。而其中两种最基本、最常见的测试类型就是“冒烟测试”和“全量测试”。1.冒烟测试众所周知,冒烟这个词是源自汽车行业的。新造出来的车辆要经过“冒烟测试”,以确保所有系统(包括电池、传动系统、制动系统等)都正常运转,或者说没有什么大问题。同样地,软件开发也会进行类似的测试。在软件开发中,“冒烟测试”通常是指对代码库中的主要功能点进行快速测
java线程Thread和Runnable区别和联系
zx_code
java jvm thread 多线程 Runnable
我们都晓得java实现线程2种方式,一个是继承Thread,另一个是实现Runnable。
模拟窗口买票,第一例子继承thread,代码如下
package thread;
public class ThreadTest {
public static void main(String[] args) {
Thread1 t1 = new Thread1(
【转】JSON与XML的区别比较
丁_新
json xml
1.定义介绍
(1).XML定义
扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据、定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一,跨平台和语言,早已成为业界公认的标准。
XML是标
c++ 实现五种基础的排序算法
CrazyMizzz
C++ c 算法
#include<iostream>
using namespace std;
//辅助函数,交换两数之值
template<class T>
void mySwap(T &x, T &y){
T temp = x;
x = y;
y = temp;
}
const int size = 10;
//一、用直接插入排
我的软件
麦田的设计者
我的软件 音乐类 娱乐 放松
这是我写的一款app软件,耗时三个月,是一个根据央视节目开门大吉改变的,提供音调,猜歌曲名。1、手机拥有者在android手机市场下载本APP,同意权限,安装到手机上。2、游客初次进入时会有引导页面提醒用户注册。(同时软件自动播放背景音乐)。3、用户登录到主页后,会有五个模块。a、点击不胫而走,用户得到开门大吉首页部分新闻,点击进入有新闻详情。b、
linux awk命令详解
被触发
linux awk
awk是行处理器: 相比较屏幕处理的优点,在处理庞大文件时不会出现内存溢出或是处理缓慢的问题,通常用来格式化文本信息
awk处理过程: 依次对每一行进行处理,然后输出
awk命令形式:
awk [-F|-f|-v] ‘BEGIN{} //{command1; command2} END{}’ file
[-F|-f|-v]大参数,-F指定分隔符,-f调用脚本,-v定义变量 var=val
各种语言比较
_wy_
编程语言
Java Ruby PHP 擅长领域
oracle 中数据类型为clob的编辑
知了ing
oracle clob
public void updateKpiStatus(String kpiStatus,String taskId){
Connection dbc=null;
Statement stmt=null;
PreparedStatement ps=null;
try {
dbc = new DBConn().getNewConnection();
//stmt = db
分布式服务框架 Zookeeper -- 管理分布式环境中的数据
矮蛋蛋
zookeeper
原文地址:
http://www.ibm.com/developerworks/cn/opensource/os-cn-zookeeper/
安装和配置详解
本文介绍的 Zookeeper 是以 3.2.2 这个稳定版本为基础,最新的版本可以通过官网 http://hadoop.apache.org/zookeeper/来获取,Zookeeper 的安装非常简单,下面将从单机模式和集群模式两
tomcat数据源
alafqq
tomcat
数据库
JNDI(Java Naming and Directory Interface,Java命名和目录接口)是一组在Java应用中访问命名和目录服务的API。
没有使用JNDI时我用要这样连接数据库:
03. Class.forName("com.mysql.jdbc.Driver");
04. conn
遍历的方法
百合不是茶
遍历
遍历
在java的泛
linux查看硬件信息的命令
bijian1013
linux
linux查看硬件信息的命令
一.查看CPU:
cat /proc/cpuinfo
二.查看内存:
free
三.查看硬盘:
df
linux下查看硬件信息
1、lspci 列出所有PCI 设备;
lspci - list all PCI devices:列出机器中的PCI设备(声卡、显卡、Modem、网卡、USB、主板集成设备也能
java常见的ClassNotFoundException
bijian1013
java
1.java.lang.ClassNotFoundException: org.apache.commons.logging.LogFactory 添加包common-logging.jar2.java.lang.ClassNotFoundException: javax.transaction.Synchronization
【Gson五】日期对象的序列化和反序列化
bit1129
反序列化
对日期类型的数据进行序列化和反序列化时,需要考虑如下问题:
1. 序列化时,Date对象序列化的字符串日期格式如何
2. 反序列化时,把日期字符串序列化为Date对象,也需要考虑日期格式问题
3. Date A -> str -> Date B,A和B对象是否equals
默认序列化和反序列化
import com
【Spark八十六】Spark Streaming之DStream vs. InputDStream
bit1129
Stream
1. DStream的类说明文档:
/**
* A Discretized Stream (DStream), the basic abstraction in Spark Streaming, is a continuous
* sequence of RDDs (of the same type) representing a continuous st
通过nginx获取header信息
ronin47
nginx header
1. 提取整个的Cookies内容到一个变量,然后可以在需要时引用,比如记录到日志里面,
if ( $http_cookie ~* "(.*)$") {
set $all_cookie $1;
}
变量$all_cookie就获得了cookie的值,可以用于运算了
java-65.输入数字n,按顺序输出从1最大的n位10进制数。比如输入3,则输出1、2、3一直到最大的3位数即999
bylijinnan
java
参考了网上的http://blog.csdn.net/peasking_dd/article/details/6342984
写了个java版的:
public class Print_1_To_NDigit {
/**
* Q65.输入数字n,按顺序输出从1最大的n位10进制数。比如输入3,则输出1、2、3一直到最大的3位数即999
* 1.使用字符串
Netty源码学习-ReplayingDecoder
bylijinnan
java netty
ReplayingDecoder是FrameDecoder的子类,不熟悉FrameDecoder的,可以先看看
http://bylijinnan.iteye.com/blog/1982618
API说,ReplayingDecoder简化了操作,比如:
FrameDecoder在decode时,需要判断数据是否接收完全:
public class IntegerH
js特殊字符过滤
cngolon
js特殊字符 js特殊字符过滤
1.js中用正则表达式 过滤特殊字符, 校验所有输入域是否含有特殊符号function stripscript(s) { var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~!@#¥……&*()——|{}【】‘;:”“'。,、?]"
hibernate使用sql查询
ctrain
Hibernate
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import org.hibernate.Hibernate;
import org.hibernate.SQLQuery;
import org.hibernate.Session;
import org.hibernate.Transa
linux shell脚本中切换用户执行命令方法
daizj
linux shell 命令 切换用户
经常在写shell脚本时,会碰到要以另外一个用户来执行相关命令,其方法简单记下:
1、执行单个命令:su - user -c "command"
如:下面命令是以test用户在/data目录下创建test123目录
[root@slave19 /data]# su - test -c "mkdir /data/test123" 
好的代码里只要一个 return 语句
dcj3sjt126com
return
别再这样写了:public boolean foo() { if (true) { return true; } else { return false;
Android动画效果学习
dcj3sjt126com
android
1、透明动画效果
方法一:代码实现
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
View rootView = inflater.inflate(R.layout.fragment_main, container, fals
linux复习笔记之bash shell (4)管道命令
eksliang
linux管道命令汇总 linux管道命令 linux常用管道命令
转载请出自出处:
http://eksliang.iteye.com/blog/2105461
bash命令执行的完毕以后,通常这个命令都会有返回结果,怎么对这个返回的结果做一些操作呢?那就得用管道命令‘|’。
上面那段话,简单说了下管道命令的作用,那什么事管道命令呢?
答:非常的经典的一句话,记住了,何为管
Android系统中自定义按键的短按、双击、长按事件
gqdy365
android
在项目中碰到这样的问题:
由于系统中的按键在底层做了重新定义或者新增了按键,此时需要在APP层对按键事件(keyevent)做分解处理,模拟Android系统做法,把keyevent分解成:
1、单击事件:就是普通key的单击;
2、双击事件:500ms内同一按键单击两次;
3、长按事件:同一按键长按超过1000ms(系统中长按事件为500ms);
4、组合按键:两个以上按键同时按住;
asp.net获取站点根目录下子目录的名称
hvt
.net C# asp.net hovertree Web Forms
使用Visual Studio建立一个.aspx文件(Web Forms),例如hovertree.aspx,在页面上加入一个ListBox代码如下:
<asp:ListBox runat="server" ID="lbKeleyiFolder" />
那么在页面上显示根目录子文件夹的代码如下:
string[] m_sub
Eclipse程序员要掌握的常用快捷键
justjavac
java eclipse 快捷键 ide
判断一个人的编程水平,就看他用键盘多,还是鼠标多。用键盘一是为了输入代码(当然了,也包括注释),再有就是熟练使用快捷键。 曾有人在豆瓣评
《卓有成效的程序员》:“人有多大懒,才有多大闲”。之前我整理了一个
程序员图书列表,目的也就是通过读书,让程序员变懒。 写道 程序员作为特殊的群体,有的人可以这么懒,懒到事情都交给机器去做,而有的人又可
c++编程随记
lx.asymmetric
C++ 笔记
为了字体更好看,改变了格式……
&&运算符:
#include<iostream>
using namespace std;
int main(){
int a=-1,b=4,k;
k=(++a<0)&&!(b--
linux标准IO缓冲机制研究
音频数据
linux
一、什么是缓存I/O(Buffered I/O)缓存I/O又被称作标准I/O,大多数文件系统默认I/O操作都是缓存I/O。在Linux的缓存I/O机制中,操作系统会将I/O的数据缓存在文件系统的页缓存(page cache)中,也就是说,数据会先被拷贝到操作系统内核的缓冲区中,然后才会从操作系统内核的缓冲区拷贝到应用程序的地址空间。1.缓存I/O有以下优点:A.缓存I/O使用了操作系统内核缓冲区,
随想 生活
暗黑小菠萝
生活
其实账户之前就申请了,但是决定要自己更新一些东西看也是最近。从毕业到现在已经一年了。没有进步是假的,但是有多大的进步可能只有我自己知道。
毕业的时候班里12个女生,真正最后做到软件开发的只要两个包括我,PS:我不是说测试不好。当时因为考研完全放弃找工作,考研失败,我想这只是我的借口。那个时候才想到为什么大学的时候不能好好的学习技术,增强自己的实战能力,以至于后来找工作比较费劲。我
我认为POJO是一个错误的概念
windshome
java POJO 编程 J2EE 设计
这篇内容其实没有经过太多的深思熟虑,只是个人一时的感觉。从个人风格上来讲,我倾向简单质朴的设计开发理念;从方法论上,我更加倾向自顶向下的设计;从做事情的目标上来看,我追求质量优先,更愿意使用较为保守和稳妥的理念和方法。
&