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插件编写规范：
;(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>
演示地址：
github路径：
https://github.com/helingfeng/fastU
作为前端的初学者，第一次写类库，虽然结果并不理想，但我会不断学习新知识，然后在review和重构代码，希望，最后能把它做得更好。
Silence.js高效开发移动Web前端类库的更多相关文章
- 指尖下的js ——多触式web前端开发之一：对于Touch的处理
指尖下的js ——多触式web前端开发之一:对于Touch的处理 水果公司的那些small and cute的设备给我们提供了前所未有的用户体验.当用户在iphone和ipad上运指如飞的时候,那些使 ...
- iOS客户端开发与Web前端开发
转载自:http://blog.cnbang.net/tech/1813/不知不觉做iOS客户端开发已经半年多了,了解到iOS客户端开发与Web前端开发的一些异同,写一下. 版本升级.用户角度上看,客 ...
- 从游戏开发到web前端——仅仅只是开始
文章开头,请允许我随便扯扯. 一来,开头从来都是最难写的,二来,描述我现在的心情和状态以及工作背景啥的,对于大家理解后面的内容也许会有所帮助~ 2012年211大学毕业,工作4年了,一直都是做游戏前端 ...
- 如何高效的学习WEB前端
IT 行业的变化快是众人皆知的,需要持续去学习新的知识内容.但是,往往我们工作之后,经常发现学习的东西很少了,学习效率非常低,感觉自己到了一个瓶颈期,久而久之,就演变成『一年工作经验,重复去用十年』的 ...
- 移动前端开发和 Web 前端开发的区别是什么
可以分成两部分理解1.服务器端开发,也叫后台开发,这是唯一的,对应不同的平台,他负责数据的分发与存储,和一些逻辑的处理.逻辑处理的多少由业务的复杂程度决定.服务端相对独立,与平台没啥关系. 2..1中 ...
- 原生JS实现tab切换--web前端开发
tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...
- 指尖下的js —— 多触式web前端开发之三：处理复杂手势(转)
这篇文章着重介绍多触式设备上特有的gesture event(android和iOS对这个事件的封装大同小异).这个事件是对touch event的更高层的封装,和touch一样,它同样包括gestu ...
- 移动前端开发和 Web 前端开发的区别
http://www.itcast.cn/news/20180125/16033584753.shtml 1,普通PC端开发与移动端开发区别. 先说背景,我大言不惭的说一下,我pc端的前端开发干了有快 ...
- 【web开发】web前端开发常用技术总结归纳
技术选型规范规范 • Vue版本:2.x • 前端路由:vue-route • 异步请求:Axios • 全局状态管理:VueX • css预处理器:sass/less • h5项目移动端适配规则:使 ...
随机推荐
- DM365视频处理流程/DM368 NAND Flash启动揭秘
出自http://blog.csdn.net/maopig/article/details/7029930 DM365的视频处理涉及到三个相关处理器,分别是视频采集芯片.ARM处理器和视频图像协处理器 ...
- UESTC_魔法少女小蟹 CDOJ 710
小蟹是一名魔法少女,能熟练的施放很多魔法. 有一天魔法学院上课的时候出现了这样一道题,给一个6位数,让大家用自己的魔法,把这个6位数变成另一个给定的6位数. 小蟹翻了下魔法书,发现她有以下6种魔法: ...
- HBase 5、Phoenix使用
1.建表 执行建表语句 $ . ../examples/stock_symbol.sql 其中../examples/stock_symbol.sql是建表的sql语句 CREATE TABLE IF ...
- textContent、innerText 以及Event事件兼容性问题
今天在完成前端的简单练习时发现了一些兼容性的问题,百度后得以解决. 这里主要讨论Firefox与Chrome的兼容性问题. textContent与 innerText 在javascript中, 为 ...
- IT人士的职业规范——凝视
这两天将系统敲完了,该总体调试了,调试的过程中,发现了一个非常大的问题,就是自己的凝视写的不够,有时候不明确U层这个事件是做什么的,有时候不知道这个事件传递的是什么參数,有时候不知道相应的B层和 ...
- 【剑指Offer学习】【面试题60：把二叉树打印出多行】
题目:从上到下按层打印二叉树,同一层的结点按从左到右的顺序打印,每一层打印一行. 解题思路 用一个队列来保存将要打印的结点.为了把二叉树的每一行单独打印到一行里,我们须要两个变量:一个变量表示在当前的 ...
- C# Socket 简易的图片传输
关于网络的数据传输我就是个小白,所以今天学习一下简易的Socket图片传输. 客户端和服务器的连接咱们上次已经学过了,咱们先从简易的文件传输入手.下面开始代码分析了. Server.cs using ...
- 【巧妙预处理系列+离散化处理】【uva1382】Distant Galaxy
给出平面上的n个点,找一个矩形,使得边界上包含尽量多的点. [输入格式] 输入的第一行为数据组数T.每组数据的第一行为整数n(1≤n≤100):以下n行每行两个整数,即各个点的坐标(坐标均为绝对值不超 ...
- spring入门：beans.xml不提示、别名、创建对象的三种方式
spring的版本是2.5 一.beans.xml文件不提示 Location:spring-framework-2.5.6.SEC01\dist\resources\spring-beans-2.5 ...
- UVA 12125 March of the Penguins
题意: 给定一些冰块,每个冰块上有一些企鹅,每个冰块有一个可以跳出的次数限制,每个冰块位于一个坐标,现在每个企鹅跳跃力为d,问所有企鹅能否跳到一点上,如果可以输出所有落脚冰块,如果没有方案就打印-1 ...