‍‍

‍今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

了解修真院前后台代码结构

明天计划的事情：（一定要写非常细致的内容） 

了解修真院前后台代码结构

 遇到的问题：（遇到什么困难，怎么解决的） 

不了解修真院前后台代码结构

收获：（通过今天的学习，学到了什么知识）

1.怎么查找资料？

2.怎么定位问题？

3.怎么解决问题？

 作为前端开发人员开发者工具是一定要深度了解的。Chrome有两个方式调出开发者工具 :Ctrl+Shift+i 和 F12，在开发者工具里两个常用功能是console面板和network面板

1. console面板

当你打开了开发者工具，那么你的关注点就要放在控制台（console），控制台提示错误信息，如果没出效果或者方法执行没效果之类的，首先看控制台有没有报错，提示等等，对于红色的错误提示是重点关注。

1. network面板

如开启了服务器模式，数据加载异常，这个问题去network找。在这里可以看到所有的资源请求，那么这里我们根据关键字在搜索框里过滤后找到我们的请求。 可以在headers部分看到请求的url，请求的参数，在preview部分可以看到返回的数据，那么当你遇到问题后不知道怎么解决的时候， 就应该从这些地方检查。

最后，使用console.log() 在调试代码的过程中，在遇到问题时， 能帮助我们更快速定位到问题所在。

4.怎么重构代码？

代码重构（英语：Code refactoring）指对软件代码做任何更动以增加可读性或者简化结构而不影响输出结果。

软件重构需要借助工具完成，重构工具能够修改代码同时修改所有引用该代码的地方。重构需要单元测试来支持。

在敏捷开发中，重构常常是软件开发循环的一部分：开发者轮流增加新的测试和功能，并重构代码来增进内部的清晰性和一致性。自动化的单元测试保证了重构不至于让代码停止工作。

（1）删除无用代码，精简代码。

无用的代码主要集中在CSS和JavaScript文件中，包括已经不起作用的CSS样式和废弃的JavaScript函数。这个重构过程需要小心翼翼，不停地查看函数和变量在上下文的调用关系，以免错删代码。总体来说，这个阶段的重构还是利大于弊，虽然后续发现了一些由于误删而导致的Bug，但是删除了废弃的代码，提高了后续的可维护性。

（2）前端代码规范化。

页面的HTML标签中还有大量的内联CSS样式，有些页面的head部分也有CSS样式，需要把这些CSS放到独立的文件中；调整代码的层次缩进格式，不同层级按照4个空格来缩进；替换标准已不推荐的标签，如<center> <b>等，改为由CSS样式控制；统一命名规则，这里主要涉及HTML中的id和class名称；另外，在JavaScript中集中定义局部变量，并把部分全局变量转变为局部变量，缩小了变量的作用域。

（3）整理基础类库。

网站初期为了加快开发的进度而引入了多个框架，其中包括Extjs、JQuery以及多个JQuery插件。Extjs和JQuery中重复的功能较多，项目中很多相同的实现使用的是不同类库中的功能，如：DOM选择、Ajax请求等。部分jQuery的UI插件的功能也和Extjs中的功能重复。鉴于项目的状况，只能保守选择同时保留Extjs和jQuery。重构的内容是统一UI插件的使用、统一基础方法的使用。

（4）前端代码模块化。

按照模块归类CSS代码，放到模块对应的单独CSS文件中；按照模块分离JavaScript代码，按照模块定义不同的命名空间；将JavaScript代码中的公共方法归类到独立的的共通文件中，同时引入面向对象的思想重构JavaScript代码，进一步明确公有接口和私有接口。

（5）提高页面加载性能。

将部分不影响首页展示的JavaScript文件延迟到页面加载后加载；删除页面中初始隐藏的区域，改为通过JavaScript按需动态生成；页面中的部分图片延迟加载；调整CSS和JavaScript文件的引用顺序，即CSS在前JavaScript在后；给静态文件设置缓存；使用CSS Sprite，合并首页背景图；合并和压缩发布后的CSS和JavaScript代码文件。

从如上的重构内容可以看到，这次重构的目的是明确的，即提高前端代码的可维护性和性能。从中也暴露了一些重构过程中的问题：最主要的问题还是低估了重构的风险，导致后续发现了不少新bug；没有足够的自动化测试，而贸然去修改代码，很难保证最终修改代码的正确性；其次是对于性能优化，事先没有量化，没有做任何性能方面的监控，没有抓住性能主要的瓶颈，所以性能部分的重构就显得盲目。

有了这次的重构实践经历加上学习业内的一些经验，我归纳了如下的前端重构最佳实践：

• 重构前一定要预估风险，如果没有足够的自动化测试，最好是先完善自动化测试代码。
• 重构的目的和范围要明确，切忌盲目修改。前端代码的重构目的主要是提高代码的可维护性、可读性和性能。
• 最好是先易后难，循序渐进。先修改诸如命名、格式等不涉及具体逻辑的内容，然后再考虑模块化和性能提升等与具体逻辑相关的内容。
• 重构过程中要持续测试，在多个浏览器中测试，确保重构的部分功能正确。切忌在大量重构后再进行测试，因为大量重构后基本很难记得重构的逻辑，也就有可能遗漏部分测试用例。
• 如果是性能提升，要事先检测网站的整体性能并量化，找出性能瓶颈。重构过程中要持续监控性能，并对比性能提升的效果。

5.怎么选择框架？

 对于新手怎么选择前端框架？ - 知乎

六个方面：

（1）成熟:一个好框架需要有一个成熟的社区，成熟的配套插件，成熟的开发模式。
（2）稳定:一个好框架必须有一个可用于生产环境的的版本，持续的更新迭代，一致的api设计和文档等等
（3）学习成本低:一个好框架要具体高度的推广性，提供低成本的学习途径，可以快速的让整个团队成员掌握并熟练运用
（4）开发效率高:一个好框架必须具备能使得团队合作的开发效率有更高的提升，有更好的编码风格引导
（5）可扩展性好:一个框架必须要有高度的可定制化，可扩展性，满足未知的需求。
（6）性能好:一个框架必须要解决相当一部分的性能瓶颈问题，让具体的开发人员不用过多的关注代码的性能。

6.怎么测试？‍

‍‍