jYD框架使用

　　jQuery是一个非常好的框架，涉及的内容比较多，随着现在浏览器的发展，原生JS的功能越来越强大，jQuery包含内容很多，但是常用的功能无非涉及到Dom操作，事件，样式，表单和Ajax交互。引入那么大的库，感觉很多又没有用到，至此萌发出自己构建一个JS轻量级库的想法，此库只实现常用的需求点，同时对于IE等老版本浏览器不兼容，让此JS能卸下历史负担，立足当下。代码大约14KB，已经上传github地址： https://github.com/JackWangCUMT/jYD,
最后，限于个人精力有限，此框架难免有不足之处,也欢迎发送意见到邮箱进行反馈。

 1 命名

 一个JS框架，首先需要起一个名字，我思考再三，最终决定用我给即将出生的孩子起的名字允迪（YUNDI）来命名，取首字母，即jYD. 允迪取自 南朝·梁·任昉《为萧扬州荐荐士表》：“窃见秘书丞琅玡臣王暕，年二十一，字思晦，七叶重光，海内冠冕。神清气茂，允迪中和。”，允迪有诚实遵循的意思。

 2 框架构建

 为了方便后续的分模块开发，采用如下JS模式进行框架构建，此模块有私有变量和函数，有公有函数，m.方法即可以外部访问。

//(C) 2017 wangming  all rights reserved
//email:wangmingemail@163.com
var jYD = (function(m) {
         //private
         var _ver = 1.0;
         var _toString = Object.prototype.toString;
         _log = function(msg) {
             console.log(msg);
         }
         //public
         m.log = function(msg) {
            _log(msg);
         }
         return m;
}(jYD || {}));

  事件绑定，采用如下的代码段进行实现：

function _on(obj, type, handle) {
             try { // Chrome、FireFox、Opera、Safari、IE9.0+
                 obj.addEventListener(type, handle, false);
             } catch (e) {
                 try { // IE8.0-
                     obj.attachEvent('on' + type, handle);
                 } catch (e) { // 早期浏览器
                     obj['on' + type] = handle;
                 }
             }
             var events = obj['the' + type];
             if (!events) {
                 events = obj['the' + type] = [];
                 events.push(handle);
             }
}

  方法连缀的实现，可以在方法后return this来实现：

m.first = function() {
             for (var i = 0, e; e = _ele[i++];) {
                 if (e.nodeType == 1)
                     _ele = e;
             }
             return this;
};
 m.last = function() {
             var len = _ele.length;
             for (var i = len - 1, e; e = _ele[i--];) {
                 if (e.nodeType == 1)
                     _ele = e;
             }
             return this;
};

 

  3 jYD使用

<script src="jYD.js"></script> //引入js

Dom

jYD.$("#txt2").ele().value
jYD.$("#frm input").ele()
jYD.$("input:checked").ele()[0].value
jYD.$("input[type=text]").ele()[0].value
jYD.$(".classname").ele()[0].value
jYD.$(".classname").first().ele()

Form

var _json = {
    "name3": "name3",
    "name6": "name6",
    "name7": "name7",
    "name2": "2017-08-08",
    "name1": "audi",
    "ajdsfa": false,
    "Fruit": "桃子",
    "fruit1": "香蕉",
    "hobby": ["音乐", "游泳"],
};
jYD.$("#frm").bindJson(_json)
jYD.$("#frm").serialize() //name3=name3&name6=name6&name7=name7&name2=2017-08-08
jYD.$("#frm").reset()
jYD.$("input").disabled()
jYD.$("select").disabled()
jYD.$("button").disabled()
jYD.$("input").enable()
jYD.$("select").enable()
jYD.$("button").enable()

Event

jYD.$("#btnok").off("click").on("click", function(e) {
      console.log(decodeURIComponent(jYD.$("#frm").serialize()));
});
//custom Event
var sender = jYD.$("#cediv").ele();
var target = jYD.$("#btnce").ele();
jYD.createCE(sender, "divbtnclick", {
     detail: {
            tag: sender,
             msg: "hello"
      }

}, target, "click");
 //冒泡
jYD.$("#cediv").on("divbtnclick", function(e) {
      console.log(e);
});

CSS

jYD.$(".clss").addClass("red").removeClass("clss")
jYD.$("#txt2").css({"backgroundColor":"#eee"});

Ajax

 jYD.post('/api/api3.ashx')
     .params(jYD.$("#frm").serialize() + "&table=22")
     .success(function (data) {
           console.log(data);
     }).error(function (data) {
           console.log("eror" + data);
     })
     .send();

Other

jYD.is.Number(99)
jYD.isElement(document.getElementById("frm"))
jYD.is.Array([])