星世界
基于mui开发的 component.js 前端js组件框架
QQ空间新浪微博腾讯微博人人网微信
编者:张叶星
发布时间:2017-08-23 09:11:18

为什么做这件事情？

使用宗旨：只要引用一个js文件就能开发移动web、pcweb应用

特点：支持微信、hbuilder和web开发（内嵌jQuery、mui、layer）

使用方法：直接在html头部引用 

开发工具：hbuilder（此开发工具一直在维护升级，个人觉得是款挺不错的前端开发利器）

html5+API：点击前往

mui开发文档：点击前往

组件示例：点击前往


我能为您做什么？

1.提供方便的js使用接口，使代码便于后期维护，前端开发人员（简称套数据）无需关系怎么实现功能，只要按照规定提供的api即可实现效果；组件开发（封装组件）只要通过统一的组件维护即可对网站所有使用此api的方式实现修改；

2.方便易读的模版引擎（就是这套框架的核心，也就是套数据），这边我使用artTemplate模板，不过已被我封装起来了，已经拥有一个更简便的书写方式，等下具体实例会再说明；

......


先了解下文档结构

image.png

分别为component->组件、css->css样式、html->静态页面、img->图片、js->脚本


页面规范（html布局）

熟话说：不成规矩无以成方圆；没错为了更好的更快的更省心的开发页面，这里规定了一套标准被的页面框架，只要在页面内部编写自己所需要的布局即可；

不过如果不想使用也没事，无非就是方面新手使用；

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<meta name="type" content="app">
	<meta name="showloading" content="false">
	<script src="../../component/js/lib2.0/rem.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="../../component/css/component.css"/>
	<link rel="stylesheet" type="text/css" href="../../css/common.css"/>
	<title>page</title>
</head>
<body >
	<!--头部区域（如果不需要头部可以删除这段代码）-->
	<header id="header" class="mui-bar mui-bar-nav">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-icon-arrowleft"></a>
		<h1 class="mui-title"><script>document.write(document.title)</script></h1>
	</header>
	<!--内容主体区域-->
	<!--mui-scroll-wrapper 可设置 top|bottom 来固定内容主体的位置-->
	<div class="mui-scroll-wrapper">
	    <div class="mui-scroll">
		<!--页面布局代码区域-->
	    </div>
	</div>
</body>
<!-- 只要这个component.js路径能配置对即可 -->
<script src="../../component/component2.0.js" type="text/javascript" charset="utf-8" usebase="false"></script>
<script src="../../js/service.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/common.js" type="text/javascript" charset="utf-8"></script>
<script>
	//component.js加载完成事件这个是全局js加载回调方法（类似jquery的ready）
	//一般页面上的js逻辑都放到这个方法里面实现
	//可多次重复声明
	System.ready(function(){
		System.toast('鼠标右键点击可查看网页源代码');
	})
</script>
</html>


javascript规范

大部分的组件，api都是用过System来声明的，还可以到web示例中查看示例效果

经过优化“System”可使用缩写“S”来表示

component.js加载完成事件

System.ready(function(){
    //组件加载完成事件
})

alert提示

System.alert('hello')

确认提示

System.confirm({//确认提示
    msg:'消息提示',
    title:'消息提示',
    btn:["取消","确定"],
    callback:function(d){
        System.toast(d.index);
    }
})

toast提示

System.toast('hello');

打开遮罩层

System.showloading();

关闭遮罩层

System.hideLoading();

获取组件对象（这个比较常用于模版引擎）

System.getComponent('#组件id');

var template = System.getComponent('#demoTemplate');
//参数的绑定(可作为请求远程数据的参数，也可以传入到模版内),此数据会一直保存在页面上，直到关闭页面
template.data = {type:'finish'};
//实现模版引擎数据填充
template.init();
//实现模版引擎数据的刷新
template.reload();

刷新当前页面

//默认刷新页面上所有设置“template-listenReload=true”属性的模版
//和service配置文件属性“listenReload:true”的ajax方法
System.reloadPage(function(){})

手动触发组件渲染

System.initComponent('#组件id','组件名');
//目前除了“template”，可以使用的组件有：“dateTime|picker|citySelect|editor|chosen|form”

模版引擎组件加载完成事件

System.ready('#组件id',function(){
    
})

打开新页面

System.openWindow(openWinPath+'/html/xxx.html',{type:'fniish'});
//{type:'fniish'}这个是页面跳转时候的参数，已json格式进行拼接传参
//获取父页面传过来的参数
System.getExtras().type;//"fniish"

获取父页面传过来的参数

System.getExtras();//数据已json格式获取

关闭页面

System.closeWindow(bool);
//bool为true或则false
//参数说明：是否在关闭当前页面时刷新父页面（在web开发的时候这个参数失效）
//父页面也可以自定义刷新事件，这里提供了一个默认的reload方法，规则是这样子的，如果如页面有reload方法则执行reload，如果没有则刷新父页面
function reload(){
    //此方法定义在父页面上，用户子页面执行System.closeWindow(true);时调用
}

打开div层（一般直接放在body下就行，跟<div class="mui-content">同级）

System.openDivPage('#id');
//这个需要跟div配合
<div id="page" class="child-page">
    <header class="mui-bar mui-bar-nav">
        <a class="mui-icon mui-icon-left-nav mui-icon-arrowleft" onclick="System.closeDivPage('#'+$(this).parents('.child-page').attr('id'))"></a>
        <h1 class="mui-title">我是openDivPage层</h1>
    </header>
    <div class="mui-content">
        <div class="mui-scroll-wrapper" style="top: 45px;bottom: 0;">
            <div class="mui-scroll">
                <!--页面布局代码区域-->
            </div>
        </div>
    </div>
</div>
//关闭div层
System.closeDivPage('#id');

获取uuid

System.uuid();//"16ee610a-e478-4c2c-b168-54c5e5c8d3e0"

页面数据存储

//存储数据
System.storage.setItem('key','value');
//读取数据
System.storage.getItem('key');
//实现原理，如果是app开发使用Storage模块管理应用本地数据存储区，web开发使用window.storage和cookie缓存机制（根据浏览器支持的情况来处理）

url与json互转

System.urlToJson('id=123&name=nick');//得到的结果为{id:'123',name:'nick'}
System.jsonToUrl({id:'123',name:'nick'});//得到的结果为'id=123&name=nick'

字符串与base64字符串互转

System.base64Encode('http://zhangyexing.com');//"aHR0cDovL3poYW5neWV4aW5nLmNvbQ=="
System.base64Decode('aHR0cDovL3poYW5neWV4aW5nLmNvbQ==');//"http://zhangyexing.com"

md5加密

System.getMd5('猜猜我是什么');//"2e45a282329919b7478ef4519824129e"

字符串验证

String.yanzheng(type);//type:shoujihaoma|mimadengji|shenfenzheng|youxiang|jine|positiveInteger  手机号码|密码等级|身份证|邮箱|金额|正整数

时间格式转换

// 对Date的扩展，将 Date 转化为指定格式的String   
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，   
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)   
// 例子：   
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423   
// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18

获取表单内所有有[name]属性的文本值

System.getFormData('#form');
//{
//    danxuan:"customer_service"
//    duoxuan:""
//    endTime:","
//    jichu:""
//    jichumui:"cleaning"
//    nick:""
//    remark:""
//    sex:"male,female"
//}

然后还有比较关心的事件绑定（这个都是按照mui官网的例子来就可以了，点击前往官网查阅）

mui("body").on('tap','.mui-table-view-cell',function(){ 
    ...
})
或者直接在dom上添加onclick事件也行（不过这里要强调一点，由于是做app开发mui把a标签的href给屏蔽了，开发的时候要注意！！！）

如果是在pc端开发的话则需要改成
$("body").on('click','.mui-table-view-cell',function(){ 
    ...
})

加载中按钮

//可配置参数（默认值）
//btn:null（必传）
//data:{
//    'data-loading-icon':'',
//    'data-loading-text':'加载中...'
//}
//callback:function(){}
System.btn({btn:'按钮对象',data:{},callback:function(btn){
    setTimeout(function(){
        //还原按钮状态
        btn.reset();
    },1000)
}})

二维码生成

System.qrcode{
    $$:'#qrcode',//需要生成二维码的对象
    width: 200,//生成二维码的宽度
    height:200,//生成二维码的高度
    text: "",//生成二维码的文本
    background : "#ffffff", //背景颜色   
    foreground : "#000000", //前景颜色  
    callback:function(){}//回调方法
}

大部分api都在mui官网上都可以查阅到，这里我就不再多说


模版引擎，个人觉得是使用这套框架中最有意思的地方

模版引擎分为三种：

一、page模版（页面数据渲染）

二、list模版（列表数据加载，已封装上拉加载和下拉刷新事件，pc端没有此功能，如果pc端要做分页可使用page模版渲染）

三、模版延迟（这种模版主要是用来实现远程获取数据参数可变的情况）

接下来展示下模版引擎的英姿吧

html部分：

image.png

<script id="demoTemplate" component="template" template-url="http://zhangyexing.cn/theme_2/demo?currentPage={setting.currentPage}" template-type="list" type="text/html">
    {{ each list as value i }}
    <li class="mui-table-view-cell" template-setting="{currentPage:'{{currentPage}}',totalPage:'{{totalPage}}'}" >
        <div class="mui-table">
            <div class="mui-table-cell mui-col-xs-10">
                <h4 class="mui-ellipsis">{{value.title}}</h4>
                <h5>申请人：{{list[i].name}}</h5>
                <p class="mui-h6 mui-ellipsis">{{list[i].content}}</p>
            </div>
            <div class="mui-table-cell mui-col-xs-2 mui-text-right">
                <span class="mui-h5">{{list[i].time}}</span>
            </div>
        </div>
    </li>
    {{/each}}
</script>

javascript部分（如果有需要传参）：

//先要在模版上添加template-lazy="true"属性（默认template-lazy值为false，则表示我不需要延迟加载，页面一进来就渲染数据），跟模版说好你先不要动，等我来鞭策你
//执行以下代码，渲染模版
System.ready('#demoTemplate',function(){
    //等待模版组件加载完成后，执行模版加载
    var template = System.getComponent('#demoTemplate');
    template.data = {dd:'wfwew'};
    template.init();
})

最后来说明下模版引擎的配置属性

属性名称默认值说明
template-typepage申明使用的是list还是page
template-pullDown-typematerial下拉刷新风格，默认material风格 可选填“default”,则显示效果为整块div下拉刷新
template-contentdown下拉可以刷新可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容（template-pullDown-type="default" 时有效）
template-contentover释放立即刷新可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容（template-pullDown-type="default" 时有效）
template-contentfresh正在刷新...可选，正在刷新状态时，下拉刷新控件上显示的标题内容（template-pullDown-type="default" 时有效）
template-lazyfalse是否延迟加载,默认 false ，不延迟加载直接渲染
template-preview
用来预览效果，不然页面会突然撑开很难看(此功能只用在page模版，list模版不支持)
template-finish-text我是有底线的list模版数据加载完成提示语句，page模版无效
template-none-text暂无内容list模版无数据提示语句，page模版无效但可以不需要显示空数据，可以使用template-preview来展示视图
template-listenReloadfalse

模版是否监听下拉刷新（System.reloadPage()）方法

template-beforeLoadnull自定义方法名填充数据之前
template-callbacknull需自定义方法名模版渲染完成回调事件
template-reloadfuncnull需自定义方法名自定义下拉事件，如果添加此属性后对应的自带下拉刷新就没有效果，只能通过System.getComponent('#id').rolad();来实现刷新
template-setting{}

在list模版中值必须为

{currentPage:'{{currentPage}}',totalPage:'{{totalPage}}'}

这种格式

page模版则只要{}即可，此属性不可无

模版填充的数据格式（json）

基本数据结构：
{
    "respCode": "0000",
    "data":"数据源..."
    "respMsg": "操作成功!"
}

分页数据结构：
{
    "respCode": "0000",
    "data": {
        "list": [
            {
               "id":"20150806115148",
               "title":"真没猜错！Win10原名Win9 Professional"
            },
            {
               "id":"20150806115148",
               "title":"真没猜错！Win10原名Win9 Professional"
            }
        ],
        "total": 4,             //总条数
        "totalPages": 1,        //总页数
        "pageSize": 10,         //每页显示数据条数
        "pageNumber": 1,        //当前显示页数
    },
    "respMsg": "操作成功"
}

{
    "respCode": "1111",
    "respMsg": "操作失败!"
}

样式重写（默认引入页面）

可在common.css中重写

公用脚本（默认引入页面）

common.js中实现

结束语

以上就是这套组件大部分的api，部分api还在测试当中，如果使用中遇到问题可以给我留言；

谢谢！！！





本文地址：
转载请著名出处，谢谢！
欢迎交流
QQ：419268793
编者:张叶星
发布时间:2017-08-23 09:11:18
星吧客
#2楼 2018-12-05 17:30:42 星吧客
小星星
星吧客
#1楼 2018-12-05 17:30:19 星吧客
登录
用户名：
密码：
关于星世界
      本站的部分文章和图片来自互联网，特别鸣谢 “百度图片”、“笑话集 www.jokeji.cn ”等， 如果本站有某些文章或图片侵犯了您的权益，麻烦您告诉我，我会及时处理。谢谢！微笑
联系方式
QQ：419268793
友情链接
小工具