Silence.js高效开发移动Web前端类库
Posted LemonTree
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 | 以动画形式的 show, hide, toggle, 和 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 | 提供 andSelf& end()链式调用方法 |
|
| 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>
演示地址：
github路径：
https://github.com/helingfeng/fastU
作为前端的初学者，第一次写类库，虽然结果并不理想，但我会不断学习新知识，然后在review和重构代码，希望，最后能把它做得更好。
以上是关于Silence.js高效开发移动Web前端类库的主要内容，如果未能解决你的问题，请参考以下文章
签名赠书 | 沪江Web前端技术团队撰写的《移动Web前端高效开发实战》免费大放送