程序猿小白应该注意什么
陈浩 2019-06-25
在学校敲代码的时候，考虑的可能是怎么实现这个功能，怎么样把功能做的酷一点，可是当你进入了公司，你就会发现可能代码把功能实现是一方面的，你代码还需要良好的代码风格，命名规范，可读性易于维护，以及性能等等，so出现了下面这篇文章（欢迎大家指出错误，侵删）
1命名规则
按照惯例，ECMAScript标识符采用驼峰大小写格式
标识符：就是指变量，函数，属性的名字，或者是函数的参数
小驼峰式：第一个单词首字母小写，后面其他单词首字母大写；
eg:textHeight
大驼峰式：每一个单词字母都大写；
eg:TextHeigh
1.1变量
命名方法：小驼峰式命名
命名规范： 前缀名词
eg: let minCount = 10 let price = 100
注：全局变量单词全部大写
eg:var PRICE = 100
1.2常量
命名方法：单词全部大写
eg: const PRICE = 100
1.3 函数
函数的命名应该能描绘出函数的作用和功能
命名方法：小驼峰式命名
命名规范： 前缀动词
Eg: function getHeight(){};
function setHeight(){};1.4 类与构造函数
命名方法： 大驼峰式命名
命名规范： 前缀名称
eg: class Person{
constructor(name){
this.name = name;
}
}
var person = new Person('dadan');eg：function Person(name){
this.name = name;
}
var person = new Person('dadan');2 注释
2.1单行注释
说明：单行注释//
使用 ：与注释代码（文字）代码之间保留一个空格
2.2多行注释
说明：多行注释以 /* 开头， */ 结尾 使用：若开始 /* 和结束*/都在一行，推荐采用单行注释。若至少三行注释时，第一行为 /*，最后行为 */
3 松散耦合
3.1html/js
虽然html和js天生就需要交互，但是有些方法将其过于紧密的耦合在了一起，如下
<button onClick="doSomething()">点击</button>
如上事件处理程序属性值的紧密耦合如果出现了js问题，就要判断是出现在html部分上还是js文件，因此影响了可维护性,或者在js中创建大量的Dom结构
body.innerHTML = '<div><ul><li></li><li></li></ul></div>';
如上代码出现问题。定位到这个错误很困难，因为你首先需要看页面源代码查找插入的这段HTML，但是找不到，因为它是动态生成，如果你对数据或者布局更改也会要求更改js，所以html呈现应该‘尽可能’的与js分离。
3.2 css/js
有的时候css对js的过于紧密的耦合
eg：触发焦点时，改变style
element.style.color = ‘red’;
如果未来需要改变样式表，css和js文件可能都需要修改，这就不利于开发人员维护了，所以两个层次之间需要有清晰的划分，让耦合变得松散一些所以如下所示
element.className = ‘edit’;
只修改某个元素的css类，这样js可以更改样式类，但不会直接影响到元素的样式，任何显示问题都可以追溯到css而不是js,这样会不会好很多
3.3应用逻辑/事件处理程序耦合
document.addEventListener('keypress', function (event) {
if (event.keyCode === 13) {
var value = (Math.random() + 1) * 5;
if (value < 7) {
console.log(value);
}
}
});这个事件处理程序除了应用逻辑还有事件处理，这样方式的问题有其双重性，首先除了通过这个事件之外没有别的方法执行此应用逻辑，如果代码出了问题，那么是在调用之前出了问题还是在应用逻辑中出现的问题？那就会使得调试变得困难，其次如果后续事件需要同样的逻辑，你就需要把代码在copy一遍，so我们需要一个好的解决方法
解决办法：将应用逻辑和事件处理程序相分离，将应用逻辑单独封装成一个函数
function getValue（value）{
if(value < 7){
console.log(value);
}
document.addEventListener('keypress', function (event) {
if (event.keyCode === 13) {
var value = (Math.random() + 1) * 5;
getValue(value);
}
});4语义化标签
语义化的意思就是从名称中一眼就能看出内容是什么，HTML标签就是通过浅显易懂的元素名和属性名一眼就能看出内容和作用是什么，这样有益于代码更好的维护。
不过说到标签对于我们这种从学校初入到公司的菜鸟们最能想到的就是div标签+span标签了，还记得刚来公司让做例子的时候，从标签的使用，到变量以及函数命名再到代码之间的规范，没有一个不让我师傅头疼，因为写代码的时候太随意了，真的是太随意了，虽然现在也有些随意哈
如果让我写一个页面我可能用的都是div标签，写成之后连标签里的id名也只会div1 或者div2,显然这样的代码是及其难维护的，这时如果把标签换成
<header>,<nav>,<article>,<sections>,<aside>,<footer>
等语义化的标签代码是不是会清晰很多，像这样如果页面的导航栏是div，侧边栏也是div，唯一对div进行区别的就是id，如果代码规范一点的程序猿，可能会
<div id="nav"></div> <div id="aside"></div>
，如果随意一点的不太注意代码风格的程序员可能就是这样了
<div id="div1"></div> <div id="div2"></div>
怎么样，如果是你来维护这段代码，过了一个月你还记的div1，div2，分别对应什么了么，有没有气的想撞墙，哈哈，所以这个时候如果你用了html5标签会不会好很多
<nav></nav>
<aside>
<span>答案略</span>
</aside>那下面对这几个标签和用法大概的说一下
<header>:定义文档的页眉
<header>
<h1>wecome</h1>
<p>My name is da dan</p>
</header><nav>:标记链接的导航
<nav>
<a href="home.index">Home</a>
<a href="personal.index">Personal</a>
</nav>><article>规定独立的自包含内容（表示的是一个文档，页面，应用或是网站中的一个独立容器）
<sections>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分，应用的典型场景（文章的章节，论文的编导，标签对话框的标签页）
注释：sections标签与article标签有点容易搞混,article代表一个的完整的相关的内容块而section只能算是整体的一部分
<article>
<header>
<h1>不要熬夜</h1>
<p>
<time pubdate datetime="2017/10/9"></time>
</p>
</header>
<p>内容...</p>
<section>
<h1>评论区</h1>
<article>
<header>
<p>评论者</p>
<p>
<time pubdate datetime="2017/10/10"></time>
</p>
</header>
<p>评论内容</p>
</article>
</section>
</article>so看完这个例子有没有清晰一点
<aside>侧栏标签（可用作文章的侧栏，广告，相关文章，新闻的链接）
<aside>
<h4>learn tools</h4>
<p>小D词典</p>
<p>开心词场</p>
</aside><footer>定义文档或节的页脚，页脚通常包含作者信息，版权信息，使用条款链接，联系信息等等 <footer> <p>Posted by: author</p> </footer>
觉得还有一个挺好用的标签<figure>,它规定独立的流内容（图像，图表，照片，代码等）<figcaption>定义figure元素的标题 <figure> <figcaption>妹子</figcaption> <img src="girl.jpg" width="350" height="234" /> </figure>
5性能优化
5.1减少DOM的操作
尽量不要使用循环操作DOM的方式，而是在循环结束后一次性写入。
eg：想在ul中动态的插入多个li子节点
<ul id="ul"> </ul>
1.循环操作DOM方式
window.onload = function(){
var oUl = document.getElementById("ul");
for (var i = 0; i < 5; i++) {
var oLi = document.createElement(“li”);
oLi.innerText = i;
oUl.appendChild(oLi);
}
}2.一次性插入
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = “”;
for (var i = 0; i < 5; i++) {
aLi += “li”;
aLi += i；
aLi += “li”;
}
oUl.innerHtml = aLi;
}5.2运用事件代理
事件冒泡->事件不仅仅可以在时间目标上处理，目标的任何祖先节点上也可以处理。在祖先节点绑定事件，只需要操作一次DOM，可以通过事件流找到目标节点，节省了遍历子节点的时间，对于要绑定大量的子节点的时候，效率可想而知。
<ul id="ul">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>1.遍历节点绑定事件：
window.onload = function(){
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onclick = function(){
alert(123);
}
}}
2.利用事件代理：
window.onload = function(){
var oUl = document.getElementById("ul");
oUl.onclick = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
if(target.nodeName.toLowerCase() == 'li'){
alert(123);
alert(target.innerHTML);
}
}
}5.3文件的引用：
将css文件的引用放在头部，js文件的引用放在尾部。
浏览器在渲染的过程中，遇到js文件会暂停当前的渲染进程，优先执行js的进程，而文档渲染时至上而下的，如果把js放到文件头部，则会影响接下来的DOM的渲染。典型的，在头文件中用alert，浏览器就会在先弹出alert对话框，停止接下来的DOM渲染，会有白屏现象。还有一种情况是，js可能会改变DOM文档的结构，典型的有，document.write，这样都会造成不必要的重绘和重排。
5.4减少重绘重排
5.4.1 Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。
5.4.2 Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨
在下面几种情况会重排：
页面初始渲染
添加/删除可见DOM元素
改变元素位置
改变元素尺寸（宽、高、内外边距、边框等）
改变元素内容（文本或图片等）
改变窗口尺寸
2.通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式； 有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。
怎么减少重排？说一下我的方法：
1.分离读写操作 var curLeft=div.offsetLeft; var curTop=div.offsetTop; div.style.left=curLeft+1+'px'; div.style.top=curTop+1+'px';
2.样式集中改变 可以添加一个类，样式都在类中改变
3.可以使用absolute脱离文档流。
4.使用 display:none ，不使用 visibility，也不要改变 它的 z-index
5.能用CSS3实现的就用css3实现。
5.5 其他：
合并图片（css sprites精灵）
合并CSS和JS文件
缩小图片的分辨率
改变图片的格式（png）
降低图片的保存质量
等等
希望此篇文章对你们能有帮助啊，笔芯
