阶段总结之201704 - mowatermelon/studyNode GitHub Wiki

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

前期总结

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 思维导图等等

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等等

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等等参数,还在进一步开发中。

后期列表

1 后期前台掌握技术栈

less sass amazeui es6 es7 vue node angular ng

2 后期后台掌握技术栈

php

3 其他掌握技术栈

cenos ubuntu git

⚠️ **GitHub.com Fallback** ⚠️