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

最后，限于个人精力有限，此框架难免有不足之处,也欢迎发送意见到邮箱进行反馈。

 1 命名

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

 2 框架构建

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

1 //(C) 2017 wangming  all rights reserved 2 //email:wangmingemail@163.com 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          //public11          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  //引入js

Dom

jYD.$("#txt2").ele().valuejYD.$("#frm input").ele()jYD.$("input:checked").ele()[0].valuejYD.$("input[type=text]").ele()[0].valuejYD.$(".classname").ele()[0].valuejYD.$(".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-08jYD.$("#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 Eventvar 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([])