示例

使用分为3个步骤:

1, 配置模板渲染中心,方便别人可以看到你的模板渲染,请求是什么关系,复杂度怎样

2, 配置事件分发中心  方便观察事件分发,事件复杂度

3,写对应的请求方法、渲染方法。  流程由框架自动串起来。如果还有其他_开头的方法(标记私有),均是辅助渲染或事件的。

我认为,界面,存在模板渲染,和事件分发两大主要业务!这是我建立这两中心的原因。

/*群红包*/
define(function(require, exports, module) {
//基本库
require('zepto'); //自启动组件
require.async('header');
require.async('footer'); var Wap = require('wap-sea');
var InviteFriends = require('invitefriends');
var ActiveEnd = require('activeend'); var GetGrouphb = Wap.Service.extend({
ClassName: 'getgrouphb', /**
* 模板渲染中心
*/
tpls: {
'gethbs': 'reqGroupHB renderGroupHB none1', //可以加errorGroupHB处理链异常
'none1': 'reqShareInfo renderShareInfo'
}, /**
* 事件分发中心
*/
events:{
"click share-btn document": 'shareBtnHandler'
}, /**
* 初始化参数等
*/
init: function(){
this.root = $('.get-hbs');
}, //请求群红包数据 对应模板配置中心的请求
reqGroupHB: function(){
var data = this.Const.STATUS[this.URL_PARAM.activityFlag];
data && (data.resData = this.URL_PARAM);
return data;
}, //渲染群红包 对应模板配置中心的渲染, 参数 data,tplRender会自动注入进来,你看不到模板。
renderGroupHB: function(data,tplRender){
//解析数据源 、数据异常处理
if(!data){
return this.Ext.tipNetError();
}
if(data.id == 4){
return ActiveEnd();
} //模板渲染
var dom = tplRender(data);
this.root.find('>section').append(dom); //渲染后处理
this.root.addClass(data.rootClass).show();
}, /**
* 请求分享信息
*/
reqShareInfo: function(data){
if(!data) return; var resData = data.resData;
this.shareParam = {
activityId: resData.activityId,
solutionId: resData.solutionId,
type: resData.shareInfoType,
path: this.Const.PRO_PATH + (data.isShareHBs ? this.Const.DO_GET_GROUP_HB : this.Const.DO_GET_HB)
};
return this.Dao.queShareInfo({data: this.shareParam});
}, /**
* 渲染分享信息
*/
renderShareInfo: function(data){
this.Ext.share($.extend({},this.shareParam,data));
this.shareParam = null;
}, /**
* 分享按钮事件
*/
shareBtnHandler: function(e){
$(e.target).parent().hasClass('data-focus-sn') ? this.Ext.toFocusSN() : InviteFriends({
status: this.currentStatus
});
}
}); new GetGrouphb(); //埋点
require.async('buriedpoint');
});

  

设计理念

当今几乎所有的产品都是经过流水线生产出来的。  先组装A零件,再组装B零件之类。

如果没有流程,没有对零件的参数规范。每个产品的一致性、生产效率就很低,质量也难以保障。

所以界面也需要框架。需要管理流程,需要规范主要方法的IO。

如果说SPA是一台精细的iphone,界面可以比喻成小米。

架构

主要功能

/*模板为空的依赖*/
tpls: {
'gethbs': 'reqGroupHB renderGroupHB none1', //可以加errorGroupHB处理链异常
'none1': 'reqShareInfo renderShareInfo'
}, /**
* 有模板的依赖
*/
tpls: {
'gethbs': 'reqGroupHB renderGroupHB getshare', //可以加errorGroupHB处理链异常
'getshare': 'reqShareInfo renderShareInfo'
}, /**
* 并行模板链
*/
tpls: {
'gethbs,getshare': 'reqGroupHB renderGroupHB getshare' //可以加errorGroupHB处理链异常
}, /**
* 有显式异常处理的链
*/
tpls: {
'gethbs': 'reqGroupHB renderGroupHB errorGroupHB getshare'
}, /**
* 延迟启动链 模板名前加!,表明不会初始化,直到你启动:
* this.allTpls['gethbs'].once();只会启动一次
* this.allTpls['gethbs'].run();启动多次
*/
tpls: {
'!gethbs': 'reqGroupHB renderGroupHB errorGroupHB getshare'
}, /**
* 事件分发中心
*/
events:{
"click share-btn document": 'shareBtnHandler', //事件绑定到document上,通过自定义属性 share-btn 判断。 class: .开头 id: #开头
"click .share-btn": 'shareBtnHandler', //事件绑定到.share-btn
"click .share-btn .mydiv": 'shareBtnHandler' //事件绑定到.div
},

源码

  github上下载

自研框架wap.js实践的更多相关文章

  1. 基于 Vue.js 之 iView UI 框架非工程化实践记要 使用 Newtonsoft.Json 操作 JSON 字符串 基于.net core实现项目自动编译、并生成nuget包 webpack + vue 在dev和production模式下的小小区别 这样入门asp.net core 之 静态文件 这样入门asp.net core,如何

    基于 Vue.js 之 iView UI 框架非工程化实践记要   像我们平日里做惯了 Java 或者 .NET 这种后端程序员,对于前端的认识还常常停留在 jQuery 时代,包括其插件在需要时就引 ...

  2. 从cocos2d-html5中提取出来的,用做前端开发的框架——cc.js

    从cocos2d-html5中提取出来的,用做前端开发的框架——cc.js /************************************************************* ...

  3. H5案例分享:JS手势框架 —— Hammer.js

    JS手势框架 -- Hammer.js 一.hammer.js简介 hammerJS是一个开源的,轻量级的触屏设备javascript手势库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件.允许 ...

  4. 从零开始,搭建博客系统MVC5+EF6搭建框架(4)上,前后台页面布局页面实现,介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  5. atitit. 统计功能框架的最佳实践(1)---- on hibernate criteria

    atitit. 统计功能框架的最佳实践(1)---- on hibernate criteria 1. 关键字 1 2. 统计功能框架普通有有些条件选项...一个日期选项..一个日期类型(日,周,月份 ...

  6. 开源调度框架Quartz最佳实践

    开源调度框架Quartz最佳实践 Quartz是一个Java调度框架,当前的最新版本为2.2.1. 以Quartz 2.2.1版为例,Quartz最佳实践(用于生产系统)总结如下: 1.跳过更新检查Q ...

  7. Chrome下的语音控制框架MyVoix.js使用篇(四)

    在上一篇博文中,我为大家介绍了myvoix.js中的smart learning模块,以及何如使用该功能.(myvoix.js的源码地址会在每一篇文章末尾放出) 文本将拓展 Chrome下的语音控制框 ...

  8. require.js实践

    ASP.NET MVC应用require.js实践 这里有更好的阅读体验和及时的更新:http://pchou.info/javascript/asp.net/2013/11/10/527f6ec41 ...

  9. 一款很便捷很实用的框架——vue.js

    Hello,大家好!今天给大家带来一款十分好用的框架--vue.js! Vue.js是一套构建用户界面的渐进式框架.它 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 ...

随机推荐

  1. SqlDataReader生成动态Lambda表达式

    上一扁使用动态lambda表达式来将DataTable转换成实体,比直接用反射快了不少.主要是首行转换的时候动态生成了委托. 后面的转换都是直接调用委托,省去了多次用反射带来的性能损失. 今天在对Sq ...

  2. Python标准模块--importlib

    作者:zhbzz2007 出处:http://www.cnblogs.com/zhbzz2007 欢迎转载,也请保留这段声明.谢谢! 1 模块简介 Python提供了importlib包作为标准库的一 ...

  3. 使用python发送QQ邮件

    这里用到了Python的两个包来发送邮件: smtplib 和 email . Python 的 email 模块里包含了许多实用的邮件格式设置函数,可以用来创建邮件“包裹”.使用的 MIMEText ...

  4. 使用nodejs进行WEB开发

    这里,准备从零开始用nodejs实现一个微博系统.功能包括路由控制.页面模板.数据库访问.用户注册.登录.用户会话等内容. 将会介绍Express框架.MVC设计模式.ejs模板引擎以及MongoDB ...

  5. js中的IP格式正则匹配校验详解~

    IPV4的格式为x:y:z:w,其中{x,y,z,w}属于{0~255}的正整数: 下面是其校验的正则表达式: function isIP(ip) { var re =  /^(\d{1,2}|1\d ...

  6. JsonResult,Controller.Json

    表示一个类,该类用于将 JSON 格式的内容发送到响应. ContentEncoding:编码格式(最好按标准utf-8) ContentType: mime类型 Data:数据设置 JsonRequ ...

  7. 简单的留言板(dom+正则练习)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. Html5-audio标签简介及手机端不自动播放问题

    1.audio:html5音频标签 <audio loop src="/photo/aa.mp3" id="audio" autoplay preload ...

  9. LeanCloud 调研报告

    LeanCloud 是一家做后端即服务(BaaS)的厂商,目标是让移动互联网开发者能更加方便的开发应用. 出于工作关系,对 leancloud 进行了一番调研:主要目标是学习其后端即服务的产品化思路等 ...

  10. stl_alloc.h分配器

    五.分配器:5.1.头文件: 5.1.1.include<stl_alloc.h> //内存的分配. 5.1.2.include<stl_construct.h> //对象的构 ...