jYD框架使用

　　jQuery是一個非常好的框架，涉及的內容比較多，隨著現在瀏覽器的發展，原生JS的功能越來越強大，jQuery包含內容很多，但是常用的功能無非涉及到Dom操作，事件，樣式，表單和Ajax交互。引入那麼大的庫，感覺很多又沒有用到，至此萌發出自己構建一個JS輕量級庫的想法，此庫只實現常用的需求點，同時對於IE等老版本瀏覽器不相容，讓此JS能卸下歷史負擔，立足當下。代碼大約14KB，已經上傳github地址： https://github.com/JackWangCUMT/jYD,
最後，限於個人精力有限，此框架難免有不足之處,也歡迎發送意見到郵箱進行反饋。

 1 命名

 一個JS框架，首先需要起一個名字，我思考再三，最終決定用我給即將出生的孩子起的名字允迪（YUNDI）來命名，取首字母，即jYD. 允迪取自 南朝·梁·任昉《為蕭揚州薦薦士表》：“竊見秘書丞琅玡臣王暕，年二十一，字思晦，七葉重光，海內冠冕。神清氣茂，允迪中和。”，允迪有誠實遵循的意思。

 2 框架構建

 為了方便後續的分模塊開發，採用如下JS模式進行框架構建，此模塊有私有變數和函數，有公有函數，m.方法即可以外部訪問。

 1 //(C) 2017 wangming  all rights reserved
 2 //email:[email protected]
 3 var jYD = (function(m) {
 4          //private
 5          var _ver = 1.0;
 6          var _toString = Object.prototype.toString;
 7          _log = function(msg) {
 8              console.log(msg);
 9          }
10          //public
11          m.log = function(msg) {
12             _log(msg);
13          }
14          return m;
15 }(jYD || {}));

  事件綁定，採用如下的代碼段進行實現：

 1 function _on(obj, type, handle) {
 2              try { // Chrome、FireFox、Opera、Safari、IE9.0+
 3                  obj.addEventListener(type, handle, false);
 4              } catch (e) {
 5                  try { // IE8.0-
 6                      obj.attachEvent('on' + type, handle);
 7                  } catch (e) { // 早期瀏覽器
 8                      obj['on' + type] = handle;
 9                  }
10              }
11              var events = obj['the' + type];
12              if (!events) {
13                  events = obj['the' + type] = [];
14                  events.push(handle);
15              }
16 }

  方法連綴的實現，可以在方法後return this來實現：

 1 m.first = function() {
 2              for (var i = 0, e; e = _ele[i++];) {
 3                  if (e.nodeType == 1)
 4                      _ele = e;
 5              }
 6              return this;
 7 };
 8  m.last = function() {
 9              var len = _ele.length;
10              for (var i = len - 1, e; e = _ele[i--];) {
11                  if (e.nodeType == 1)
12                      _ele = e;
13              }
14              return this;
15 };

  3 jYD使用

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