介绍

实现了那些功能

构建工具

最近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动画

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

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

DEMO展示

http://yinode.tech/WebAppDataDisplay/server/views/index.html

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