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
<!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();總結
以上是生活随笔為你收集整理的Sg.js框架核心概念的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2020考研公共课_基础精讲课_管理类联
- 下一篇： $g.$utils.实用工具类