文档章节

用户自定义功能和导航栏的编写(上)

熊猫88
 熊猫88
发布于 2015/11/21 17:14
字数 1249
阅读 54
收藏 0

当前的百度已经实现了个性化的新闻推送,其他的类似个性化推送,个性化定制,当前来看是一个非常流行的体验(用户可以根据自己的需求选择自己喜欢的栏目),一个平台里往往栏目非常多,要满足很多人的同时,又需要满足个性化,要不然很多不喜欢看的新闻对用户的体验伤害是非常大的,现在的腾讯是强制推送弹窗新闻,就是一个非常不重视用户体验的行为,下一步的方向应该就是可以根据用户自身的喜好订阅,但是QQ用户是可以基于QQ号进行会员新闻定制,但是百度搜索,今日头条这种没有特定帐号的,也需要保持个性化,这个时候,就需要使用js来实现个性化定制效果。

百度网盟推广的精准推送其实也是通过js记录cookie,然后和服务器端进行交互,实现了广告的精准投放。当然,这里写的并没有百度记录搜索关键词那么复杂,这里仅仅实现今日头条的栏目定制效果。

栏目定制的核心算法是:用户在一个定制界面,定制好了栏目后,将其定制的栏目储存在cookie里面,然后在首页或者需要读取头部的时候,从cookie里面读取储存的用户定制的栏目,拼接成导航链接(这样就完成了栏目的定制,由此可见,在禁用cookie的情况下,是无法做到定制栏目的)。当然,如果是打算用来进行对用户进行跟踪,可以让用户自定制的时候,触发ajax同我们服务器端的接口进行交互(我们项目里一个大数据开发的思路就是用户访问我们特定页面的时候,我们为其生成一个唯一识别标志,把这个识别标志储存在客户端,客户端的一些动作会触发和服务器的交互,这样我们就完成了用户的跟踪,一些特定的用户动作可以搜集用户特定偏好和特质,将其存储,然后用一套词库系统对其进行分析,可以对其进行广告精准推送)

下面开始写代码,先完成cookie.js的编写,然后我们引用即可。完成整个思路:

1.首先需要设置一个cookie

  设置一个key=value 并设置天数为有效期,当然也可以设置为分钟,用escape主要是用   来储存key为中文时候的情况(否则中文识别的时候,会出现乱码,在手机上特别容易出现乱码,手机浏览器对cookie的中文键识别比较差)

   function setCookie(key,value,day) {

   var expireDate = new Date();

   expireDate.setDate(expireDate.getDate()+day);

   document.cookie=escape(key)+'='+escape(value)+';expires='+expireDate.toGMTString();

   }

 2.设置好了cookie后,我们需要读取cookie

   这里用了RegExp对象的匹配功能

    function  getCookie(key) {    

      var arr,reg=new RegExp("(^| )"+escape(key)+"=([^;]*)(;|$)");

      if(arr=document.cookie.match(reg)) return unescape(arr[2]);

      else return null;  

   }

 3.当用户取消不需要的导航栏目的时候,需要对cookie进行移除,移除就是把有效期减少到当前

       function  removeCookie(key) {

      var expireDate = new Date();

   expireDate.setDate(expireDate.getDate()-1);

   document.cookie=escape(key)+'='+''+';expires='+expireDate.toGMTString();   

   }  

  4.额外的我们准备了一个客户端唯一识别码生成 主要用到了Math.random() 进行生成

  function randomString(len) {
  len = len || 32;
  var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
  var maxPos = $chars.length;
  var pwd = '';
  for (i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd;
}

 准备好了cookie.js后,我们需要内置我们所有的栏目(可以通过接口和服务器端进行交互,但是为了减轻服务器端的压力,我们一般直接在本地内置我们常用的目录,一般我们运营中是不会轻易更动我们的运营栏目的)这里作为样例,我们内置(关于我们,联系我们,招聘人才,最近新闻,会员注册)五个栏目,用户可以任意增减定义这四个栏目。

//设置cookie
 function setCookie(key,value,day) {
       var expireDate = new Date();
       expireDate.setDate(expireDate.getDate()+day);
       document.cookie=escape(key)+'='+escape(value)+';expires='+expireDate.toGMTString();
   }
  //获取cookie
 function  getCookie(key) {       
      var arr,reg=new RegExp("(^| )"+escape(key)+"=([^;]*)(;|$)");
      if(arr=document.cookie.match(reg)) return unescape(arr[2]);
      else return null;  
   }
   //移除cookie
   function  removeCookie(key) {
         var expireDate = new Date();
       expireDate.setDate(expireDate.getDate()-1);
       document.cookie=escape(key)+'='+''+';expires='+expireDate.toGMTString();       
   }
   //客户端和服务端唯一交互的识别码,清C后,识别码消失
   function randomString(len) {
  len = len || 32;
  var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';    /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
  var maxPos = $chars.length;
  var pwd = '';
  for (i = 0; i < len; i++) {
    pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
  }
  return pwd;
}



© 著作权归作者所有

熊猫88
粉丝 18
博文 76
码字总数 65366
作品 0
程序员
私信 提问
我的网站搭建: (第四天) 导航栏与页脚

经过观察可以发现,基本上每个网站都会有一个叫导航栏的东西,其目的就是为了方便用户找到自己查看的页面。导航栏可以自己制作,但我选择的方法是使用Bootstrap框架,还有给每个网页都添加一...

代码打碟手
2018/08/24
75
0
iOS头部渐变的表格视图设计

iOS头部渐变的表格视图设计 今天再来给大家带来一个开发中常用到的视图控制器,在很多应用中,可能都会遇到这样的一个需求:表视图控制器最上方有一个头图控件,当表格视图滑动在顶部时,导航...

珲少
2016/04/26
547
0
iOS Dev 初识 导航控制器

导航控制器让用户使用内置动画在视图之间顺利移动,我们无需编写历史记录控制,导航控制器会自动处理Back按钮事件,让用户"出栈".导航控制器提供了一个简单的菜单栏.我们可以向菜单栏中添加按钮...

晨曦之光
2012/05/16
1K
0
定制化你的ReactNative底部导航栏

前言 接触过ReactNative(以下简称RN)的大概都知道,react-navigation提供了两种开箱即用的导航栏组件 createBottomTabNavigator createMaterialBottomTabNavigator 分别是这样的 尽管官方提供...

小绿和小蓝
01/29
0
0
纵横开阖-微信小程序之通讯录全攻略

Create by jsliang on 2018-11-21 20:46:36 Recently revised in 2018-11-25 00:24:14  Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 你们的 star 是我学习的动力!GitHub 地址 ...

jsliang
2018/11/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

3_数组

3_数组

行者终成事
27分钟前
3
0
经典系统设计面试题解析:如何设计TinyURL(二)

原文链接:https://www.educative.io/courses/grokking-the-system-design-interview/m2ygV4E81AR 编者注:本文以一道经典的系统设计面试题:《如何设计TinyURL》的参考答案和解析为例,帮助...

APEMESH
今天
7
0
使用logstash同步MySQL数据到ES

概述   在生成业务常有将MySQL数据同步到ES的需求,如果需要很高的定制化,往往需要开发同步程序用于处理数据。但没有特殊业务需求,官方提供的logstash就很有优势了。   在使用logstas...

zxiaofan666
今天
10
0
X-MSG-IM-分布式信令跟踪能力

经过一周多的鏖战, X-MSG-IM的分布式信令跟踪能力已基本具备, 特点是: 实时. 只有要RX/TX就会实时产生信令跟踪事件, 先入kafka, 再入influxdb待查. 同时提供实时sub/pub接口. 完备. 可以完整...

dev5
今天
7
0
OpenJDK之CyclicBarrier

OpenJDK8,本人看的是openJDK。以前就看过,只是经常忘记,所以记录下 图1 CyclicBarrier是Doug Lea在JDK1.5中引入的,作用就不详细描述了,主要有如下俩个方法使用: await()方法,如果当前线...

克虏伯
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部