2018-07-23 汉得日记

周末作业代码的相关优化

今早老师带大家review了周末作业的代码，并请大家进行现场演示。我发现好多同事做的都很好，运用es6和react都很熟练。而且题目要求很简洁。

下面总结下出现的问题（参考刘李的日报）：

1.css样式，不用驼峰和下划线连接，用-连接更规范
.listStyle {} ×
.list_style {} ×
.list-style {} √

2.比较的时候，知道变量类型尽量用===

if (val == '1) {}    ×
if (val === '1') {}  √

3.函数名小写开头

function Afunc() {}  ×
function afunc() {}  √

4.图标尽量不用img标签，可以使用icon或者背景url来代替

5.for循环改用for of或foreach语法

6.尽量不用window.onload，把script放到dom后面

7.使用面向对象编程——es6的class，让代码结构性更强，易读

他们还考虑到了代码的健壮性，进行了各种优化。反观自己，虽然实现了功能，但是不仅使用了比较落后的jQuery，还没有考虑到拓展性的问题。所以，我将会进行相关的优化，在自学的基础上，进行使用es6、react进行代码重构。

复习下原生JS的DOM相关方法：

1.classList属性的用法：

classList 属性返回元素的类名，作为 DOMTokenList 对象。
该属性用于在元素中添加，移除及切换 CSS 类。
classList 属性是只读的，但你可以使用 add() 和 remove() 方法修改它。

document.getElementById("myDIV").classList.add("mystyle");

2.forEach()方法：

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。

<button onclick="numbers.forEach(myFunction)">点我</button>
<p>数组元素总和：<span id="demo"></span></p>
<script>
var sum = 0;
var numbers = [65, 44, 12, 4];
function myFunction(item) {
    sum += item;
    demo.innerHTML = sum;
}
</script>

3.firstChild与firstElementChild

相同点： 都是获取父元素下的第一个节点对象
不同点：
firstChild: IE6、7、8 第一个元素节点; 非IE6、7、8：返回第一个元素节点或文本节点
firstElementChild： IE6、7、8不支持；非IE6、7、8，获取第一个元素节点

4.toggleClasss()

toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
不过，通过使用 "switch" 参数，您能够规定只删除或只添加类。
语法
$(selector).toggleClass(class,switch)

5.querySelector()

querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素 。 该方法只返回匹配指定选择器的第一个元素。如果要返回所有匹配元素，需要使用 querySelectorAll() 方法替代．

react的继续学习

1.react的事件处理：

在 React 中，

属性名称采用驼峰式（如：onClick，onKeyDown），而不是全小写字母。

属性值接受一个函数，而不是字符串。

return false; 不会阻止组件的默认行为，需要调用 e.preventDefault();

如下所示：

function ActionLink() {
function handleClick(e) //考虑使用箭头函数
    e.preventDefault();
    console.log('The link was clicked.');
}

return (
    <a href="#" onClick={handleClick}>
    Click me
    </a>
);
}

这是一个以函数方式定义的组件，组件渲染一个 a 元素，设置l链接的点击事件，通过事件处理函数接收到的事件对象（e），阻止了链接的默认行为，并打印 “The link was clicked.” 到控制台上

2.react的事件对象

React 中的事件对象称之为 SyntheticEvent（合成对象），它是依据 DOM Level 3 的事件规范实现的，这样做最大的好处是可以屏蔽浏览器的差异，各种厂商的浏览器对规范的实现程度是不一样的，如果直接使用原生 DOM 事件对象的话，有些情况下你需要考虑浏览器的兼容性。而 React 通过 SyntheticEvent 已经把这些琐事帮你搞定了，在任何 React 支持的浏览器下，事件对象都有一致的接口。

React 中所有的事件处理函数都会接收到一个 SyntheticEvent 的实例 e 作为参数，如果在某些特殊的场景中，你需要用到原生的 DOM 事件对象，可以通过 e.nativeEvent 来获取。

尽量不要使用 addEventListener

晚上PPT的分享

凡哥也没怎么细说，我以为就是个每周总结。还是有不少同学做了很详细的分享，看着他们我有点惭愧。也有很多同事分享了来汉得的感悟。早上代码的review，也觉得自己之前路子走的有点偏（过度依赖jQuery），导致忽略了基础JS的学习。目前就要快到react的学习了，希望自己能够加速追上来。