介绍

实现了那些功能

构建工具

最近glup玩的比较多，所以自己实现了一个自动构建的环境他的主要目的是从app目录的那些开发文件部署到server的测试环境之中，在移动文件的过程中实现了css的压缩（由于项目内没有使用less/sass，所以没写编译）es6的编译与压缩，文件的监测，自动刷新网页。

但说真的坑其实还是蛮多的，构建起来还是不够方便，据说单使用webpack也可以做到这些，下次可以尝试一下。

考虑到整个项目是单页应用，所以我直接合并了css 和 js 各为一个文件，不会造成一个文件资源的浪费，减少了http请求，当然其实如果页面比较多的话就不适合合并了

更好的方法可能是使用 cdn加速。

另外一点是webpack对于本地的js和cdn资源好像不是非常的好相处，至少没有一种非常完美的方式让他们各有所长，你可能只得使用使用一些比较原始的方式比如在html中加个script来导入，虽然工作起来好像没什么问题，但是毕竟不够优雅。

git不第一次commit是没有Master分支的
当你使用cdn引入jquery 本地Import jqeury的插件，会出错但是两者都CDN或者都Import是没有问题的，具体原理还不清楚打算去搜索一些前端模块的原理。（原因应该就是加载时间的问题） jquery还没加载完整个main.js就开始运行想给$添加方法。
脚本是按序执行的浏览器会尝试按照sciript标签的顺序去运行脚本
jquery的trigger是有事件冒泡机制的小心死循环
canvas中stroke的性能消耗非常的高尽可能的多画路径一次性闭合
moveTO会打断本身的路径每次moveTO都是一次新的路径所以如果想画一个闭合图形只能有一次MoveTO
stroke的实际含义是描边
如果遇到需要让一些问题环绕在一个物体四周但是对其很麻烦，在左边的要向左一点，右边的要向右一点可以通过在左边的right对其右边的left对其

其实组件化我认为最难的地方是如果从高角度去看整个项目，作为一个接口他应该提供什么功能，暴露那些东西，那些东西应该随着参数进去修改，而那些东西又该被设定成固定的。在这里面找寻一个平衡点，是让整体代码复杂度下降的关键。

比如一个图文组件，他的宽高，样式，普通回调，都应该在参数中进行一个设定。

一个组件应该拥有完善的样式部分，当他被展示和隐藏时的样式，默认样式。还应拥有name机制，为每一个组件设定一个名称。

组件化其中一个重要的思想就继承，让一些组件共同的部分抽象出来变成一个类，细化的组件又基础自积累。像是事件机制（组件被隐藏、展示都应触发这个事件），随后让具体的细化组件来处理如何触发。还有一些通用的动画，比如说样式动画（简单的top变动透明度），也应该被抽象成基类的内容

如果你在后续的过程中出现一些新的需求，应该让代码插入整个结构之中，而不是随便写个脚本来实现，整个系统的层次分明是非常重要的。

我在这方面上做不是很好，在命名方面我比较的注意，但是在整体结构上还是有所欠缺，主要体现在如何让代码简洁，方便理解，这里面其实也有一个平衡点，你可以写一些简短的代码，但可能并不是很好理解到底逻辑是什么。我将在这方面继续努力。

我为这个页面添加了loading动画，其原理是在HTML嵌入一个撑满屏幕的div.其背景图为一张gif图，然后当window.onload事件触发，所有资源加载完毕就把这个div从页面中删除。

这种方法的优点是确实和页面的加载是相关的，而不是其他的障眼法。

还有一点就是我这个目录结构是用作express.js的放到gh-pages上展示转换起来并不是很方便，所有下次我可能会修改一下express的设置。