资讯专栏INFORMATION COLUMN

给自己挖个坑,开始去开发javascript富应用框架

lidashuang / 1935人阅读

摘要:是目前项目中正在用的框架。现在前端这块再次到了这样的瓶颈,所以决定自己开始开发和维护自己的一个框架。不强制绑定,但是会制定其他规则来避免用户手动请求。项目目前完成板块事件绑定及触法地址处理以及路由处理。

为什么要框架

随着电脑运算能力的不断提升,越来越多的网站开始将一些数据处理,简单的业务逻辑交予前端。于是前端,特别是所谓的 Webapp 中,出现了大量的数据处理以及业务逻辑,前端的javascript代码已经不再是简单的判断用户输入那么简单。和后端开发一样,当人们不能容忍php一个页面里面写下所有的业务逻辑和HTML代码的时候,他们便会去找一款MVC的框架。前端现在也需要。

我理解的富应用有两个好处,首先会完全将前端和服务器端的开发独立开来,即将服务器端的V完全交予前端人员开发,于是便可以在前期规划完API后进行独立开发。再者就是用户体验,不会出现传统网页上面的页面全局刷新跳转的情况,这样就更像软件的体验(如果需要使用 webkit 打包便可以成为某种意义上的软件)。

现有的框架

自身接触过的框架有 BackboneJS,EmberJS,AngularJS,三个都是不错的框架。

BackboneJS 是三个里面唯一一个已经认真读完源码的框架,代码写的很不错,而且这个框架也被国内包括豆瓣,百度模仿了。他侧重点是写了一套不错的Event的机制,当你定义的Model变化的时候,会触发相应的事件,问题就是那些"会触发的事件“都要你自己去定义,因此你需要手动更新DOM,会去写很多代码。

EmberJS 使用的第一感觉就是他的双向绑定很舒服,不需要再像BackboneJS一样去手写很多代码。但是EmberJS实在是太大了,而且写代码前总要不断去设计Model,给我自身的感觉就是不够的自由。而且当你的后台不能满足 restful 的时候,自己写请求然后处理的时候,会发现很麻烦。

AngularJS 是目前项目中正在用的框架。使用的时候感觉很特别,你可以通过directive去定义很多自己的HTML元素属性。开发的时候你不需要去过多的关注Dom如何变化,你只需专注的处理你的数据。但是 AngularJS 里面运用了太多的新东西,特别是Form处理的时候,数据的处理完全依靠HTML5的内容。Angularjs 里面大量的用了 ng-xxx 的属性,在HTML5里面自定义属性推荐为 data-xx 的格式。还有就是 AngularJS 的速度和性能都不很理想。

以上都是个人观点,不足以成为大家不去尝试的理由。当然还有一些很不错的框架,例如 Knockout。

我为什么要挖一个坑

作为一个前端的新人,希望能够去给自己挖一个持久的坑。在刚刚开始学编程(刚刚开始是PHP)的时候,一个长辈就和我说我的PHP只是处在入门的级别,想要继续提升建议去自己维护一个框架。但是这个框架一定是要自己持续在用的,要不然你维护不好。现在前端这块再次到了这样的瓶颈,所以决定自己开始开发和维护自己的一个框架。

现有的开源更多是代码的开源,然后鼓励大家一起去提供代码。我想,除了挖一个代码的坑以外,在这里持续的更新项目正在写或者刚刚写完的模块的想法。有问题欢迎指出讨论,在代码还在设计的时候可以得到改正。

我想挖的坑的大概样子

双向绑定:虽然有人说这个不太好,但是这个的确可以减少很多代码。

同时支持占位符和正则的路由。

支持用户登录权限认证,相应url需要登录时将会统一跳转。

支持自定义html属性添加,方便插件模块化。

promise 风格的支持。

简单的模板语言支持,主要以自定义属性的形式来处理模板。

Form 表单的统一验证处理。

不强制绑定restful,但是会制定其他规则来避免用户手动请求。

内建类似 BackboneJS 的Model,Collection,根据服务器返回内容自定建立,并绑定到模板。

让前端工作能够只需要关注模板和数据管理,其他尽量都自动完成。

项目目前完成板块:事件绑定及触法、地址处理以及路由处理。今后会逐一更新。(截止至2013年9月24日)

项目目前地址: https://github.com/HaiyiYun/VintJS

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/77922.html

相关文章

  • 应用中 URL 管理以及 Javascript 测试

    摘要:一个是使用锚链接,即的方式实现。做程序的人大多了解测试。传统的测试方法就是在完成后手动去触发事件,然后手动输入来检测是否得到预期的效果。引入了测试框架后工作简单了很多。前篇传送门给自己挖个坑,开始去开发富应用框架从的源码开始说事件模型 URL 存在的意义在于使用者可以使用一段字符串就可以找到对应的资源。富应用中的内容改变都是通过 Javascript 去改变文档内容,某种角度上来说整个...

    kid143 评论0 收藏0
  • 个坑。。用 React 来做个iPhone?

    摘要:三月转眼就过去了。。学的时候突然想到能不能做个手机,琢磨着鼓捣鼓捣还真鼓捣出了一两个页面。。先慢慢做做吧。。争取月末前能做一两个上去,然后把攒到的经验好好总结一下,也希望能得到一些宝贵的建议地址演示地址锁屏密码是,截个动图展示一下 三月转眼就过去了。。一想到月末就能回学校了心里还是有点小激动的,深感工作之后就没什么玩的时间了,学生生涯还剩两个月,抓紧时间好好享受最后的大学时光吧。 最近...

    Blackjun 评论0 收藏0
  • 解密 JavaScript 执行上下文

    摘要:闭包就好像从中分离出来的一个充满神秘色彩的未开化世界,只有最勇敢的人才能到达那里。兴奋地赶紧自测咔咔咔连点三下。结果当时内心表情大概就像上面这个哥们。但还是在工位上故作镇定地赶紧百度了下。   闭包就好像从JavaScript中分离出来的一个充满神秘色彩的未开化世界,只有最勇敢的人才能到达那里。——《你不知道的JavaScript 上卷》 1、起源 js闭包很长一...

    khlbat 评论0 收藏0
  • JavaScript 私有成员

    摘要:为什么虚函数中如果在祖先和子孙类中定义了相同的名称的方法,默认会调用子孙类中的这个方法。然而,这跟私有成员又有什么关系呢因为私有函数肯定不是虚函数,所以在中,如果将定义为私有,那调用的就一定是。虚函数的概念有点小复杂。 Class field declarations for JavaScript(JavaScript 类的字段声明)目前已经进入了 stage-3,其中包含一项 OOP...

    lakeside 评论0 收藏0
  • 解决多场景/多端的页面滚动缩放组件-ScrollerJS

    摘要:使用方法首先看一下简易第一步,实例化滚动对象代码其实还是蛮简单的,首先我们初始化一个滚动的实例,构造函数拥有两个参数,第一个是一个负责管理页面滚动时需要处理事务的函数,这个函数接受三个参数,分别表示当前页面左移,向上移,缩放比信息。 ScrollerJS是什么 ScrollerJS是用于纯逻辑的滚动缩放组件,它独立于任何指定的渲染或者事件系统。上面是官方定义的,我再说一下我对这个库的理...

    fuyi501 评论0 收藏0

发表评论

0条评论

lidashuang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<