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([])