前端开发的相关总结和讨论,记录于此。
技能树
基础知识:
-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>