前端如何行内更改状态_前端开发的基本方法

1. 怎么用前端css实现这种样式切换

实现两种css样式，默认，选中
通过js监听点击事件切换标签的css样式

2. web前端，输入选择框选中状态下的css样式如何改

CSS可以完成这个效果，但需要高版本的浏览器支持，兼容性不是特别好。
使用的代码就是 input:hover 或者 input:focus 这两个语法就可以。

3. 前端监听服务端状态并返回状态怎么实现

需要涉及一种方式能够持续跟踪任务的进行情况。每个监听任务会被分配一个任务ID，在任务监听结束后被释放。
全局监听器的实现
基于单例模式设置一个HashMap能被系统全局访问用于存放任意任务的监听数据。同时Value部分使用特殊特殊结构。

4. 如何进行前端优化

1.减少 HTTP 请求....

2.使用 HTTP2

3.使用服务端渲染

4.静态资源使用 CDN

5.将 CSS 放在文件头部，JavaScript 文件放 ...

6.使用字体图标 iconfont 代替图片图标

7.善用缓存，不重复加载相同的资源

8.压缩文件

9.图片优化

(1).图片延迟加载

(2). 响应式图片

(3). 调整图片大小

(4). 降低图片质量

(5). 尽可能利用 CSS3 效果代替图片

(6). 使用 webp 格式的图片

10. 通过 webpack 按需加载代码，提取第三库代码，减少 ES6 转为 ES5 的冗余代码

11. 减少重绘重排

12. 使用事件委托

13. 注意程序的局部性

14. if-else 对比 switch

15. 查找表

16. 避免页面卡顿

17. 使用 requestAnimationFrame 来实现视觉变化

18. 使用 Web Workers

19. 使用位操作

20. 不要覆盖原生方法

21. 降低 CSS 选择器的复杂性

(1). 浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。

(2). CSS 选择器优先级

22. 使用 flexbox 而不是较早的布局模型

23. 使用 transform 和 opacity 属性更改来实现动画

24. 合理使用规则，避免过度优化

性能优化主要分为两类：

加载时优化
运行时优化

5. 前端开发的基本方法

CSS部分

盒子边倾斜

clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);

禁止点击事件/鼠标事件“穿透”

div * { pointer-events: none; /*链接啊，点击事件啊，都没有效果了*/ }

用来控制元素在移动设备上使用滚动回弹效果

.main{
-webkit-overflow-scrolling: touch;
}

可解决在IOS中使用overflow:auto 形成的滚动条，滚动不流畅的情况

文字渐变效果

.text-gradient{ background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text; color: transparent;
}

css三角形

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;

}

实现圆弧

clip-path: ellipse(80%60% at50%40%);

JS部分

JavaScript中检测数组的方法

(1)、typeof操作符

这种方法对一些常用的类型检查没有问题，但对array和null 都判断为object
(2)、instanceof操作符

这个操作符是检测对象的原型链是否指向构造函数的prototype对象的
(3)、对象的constructor属性

const arr = []

console.log(arr.constructor === Array) // true

(4)、Object.prototype.toString

constarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true

(5)、Array.isArray()

常用的字符串操作

字符串转化toString()
字符串分隔split()
字符串替换replace()
获取长度length
查询子字符串 indexOf
返回指定位置的字符串或字符串编码 charAt charCodeAt
字符串匹配 match
字符串拼接concat
字符串的切割或提取slice() substring() substr()
字符串大小写转化 toLowerCase toUpperCase
字符串去空格 trim() 用来删除字符串前后的空格

其中第9中三者的区别如下：
（1）slice(), 参数可以是负数，负数表示从字符串最后一个位置开始切割到对应结束位置
（2）substring()，参数不可为负数，切割第一个位置到第二个位置的字符串
（3）substr()，参数可以是负数，第一个参数是开始位置，第二个参数为切割的长度
字符串去重

const str = '11122223333'const uniqueStr = [...new Set(str)].join('')

常用的数组操作

1、Array.map()
此方法是将数组中的每个元素调用一个提供的函数，结果作为一个新的数组返回，并没有改变原来的数组
2、Array.forEach()
此方法是将数组中的每个元素执行传进提供的函数，没有返回值，注意和map方法区分
3、Array.filter()
此方法是将满足条件的元素作为一个新数组返回
4、Array.every()
此方法将数组所有元素进行判断返回一个布尔值，如果所有元素都符合判断条件，则返回true，否则返回false
5、Array.some()
此方法将数组所有元素进行判断返回一个布尔值,如果有一个元素满足判断条件，则返回true，所有元素都不满足则返回false
6、Array.rece()
此方法为所有元素调用返回函数
7、Array.push()
在数组最后面添加新元素
8、Array.shift()
删除数组第一个元素
9、Array.pop()
删除数组最后一个元素
10、Array.unshift()
在数组最前面增加元素
11、Array.isArray()
判断是否为一个数组
12、Array.concat()
数组拼接
13、Array.toString()
数组转化为字符串
14、Array.join()
数组转化为字符串，并用第一个参数作为连接符
15、Array.splice(开始位置，删除个数，元素)
其中rece使用方法为：

arr.rece(callback,[initialValue])

跳过第一个索引。如果提供initialValue，从索引0开始。

callback （执行数组中每个值的函数，包含四个参数）
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 rece 的数组） initialValue （作为第一次调用 callback 的第一个参数。）
如果没有提供initialValue，rece 会从索引1的地方开始执行 callback 方法，

数组去重：

const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [...new Set(arr)]

常用对象方法

1、Object.assign()
用于克隆，两个参数，将第二个对象分配到第一个中
2、Object.is()
用于判断两个值是否相同
//注意，该函数与==运算符不同，不会强制转换任何类型，应该更加类似于===，但值得注意的是它会将+0和-0视作不同值
3、Object.keys()
用于返回对象可枚举的属性和方法的名称，返回一个属性或方法名称的字符串数组。
4、Object.defineProperty()
劫持变量的set和get方法,将属性添加到对象，或修改现有属性的特性

var a = {};Object.defineProperty(a, 'name', { value : 'kong', enumerable : true //该属性是否可枚举})

5、Object.defineProperties()
可添加多个属性,与Object.defineProperty()对应,
6、isPrototypeOf

function a(){}

var b = new a();console.log(a.prototype.isPrototypeOf(b));//true

安卓监听可视区域变化，让输入框移动至可视区域

if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded();

}, 0);

}

});

};

vue中平滑滚动到某个位置

this.$refs.rule.scrollIntoView({ block: 'start', behavior: 'smooth' })

向URL追加参数

* 向URL追加参数

* @function stringifyUrlArgs

* @param {string} url - URL路径

* @param {object} params - 参数对象

* @return {string}

const stringifyUrlArgs = (url, params) => {

url += (/?/).test(url) ? '&' : '?'

url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&') return url

}

解析URL参数

* 解析URL参数

* @function parseUrlArgs

* @param {string} url - 字符串

* @return {object}export const parseUrlArgs = url => { const arr = url.match(/([^?=&]+)(=([^&]*))/g) || [] const args = arr.rece((a, v) => {

a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1) return a

}, {}) return args

}

好用的JavaSrcipt库与模块（包）

日期时间处理库

1、monent.js
2、day.js
day相对于monent要轻量许多

高精度数学运算

number-precision

NP.strip(num) // strip a number to nearest right numberNP.plus(num1, num2, num3, ...) // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, ...) // subtraction, num1 - num2 - num3NP.times(num1, num2, num3, ...) // multiplication, num1 * num2 * num3NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3NP.round(num, ratio) // round a number based on ratio

实用工具库

Lodash
lodash 是一个 JavaScript 实用工具库，提供一致性，及模块化、性能和配件等功能。
Lodash 消除了处理数组的麻烦，从而简化了 JavaScript、数字、对象、字符串等

6. 怎样把这一行变正常有关web前端的。

外层的div加上padding-top，这样才可以把它撑下来。
原则：父子之间的元素用padding撑开，兄弟之间用margin撑开。

7. js如何实现点击编辑按钮，前端table表格行内指定td可修改。（table是动态生成的）

functionready(){varurl=base_path+"console/cfg/getBaseLayers/"+configId;$.ajax({url:url,type:"get",dataType:"json",success:function(result){//生成之前先清空tr,防止AJAX异步加载重复生成$("#lottr").remove();varlength=result.length;for(vari=0;i<length;i++){varname=result[i].name;//服务名称varalias=result[i].alias;//服务别名vartype=result[i].type;//服务类型varyear=result[i].year;//年份varurl=result[i].url;//服务地址varvisible=result[i].visible;//是否可见varid=result[i].id;//idserviceIdArray[i]=id;//此处将id塞给serviceIdArray，用于判断是否添加。varstr="";if(visible==true){//生成trstr+='<trid="';str+=id;str+='"';str+='class="lot_box"><td>';str+=i+1;str+='</td><td>';str+=name;str+='</td><td>';str+=alias;str+='</td><td>';str+=type;str+='</td><td>';str+=year;str+='</td><td>';str+=url;str+='</td><td>';str+='<inputid="';str+=id;str+='"';str+='type="checkbox"checked="true"onchange="modifyService(this.id);"/>';str+='</td><td><inputid="';str+=id;str+='"';str+='type="button"value="编辑"onclick="editTd(this.id)"/>';str+='</td><td>';str+='<buttonclass="rosy"id="';str+=id;str+='"';str+='onclick="deleteService(this.id);">';str+='<imgsrc="static/img/del14.png"></button>';str+='</td></tr>';
}else{//生成trstr+='<trid="';str+=id;str+='"';str+='class="lot_box"><td>';str+=i+1;str+='</td><td>';str+=name;str+='</td><td>';str+=alias;str+='</td><td>';str+=type;str+='</td><td>';str+=year;str+='</td><td>';str+=url;str+='</td><td>';str+='<inputid="';str+=id;str+='"';str+='type="checkbox"onchange="modifyService(this.id);"/>';str+='</td><td><inputid="';str+=id;str+='"';str+='type="button"value="编辑"onclick="editTd(this.id)"/>';str+='</td><td>';str+='<buttonclass="rosy"id="';str+=id;str+='"';str+='onclick="deleteService(this.id);">';str+='<imgsrc="static/img/del14.png"></button>';str+='</td></tr>';
}var$tr=$(str);$("#lot").append($tr);
}
}
});
}

2）

//修改table行内元素(td)functioneditTd(id){//选中编辑按钮的时候,把这行指定的几个td变成文本框varb=$("input[type='button'][id='"+id+"']").parent();//tdvara=b.siblings();//td的兄弟节点if(a[1].children.length===0){a[1].innerHTML="<inputtype='text'value='"+a[1].innerText+"'/>";
}
if(a[2].children.length===0){a[2].innerHTML="<inputtype='text'value='"+a[2].innerText+"'/>";
}
if(a[3].children.length===0){a[3].innerHTML="<inputtype='text'value='"+a[3].innerText+"'/>";
}//将编辑改成保存和取消两个按钮b[0].innerHTML="<inputid='"+id+"'type='button'onclick='saveEditTd(this.id);'value='保存'/><inputtype='button'onclick='resertEditTd();'value='取消'/>";
//以下注掉的都是在网上找的参考。/*alert(a[0].getText());var$this=$(this).index();alert($this);*//*$('input[type="button"]').on('click',function(){var$this=$(this).parent().parent();//trready();});*//*var$=function(node){returntypeofnode=="string"?document.getElementById(node):node;}var$1=function(node,parent){varnd=document.createElement(node);if(parent)parent.appendChild(nd);returnnd;}/!**绑定事件流*!/varbind=function(obj,eventName,funcionName){if(obj.addEventListener){obj.addEventListener(eventName,funcionName,false);}elseif(obj.attachEvent){obj.attachEvent("on"+eventName,funcionName);}else{obj["on"+eventName]=funcionName;}};varfulltable=function(tbody,data){varpd=data.data;varcolumn=data.column;for(vari=0,len=data.rows;i<len;i++){vartr=$1("tr",tbody);varcd=pd[i];for(varj=0,jlen=column.length;j<jlen;j++){vartd=$1("td",tr);td.innerHTML=cd[column[j]];//innerText不兼容火狐，可以自己写innerText和textContent的兼容，这里就直接用innerHTML了}}}varlittlehow_edit_table=function(tbody,ev){this.tbody=$(tbody);this.event=ev?ev:"click";//默认为单机事件this.init=function(data){//data可以是undefinedif(data){fulltable(this.tbody,data);}//调用可编辑this.edit();}this.edit=function(){vartds=this.tbody.getElementsByTagName("td");for(vari=0,len=tds.length;i<len;i++){bind(tds[i],this.event,this.click);}}this.click=function(){//alert(this.children.length);if(this.children.length>0)return;varv=this.innerHTML;this.innerHTML="";varinput=$1("input",this);input.type="text";input.value=v;input.focus();//光标聚集bind(input,"blur",blur);}varblur=function(){varv=this.value;this.parentNode.innerHTML=v;}}window.$$=function(id,ev){returnnewlittlehow_edit_table(id,ev);};*//*$('.editable').handleTable({"handleFirst":true,"cancel":"<spanclass='glyphiconglyphicon-remove'></span>","edit":"<spanclass='glyphiconglyphicon-edit'></span>","add":"<spanclass='glyphiconglyphicon-plus'></span>","save":"<spanclass='glyphiconglyphicon-saved'></span>","confirm":"<spanclass='glyphiconglyphicon-ok'></span>","operatePos":-1,"editableCols":[2,3,4],"order":["add","edit"],"saveCallback":function(data,isSuccess){//这里可以写ajax内容，用于保存编辑后的内容//data:返回的数据//isSucess:方法，用于保存数据成功后，将可编辑状态变为不可编辑状态varflag=true;//ajax请求成功（保存数据成功），才回调isSuccess函数（修改保存状态为编辑状态）if(flag){isSuccess();alert(data+"保存成功");}else{alert(data+"保存失败");}returntrue;},"addCallback":function(data,isSuccess){varflag=true;if(flag){isSuccess();alert(data+"增加成功");}else{alert(data+"增加失败");}},"delCallback":function(isSuccess){varflag=true;if(flag){isSuccess();alert("删除成功");}else{alert("删除失败");}}});*//*//dom创建文本框varinput=document.createElement("input");input.type="text";//得到当前的单元格varcurrentCell;functioneditCell(event){if(event==null){currentCell=window.event.srcElement;}else{currentCell=event.target;}//根据Dimmacro的建议修定下面的bug非常感谢if(currentCell.tagName=="TD"){//用单元格的值来填充文本框的值input.value=currentCell.innerHTML;//当文本框丢失焦点时调用lastinput.onblur=last;input.ondblclick=last;currentCell.innerHTML="";//把文本框加到当前单元格上.currentCell.appendChild(input);//根据liu_binq63的建议修定下面的bug非常感谢input.focus();}}functionlast(){//充文本框的值给当前单元格currentCell.innerHTML=input.value;}//最后为表格绑定处理方法.document.getElementById("table").ondblclick=editCell;*//*varttr=$(this).val()=="编辑"?"确定":"编辑";$(this).val(ttr);//按钮被点击后，在“编辑”和“确定”之间切换$(this).parent().siblings("td").each(function(){//获取当前行的其他单元格varobj_text=$(this).find("input:text");//判断单元格下是否有文本框if(!obj_text.length)//如果没有文本框，则添加文本框使之可以编辑$(this).html("<inputtype='text'value='"+$(this).text()+"'>");else//如果已经存在文本框，则将其显示为文本框修改的值$(this).html(obj_text.val());});*//*$('input[type="button"]').on('click',function(){var$this=$(this);var$td_arr=$this.parent().html('保存').prevAll('td');$.each($td_arr,function(){var$td=$(this);$td.html('<inputtype="text"value="'+$td.html()+'">');});});*/}

3）

//取消editTd编辑functionresertEditTd(){ready();//此方法是自己写的，局部刷新页面，重新加载数据
}

//保存editTd编辑functionsaveEditTd(id){vara=$("input[type='button'][id='"+id+"']").parent().siblings();//td的兄弟节点vartd_name=a[1].children[0].value;//服务名称vartd_alias=a[2].children[0].value;//服务别名vartd_type=a[3].children[0].value;//服务类型varurl=base_path+"console/cfg/saveEditTd";$.ajax({url:url,type:"post",data:{"td_name":td_name,"td_alias":td_alias,"td_type":td_type,"id":id,"tpl":configId},datatype:"json",success:function(result){ready();//此方法是自己写的，局部刷新页面，重新加载数据
}
});
}

前端如何行内更改状态

与前端如何行内更改状态相关的内容