前端整合以及完善过程中遇到的小问题

前端整合

针对vue开发，多个前端

一.路由

把所有路由整合在一起，观察是否有重名问题，是否两人都写了path: "/"，这是打开网址出现的第一个页面。如果有，根据需求，修改其中一个的路径。

二.重名问题

重名问题经常出现，自己一个写也容易起重名，多人写难免有这种问题。

1.路由重名

易错的点是漏改，要把router.js中path修改了，也不能忘了改html中router-link的to

2.组件名重名

同样是容易漏改，凡是导入修改过名字的组件的文件都要修改，修改导入的组件名，修改组件的注册，别忘了routes里边的 component:

3.class类名重名

最直接的影响就是整合完之后页面出现了混乱

解决方法

方法一 直接把css写在html中

优点：避免了起名问题，方便查看和修改
缺点：不适合写太多的css,代码不够整洁

方法二 写在<style></style>中加scoped属性

在vue组件中，在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的。

优点：避免了重名问题
缺点：如果有公共组件样式的修改会比较麻烦

了解更多scoped属性scoped慎用

方法三 在所有css前加包含所有内容的大盒子的类名

比如包含所有内容的盒子类名是note_square，这个页面所有非公有化的部分都可以在前加大盒子的类名，目的和scoped类似，保证样式是该页面的私有样式。

这是本人在用的方法，第一次出现重名问题之后就想到的是这个方法，方法有点笨拙，但是简单

方法四 最淳朴的方法直接修改为不同的类名

三.hover等动态变化统一的问题

多页面难免每页有相似的地方，一个人写的hover是让字体变大，另一个人写的hover是让字体变色，用户体验不好，为了统一，最好是事先商量好，前期没有说好只能后期改。

完善代码过程遇到的问题

一：为什么DOM获取不到节点？

首先如何判断是没获取到节点还是获取节点之后的操作有问题？
最简单的一个方法，把获取到dom之后的操作写为alert,通过弹窗可以很直观地知道，如果有弹窗说明dom获取到了节点，反之，没有。

那么为什么没有获取到呢？

典型错误

不仔细看可能都发现不了问题

如果你和我犯了同样的错误，说明你也不是很清楚getElementById()和getElementsByName()的区别
getElementById()返回的是一个元素
getElementsByName()返回的是一个集合，当做数组，所以必须要加下标。

仔细看getElementById()方法名中没有s,getElementsByName()方法名中有s.

这也就不难理解了，id是唯一的，所以获取到元素也是唯一的，而有相同name的元素可不止一个，自然返回的就是一个集合了。

【基础不学好，后期吃大亏】

更多了解 dom获取节点

正确代码或

二：判断页面加载完成

1.利用DOM readyState 属性

document.onreadystatechange = function() 　　//当页面加载状态改变的时候执行function
　　　　{ 
　　　　　　 if(document.readyState == "complete")
　　　　　　{ 　　
              　　　　 //页面完成后要做的操作
   　　　　　 }
　　　　}

其中涉及到 onreadystatechange 事件，想要了解更多自行百度
更多了解 readyState 属性

2.onload事件

window.onload = function()
{
    alert("加载完成");
}

大家有其他方法，欢迎大家评论

---

如有错误或侵权请联系作者