最前端

我的工作,我的生活,点点滴滴...

标签 ‘ javascript

web前端工具

测试阶段,欢迎反馈意见及建议。

web前端工具,目前包括的功能有:脚本注入(JS Inject), JSON格式化(JSON Format)目前使用扩展jsonview的代码, 外引CSS重载(CSS Reload), 功能禁用(Disable), 页面检查(Check), HTML元素检查(HTML Inspect), 二维码生成(QR Code),和 映射(Auto Response)等。

  1. 脚本注入(JS Inject)

    可在页面注入远程脚本。

    inject

  2. JSON格式化(JSON Format)

    JSON数据格式化,亦可在页面加载时格式化页面的JSON数据。

    format

  3. 外引CSS重载(CSS Reload)

    可使用F9快捷键或点击按钮重新加载外引的CSS样式文件。

    reload

  4. 功能禁用(Disable)

    可禁用浏览器的javascript,cookie,弹出页面,flash等功能。

    disable

  5. 页面检查(Check)

    可检查链接的有效性及是否有id重复等。

    check

  6. HTML元素检查(HTML Inspect)

    可自定义检查元素的各种属性,避免在Styles选项卡中滚动查找。

    inspect1

    inspect2

  7. 二维码生成(QR Code)

    可为每个页面生成对应的二维码,如避免在手机上面输入链接地址查看页面。

    qrcode

  8. 映射(Auto Response)

    可把任何请求映射到另外一个文件上,甚至本地文件(需要在chrome://extensions/页上启用“允许访问文件网址”的选项)。

    response

javascript超时处理

在异步操作时,通用需要超时处理,比如在请求数据时,网络异常没返回数据。

代码:

var timeoutHandle = (function(){
	var events = [];
	var id = 0;
	var handle = {
	    success:function(id){
	        var eve = events[id];
	        if(!eve){
	            return;
	        }
	        eve.isSuccess = true;
	        clearTimeout(eve.timer);
	    },
	    timeout:function(id,fn){
	        var eve = events[id];
	        if(!eve){
	            return;
	        }
	        eve.timer = setTimeout(function(){
	        	if(eve.isSuccess){
	        		return;
	        	}
	            if(typeof fn == 'function'){
	                fn.call(this);
	            }
	        },eve.time);
	    }
	};
	return function(fn,time){
		id++;
	    events[id] = {};
	    events[id].time = time||5e3;
	    events[id].isSuccess = false;
	    if(typeof fn == 'function'){
	        fn.call(this,id,handle);
	    }
	};
})();

使用方法:

// 以下为伪代码
timeoutHandle(function(id,handle){
    handle.timeout(id,function(){
        // 超时处理
    });
    jsonp(url,params,function(msg){
        // 数据处理
        handleData(msg);
        // 成功通知
        handle.success(id);
    });
},100);

HTML5 Shiv

  1. 自定义标签在ie9以下浏览器的问题:

    我是<abc>,我包含着<span>
    <!-- ie9以下浏览器,对应的css样式不起作用,且不能包含子元素, 如: -->
     
    <!-- 高级浏览器 -->
    <abc><span></span></abc>
     
    <!-- ie9以下浏览器 -->
    <abc></abc>
    我是<abc>,我包含着
    <span>span</span>
    </abc><//abc>
  2. 解决方法:在head引用 html5shiv-printshiv.min.js.

    <head>
    <!--[if lt IE 9]>
    <script src="http://imgs.bq69.com/blog/wp-content/themes/dcTheme/js/html5shiv-printshiv.min.js"></script>
    <![endif]-->
    </head>
  3. 详细解决方案: html5shiv