Sg.js框架核心概念：
1）所有变量、方法、类对象全部都是从属于$g主树，由$g分支出很多$g.变量名、$g.方法、$g.对象id、$g.类；
2）获取控件内部属性必须使用公开的get方法获取，禁止直接用访问内部变量方式来获取控件内部变量、属性值；
3）修改控件内部属性、绑定方法等都必须使用公开的set方法来操作，禁止直接用访问内部变量方式来修改控件内部属性；
4）$g.$inits.sg_控件名称.init();可以执行所有同类型控件强制初始化；
5）$g.$utils.方法父类.方法名称();可以执行具体的工具类方法；
6）多用对象作为入参和回调参数，对未来的扩展大有帮助；
7）每个控件包含：
主（控件主体对象：文档对象sgDOM和虚拟对象sgObject）
谓（方法Function、事件Event）
宾（变量var、数组Array、对象Object）
其中sgDOM是框架定义的控件文档对象、sgObject是sgDOM对应的方法主体可以直接调用其所控制的对象方法、事件监听、变量等行为；
8）控件遵循总分思想，“总”即为复杂的入参的JSON对象，“分”即为将局部变量方法化；
前者是类似set({wiidth:100,height:200,click:function(e){}})的结构，
后者是类似setWidth(100)、getWidth()、setHeight(200)、getHeight、click:(function(e){e})；
其中，set(复杂JSONObject)、get()返回sgDOM和sgObject、setPropertyName(value)设置属性值、getPropertyName()获取属性值、setClickEvent(callback)设置回调触发事件。
Sg.js官方中文文档：www.shuzhiqiang.com官方QQ群：312353533
sg-control-demo.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="sg-control-demo.css">
<script src="sg-control-demo.js"></script>
<title>$g.js框架-控件模板</title>
</head>
<body>
<sg-controllername sg-id="sg1" show></sg-controllername>
<sg-controllername show></sg-controllername>
</body>
</html>
<script>
onload = function () {
$g.$inits.sg_controllername.init();
$g.sg1.setBackgroundColor("red");
$g.sg1.set({
show: true,
content: "点击颜色变蓝色",
style: {
backgroundColor: "yellow",
},
event: {
click: function () {
$g.sg1.setBackgroundColor("blue");
$g.sg1.get().sgDOM.style.color = "white";//字体变白色
$g.sg1.get().sgDOM.innerHTML = "变成了蓝色";
}
}
});
$g.sgControllername.setBackgroundColor("orange");
$g.sgControllername.setContent("移入宽度变宽");
$g.sgControllername.setMouseOverEventt(function (e) {
e.sgDOM.style.width = "300px";
e.sgDOM.innerHTML = "宽度变成了300px";
});
}
</script>
sg-control-demo.css
@charset "UTF-8";
sg-controllername, sg-controllername * {
transition: .382s;
-moz-transition: .382s;
-webkit-transition: .382s;
-o-transition: .382s;
-khtml-transition: .382s;
width: 200px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: 20px;
font-weight: bold;
font-family: 'Microsoft YaHei', 'PingFangSC-Regular', 'sans-serif', 'San Francisco', 'Microsoft Sans Serif', 'Arial'; /*顶部加 @charset "UTF-8";*/
color: #000;
display: none;
cursor: pointer;
}
sg-controllername[show]{
display: block;
}
sg-control-demo.js
/*以下代码均不用修改：▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽▽*/
if (!$g) {
var $g = {};
}
$g.$inits || ($g.$inits = {}), $g.$inits.sg_controllername || ($g.$inits.sg_controllername = {}), $g.$inits.sg_controllername.init = function (sgDoms) {
var sn = "sg-" + "controllername", sa = document.querySelectorAll(sn);
if (sgDoms) {
if (typeof sgDoms == "string") {
sn = sgDoms.indexOf("sg-") > -1 ? sgDoms : (sgDoms + " " + sn);
sa = document.querySelectorAll(sn);
} else {
sgDoms instanceof Element && (sa = [sgDoms]);
sgDoms instanceof Array && (sa = sgDoms);
}
}
var noSgidTotal = 0;
for (var i = 0, len = sa.length; i < len; i++) {
var a = sa[i], sgid = a.getAttribute("sg-id");
sgid || noSgidTotal++;
}
if (noSgidTotal > 1) return alert("监测到存在" + noSgidTotal + "个未设置sg-id的" + sn + "控件，最多只允许一个控件不设置sg-id，否则会报错哟！");
for (var i = 0, len = sa.length; i < len; i++) {
var a = sa[i], nn = a.nodeName.toLowerCase(), sgid = a.getAttribute("sg-id"), i_d = sgid || nn;
var iD = i_d.replace(/\b(\w)/g, function (m) {
return m.toUpperCase();
}).replace(/-/g, ''), iD = iD.charAt(0).toLowerCase() + iD.substr(1);
$g[iD] = new __sg__controllername__(i_d);
}
};
/*△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△△*/
/**
* 请先更新“controllername”名称！！！
* 主要修改以下方法体（面向对象的写法）：❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
*/
var __sg__controllername__ = function (id) {
//Event----------------------------------------------------------------
var __setClickEvent = this.setClickEvent = function (callbakc) {
_sgDOM.onclick = function () {
callbakc && callbakc(__get());
};
};
var __setMouseOverEventt = this.setMouseOverEventt = function (callbakc) {
_sgDOM.onmouseover = function () {
callbakc && callbakc(__get());
};
};
//Function----------------------------------------------------------------
var __show = this.show = function () {
_sgDOM.setAttribute("show", true);
};
var __hide = this.hide = function () {
_sgDOM.removeAttribute("show");
};
//set----------------------------------------------------------------
var __set = this.set = function (d) {
if (d.show != null && d.show != undefined) {
d.show ? __show() : __hide();
}
if (d.content) {
__setContent(d.content);
}
if (d.style) {
__setBackgroundColor(d.style.backgroundColor);
}
if (d.event) {
__setClickEvent(d.event.click);
__setMouseOverEventt(d.event.mouseover);
}
};
var __setBackgroundColor = this.setBackgroundColor = function (color) {
_sgDOM.style.backgroundColor = color;
};
var __setContent = this.setContent = function (html) {
_sgDOM.innerHTML = html;
};
//get----------------------------------------------------------------
var __get = this.get = function () {
var _sgObject = {
event: {
click: __setClickEvent,
mouseover: __setMouseOverEventt,
},
show: _sgDOM.getAttribute("sg-show") || false,
style: {backgroundColor: __getBackgroundColor()},
content: __getContent(),
};
return {sgDOM: _sgDOM, sgObject: _sgObject};
};
var __getBackgroundColor = this.getBackgroundColor = function () {
return _sgDOM.style.backgroundColor;
};
var __getContent = this.getContent = function () {
return _sgDOM.innerHTML;
};
//sgDOM----------------------------------------------------------------
var _tpl =
'控件内容';
var _sgDOM = null, __init = function () {
_sgDOM = document.querySelector('[sg-id="' + id + '"]') || document.querySelector(id + ':not([sg-id])'), _sgDOM.innerHTML = _tpl;
__set({
show: _sgDOM.getAttribute("sg-show") || false,
style: {backgroundColor: _sgDOM.getAttribute("sg-background-color"),},
content: _sgDOM.getAttribute("sg-content"),
})
};
__init();
};
//默认初始化(不传参代表初始化所有控件，传入sel、DOM、DOM数组可以对应初始化控件)
$g.$inits.sg_controllername.init();
