JS自制SEO框架(js案例)

学习了JS一段时间,自己封装了一些日常码代码需要用到的框架,需要的小伙伴可以参考一下
该框架主要功能有:
阻止事件冒泡、阻止默认事件、获取元素、添加事件、删除事件、单个事件代理,多个事件代理、清除class、获取滚动距离等
框架代码如下:

var sEO={
    $:function(exp){//获取对象(1个、多个)
        var el;
        if (/^#\w+$/.test(exp)){
            el=document.querySelector(exp);
        } else {
            el=document.querySelectorAll(exp);
        }
        return el;
    },
    e:function (ev) {
        return ev||event;
    },
    getType:function () {
        return this.e().type()
    },
    getTarget:function () {
        return this.e().target||this.e().srcElement;
    },
    stopBubble:function () {//阻止时间冒泡
        if (this.e().stopPropagation)
            this.e().stopPropagation();
        else
            this.e().cancelBubble=true;
    },
    stopDefault:function () {//阻止默认事件
        if (this.e().preventDefault)
            this.e().preventDefault();
        else
            this.e().returnValue=false;
    },
    addEvent:function (el,type,fn) {//添加事件
        /*el:对象,type:事件名称,fn:回调函数*/
        if (el.addEventListener)
            el.addEventListener(type,fn,false);
        else if (el.attachEvent)
            el.attachEvent(type,fn);
        else
            el[‘on‘+type]=fn;
    },
    delEvent:function (el,type,fn) {//删除事件
        /*el:对象,type:事件名称,fn:回调函数*/
        if (el.addEventListener)
            el.removeEventListener(type,fn,false);
        else if (el.attachEvent)
            el.detachEvent(type,fn);
        else
            el[‘on‘+type]=null;
    },
    agent:function (parent,targetName,type,fun) {//单个事件代理
        //代理对象(1个),被代理的对象,事件名,回调函数
        this.addEvent(parent,type,function (ev) {
            var e=ev||event;
            var target=e.target||e.srcElement;
            while (target.nodeName!==targetName.toUpperCase() && target!==parent){
                target=target.parentNode;
            }
            if (target.nodeName===targetName.toUpperCase())
                fun.call(target);//将回调函数作用给target对象
        })
    },
    agents:function (parent,targetArr,type,fun) {//多个事件代理
        //代理对象(多个),被代理的对象,事件名,回调函数
        var _this=this;
        targetArr.forEach(function (el) {
            _this.addEvent(parent,type,function (ev) {
                var e=ev||event;
                var target=e.target||e.srcElement;
                while (target.nodeName!==el.toUpperCase() && target!==parent){
                    target=target.parentNode;
                }
                if (target.nodeName===el.toUpperCase())
                    fun.call(target);
            })
        })
    },
    getScroll:function (el) {//滚动条滚动
        var top=0,left=0;
        if (el===document){
            left=el.body.scrollLeft||el.documentElement.scrollLeft;
            top=el.body.scrollTop||el.documentElement.scrollTop;
        }else{
            left=el.scrollLeft;
            top=el.screenTop;
        }
        return {left:left,top:top}
    },
    getCookie:function (key) {
        var ck=document.cookie;
        var arr=ck.split(‘; ‘);
        for (var i in arr){
            var temp=arr[i].split(‘=‘);
            if (temp[0]===key)
                return temp[1];
        }
        return ‘‘;
    },
    setCookie:function (key,value,iDate) {
        var d=new Date();
        d.setDate(d.getDate()+iDate);
        document.cookie =`${key}=${value};expires=${d}`
    },
    removeCookie:function (key) {
        this.setCookie(key,0,-1);
    },
    clearClass:function (cArr,cls) {//清除class
        //对象数组,class名字
        // for (var i=0;i<cArr.length;i++){
        //     if (cArr[i].classList.contains(cls)){
        //         cArr[i].classList.remove(cls);
        //         break;
        //     }
        // }
       [].forEach.call(cArr,function (el) {
           if (el.classList.contains(cls)){
               el.classList.remove(cls);
               return false;
           }
       });
    },
    getPos:function (el){
        var left=el.offsetLeft;
        var top=el.offsetTop;
        while(el===el.offsetParent){
            left+=el.offsetLeft;
            top+=el.offsetTop;
        }
        return {left:left,top:top}
    }
};

  

原文地址:https://www.cnblogs.com/xyyl/p/10912037.html

时间: 2024-10-28 16:07:03

JS自制SEO框架(js案例)的相关文章

Express入门( node.js Web应用框架 )

运用Express框架构建简单的NodeJS应用 Start  确认安装了NodeJS之后(最新的Node安装好后NPM也会自带安装了),npm可理解为nodejs的一个工具包.可通过查看版本来检测是否安装成功: F:\>node -v v0.10.32 F:\>npm -v 1.4.28 创建一个目录,在这个目录中首先得定义一下应用程序“包”文件,它和其它的node程序包是一样的. 即在这个目录中创建一个package.json文件,在里面express作为一个依赖. 你也可以使用 npm

node.js基于express框架搭建一个简单的注册登录Web功能

这个小应用使用到了node.js  bootstrap  express  以及数据库的操作 :使用mongoose对象模型来操作 mongodb 如果没了解过的可以先去基本了解一下相关概念~ 首先注明一下版本,因为express因为版本的不同使用的方式也不同,我这算是目前最新的了吧 还没有装express的可以移步到这里 看看express框架的获取安装 1.简单地项目初始化 进入你的nodejs安装路径下边,如图,然后执行命令  express -e test  (这里把项目名设置为test

Node.js的知识点框架整理

背景:因为appium是基于Node.js的,所以想看一下Node.js.但是发现很多资料的顺序看起来有点颠倒.然后就一面看资料一面整理了一下大概的知识点框架,希望对自己对别人有用. 本文不包含node.js的基本语法.node.js的基本语法和JavaScript基本一样,可以以后再单独整理一份基本语法的. Node.js是一个基于chrome V8的JavaScript运行时的环境 Node.js是事件驱动,非阻塞式I/O模型 Node.js使用npm包管理器 使用Node.js不仅实现了一

Node.js的Connect框架的代码重写与改进

Node.js的Connect框架的代码重写与改进 Connect框架简介 Connect框架是建立在Node.js的基本http.server功能之上,帮助实现结构化的web服务器逻辑的框架.Connect框架建立在两个重要的设计模式之上. 1) 责任链模式 在处理web请求时常需要作分派处理.例如,ASP.NET MVC支持按照请求参数将处理分派至某个Controller类的某个Action方法,以及根据Action方法的返回结果类型分派不同的结果操作(如ViewResult.JsonRes

10 个最佳的 Node.js 的 MVC 框架

补充:http://nokit.org/ https://thinkjs.org/zh-cn/doc/index.html Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台, 用来方便地搭建快速的, 易于扩展的网络应用· Node.js 借助事件驱动, 非阻塞 I/O 模型变得轻量和高效, 非常适合 run across distributed devices 的 data-intensive 的实时应用· 本文介绍 10 个基于 Node.js 的 MVC 框

ecshop2.7.3 transposrt.js和 jquery 等js框架冲突最简单最新的解决办法

适用于 ecshop v2.7.3 由于ecshop中的 transport.js 中重写的json解析 导致各种js框架不兼容和处理前台和后台html文档时不便. parseResult() error: can't parse to JSON 等错误 ,由此考虑替换掉 json解析.(不影响原有功能) 方法 1 引入 jquery.js ,jquery.json.js 2 修改 transport.js 为以下内容 /**  * @file            transport.js  

YJ智能框架--JS判断浏览器类型及版本

YJ智能框架--JS判断浏览器类型及版本以下 1 /** 2 * 判断用的是那个浏览器,操作系统,浏览器使用的内核 3 */ 4 (function() { 5 var ua = navigator.userAgent || ""; 6 YJ.browser = ""; 7 if (document.recalc || document.documentMode) { 8 YJ.browser = "ie"; 9 } 10 if (window.

Express 4.x Node.js的Web框架

为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/3821150.html 本文使用node.js v0.10.28 + express 4.2.0 1 Express概述 Express 是一个简洁而灵活的node.js的MVC Web应用框架,提供一系列强大特性创建各种Web应用. Express 不对 node.js 已有的特性进行二次抽象,我们只是在它之上扩展了We

很easy的js双向绑定框架(二):控制器继承

初衷 上一篇已经实现了数据的双向绑定,但model的控制范围是整个文档.在实际project中必需要有作用范围,以便做ui模块的拆分. 这一篇,我们希望实现像angularjs一样的控制器继承: 1. 父controller的Model能够在子controller里被訪问到 2. 子controller的model不影响父controller 3. controller继承关系在html中指定.而不是js中指定 目标 html里,用isi-controller属性去声明控制器: <body>