首页 > Sg.js框架核心概念

Sg.js框架核心概念

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



$g.js框架-控件模板

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(/(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();

Sg.js框架核心概念

Sg.js框架核心概念：

Sg.js官方中文文档：www.shuzhiqiang.com

官方QQ群：312353533

sg-control-demo.html

sg-control-demo.css

sg-control-demo.js

更多相关：

禁止缩放safari浏览器--阻止双击放大--阻止双指掐捏放大-

$g.$utils.实用工具类

mui ios中form表单中点击输入框头部导航栏被推起及ios中form表单中同时存在日期选择及输入框时，日历选择页面错乱bug...

jquery-ajax请求：超时设置，增加 loading 提升体验

cookie和url参数获取的常规实用方法合集（ES6）

百度热力图

【进大厂大数据爬虫技术核心难点】纯前端开发的爬虫程序，很多BAT技术大咖都为之惊叹

【新】欢庆网自动搜索请柬console方法，面对多种网站改版的情况

json格式天气数据的获取，jsonp方式获取统计图数据

安卓相对布局常用语句

LabelButtonScale

关于捕获键盘信息的processDialogkey方法

PetShop之表示层设计 - 《解剖PetShop》系列之六

ASP.NET页生命周期概述

Sg.js框架核心概念

Sg.js框架核心概念：

Sg.js官方中文文档：www.shuzhiqiang.com官方QQ群：312353533

sg-control-demo.html

sg-control-demo.css

sg-control-demo.js

更多相关：

Sg.js官方中文文档：www.shuzhiqiang.com

官方QQ群：312353533