阶段总结之201704

2017-04-02

前情概要，从201604确定自己做前端到现在201704已经有一年时间了，对之前的学习和工作做个总结，也是对之后的学习和生活制定相关列表。

1 前期总结

1.1 前台掌握技术栈

html4 70% 问题可以解决，除了table布局相关，还有就是不同浏览内核兼容

html5 50% 问题可以解决，对于新增的画布还有header，nav，等等新标签使用不多。

css 80% 问题可以解决，除了一些csshack相关，近期新知识媒体查询与js结合做界面响应式

css3 50% 问题可以解决，主要是使用雪碧图，还有文字和盒子的阴影圆角等特性，对于css动画这块使用比较少。

js 原生js纯手写的话，就记得几个getelement（s）byTagName byClass byId，基本阅读能力还在（仅限原生es5,es6和es7都不会），手写功底很差了，记得最熟的应该是console.log .info .error 等等，还有几个基础的构建数组，字符串，list数组，最近学习了json的序列化和反序列化。

jquery 目前主要使用到技术，基础选择器基本掌握，parent(),children(),eq(),hasClass(),attr(),width(),height(),css({}),removeAttr(),removeClass()基本方法使用,可以用来获取相关值，也可以用来设定相关值,正则表达式^=/|=某某以某某开头,$=某某以某某结束,~=/*=某某选择包含某某的元素，参考网址。
还有就是append()和after(),toggleClass("true","false")等等用的不是很熟练的函数。

bootstrap 在纯bootstrap（不使用插件的情况下），我目前用的比较多的就是btn和panel，还有container和row(col-(xs768/sm992/md1024/lg1200)(-offset)-N)，还有modal和alert.还有使用到bootstrap的面包屑，formgroup，inputgroup，listgroup，(“#aaa”).modal({}),dismiss属性，还有就是bootstrap的字体图标，通过后台的IO文件流做目录树，在btn中添加可以有更好的提示作用，还有在横向list目录上也可以更好的提示相关操作行为，而且字体图标为svg矢量，不存在失真情况，而且通过font-size，font-weight和Color就可以直接控制对应的图标效果兼容性也很不错，还可以通过:hover和:selected等等伪类做相关动画效果，这个还不错。

LigerUI $.liger.(panel ,tip,grid,toolbar)等等，format，icon等等，如果是只需要使用ligerui的某部分功能可以直接引用对应的js和css，就可以直接使用了，如果需要使用全部功能，js方面就直接引用liger.min.js就可以了，liger在数据前后台交互上，封装了很多属性，但是，在响应式方面，有很多问题，所以在最初使用的时候就被抛弃了。

echartjs 目前是百度管理的在线图表管理插件，主要使用了圆饼图和k线图。这个是基于canvas技术的一个在线绘制插件，扩展性也比较好，图表显示的主题可比较多。

PS AI FLASH ULEADGIF 思维导图等等

1.2 后台掌握技术栈

vue 学习了20%左右，官方文档的数据双向绑定学习完了，之后还有很多都没有学习，手脚架vue-cli和vuex等等都没有学习完成。

<!--v-on的缩写是@；v-bind的缩写是:（冒号）；-->
var eg1 = new Vue({
  el: "#eg2",
  data: {
    gameNames: ['魔兽世界', '暗黑破坏神Ⅲ', '星际争霸Ⅱ', '炉石传说', '风暴英雄',
      '守望先锋'
    ],
    activeName: ''
    //active:{'styleObjectA':true}
  },
  methods: {
    selected: function(gameName) {
      this.activeName = gameName;
      alert('Hello ' + this.activeName + '!');
      //console.log('Hello ' + this.active.styleObjectA.backgroundColor + '!');

    }
  }
});

node 学习了5%左右，学习了怎么启动项目，基础的就在node.js中直接用node 文件路径就好了，协议共存之类。还有很多需要学习的地方。

c# 公司主要使用的后台，基本函数构建，public void之类，使用struct构建 list 数组对象，协助json进行反序列化，先声明变量为public，前台调用<%= %>就可以了，不一定要把值直接传给某个标签，再从前台通过eval对json进行序列化，前台通过ajax发送请求过来，如果不标明网址，默认为当前界面的的后台处理。
TSQL JAVA等等

1.3 其他掌握技术栈

markdown重复学习了两三次，目前主要是使用 # 和 _(下划线) ,前者用于切换字体字号，后者用于修改字体样式是为粗体还是斜体，还有英文状态下的`和```,用于字体高亮和保留程序的原格式，还有[demo](http:\)中括号中用于输入超链接的显示文字，小括号中用于设置超链接地址，还有注意在使用 # _ 1 > 之后需要包含一个空格才能使用，还用就是使用反斜杠进行符号转义。

github page目前在github上有9个项目，其中主要的pagemowatermelon.github.io,还有使用github wiki和issue记录自己的技术栈或者学习日志。还可以通过本地的github客户端及时sync同步远程和本地仓库文件。

svn 版本管理软件，及时的与在线仓库文件进行版本对照和版本管理。

小插件 在一个拼音和汉字转化插件基础上，写了一个支持中英文虚拟键盘输入的插件，支持动态增加输入行，动态获取焦点；做了一个自动化流程插件，支持动态配置流程个数，流程走向颜色，还有流程上下步绑定；在bootstrap modal的基础上做了一个modal的插件，支持定义modal的宽度高度，title，如果modalbody需要为iframe，支持传进src等等参数，还在进一步开发中。

2 后期列表

2.1 前台掌握技术栈

less sass amazeui es6 es7 vue node angular ng

2.2 后台掌握技术栈

php

2.3 其他掌握技术栈

cenos ubuntu git