Silence.js高效開發移動Web前端類庫

時間 2019-11-11

標籤 silence.js silence 高效開發移動 web 前端欄目 JavaScript 简体版

原文原文鏈接

基於Zepto的輕量級移動Web前端JavaScript類庫。javascript

編寫這個類庫緣由及目的：css

採用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，因此你能把你主要的精力放到應用開發上。html

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		提供 `$.Deferred`promises 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插件編寫規範：java

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編寫：jquery

html編寫ios

viewport適應移動端瀏覽器，頁面必須引入div id="container"容器，而且引入routerJS庫。git

<!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編寫github

 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 是可選的，下面是該參數可選的屬性。web

屬性	類型	默認值	描述
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>