JQuery学习总结一 —— JQ-tabs的实现

最近面试的时候被问到有没有看过JQuery的源码，本人确实看过，然而什么都没有记住，所以看过并没有什么X用，重要的，还是要动手写代码。

JQuery-tabs实现

---

1. 网站地址后#?的区别
   我们经常可以看到网站后面带着一些参数，比如你用搜索引擎搜索处结果的时候，网址中会带有各种各样的参数，下面我就根据我的理解来解释一下这些参数的作用
   ？： 通常表识在进入这个网址之前需要传的参数值，所在网址会根据该参数值来做一些处理从而实现
   # ： 通常指页面内部的跳转，不会刷新页面，只是局部的内容的变化（例如a标签的href=’id’）

2. JQuery
   JQuery-ajax可以通过load来调用静态页面从而避免单纯的复制粘贴，而JQuery强大的DOM操作也大大扩大了每一个template的可用性。
   load(URL, callback)
   由ajax载入的静态页面可以很好的兼容当前页面的样式，但该部分与动态添加的元素一样，在兼容页面的js操作时，存在js作用无效的问题。
   问题关键在于HTML的顺序执行，在浏览器渲染页面的时候，会从上往下依次渲染，当渲染到load函数时，浏览器不会等待load完毕再借着执行，而是在解析template的同时，继续往下渲染，这个过程几乎是同步的，所以渲染出来的DOM结构，并没有兼容页面下面的JS。
   解决办法可以考虑在JS部分添加一个计时器，setTimeout(function(){}, 1); 匿名函数中写需要load兼容的js即可

3. JQuery-tabs
   考虑到用户体验，tabs切换用#而不用?
   首先你需要一个很好的拿到页面参数的函数

   function getURL(name){
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}

   借用正则对象RegExp可以很快的解析出parameter

   var tmp = getURL('data');
if(tmp == "1"){
function1();
}else{
function2();
}

   那么页面首次加载的时候就会根据#data的值来做相应处理

   <a href="#1">Click me</a>

   那么可以在这个a标签的click事件中添加function1函数即可。

Github地址：https://github.com/Elson8080 “一个想成为正真前端工程师的‘前端工程师’”，欢迎随时沟通~~