JS-tips

最新推荐文章于 2025-09-09 08:37:13 发布

weixin_30379911

最新推荐文章于 2025-09-09 08:37:13 发布

阅读量57

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lixuemin/p/5076119.html

本文介绍了前端开发中常用的技术和技巧，包括事件监听器的使用、观察者模式的应用、Promise的优雅处理、微信分享的实现方法、时间戳的获取、字符串编码的注意事项等内容。

1.addEventListener(String,Function,boolean)

当boolean为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数。

2.观察者的使用场合就是：当一个对象的改变需要同时改变其它对象，并且它不知道具体有多少对象需要改变的时候，就应该考虑使用观察者模式。

创建一个观察者对象

var observer = new Observer();

通过调用subscribe方法，实现一个事件的观察

observer.subscribe("任务名"，处理函数)

通过publish触发观察事件，在任意时刻触发了这个观察的任务名，将会触发这个事件订阅subscribe方法

 observer.publish("任务名")

取消事件订阅，意味着就不会执行了

 observer.unsubscribe("任务名")

3. Promise 是一种令代码异步行为更加优雅的抽象

var dtd = $.Deferred();  //创建
dtd.resolve();          //成功
dtd.then()              //执行回调

4.location.search 属性

Location 对象的 search 属性用于设置或取得当前 URL 的查询字串（? 符号及后面的部分），语法如下：

location.search = search

5.jquery下获取touch事件的pageX：event.originalEvent.targetTouches[0].pageX

6.微信分享自定义三种方式：

（1）在页面顶部放置一张大于300*300像素的图片，作为描述图，微信会自动抓取；

（2）加入如下代码；

 var share_config = {
    img_url: data.shareImage,
    sharetitle: data.title,
    sharedesc:data.desc,
    link:location.href
};
document.addEventListener("WeixinJSBridgeReady", function onBridgeReady(){
    // 发送给好友
    WeixinJSBridge.on('menu:share:appmessage', function(argv){
        WeixinJSBridge.invoke('sendAppMessage',{
            "appid"      : '',
            "img_url"    : share_config.img_url,
            "img_width"  : "640",
            "img_height" : "640",
            "link"       : location.href,
            "desc"       : share_config.sharedesc,
            "title"      : share_config.sharetitle
        }, function(res) { });
    });
    // 分享到朋友圈
    WeixinJSBridge.on('menu:share:timeline', function(argv){
        WeixinJSBridge.invoke('shareTimeline',{
            "appid"      : '',
            "img_url"    : share_config.img_url,
            "img_width"  : "640",
            "img_height" : "640",
            "link"       : location.href,
            "desc"       : share_config.sharedesc,
            "title"      : share_config.sharetitle
        }, function(res) { });
    });
}, false);

（3）根据微信开发者平台，引入<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" ></script>　

var WxJssdk = {
	init:function(){
		$.ajax({
			url:'/x_getWeixinJssdk',
			dataType:'jsonp',
			data:{link:encodeURIComponent(location.href.split('#')[0])},
			success:WxJssdk.callback
		});
	},
	callback:function(data){
		wx.config({
		    debug: false,
		    appId: data.appId,
		    timestamp: data.timestamp,
		    nonceStr: data.nonceStr,
		    signature: data.signature,
		    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']
		});
		wx.ready(function(){
			WxJssdk.shareTimeline();
			WxJssdk.shareAppMessage();
		});
	},
	shareTimeline:function(){
		var title = videoTitle;
		if(playmode ==3 && typeof(showTitle) != "undefined" && showTitle!=""){
			title = showTitle;
		}
		if(pv>10000){
    		var num = Math.round(pv/10000);
    		title = '「'+num+'万小伙伴正在看」'+title;
    	}
		wx.onMenuShareTimeline({
		    title: title,
		    link: location.href,
		    imgUrl: $("#weixinshare").attr("desktopIco") || 'http://static.youku.com/index/img/mobile/youkologo_300x300.png',
		    success: function () {Log.log(1,"tp=1&cp=4010832&cpp=1000962",1);},
		    cancel: function () {Log.log(1,"tp=1&cp=4010833&cpp=1000962",1);}
		});
	},
	shareAppMessage:function(){
		var desc = $("#weixinshare").html();
		desc = desc.replace(/<\/?[^>]*>/g,'');
		desc = desc.substring(0,100);
		wx.onMenuShareAppMessage({
		    title: playmode == 3 && typeof(showTitle) != "undefined" && showTitle!="" ? showTitle : videoTitle,
		    desc: desc || '该视频来自「优酷」中国领先的视频网站,为您提供高清,流畅的视频体验',
		    link: location.href,
		    imgUrl: $("#weixinshare").attr("desktopIco") || 'http://static.youku.com/index/img/mobile/youkologo_300x300.png',
		    success: function () {Log.log(1,"tp=1&cp=4010830&cpp=1000962",1);},
		    cancel: function () {Log.log(1,"tp=1&cp=4010831&cpp=1000962",1);}
		});
	}
};
WxJssdk.init();

7.字符串作为 URI 进行编码　　

encodeURI() 函数：该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

encodeURIComponent() 函数：该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。
其他字符（比如 ：;/?:@&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。
区别在于后者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串），因此将转义用于分隔 URI 各个部分的标点符号。

escape() 函数：该方法不会对 ASCII 字母和数字进行编码，也不会对下面这些 ASCII 标点符号进行编码： * @ - _ + . / 。其他所有的字符都会被转义序列替换。不推荐使用。

8.获取服务器时间戳：

var timstamp = new Date().valueOf();
var systemTime = new Date($.ajax({url:"?t="+timstamp,async: false}).getResponseHeader("Date"));
return systemTime.valueOf();

9.获取本地时间戳

Date.parse(new Date()) //毫秒改成000显示
(new Date()).valueOf()等同于new Date().getTime() //ok

10.用js设置title或者meta值，需加下面代码才能生效　

var $iframe = document.createElement("iframe");
$iframe.src="images/favicon.ico";
$iframe.style.display="none";
$iframe.onload = function(){
      setTimeout(function() {
             document.body.removeChild($iframe);
      }, 0);
};
document.body.appendChild($iframe);

转载于:https://www.cnblogs.com/lixuemin/p/5076119.html