闲话js前端框架(4)——组件化?有没有后端的事?
来源:互联网 发布:Java工程打包 编辑:程序博客网 时间:2024/05/21 16:15
闲话js前端框架
前端人员=美工+设计+代码+测试
——题记
专题文章:
一、从avalonjs的模板说起
二、庞大的angularjs
三、再也不想碰DOM
四、组件化?有没有后端的事?
五、再看自己一年前设计的微型渲染引擎
六、在浏览器标准上做文章
七、抛开浏览器,构建应用容器
八、为何Flash、银光和Java都在网页端一蹶不振
本文属 西风逍遥游 原创, 转载请注明出处: 西风世界 http://blog.csdn.net/xfxyy_sxfancy
四、组件化?有没有后端的事?
提到组件化,有一家的组件化做的是最牛的,没错,就是微软。ASP.NET的框架, 有一个非常显著的特点,就是很多的组件,你会发现是前后端代码混在一起的。这样好么?
组件化,封装引起的弊病
这点开始很多人不理解,因为前后端代码混在一起,你根本不知道具体的工作方式是怎样的,于是也不知道具体的工作效率,那么就造成了一个严重的问题,如果基础的组件工作的不好的话,那么对于代码开发将会是一场噩梦。
ASP.NET的问题就是这样,我们都知道,在VS中拖控件做出来的网站没法用,为什么?因为第一,结构混乱,代码都封装起来了,性能优化太困难。其次,很多控件在操作时,都不使用异步,导致整个页面的频繁刷新,所以真正做项目时就会发现,能用的控件没几个。
这就说明一个问题,组件化不是很好么?为什么做到如此极致的组件化却没人用了呢?
其实,组件化这种方式有天生的问题,第一,组件的定制化不强,因为大多开发的组件是通用组件,用多次复用才有价值,而网站开发中,由于前端代码的灵活性太强,导致完整的封装非常困难,而一旦完整封装后,灵活性就丧失了。第二,组件的封装不是全部严密的封起来就OK了,例如CSS样式,你为了保证组件样式的统一,固定了CSS,那么假若你的项目支持换肤,你的组件是否应该换肤呢?
说白了,我们并不想要封装好的组件,而是一套通用的方便的封装方式。如果可以,我们自己公司当然可以封装适合自己的组件库,那样就非常方便了。
自己封装?
首先说,组件的封装是很困难的,原因是前端的内容太杂了,而单单想封装一个前端模块,就很费事了,下面我来介绍一下requirejs。
requirejs是前端模块化的基础框架之一,当然不一定非要用这款,你可以用其他的AMD兼容的js加载器。
requirejs主要是在做主要一件事,异步加载js,并且保障他们的依赖关系正确。
其加载模块的使用方法如下:
require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){ // some code here });
而编写一个符合AMD加载器的模块则要使用define函数:
define(['myLib'], function(myLib){ function foo(){ myLib.doSomething(); } return { foo : foo }; });
require.js还提供一系列插件,实现一些特定的功能。
例如text和image插件,则是允许require.js加载文本和图片文件:
define([ 'text!review.txt', 'image!cat.jpg' ], function(review,cat){ console.log(review); document.body.appendChild(cat); } );
好在,通过AMD加载器,已经能够实现前端的组件化,代码、数据、样式,都整合到了一起。
然后,后端怎么办呢?
Meteor的做法
Meteor是一款非常强大的Web开发框架,它不区分前端和后端,是使用nodejs作为服务器,这样就能将同一款模型应用到前端或后端中去。
同时他还使用叫做分布式数据协议 (Distributed Data Protocol, DDP) 的协议来处理实时通信。
我们发现,在Meteor中,前后端代码是混合在一起的:
if (Meteor.isClient) { // counter starts at 0 Session.setDefault('counter', 0); Template.hello.helpers({ counter: function () { return Session.get('counter'); } }); Template.hello.events({ 'click button': function () { // increment the counter when button is clicked Session.set('counter', Session.get('counter') + 1); } });}if (Meteor.isServer) { Meteor.startup(function () { // code to run on server at startup });}
下面是模板资源
<head> <title>my_cool_app</title></head><body> <h1>Welcome to Meteor!</h1> {{> hello}}</body><template name="hello"> <button>Click Me</button> <p>You've pressed the button {{counter}} times.</p></template>
另外提一点,Meteor是依赖mongoDB作为后端服务器的,所以要事先安装好才行,而且要注意,mongoDB在NTFS的文件系统下工作的好像有点不正常。
不过Meteor通过混合前后端代码,实现了快速开发和轻松构架,但其也有缺陷,主要是灵活性差,后端数据库想换下Oracle都做不到,那么这往往是作为原型工具来使用。
另外Meteor还有一个重要的突破,是他实现了实时前后端通信,这个通信在支持WebSocket的情况是是相当于Tcp长连接,所以效率非常高。
JetBrains的做法
JetBrains出品,必属精品。
这群家伙真的很厉害,他们搞出一门新语言来解决这个问题。
Kotlin是一门神奇的语言,他能编译成能在JVM上、Android虚拟机上、Javascript引擎上跑的代码。
这也就说明,对于同一个模型,他能编译成不同的目标代码,那么我们就能用这种方式用同一种语言,构架前后端代码,整合成统一的模块。
当然Kotlin现在还不成熟,我也没有仔细研究具体的编译方法,待他成熟一些,发布1.0版本后,我们再去研究这门语言的魅力。
- 闲话js前端框架(4)——组件化?有没有后端的事?
- 闲话js前端框架(1)——从avalonjs的模板说起
- 闲话js前端框架(2)——庞大的angularjs
- 闲话js前端框架(5)——再看自己一年前设计的微型渲染引擎
- 闲话js前端框架(3)——再也不想碰DOM
- 闲话js前端框架(6)——在浏览器标准上做文章
- 前端框架vue.js系列(9):vue构造、vue组件与vue实例的关系
- 前端框架Aurelia——组件Component(一)
- 前端学习总结(八)NodeJS——前端工程师通向后端的里程碑
- 什么是框架(包括前端框架和后端框架)
- 什么是框架(包括前端框架和后端框架)
- 什么是框架(包括前端框架和后端框架)
- 前端框架Vue(8)——子父组件的传参通信
- 百度有啊前端js框架分析(一)
- 闲话WinFrom与WPF(4) 框架篇——结合VS扩展,插件式开发框架
- muiH5前端框架和ssm后端框架开发移动混合app——过程
- 前端框架Aurelia——组件Component(二)组件生命周期
- 前端验证的Ajax框架——myAjax.js
- 在spring中使用quartz进行任务调度遇到的问题
- 2038问题
- fdk-aac的编码方法
- HDU 2553 N皇后问题 (DFS_回溯)
- 墨墨的等式(equ)题解
- 闲话js前端框架(4)——组件化?有没有后端的事?
- get和post请求方式
- org.hibernate.exception.SQLGrammarException: could not execute query处理方式
- 1小时内必须解决的5个编程问题
- EJB中的注释
- Quartz(二)整合Spring容器中bean及动态调度任务
- Java变量及其传递
- Light oj 1019 - Brush (V)【最短路裸题】
- 在Spring中使用Quartz任务调度支持集群(转载)