随着公司的开发任务的需要,我已经把REACT,VUE这两种前端技术已经使用了一遍,尤其是vue较为深入(疯狂加班,代码重构了N次,特性全部走了一遍),相比于jsp,freemarke,velocity这种前端技术,给我是完全不同的感受。
我刚接触angular.js的时,是直接引用JS,用CDN,然后用起来,并没有想象中的好用,虽然也是mvvm的框架了,但是感受并不深刻,代码类似以下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>欢迎信息:</p>
<h1>{{myWelcome}}</h1>
</div>
<p> $http 服务向服务器请求信息,返回的值放入变量 "myWelcome" 中。</p>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
$http.get("welcome.htm").then(function (response) {
$scope.myWelcome = response.data;
});
});
</script>
</body>
</html>
看起来其实并不是很好理解,一位内总是要$scope,然后myApp做一个标记,用起来很难受,尤其是如果改造代码的话
然后后面,我鼓着勇气用VUE写项目,并不是CDN引用这种而是VSCODE,NPM这种方式,使用ES6+WEBPACK去使用,这里给我这个后端带来了完全不同的感受,VUE代码如下
<template>
<div id="demo01">
<div class="table">
<div class="ragle">
<div class="input-item" v-for="(item, index) in dataList">
<label :for="'inpt'+(index+1)">
{{item.name}}
</label>
<input type="range" :data-index="index" v-on:input="rangeChange" :id="'inpt'+(index+1)" :value="item.score" max="100" min="0" step="1"/>
<span>{{item.score}}</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default{
data () {
return {
//首先定义数据
dataList:[
{
"name": '语文',
"score": 87
},{
name: '数学',
score: 65
},{
name: '英语',
score: 96
},{
name: '体育',
score: 50
}
]
}
},
created: function () {
// console.log(this)
// this.dataList = this.sortArray(this.dataList, 'score')
},
methods: {
rangeChange: function (e) { //响应js时间
var val = e.target.value;
var index = e.target.attributes['data-index'].value
console.log(val, index)
this.dataList[index].score = val
// this.dataList = this.sortArray(this.dataList, 'score')
},
sortArray: function (value, key) { //用来数据排序
return value.sort(function (a, c) {
return a[key] < c[key];
})
}
}
}
</script>
REACT代码如下:
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}!
</h1>
);
ReactDOM.render(
element,
document.getElementById('root')
);
简单的看一下,完全和cdn引入的方式不同了,将html和逻辑代码区分开了,这也是MVVM体现非常深刻的一个点,这种方式加强了MVVM的对象设计,以及撸代码的感觉,MVVM思想MODEL-VIEW_MODEL-VIEW,逻辑代码就是VIEW_MODEL,这里就体现的很好
下面讲一下给我带来更加震惊的2个词,路由,状态管理
路由,可以类似与action跳转去做,在进一个请求之前,先进路由,路由判断是否进行跳转或者跳转到其他地方,这里可以做登陆拦截,权限管理等等功能
状态管理,最简单的例子,单页应用,首次进入的一些关键信息放到store里面,然后传给子组件,子组件就可以获取了,相比于localStorage,是完全不同的管理方式
react router4.0的路由规则已经不建议全局定义路由了,而是定义部分路由,相比于vue,但是我写react的时候,写的好懵逼,因为vue是前端同学建议的,而react是部门老大建议的,结果我换项目写,差点写懵了。所以这里需要注意下
学习react,vue就去官网学把,提示一下,react的中文文档维护不是很及时,请保持怀疑的态度尤其是router,vue因为是中国人开发的所以国内文档维护及时
vue点击进来看看
react点击进来看看
vscode,react搭建demo
写了前端,就感觉自己的后端接口返回速度和字段设计缺陷
虽然现在区块链,AI非常流行,但是前端也可以适当的写一写,可以让自己的思维更加开阔和对整体设计更加了解。
额外吐槽一句,ES6的语法真的爆炸,尤其是配上了ESLIENT的语法校验,至少我刚写的时候,真的是写一句编译一句错误,简直令人绝望。不过后面强行把自己的代码规范给改善了,真心强行