Silence.js高效开发移动Web前端类库

基于Zepto的轻量级移动Web前端JavaScript类库。

编写这个类库原因及目的:

  • 采用MVC设计模式,使代码工程化结构化。
  • 使用RouterJS,提升前端交互性能,延长页面使用时间,并通过Ajax实现交互,避免页面跳转的交互中断糟糕体验。
  • 使用LocalStorage前端离线缓存,实现缓存时间有效期,从而带给用户极致的响应效率。
  • 基于ZetpoJS,移动端的JQuery,兼容JQuery大部分语法,体积更小,效率更高。
  • 基于Touch.js,支持移动端触摸事件(‘swipe‘, ‘swipeLeft‘, ‘swipeRight‘, ‘swipeUp‘, ‘swipeDown‘,‘doubleTap‘, ‘tap‘, ‘singleTap‘, ‘longTap‘),并避免click事件移动端延时300ms的恶心效果。

Zepto的设计目的是提供 jQuery 的类似的API,但并不是100%覆盖 jQuery 。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API,所以你能把你主要的精力放到应用开发上。

Zepto模块:

module default description
zepto ? 核心模块;包含许多方法
event ? 通过on()off()处理事件
ajax ? XMLHttpRequest 和 JSONP 实用功能
form ? 序列化 & 提交web表单
ie ? 增加支持桌面的Internet Explorer 10+和Windows Phone 8。
detect   提供 $.os和 $.browser消息
fx   The animate()方法
fx_methods   以动画形式的 showhidetoggle, 和 fade*()方法.
assets   实验性支持从DOM中移除image元素后清理iOS的内存。
data   一个全面的 data()方法, 能够在内存中存储任意对象。
deferred   提供 $.Deferredpromises API. 依赖"callbacks" 模块. 
当包含这个模块时候, $.ajax()支持promise接口链式的回调。
callbacks   为"deferred"模块提供 $.Callbacks
selector   实验性的支持 jQuery CSS 表达式 实用功能,比如 $(‘div:first‘)el.is(‘:visible‘)
touch   在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的`touch`(iOS, Android)和`pointer`事件(Windows Phone)。
gesture   在触摸设备上触发 pinch 手势事件。
stack   提供 andSelfend()链式调用方法
ios3   String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ,以兼容 iOS 3.x.

Zepto插件编写规范:

1 ;(function($){
2   $.extend($.fn, {
3     foo: function(){
4       // `this` refers to the current Zepto collection.
5       // When possible, return the Zepto collection to allow chaining.
6       return this.html(‘bar‘)
7     }
8   })
9 })(Zepto)

RouterJS使用API编写:

html编写

viewport适应移动端浏览器,页面必须引入div id="container"容器,并且引入routerJS库。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>example</title>
</head>
<body>
    <div id="container"></div>
    <script src="router.js"></script>
</body>
</html>

javascript编写

 1 var router = new Router({
 2     container: ‘#container‘
 3 });  //无参数页面
 4 var home = {
 5     url: ‘/‘,
 6     className: ‘home‘,
 7     render: function (){
 8         return ‘<h1>home</h1>‘;
 9     }
10 };  //带参数的页面
11 var post = {
12     url: ‘/post/:id‘,
13     className: ‘post‘,
14     render: function (){
15         var id = this.params.id;
16         return ‘<h1>post</h1>‘;
17     }
18 };  //创建路由关系,并定义默认页面
19 router.push(home).push(post).setDefault(‘/‘).init();

new Router参数 option 是可选的,下面是该参数可选的属性。

属性 类型 默认值 描述
container String ‘#container‘ container 容器的选择器
enter String ‘enter‘ 该页面出现时添加的类名,enterTimeout 为 0 时会被忽略
enterTimeout Number 0 在这个时间之后移除添加的 enter 类名
leave String ‘leave‘ 该页面离开时添加的类名,lieaveTimeout 为 0 时会被忽略
leaveTimeout Number 0 在这个时间之后移除该页面的 DOM

push添加路由页面的配置。下面是 route 参数的属性。

属性 类型 描述
url String 以 / 开头的 url,会体现在 hash,支持参数,如:/user/:userId/post/:posdId
className String 可选,该页面可以添加的额外类名,以便控制该页面下的样式
render function 页面渲染方法,支持同步和异步, 可以直接返回 html 字符串,可以返回 promise 对象,也可以接收 callback 参数
bind function 执行绑定事件的方法,this 指向当前页面容器

 本地缓存API编写:

 1 /**
 2  * User: Sparkfly
 3  * Date: 16-5-31
 4  * Time: 下午11:33
 5  * 前端缓存驱动,基于localStorage缓存对象
 6  */
 7
 8 ;(function(){
 9     //缓存队列
10     var _local_storage = [];
11     var __key__ = "local_storage";
12
13     var start_cache = function(){
14         var storage_str = localStorage.getItem(__key__);
15         if(storage_str==null){
16             _local_storage = [];
17         }else{
18             _local_storage = JSON.parse(storage_str);
19         }
20         return true;
21     }
22
23     var end_cache = function(){
24         var storage_str = JSON.stringify(_local_storage);
25         localStorage.setItem(__key__,storage_str);
26         return true;
27     }
28
29     //添加缓存
30     var set_cache = function(_key,_element,_expires){
31         var _current_timestamp_ = (new Date()).valueOf();
32         start_cache();
33         _local_storage.push({
34             key:_key,
35             element:_element,
36             expires: ( _current_timestamp_ + parseInt(_expires) * 1000 )
37         });
38         end_cache();
39         return true;
40     }
41
42     //获取缓存
43     var get_cache = function(_key){
44         var _result_ = null;
45         return _result_;
46         var _current_timestamp_ = (new Date()).valueOf();
47         start_cache();
48         var __item__ = null;
49         $.each(_local_storage,function(index,item){
50             if(item.key == _key){
51                 __item__ = item;
52             }
53         });
54         if(__item__ != undefined && __item__ != null){
55             if(__item__[‘expires‘] != undefined && __item__[‘expires‘] > _current_timestamp_){
56                 _result_ =  __item__[‘element‘];
57             }else if(__item__[‘expires‘] != undefined){
58                 //移除缓存
59                 var __storage__ = [];
60                 $.each(_local_storage,function(index,item){
61                     if(item.key != _key){
62                         __storage__.push(item);
63                     }
64                 });
65                 _local_storage = __storage__;
66             }
67         }
68         end_cache();
69         return _result_;
70     }
71
72     //删除缓存
73     var delete_cache = function(_key){
74         start_cache();
75         var __storage__ = [];
76         $.each(_local_storage,function(index,item){
77             if(item.key != _key){
78                 __storage__.push(item);
79             }
80         });
81         _local_storage = __storage__;
82         start_cache();
83     }
84
85     var clear_cache = function(){
86         _local_storage = [];
87         start_cache();
88     }
89
90     //缓存对象
91     var fast_cache = {
92         set_cache:set_cache,
93         get_cache:get_cache,
94         del_cache:delete_cache,
95         clear:clear_cache
96     };
97     $.extend($.fn,{FAST_CACHE:fast_cache});
98
99 })(Zepto)

控制器API编写:

 1 /**
 2  * Created with JetBrains PhpStorm.
 3  * User: Sparkfly
 4  * Date: 16-5-30
 5  * Time: 下午11:12
 6  * To change this template use File | Settings | File Templates.
 7  */
 8 ;(function(){
 9     $.extend($.fn,{ controller:{
10         _key_index:1,
11         controller_lists:[],
12         add:function(_item,_index){
13             var self = this;
14             (_index == undefined)?
15                 _index=self._key_index++:_index=_index;
16             self.controller_lists.push(_item);
17         },
18         remove:function(_index){
19             //移除controller
20         },
21         search:function(_index){
22             //获取controller
23         },
24         init_router:function(_router,_link){
25             var self = this;
26             $.each(self.controller_lists,function(_index,_item){
27                 _router.push(_item);
28             });
29             _router.setDefault(_link).init();
30         }
31     }
32     });
33 })(Zepto)

index.html

支持微信JSJDK服务方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
 6     <title>首 页</title>
 7     <link rel="stylesheet" href="./lib/style/weui.min.css"/>
 8     <link rel="stylesheet" href="./lib/style/example.css"/>
 9     <link rel="stylesheet" href="./lib/style/style.css"/>
10
11     <link rel="stylesheet" href="./lib/style/dropload.css"/>
12     <script>
13         /*全局定义 start */
14         var globals = {
15             WX_JS_JDK_CONFIG : {
16
17             },
18             IS_WX_BROWSER : function(){
19                 //是否属于微信浏览器
20                 return true;
21             },
22             IN_VERSION : "1.0"
23         };
24         /*全局定义 end   */
25     </script>
26 </head>
27 <body ontouchstart>
28 <div class="container js_container" id="main_container">
29     <!-- container html -->
30 </div>
31 <!-- core start -->
32 <script src="./core/zepto.min.js"></script>
33 <script src="./core/router.min.js"></script>
34
35 <script src="./core/touch.js"></script>
36 <script src="./core/cache.js"></script>
37 <script src="./core/dialog.js"></script>
38 <script src="./core/Silence.js"></script>
39 <script src="./core/controller.js"></script>
40
41 <!-- core end   -->
42
43 <!-- lib start -->
44 <script src="./lib/script/swipeSlide.js"></script>
45 <script src="./lib/script/dropload.js"></script>
46 <!-- lib end -->
47
48 <!-- controller js start -->
49 <script src="./view/weui/weui_home.js"></script>
50 <script src="./view/weui/weui_button.js"></script>
51
52 <script>
53     $.fn.controller.init_router(
54             $.fn.pageManager({
55                 container: ‘#main_container‘,
56                 enterTimeout: 250,
57                 leaveTimeout: 250
58             }),"/"
59     );
60 </script>
61 <!-- controller js end   -->
62 </body>
63 </html>

演示地址:

  Silence.js类库演示

github路径:

  https://github.com/helingfeng/fastU

作为前端的初学者,第一次写类库,虽然结果并不理想,但我会不断学习新知识,然后在review和重构代码,希望,最后能把它做得更好。

时间: 06-03

Silence.js高效开发移动Web前端类库的相关文章

iOS客户端开发与Web前端开发

转载自:http://blog.cnbang.net/tech/1813/不知不觉做iOS客户端开发已经半年多了,了解到iOS客户端开发与Web前端开发的一些异同,写一下. 版本升级.用户角度上看,客户端升级必须让用户手动下载整个新的安装包覆盖安装,而web的升级无需用户做任何事情.开发角度上看,如果客户端有个小bug需要紧急修复,需要修复完后打包一个完成的安装包,给一个版本号,发布给用户升级.而web只需要修改后台的某些文件,然后传到自己的服务器,用多快速的迭代开发方式都没问题.web没有版本

移动开发 or web 前端?

之前写了一篇文章「微信小程序」有哪些冲击与机会?,然后公众号后台一大堆同学问我这么一个问题,说正在准备或者已经在学习 Android 开发了,看完我的文章感觉很恐慌,更加难以选择了. 其实在微信小程序出来之前,就有不少同学问我关于 web 前端与移动开发的选择问题,只不过微信小程序出来了,微信的影响力不得不值得关注,这个问题就被放大了,所以,今天单独写篇文章来解答下你们的困惑. 1. 编程基础是通的 首先我们要有这么一个意识,就是只要从事编程,不管你选择什么方向,web 前端.Android.i

从游戏开发到web前端——仅仅只是开始

文章开头,请允许我随便扯扯. 一来,开头从来都是最难写的,二来,描述我现在的心情和状态以及工作背景啥的,对于大家理解后面的内容也许会有所帮助~ 2012年211大学毕业,工作4年了,一直都是做游戏前端开发.从03年PC网游<传奇>,到11.12年的web页游<神仙道>的火爆,再到13年的<MT>等手游的崛起,我见证了中国游戏行业的3个重要发展阶段,现在又来到一个新的阶段——h5游戏. 这样看来,我是幸运的,作为一个玩家:但从一个游戏开发者的角度,显然,我对这几年的工作经

移动前端开发和 Web 前端开发的区别是什么

可以分成两部分理解1.服务器端开发,也叫后台开发,这是唯一的,对应不同的平台,他负责数据的分发与存储,和一些逻辑的处理.逻辑处理的多少由业务的复杂程度决定.服务端相对独立,与平台没啥关系. 2..1中不同的平台指web平台.移动设备平台等,移动设备又可分为andriod平台.iPhone平台等每个平台都有自己的规范和开发技术.web平台的规范是键盘+鼠标,开发技术是html+css+javascript:移动设备平台的规范是键盘+手指(触摸和手势),技术iphone是Objective-C,an

指尖下的js ——多触式web前端开发之一:对于Touch的处理

http://www.cnblogs.com/pifoo/archive/2011/05/23/webkit-touch-event-1.html 水果公司的那些small and cute的设备给我们提供了前所未有的用户体验.当用户在iphone和ipad上运指如飞的时候,那些使用objective-c写出优秀应用的开发人员们心里一定充满了成就感,因为正是他们(而不是水果)让iOS的世界变的丰富多彩.然而对于我们这些以web为自己事业核心的程序员来说,这种让人欲罢不能的多触式体验似乎跟我们关系

原生JS实现tab切换--web前端开发

tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab切换</title> <style> *{margin: 0;paddin

指尖下的js —— 多触式web前端开发之三:处理复杂手势(转)

这篇文章着重介绍多触式设备上特有的gesture event(android和iOS对这个事件的封装大同小异).这个事件是对touch event的更高层的封装,和touch一样,它同样包括gesturestart,gesturechange,gestureend三个事件回调: gesturestart    // 当有两根或多根手指放到屏幕上的时候触发 gesturechange    // 当有两根或多根手指在屏幕上,并且有手指移动的时候触发 gestureend    // 当倒数第二根手

移动前端开发和 Web 前端开发的区别

pc,我们需要考虑什么呢?有点开发经验的同学都知道,ie6-11,firefox,chrome,safari都得兼容的吧.哪个都够你吃一壶的,无论是css还是js.mobile的网页开发,我们需要考虑什么呢?就目前来说,我们只需要考虑webkit内核的浏览器和chrome,uc,qq,小米手机浏览器 ok,单纯说pc和移动端开发的区别,其实也就是这个,可以简单的概括来说,mobile端的网页开发比pc端的网页开发,更简单一些.[页面小了啊,装的东西少了,css和html写的少了吧]交互简单一些[

指尖下的js ——多触式web前端开发之二:处理简单手势(转)

这篇文章将描述多触式网页开发中对手势(Gesture)事件的处理.     水果设备中的Gesture,广义的说包括手指点击(click),轻拂(flick),双击(double-click),两只手指的分开.闭合(scale).转动(rotate)等一切手指能在屏幕上做的事情.iOS上设计了了一系列手势来模拟和扩展鼠标操作,比如手指放下后迅速提起会触发click事件,手指向上滑动,停止,会触发body的onscroll事件等等.但是,狭义的Gesture事件,也就是能够addEventList