如何像后端一样写前端代码? -买球官网平台

2顶
1踩

如何像后端一样写前端代码?

2016-01-08 10:31 by 副主编 mengyidan1988 评论(2) 有8211人浏览
本文转自,作者:贾娅妮
声明:笔者会以一个后端开发人员(类 c 语言)的身份来做前端的开发,但是需要一些前端基础知识,比如:html 标记、dom 文档等。

除此之外需要安装有 node.js 4.0 版本,最好在 github 上 clone 本文源码。

传统的 web 开发中,写 js 代码很少考虑面向对象、模块化,因为没有这方面的要求,也没必要。传统的 web 开发,前端仅仅负责数据的展示,很少或根本不负责动态交互。

随着页面越加复杂,页面的交互越来越多,势必增加 js 的权重,不考虑面向对象、没有模块化的 js 很可能会导致代码结构的崩塌。另一方面,后端语言(比如 c#、java 等)却可以很轻松的完成复杂逻辑的编写工作。

这使得人们开始重新思考 js 的定位。2013 年横空出世的 react 框架,加上定稿的 es6 语法,终于赋予了前端模块化定制的能力。

一个简单的例子
import react, {component} from 'react';
export default class hellomessage extends component {  
  constructor(props, context) {
    super(props, context);
  }
  render() {
    return (
      
hello {this.props.name}!
); } }

以上代码就是一个通常的理解的类,按照规范单独成一个文件,有自己的构造函数和 render 方法。
1.构造函数在 new 的时候调用。
2.render 方法根据名字判断是渲染成 html 文档。
3.引入了一个已有的模块 react,从之继承。
以上,就是作为后端开发,咱一眼能看出来的东西。事实呢,也确实如此!
1.构造函数不用讲了,super 关键字指向了父类的相关信息,这个必须在构造函数第一行。
2.render 方法会把 return 返回的 html 元素,在适当的时机,添加到 dom 文档中去。
3.至于 import 语句,是 es6 语法固定的写法,就好比 c# 的 using 语句。
4.export default 可以类比成 c# 里面的 public 关键字,这样才能在别的类中调用;可以省略,表示只在当前文件可见,相当于添加了 private 关键字。
连接hellomessage模块
就好像 c# 代码需要一个入口点函数一样,模块化的 js 需要一个入口文件:
import react from 'react';  
import reactdom from 'react-dom';
import hellomessage from './hellomessage.jsx';
reactdom.render(, document.getelementbyid('container'));  

解释下这段代码:
1.导入 react 框架的渲染类、hellomessage 模块类。
2.将 hellomessage 模块类渲染到 id='container' 元素上
编译 js 文件
是的,你没看错,即使是 js 仍然需要编译才能运行。编译这块我不多解释了,这次的任务主要是带领大家得到一个以后端形式编写的页面。

在控制台中键入 npm start 后u看到如下图所示的结果后即表示构建完成:



此时,双击根目录下的 index.html 就能看到最终结果了:



引入到 .html 文件并运行
在 .html 文件中引入编译后的 js 文件,点击在浏览器中打开。
  
  
  
  document
  
  
  
  
  
  
  

一些必要的说明
demo 运行起来了,我们能看到的只是出现了一行文字而已,距离理想中高大上的网页,还有十万八千里,但是我们已经迈出了第一步,剩下的就是把这段路走完而已。

1.前端代码模块化后,开发过程中是需要拆分文件的,规范的做法是一个模块一个文件,类比到 c# 代码就是一个 class 一个 cs 文件。
2.拆分各个模块后,模块间的相互引用,需要使用 export default 和 import 语法来导出和导入,类比到 c# 代码就是 public 关键字和文件头的 using 语句。
3.入口文件是必须的。就好像 c# 控制台程序,从 program.main 方法启动。因为 js 是按照代码从上往下执行的,所以 js 入口文件需要先 import 需要的模块,调用 reactdom.render 方法将目标模块渲染到目标元素上。
  • 目标模块需要传递的参数,按照 attribute 的形式添加到元素中。
  • 注意引入的模块首字母必须是大写的,这是 react 的约定,防止和原生的 html 组件名称冲突,比如:div 就是 html 元素,hellomessage 是咱写的组件。

在 .html 文件中以 script 引入编译后的文件,这里是引入了两个文件:
  • core.js 表示公共模块,好比 c# 运行中需要的 system.dll 文件。
  • index.js 表示咱写的 js 代码。
  • 大小: 13.3 kb
  • 大小: 5 kb
来自:
2
1
评论 共 2 条 请登录后发表评论
2 楼 2016-01-13 11:38
没必要,前后台是两种性格的人,全栈没几个都特别牛的. 分开比较好
1 楼 2016-01-12 10:33
好难

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  •        我在写powerdatagrid想到要提供一个查询(有关powerdatagrid的详细信息参考csdn论坛中的讨论帖,源码可以在www.foxhis.com/powermjtest/sharepowerdatagrid.rar下载),该查询的构想是这样的:我的这个控件可以通过指定一个sql语句来显示该语句的内容(其他的功能不叙述了,这不是重点),那么我可以封装一组ui到这个控件里面

  • 控件设置:    bordercolor="white" borderstyle="ridge" cellspacing="1" borderwidth="2px" backcolor="white"    cellpadding="3" gridlines="none" allowpaging="true" pagesize="5">                             

  • 在datagrid中使用分类标题 ,我的一篇翻译文章 http://tech.ccidnet.com/pub/article/c322_a70590_p1.html

  • ||||||

  • 1,根据官方提供的api发现,只能实现同一列相同值的合并,但是要实现带有分组的实现确实有难度,本人自己写过算法实现了,但是非常复杂,后面发现有简单方法,记录一下,达到的效果是这样的 : 以左边的为分组列,在crdu的情况下,始终保存正确的分组,js代码如下: //查询后绑定合并显示 function onsearchypsyardplansdatagrid(){ var voyid = mini.get("voyid_ypsyardplans").getvalue() ;

  • 昨天调试datagrid的页面自适应,有些东西想要和大家分享一下。 自适应(responsiveweb design),我的简单理解:是自动识别屏幕的宽度,然后自动调节。相了解更深,可以网上百度。 先来说datagrid的两种布局方式: 第一种:简单的布局 课程:            题型:

  • easyui,在增、删的时候,经常用到二级页面进行勾选。 可以在datagird下面添加oncheck、onuncheck、onselectall、onunselectall事件。 在这些事件中,将勾选的内容存到map中,并转换成json格式字符串放到隐藏域中。 代码如下: oncheck : function(rowindex, rowdata)     i

global site tag (gtag.js) - google analytics