前端开发

前端开发的相关总结和讨论，记录于此。

技能树

基础知识：
-JavaScript，同时稍微了解一点TypeScript（学习AngularJS2的缘故）。
-HTML，其中H5是这一块的重点。
-CSS，大致走马观花，设计层面的东西，还是很需要UI设计师的参与。

基本框架：jQuery

三足鼎立：
-AngularJS （包括AngularJS2，与AngularJS有些差别）
-Vue.js
-React

响应式框架：
-Bootstrap，暂时只了解了v3。
-Foundation，和Bootstrap有的一拼。

其他框架或库：
-FontAwesome，很不错的字体库和CSS框架。
-Highcharts，统计图表不错的选择。
-Echarts，统计图表另一个不错的选择。
-D3.js，统计图表可视化最厉害的框架，功能极其灵活。
-jQuery UI，有很多不错的部件。
-jQuery easy UI，是一个基于jQuery的UI插件。

python家族的模板引擎：
毕竟目前只用python写后端，就总结几个python后端常用的模板引擎吧。
-Jinja2：从廖老师教程里得知，性能不错的引擎。
-Tornado.template：tornado家自带的，性能尚可接受。
-Django模板引擎：据说性能较逊色，但是他家是集成的啊。
-其他：据说mako，cheetah都还不错，但暂时没接触。
主流的python模板引擎的对比如下。
可以参考这篇文章：
http://python.jobbole.com/84063/
另一个对比：
http://outofmemory.cn/code-snippet/3843/Python-template-engine-ability-contrast

java家族的模板引擎：
freemarker、velocity等。
可以借助它们实现混编APP的本地渲染，当然如果用java写后端也是用它们啦。

JS家族的模板引擎（不完全等于前端模板引擎，毕竟这个时代有node）：
artTemplate、baiduTemplate、Mustache、 tmpl、kissyTemplate、
jquery Template等等。
借助它们可以实现浏览器端组装模板和数据。
参考：https://www.cnblogs.com/lightsong/p/5690110.html
https://www.cnblogs.com/lesliefang/p/3588498.html
不过个人觉得前端模板引擎的意义不大，插入的数据完全可以通过ajax获取，然后填入。并且前端模板引擎不支持继承。

讨论

Vue中的GET或路由问题

1、vue-resource
可以解决vue中的ajax。

2、vue-router
可以实现vue中的浏览器端路由问题（注意不是服务器端路由。浏览器端路由，会在当前路径后面加上 #/ 开头的路径）。

3、如何让一个div块或组件变成链接（这个问题本身很简单，主要是自己不小心在form里写button却无法实现正常跳转而引起这个讨论）。
以点击按钮实现跳转为例。可以写成如下形式：

 <a href="/base?id=1">
     <input class="button" type="button" value="编辑"/>
     <!-- div块的写法：
     <div>编辑</div>
     -->
 </a>

但是下面两种写法也可以，但是在form内部会出问题，因为表单内button控件的type值默认为submit，点击会直接触发表单提交事件。使用时，应该在下述代码的基础上，将button的type值强行设定为button。

 <a href="/base?id=1">
     <button class="button" >编辑</button>
 </a>

<button class="button" v-on:click="location.href='/base?id=1'">编辑</button>

另外，用JS绑定的方法效果与上一个一样，只是在form内部时需将button控件的type强制设置为button。代码如下

<div id="vm">
    <button class="button" v-on:click="edit">编辑</button>
</div>

<script>
       var vm = new Vue({
           el: '#vm',
           data: {},
           methods: {
               edit: function(){
                   window.location.href="/base?id=1";
               }
           }
       })
   </script>