本来是想放在博客园首页的,貌似篇幅不够被移除掉了。后来慢慢补上,看这篇文章吧:一些优秀的代码分析与学习【持续更新】,里面的内容会持续更新,这篇文章作废了

1.jQuery初始化代码段

  技术亮点:jQuery无new化构建、每次jQuery构建的作用域隔离、jQuery拓展插件。

  实现源码:

var jQuery = function(args){
return new jQuery.fn.init(args);
}
jQuery.fn = jQuery.prototype = {
init: function(args){
return this;
},
otherFn: function(){}
}
jQuery.fn.init.prototype = jQuery.fn;

  分析:

  每次jQuery函数内部new的作用是隔离作用域。每次构建的都是一个新对象,新对象obj如果重写obj.__proto__下的属性不影响其他jQuery对象__proto__下的属性。

var m = jQuery(),n= jQuery();//m = {__proto__:{init:fn(),otherFn:fn()}};n = {__proto__:{init:fn(),otherFn:fn()}}
m.otherFn;//fn(){}
m.otherFn = "test";//m = {otherFn:"test",__proto__:{init:fn(),otherFn:fn()}};
n.otherFn;//fn(){}; n的结构n = {__proto__:{init:fn(),otherFn:fn()}}

  然后jQuery.fn提供jQuery对象的拓展,只要使用jQuery.fn.xx定义的属性在通过var m = jQuery();方式获取的对象m都可以通过m.xx获取到。如果直接使用jQuery.prototype来提供拓展给人感觉不太友好。

  上面的代码换成下面这种写法也是可以的

var jQuery = function(args){
return new jq(args);
}
function jq(args){
return this;
}
jQuery.fn = jq.prototype = {
otherFn: function(){};
}

  多出了一个函数变量jq,jQuery的这种写法只是减少了变量而已。

  关于new的详细点击这里

2.Sizzle引擎词法缓存机制

  技术亮点:一个函数实现存、取、缓存数据。

  实现源码:

function createCache() {
  var cache, keys = [];
  return (cache = function( key, value ) {
    // 使用 (key + " ")避免命名冲突,最大缓存createCache.cacheLength:50
    if ( keys.push( key += " " ) > createCache.cacheLength ) {
      // 去掉最老的记录
      delete cache[ keys.shift() ];
    }
    return (cache[ key ] = value);
  });
}
createCache.cacheLength = 50; //例子
var tokenCache = createCache();
//设置缓存
tokenCache("name", "chua");
//tokenize函数中获取缓存
cached = tokenCache[ "name" + " " ];//"chua"

  分析:

  局部变量cache使用函数表达式方式赋值,cache函数中给cache这个函数对象添加要缓存的属性。可以说是把函数对象运用到了极致。

3.jQuery判断js数据的具体类型

  技术亮点:call的妙用

  实现源码:

var class2type = {} ,
core_toString = class2type.toString; 
jQuery.type = function( obj ) {
if ( obj == null ) {
return String( obj );
}
return typeof obj === "object" || typeof obj === "function" ?
class2type[ core_toString.call(obj) ] || "object" :
typeof obj;
}
jQuery.each("Boolean Number String Function Array Date RegExp Object Error".split(" "), function(i, name) {
class2type[ "[object " + name + "]" ] = name.toLowerCase();
});

  分析:

  首先我们知道toString()函数用于将当前对象以字符串的形式返回。该方法属于Object对象,由于所有的对象都"继承"了Object的对象实例,因此几乎所有的实例对象都可以使用该方法。而Object调用toString方法返回"[object ObjectName]",其中ObjectName是对象类型的名称。然后jQuery利用这一特性将准备检测的数据代入object的toString方法替换掉了其上下文环境为要检测的数据。

4.Dean Edwards的base2格式化函数

  技术亮点:arguments的灵活运用

  实现源码:

function format(string) {
var args = arguments;
var pattern = new RegExp('%([1-' + arguments.length + '])', 'g');
return String(string).replace(pattern, function(match, index,position,all) {
console.log(match + ' ' + index + ' ' + position + ' ' + all);
return args[index];
});
}; //实例
var name = "chua",
age = 20,
expr = "%1的年龄是%2";
format(expr,name,age);//"chua的年龄是20"
//控制台打印
//%1 1 0 %1的年龄是%2
//%2 2 6 %1的年龄是%2

  分析:这个比较简单就不分析了。主要就是arguments.length的运用。

  

  今天先到这里,明天继续。。。

  如果觉得本文不错,请点击右下方【推荐】!

一些很棒的js代码的更多相关文章

  1. 将一行很长的js代码格式化输出方便查看

    之前的一行js代码,有2万多字符,打开这个网址,粘贴到左边空白框,点下面格式化: 参考下面文章: 数千行的js代码变成了一行,如何复原,该换行的换行,该对齐的对齐_开发工具_小邯韩的博客-CSDN博客 ...

  2. 一行很好的JS代码

    [].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.rand ...

  3. 推荐一个很棒的JS绘图库Flot

    Flot是Ole Laursen开发的基于JQuery的纯JavaScript实现的绘图库,Flot使用起来非常简单,绘图效果相当绚丽,而且还支持一些图片的操作功能,例如图片的缩放.可以看一下Flot ...

  4. 很棒的jQuery代码片段分享

    jQuery实现的内链接平滑滚动 不需要使用太复杂的插件,只要使用下载这段代码即可实现基于内部链接的平滑滚动 $('a[href^="#"]').bind('click.smoot ...

  5. JS代码指导原则

    一.什么是平稳退化? 如果含有JS代码的网页在用户浏览器不支持JS(或者禁用JS)时,用户仍然能够顺利浏览(网站功能正常,只是视觉效果可能差一些),那么这个网页就能够平稳退化 网页能够平稳退化是很必要 ...

  6. js混淆加密,通过混淆Js代码让别人(很难)无法还原

    js混淆加密,通过混淆Js代码让别人(很难)无法还原   使用js的混淆加密,其目的是为了保护我们的前端代码逻辑,对应一些搞技术吃饭的公司来说,为了防止被竞争对手抓取或使用自己的代码,就会考虑如何加密 ...

  7. IOS学习资源收集--关于动画的代码学习资源总汇(很棒的动画效果哦)

    目录大纲: 1.很棒的iOS加载动画. github网址:https://github.com/NghiaTranUIT/FeSpinner 游老师的译文blog:http://www.cnblogs ...

  8. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  9. JS代码大全 (都是网上看到 自己整理的)

    事件源对象  event.srcElement.tagName  event.srcElement.type 捕获释放  event.srcElement.setCapture();   event. ...

随机推荐

  1. (翻译)开始iOS 7中自动布局教程(二)

    这篇教程的前半部分被翻译出来很久了,我也是通过这个教程学会的IOS自动布局.但是后半部分(即本篇)一直未有翻译,正好最近跳坑翻译,就寻来这篇教程,进行翻译.前半部分已经转载至本博客,后半部分即本篇.学 ...

  2. 【TJOI&HEOI2016】【Bzoj4551】树

    这道题是可以用树链剖分来做的,但其实有比它更加简单的做法--并查集. 可以想到,这类题的一种常见做法是离线处理,先全部读入,再从后往前处理,每次遇到标记操作,就把这个点的标记次数减一,到零以后就把这个 ...

  3. Oracle like查询

    查询方式:LIKE '%xx%' 普通: SELECT * FROM TABLE T WHERE T.COLUNM LIKE '%xx%' 优化:使用 INSTR SELECT * FROM TABL ...

  4. .net 下新版highcharts本地导出图片bug处理

    最近公司要用到highcharts这个插件来生成图表,所以我花了点时间研究了下. 现在最新的版本是3.0.2,这js插件居多优点就不比多说了,demo官网上也很详细.但是优点不爽的地方是,导出图片这个 ...

  5. PHP中Strict Standards错误解决方法二

    在PHP5.3.3 中安装wordpress 3.0.1 ,在安装时出现错误:Strict Standards: PHP Strict Standards: Declaration of Walker ...

  6. 多线程中的锁系统(三)-WaitHandle、AutoResetEvent、ManualResetEvent

    本章主要介绍下基于内核模式构造的线程同步方式,事件,信号量. 阅读目录: 理论 WaitHandle AutoResetEvent ManualResetEvent 总结 理论 Windows的线程同 ...

  7. Mycat 全局系列号

    标签:utf8 概述 本篇文章介绍mycat怎样在分库分表的情况下保证主键的全局唯一方法,接下来就来分析三种方法各自的优缺点. 配置 文件方式获取 1.修改server配置文件 vim server. ...

  8. HTTPS那些事(一)HTTPS原理(转载)

    原创地址:http://www.guokr.com/post/114121/   楔子 谣言粉碎机前些日子发布的<用公共WiFi上网会危害银行账户安全吗?>,文中介绍了在使用HTTPS进行 ...

  9. <canvas>drawImage()方法无法显示图片

    在书上看到用<canvas>绘制图像就动手试试,刚开始,我的代码是这样的: <!DOCTYPE html> <html> <head> <meta ...

  10. C#实现约瑟夫环问题

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace orde ...