小小千想和您聊一聊

当前位置: 首页> 技术分享> 关于后端程序员写前端用什么框架更好

关于后端程序员写前端用什么框架更好

  关于后端程序员写前端 在业界其实已经是一个特别正常的事情了 因为后台的工作 中 我们都是在定义 类 写接口 接口实现 获取数据 数据整合之类的 自己写一个好用的orm 做好业务规划 数据分离之类的 其实在我们现在也在这样的事情 框架和语言都是相通的 找到切合的点进入 往往能够 事半功倍。

  关于语言和框架这关 推荐es6和angular2以及以上版本。

  因为里面有我们后台熟悉的class 接口 导入 导出等等之类的 下面的例子我们读起来会觉得特别亲切。

例如:导出和导入 是不是跟java里面的jar包使用一样
export {userRegister,userLogin};
import {userRegister } from "./user.js";

//例如我们定义类
class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}

let greeter = new Greeter("world");
 我们声明一个 Greeter类。这个类有3个成员:一个叫做 greeting的属性,一个构造函数和一个 greet方法
学过后台的基本可以无缝使用

//接口的声明和实现
interface ClockInterface {
currentTime: Date;
setTime(d: Date);
}
class Clock implements ClockInterface {
currentTime: Date;
setTime(d: Date) {
this.currentTime = d;
}
constructor(h: number, m: number) { }
}


  关于页面效果的构建 推荐bootstrap 因为包含了Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件 简单的说 页面布局+页面效果+页面事件+插件基本都包含了

  1:著名的网格系统(栅格系统) 解决传统的布局问题 通过样式的引入 来自动进行媒体适配 行列 设计利用12等分拆分原理 自主布局

  下表总结了 Bootstrap 网格系统如何跨多个设备工作:

  2:自带图标样式 解决找图片和设计图片效果的烦恼。

  3:丰富的组件和插件

  比如模态框(弹出层) 轮播图(左右切换导航)等效果 可能一行js都不用写 只需要写好页面引入对应的calss 就自动实现。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

  能够更好的跳过 js去操作页面元素 更快的实现效果,

  但是后台如果真的要真正从事前端工作 div+css 以及js 是您不得不去学习的!

上一篇:HTML5工具初识之网页编辑器

下一篇:前端程序员应该往全栈方向发展吗?还是坚守前端?

QQ技术交流群

千锋HTML5官方①群
791201477

加入群聊