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框架核心概念相关推荐

Spring 框架核心概念IoC 随笔
IoC = DI(Dependency Injection ) + 生命周期钩子事件 + 外部配置 ... IoC核心设计模式 Factory 模式和 Observer 模式,强制使用依赖注入模式 ...
php框架所用到的核心概念,【PHP】PHP现代框架代表-Laravel框架核心技术特性
一.php语言特点及发展现状 1.服务端脚本语言,自由度太大 ,一个业务逻辑可言写在模型里,控制器里,也可以单独封装成一个类,甚至可以嵌入到html里,这样势必会造成混乱,业务逻辑散落在各处,尤其对于 ...
量化回测框架Backtrader【3】-核心概念Lines
目录一,什么是Lines 二,Lines的声明三,Lines的访问四,Lines的长度五,Lines和参数的继承机制题外话这讲介绍BackTrader的一个贯穿框架始终的核心概念-line ...
【Python自动化测试15】unittest测试框架的核心概念与作用
文章目录一.前言二.认识单元测试三.unittest核心概念与操作 3.1.unittest的作用 3.2.测试用例(TestCase) 3.3.运行测试用例 3.4.测试套件.加载器与运行器( ...
【尚硅谷】Vue2.x核心学习笔记--渐进式的JS框架
Vue核心在这里插入图片描述一.Vue的基本认识 1.1 Vue特点 1.2 与其他的前端Js框架的关联 1.3 Vue的扩展插件二.Vue的基本使用 2.1 效果 2.2 如何引入Vue.js ...
并发框架Disruptor(核心概念入门高性能原理-伪共享 CAS 环形数据生产和消费模式高级使用 )
并发框架Disruptor 并发框架Disruptor Disruptor概述背景什么是Disruptor 为什么使用Disruptor Disruptor 的核心概念 Ring Buffer S ...
《Spark大数据分析：核心概念、技术及实践》大数据技术一览
本节书摘来自华章出版社<Spark大数据分析:核心概念.技术及实践>一书中的第1章,第1节,作者穆罕默德·古勒(Mohammed Guller)更多章节内容可以访问云栖社区"华章 ...
Webpack核心概念解析
原文链接:banggan.github.io/2019/05/09/- Webpack核心概念解析终于忙完了论文,可以愉快的开始学习了,重拾起重学前端.webpack以及Vue的源码解读作为入职前的 ...
vue事件总线_[面试] 聊聊你对 Vue.js 框架的理解
作者:yacan8 https://github.com/yacan8/blog/issues/26 本文为一次前端技术分享的演讲稿,所以尽力不贴 Vue.js 的源码,因为贴代码在实际分享中,比较枯 ...

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框架核心概念相关推荐

最新文章

热门文章

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框架核心概念相关推荐

最新文章

热门文章

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