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

时间：2022-03-05 08:48:08

基于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插件编写规范：

 ;(function($){

   $.extend($.fn, {

     foo: function(){

       // `this` refers to the current Zepto collection.

       // When possible, return the Zepto collection to allow chaining.

       return this.html('bar')

     }

   })

 })(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编写

 var router = new Router({

     container: '#container'

 });
　　//无参数页面

 var home = {

     url: '/',

     className: 'home',

     render: function (){

         return '<h1>home</h1>';

     }

 };
　　//带参数的页面

 var post = {

     url: '/post/:id',

     className: 'post',

     render: function (){

         var id = this.params.id;

         return '<h1>post</h1>';

     }

 };
　　//创建路由关系，并定义默认页面

 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编写：

 /**

  * User: Sparkfly

  * Date: 16-5-31

  * Time: 下午11:33

  * 前端缓存驱动，基于localStorage缓存对象

  */

 ;(function(){

     //缓存队列

     var _local_storage = [];

     var __key__ = "local_storage";

     var start_cache = function(){

         var storage_str = localStorage.getItem(__key__);

         if(storage_str==null){

             _local_storage = [];

         }else{

             _local_storage = JSON.parse(storage_str);

         }

         return true;

     }

     var end_cache = function(){

         var storage_str = JSON.stringify(_local_storage);

         localStorage.setItem(__key__,storage_str);

         return true;

     }

     //添加缓存

     var set_cache = function(_key,_element,_expires){

         var _current_timestamp_ = (new Date()).valueOf();

         start_cache();

         _local_storage.push({

             key:_key,

             element:_element,

             expires: ( _current_timestamp_ + parseInt(_expires) * 1000 )

         });

         end_cache();

         return true;

     }

     //获取缓存

     var get_cache = function(_key){

         var _result_ = null;

         return _result_;

         var _current_timestamp_ = (new Date()).valueOf();

         start_cache();

         var __item__ = null;

         $.each(_local_storage,function(index,item){

             if(item.key == _key){

                 __item__ = item;

             }

         });

         if(__item__ != undefined && __item__ != null){

             if(__item__['expires'] != undefined && __item__['expires'] > _current_timestamp_){

                 _result_ =  __item__['element'];

             }else if(__item__['expires'] != undefined){

                 //移除缓存

                 var __storage__ = [];

                 $.each(_local_storage,function(index,item){

                     if(item.key != _key){

                         __storage__.push(item);

                     }

                 });

                 _local_storage = __storage__;

             }

         }

         end_cache();

         return _result_;

     }

     //删除缓存

     var delete_cache = function(_key){

         start_cache();

         var __storage__ = [];

         $.each(_local_storage,function(index,item){

             if(item.key != _key){

                 __storage__.push(item);

             }

         });

         _local_storage = __storage__;

         start_cache();

     }

     var clear_cache = function(){

         _local_storage = [];

         start_cache();

     }

     //缓存对象

     var fast_cache = {

         set_cache:set_cache,

         get_cache:get_cache,

         del_cache:delete_cache,

         clear:clear_cache

     };

     $.extend($.fn,{FAST_CACHE:fast_cache});

 })(Zepto)

控制器API编写：

 /**

  * Created with JetBrains PhpStorm.

  * User: Sparkfly

  * Date: 16-5-30

  * Time: 下午11:12

  * To change this template use File | Settings | File Templates.

  */

 ;(function(){

     $.extend($.fn,{ controller:{

         _key_index:1,

         controller_lists:[],

         add:function(_item,_index){

             var self = this;

             (_index == undefined)?

                 _index=self._key_index++:_index=_index;

             self.controller_lists.push(_item);

         },

         remove:function(_index){

             //移除controller

         },

         search:function(_index){

             //获取controller

         },

         init_router:function(_router,_link){

             var self = this;

             $.each(self.controller_lists,function(_index,_item){

                 _router.push(_item);

             });

             _router.setDefault(_link).init();

         }

     }

     });

 })(Zepto)

index.html

支持微信JSJDK服务方式

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

     <title>首 页</title>

     <link rel="stylesheet" href="./lib/style/weui.min.css"/>

     <link rel="stylesheet" href="./lib/style/example.css"/>

     <link rel="stylesheet" href="./lib/style/style.css"/>

     <link rel="stylesheet" href="./lib/style/dropload.css"/>

     <script>

         /*全局定义 start */

         var globals = {

             WX_JS_JDK_CONFIG : {

             },

             IS_WX_BROWSER : function(){

                 //是否属于微信浏览器

                 return true;

             },

             IN_VERSION : "1.0"

         };

         /*全局定义 end   */

     </script>

 </head>

 <body ontouchstart>

 <div class="container js_container" id="main_container">

     <!-- container html -->

 </div>

 <!-- core start -->

 <script src="./core/zepto.min.js"></script>

 <script src="./core/router.min.js"></script>

 <script src="./core/touch.js"></script>

 <script src="./core/cache.js"></script>

 <script src="./core/dialog.js"></script>

 <script src="./core/Silence.js"></script>

 <script src="./core/controller.js"></script>

 <!-- core end   -->

 <!-- lib start -->

 <script src="./lib/script/swipeSlide.js"></script>

 <script src="./lib/script/dropload.js"></script>

 <!-- lib end -->

 <!-- controller js start -->

 <script src="./view/weui/weui_home.js"></script>

 <script src="./view/weui/weui_button.js"></script>

 <script>

     $.fn.controller.init_router(

             $.fn.pageManager({

                 container: '#main_container',

                 enterTimeout: 250,

                 leaveTimeout: 250

             }),"/"

     );

 </script>

 <!-- controller js end   -->

 </body>

 </html>

演示地址：

　　Silence.js类库演示

github路径：

　　https://github.com/helingfeng/fastU

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

相关文章