知识点积累

JS判断是否是手机客户端

var isMobile = {
    Android: function () {
        return navigator.userAgent.match(/Android/i) != null;
    },
    BlackBerry: function () {
        return navigator.userAgent.match(/BlackBerry/i) != null;
    },
    iOS: function () {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i) != null;
    },
    Opera: function () {
        return navigator.userAgent.match(/Opera Mini/i) != null;
    },
    Windows: function () {
        return navigator.userAgent.match(/IEMobile/i) != null;
    },
    Any: function () {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());  
    }
};

 解析URL各部分的通用方法

function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^\?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
        hash: a.hash.replace('#',''),
        path: a.pathname.replace(/^([^\/])/,'/$1'),
        relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
        segments: a.pathname.replace(/^\//,'').split('/')
    };
}

 Google Chart 二维码链接

function qrcode(data, size, level, margin) {
    size = size || 96;
    level = level || 'L';
    margin = margin | 0;
    return [
        'http://chart.apis.google.com/chart?cht=qr',
        '&chs=' + size + 'x' + size,
        '&chld=' + level + '|' + margin,
        '&chl=' + encodeURIComponent(data)
    ].join('');
}

   使用：

//直接拼链接
 $("#qrcode").append("<img style='width:96px;height:96px;' src='http://chart.googleapis.com/chart?cht=qr&chld=L|0&chs=96x96&chl=" + encodeURIComponent(urlValue) + "'/>");
//通过脚本
 $("#qrcode").append("<img style='width:96px;height:96px;' src='" + qrcode(urlValue) + "'/>");

 扩展JS某个原型的方法

    String.prototype.endWith = function (endstr) {
        var reg = new RegExp(endstr + "$");
        return reg.test(this);
    }
    String.prototype.startWith = function (startstr) {
        var reg = new RegExp("^" + startstr);
        return reg.test(this);
    }
    if (isMobile.Any()) {
        var link = '/login/indexmobile';
        //alert(window.location.href);
        //alert(window.location.href.toLowerCase());
        //alert('indexmobile'.endWith("indexmobile"));
        if (!window.location.href.toLowerCase().endWith('indexmobile')) {//加上该判断，防止自引入时，导致无限循环！
            window.location = link;
        }
    }

 一般处理程序之验证码

using System;
using System.Collections.Generic;
using System.Drawing;
using System.Linq;
using System.Web;
using System.Web.SessionState;
using System.Web.UI.WebControls;

namespace Wedo.BusInfo.WebUI.ashx
{
    /// <summary>
    /// 验证码
    /// </summary>
    public class testCode : IHttpHandler, IRequiresSessionState
    {
        public void ProcessRequest(HttpContext context)
        {
            string checkCode = CreateCode(6);
            context.Response.Cache.SetCacheability(HttpCacheability.NoCache);
            context.Session["_Login_ValidateCode"] = checkCode;
            CreateImage(checkCode, context);
        }

        private string CreateCode(int codeLength)
        {
            string so = "1,2,3,4,5,6,7,8,9,0,a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
            string[] strArr = so.Split(',');
            string code = "";
            Random rand = new Random();
            for (int i = 0; i < codeLength; i++)
            {
                code += strArr[rand.Next(0, strArr.Length)];
            }
            return code;
        }

        private void CreateImage(string code, HttpContext context)
        {
            Bitmap image = new Bitmap(15 * code.Length, 20);
            Graphics g = Graphics.FromImage(image);
            WebColorConverter ww = new WebColorConverter();
            g.Clear((Color)ww.ConvertFromString("#EFEFEF"));
            Random random = new Random();
            //画图片的背景噪音线
            for (int i = 0; i < 12; i++)
            {
                int x1 = random.Next(image.Width);
                int x2 = random.Next(image.Width);
                int y1 = random.Next(image.Height);
                int y2 = random.Next(image.Height);
                g.DrawLine(new Pen(Color.LightGray), x1, y1, x2, y2);
            }
            Font font = new Font("Courier New", 16, FontStyle.Bold | FontStyle.Italic);//首选等宽字体，如：Courier New，Consolas等，确保宽度一定，否则不同的字符，长度不一致！
            System.Drawing.Drawing2D.LinearGradientBrush brush = new System.Drawing.Drawing2D.LinearGradientBrush(
                new Rectangle(0, 0, image.Width, image.Height), Color.Blue, Color.Gray, 1.2f, true);
            g.DrawString(code, font, brush, 0, 0);
            //画图片的前景噪音点
            for (int i = 0; i < 10; i++)
            {
                int x = random.Next(image.Width);
                int y = random.Next(image.Height);
                image.SetPixel(x, y, Color.White);
            }

            //画图片的边框线
            g.DrawRectangle(new Pen(Color.Silver), 0, 0, image.Width - 1, image.Height - 1);
            System.IO.MemoryStream ms = new System.IO.MemoryStream();
            image.Save(ms, System.Drawing.Imaging.ImageFormat.Gif);
            context.Response.ClearContent();
            context.Response.ContentType = "image/Gif";
            context.Response.BinaryWrite(ms.ToArray());
            g.Dispose();
            image.Dispose();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

效果图：

 等宽字体推荐

 JavaScript的数组逻辑运算

 <script>
        function newline() {
            document.write("<br/>");
        }
</script>

<script>
      document.write([1] || [3, 4, 5] || [6, 7, 3]);
      newline();
      document.write([1] && [3, 4, 5] && [6, 7, 3]);
      newline();
      document.write(null || [3, 4, 5] || [6, 7, 3] && [23]);
      newline();
      document.write(null || [6, 7, 3] && [23] || [3, 4, 5]);
      newline();
</script>

结果：

1
6,7,3
3,4,5
23

结论：

先算&&再算||

||取第一个有效值

&&取最后一个有效值

结合boolean判断

   <script>
        //1、先算&&再算||
        //2、false&&any均为false
        //3、true||any 均为true
        //4、true&&有效对象 为有效对象
        //5、false||有效对象 为有效对象
        //结论：结果为决定因子，标注为红色
        document.write(false && false);//false
        document.write("<br/>");
        document.write(false && true);//false
        document.write("<br/>");
        document.write(true || false);//true
        document.write("<br/>");
        document.write(true || true);//true
        document.write("<br/>");
        document.write(false && [1, 3]);//false
        document.write("<br/>");
        document.write(false && [1, 3] || [3, 4]);//[3,4]
        document.write("<br/>");
        document.write(true && [1, 3]);//&&左边有效，决定因子在右边。[1,3]
        document.write("<br/>");
        document.write([1, 3] && true);//&&左边有效，决定因子在右边。true！
        document.write("<br/>");
        document.write(false || [1, 3]);//[1,3]
        document.write("<br/>");
        document.write([1, 3] || false);//[1,3]
        document.write("<br/>");
        document.write(true || [1, 3] || [3, 4]);//true
        document.write("<br/>");
        document.write([3, 4] || false && [1, 3]);//[3,4]
        document.write("<br/>");
        document.write([3, 4] || true && [1, 3]);//[3,4]
    </script>

这个在jQuery插件选项、脚本引入判断中常用，比如下面这段引入判断

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js">/script>')</script>

 str.match(regex)与regex.exec(str)的Demo

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link rel="icon" href="favicon.ico" type="image/x-icon" />
    <title>正则表达式regex.exec(str)与str.match(regex)</title>
    <style>
        body
        {
            font-family: 'Microsoft YaHei';
            font-size: 18px;
        }

        p
        {
            text-indent: 2em;
            font-size: 18px;
            font-weight: bold;
            border-left: solid #0026ff 8px;
            width: 800px;
            margin: 8px;
        }

        hr
        {
            margin: 10px auto;
        }
    </style>
</head>
<body>
    <h1>1、str.match(regex)</h1>
    <p>match属于字符串的方法</p>
    <p>
        (b+)：所有匹配的b，比如bbb；(b)+：所有匹配的b的最后一个b，比如bbb的最后一个b
        (\d+)：所有匹配的数字，比如345678；(\d)+:所有匹配的数字的最后一个，比如345678的最后一个8
    </p>
    <p>结论：根据返回结果可知如果<font color="red">"正则表达式"</font>有g全局,那么返回所有匹配结果[abbb345678,ab0,abbbbb6],
                如果<font color="red">"正则表达式"</font>没有g全局,那么返回数组arr[0]为匹配的完整字串,后面是括号里的捕获[abbb345678,b,34];</p>
    <script>
        str = "abbb345678eftab0modabbbbb6";
        var reg = /a(b+)(\d+)/i;// 继续测试: var reg = /a(b+)(\d+)/ig
        var arr = str.match(reg);//match属于字符串的方法
        for (var i = 0; i < arr.length; i++) {
            document.write(arr[i] + "<br/>");
        }
        function newline() {
            document.write("<br/>");
        }
    </script>
    <hr />


    <h1>2、regex.exec(str)</h1>
    <p>exec属于正则的方法</p>
    <p>结论：根据返回结果可知无论<font color="red">"正则表达式"</font>是否有g全局。
         返回的数组arr[0]为匹配的完整字串，后面是括号里的捕获[abbb345678,b,34],即g有没有都无影响,<font color="blue">都是匹配第一组数据</font>,等价于不含有g全局标志的match。</p>
    <script type="text/javascript">
        str = "abbb345678eftab0modabbbbb6";
        var reg = /a(b+)(\d+)/ig;// 继续测试: var reg = /a(b+)(\d+)/i
        var arr = reg.exec(str);//exec属于正则的方法
        for (var i = 0; i < arr.length; i++) {
            document.write(i + ":" + arr[i] + "<br/>");
        }
    </script>
    <hr />


    <h1>3、g对regex.exec(str)的影响</h1>
    <p>
        结论：当一个具有g的<font color="red">"正则表达式"</font>调用exec()时,他将该对象的lastIndex设置到紧接这匹配子串的字符位置。
            当第二次调用exec时将从lastIndex所指示的字符位置开始检索.利用这个特点可以<font color="blue">反复调用exec遍历所有匹配。</font>等价于具有g标志的str.match(regex).
    </p>
    <script type="text/javascript">

        str = "abbb345678eftab0modabbbbb6";
        document.write("regex.exec法<br/>")
        var reg = /a(b+)(\d+)/ig;// then test: var reg = /a(b+)(\d+)/i(while死循环，浏览器会死的)
        while ((arr = reg.exec(str)) != null) {
            document.write("arr.length=" + arr.length + "<br/>");
            for (var i = 0; i < arr.length; i++) {
                document.write(i + ":" + arr[i] + "<br/>");
            }
            newline();
        }
        document.write("<br/>如果只要arr[0]，相当于str.match法<br/>")
        var arrmatch = str.match(reg);
        document.write("arrmatch.length=" + arrmatch.length + "<br/>");
        for (var i = 0; i < arrmatch.length; i++) {
            document.write(i + ":" + arrmatch[i] + "<br/>");
        }

    </script>
    <hr />
    <h1>最终结论</h1>
    str.match(regex)<br />
    <ol>
        <li>regex有g:贪婪模式，返回所有匹配</li>
        <li>regex没有g:返回第一个匹配，及第一匹配的<font color="red">group</font></li>
    </ol>
    regex.exec(str)<br />
    <ol>
        <li>regex有g:返回第一个匹配,及第一匹配的<font color="red">group</font>
            。重置lastIndex，可以不断重复调用，直到null时结束</li>
        <li>regex没有g:返回第一个匹配，及第一匹配的<font color="red">group</font>。</li>
    </ol>
</body>
</html>

最终结论

str.match(regex)

regex有g:贪婪模式，返回所有匹配

regex没有g:返回第一个匹配，及第一匹配的group

regex.exec(str)

regex有g:返回第一个匹配,及第一匹配的group 。重置lastIndex，可以不断重复调用，直到null时结束

regex没有g:返回第一个匹配，及第一匹配的group。

regex没有g时候，str.match(regex)与regex.exec(str)等效

这里写的有点乱，参考这篇文章。

JS原生XMLHttpRequest实现Ajax

<script type="text/javascript">
        function createXHR() {
            var xhr = null;
            try {
                // Firefox, Opera 8.0+, Safari，IE7+
                xhr = new XMLHttpRequest();
            }
            catch (e) {
                // Internet Explorer 
                try {
                    xhr = new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e) {
                    try {
                        xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    catch (e) {
                        xhr = null;
                    }
                }
            }
            return xhr;
        }
        //在收到响应后相应数据会填充到XHR对象的属性，有四个相关属性会被填充：
        //1. responseText：作为响应主体被返回的文本
        //2. responseXML：如果响应内容的类型是”text/xml”或”application/xml”，这个属性将保存包含着相应数据的XML文档
        //3. status：响应的HTTP状态（200,404,500等）
        //4. statusText：HTTP状态说明
        var xhr = createXHR();
        //检查XHR对象的readyState属性，该属性表示请求/响应过程中的当前活动阶段，每当readyState值改变的时候都会触发一次onreadystatechange事件。必须在open前就指定该处理函数。
        xhr.onreadystatechange = function () {
            //readyState 
            //0:请求未初始化；
            //1:服务器已建立连接;
            //2:请求已接受;
            //3:请求处理中;
            //4:请求已完成，且响应就绪。
            if (xhr.readyState == 4 && xhr.status == 200) {
                console.log('Original Ajax: ' + xhr.responseText);
            }
        }
        xhr.open('post', 'handler/info.ashx', true);//get或post，ashx需要发布后才可以访问
        xhr.setRequestHeader("userdef", "haha");//open后，send前
        xhr.send('{action:"getTime",id:"12"}');
    </script>

 jQuery插件模板

//记得把"pluginName" 改成你自己的插件名!
//开始的分号是为了保证你脚本的完整性，避免和没加";"结束的对象、数组混合。
; (function ($) {
    //我们需要附加插件到jQuery的命名空间，否则插件在这个函数作用域之外便不可使用。
    //"el"应该是由jQuery选择器引擎返回的jQuery的对象或对象集合
    $.pluginName = function (el, options) {
        //插件默认配置，私有属性，仅可以从插件内部访问。
        var defaults = {
            propertyName: 'value',
            //如果你的插件是事件驱动的，你需要为事件提供回调函数。在插件触发某一事件前或后调用这些函数，
            //因此用户可以"绑定"自定义的函数到这些特定事件且不用修改代码。
            onSomeEvent: function () { }
        }

        //为了避免众多this产生混淆，使用"plugin"来引用当前的插件对象。
        var plugin = this;

        //这是一个合并了默认属性(default)和用户提供的属性(options)之后的插件属性。
        //它可以这么来访问：
        //插件内部：plugin.settings.propertyName
        //插件外部：myplugin.settings.propertyName(myplugin是一个插件实例)
        plugin.settings = {}

        //插件对象被创建时候调用的构造函数
        //这是一个私有函数，仅可以从插件内部调用
        var init = function () {
            //插件最终属性是合并default和options之后的属性
            plugin.settings = $.extend({}, defaults, options);
            //将目标元素作为插件的公有属性，这样就可通过插件来访问了
            plugin.el = el;

            // 你的代码
        }

        //共有属性，可以这么来调用
        //插件内部：methodName(arg1, arg2, ... argn)
        //插件外部：myplugin.publicMethod(arg1, arg2, ... argn)(myplugin是一个实例对象)
        //public方法，仅作演示，可删！
        plugin.foo_public_method = function () {
            //你的代码
        }

        //私有方法
        //这些方法仅可以从插件内部调用
        //methodName(arg1,arg2,...argn)
        //私有方法，仅作演示，可删！
        var foo_private_method = function () {
            // 你的代码
        }
        //调用构造函数
        init();
    }
})(jQuery);

 去除注释

; (function ($) {

    $.pluginName = function (el, options) {

        var defaults = {
            propertyName: 'value',
            onSomeEvent: function () { }
        }

        var plugin = this;

        plugin.settings = {}

        var init = function () {
            plugin.settings = $.extend({}, defaults, options);
            plugin.el = el;
            // code goes here
        }

        plugin.foo_public_method = function () {
            // code goes here
        }

        var foo_private_method = function () {
            // code goes here
        }

        init();

    }

})(jQuery);

 参考链接：jQuery模板

MAC键盘说明

Sublime Text 快捷键

 

JS实现HTML编码解码

function htmlEncode(e) {
    var i, s = {
        "&": /&/g, """: /"/g, "'": /'/g,
        "&lt;": /</g, "&gt;": />/g, "<br/>": /\n/g,
        "&nbsp;": / /g, "&nbsp;&nbsp;": /\t/g
    }; 
    for (i in s) { 
        e = e.replace(s[i], i);
    }
    return e;
};

function htmlDecode(e) {
    var i, s = {
        "&": /&amp;/g, "\"": /&quot;/g, "'": /&#039;/g,
        "<": /&lt;/g, ">": /&gt;/g, "\\n": /<br\/>/g,
        " ": /&nbsp;/g, "\\t": /&nbsp;&nbsp;/g
    };
    for (i in s) {
        e = e.replace(s[i], i);
    }
    return e;
};

 JS原型继承

   function Person(p_name, p_age) {
        this.name = p_name;
        this.age = p_age;
        this.say = function() {
            alert(this.name + this.age);
        }
    }

    function Student(p_no) {
        this.no = p_no;
        this.speak = function() {
            alert(this.no + this.name + this.age);
        }
    }
    Student.prototype = new Person("wjj", 28);
    //1、Person实例继承了Person构造器里的方法和属性
    //2、通过原型链传递继承的东西到Student
    var stu = new Student(100);
    stu.speak();
    stu.say();
    alert(Student.prototype.constructor);
    //3、通过alert发现，构造器已经不是Student的了，而是Person的

 内存表现：