专栏首页前端侠2.0记几处原生JS的开发 原

记几处原生JS的开发 原

年后换工作,一直不稳定,我就没有正式写过程序,博客也荒芜了。最近才正式接手工作,遇到很多奇葩的领导,总有很多奇葩的想法和理念。比如不让用jquery,不过要求兼容ie11和chrome ff,就行。放弃jquery开始感觉很难,写了两天,也还行。我先用jquery实现的功能,然后替换里面几个方法即可 ,无非就是查找,添加class等!

在控制台先测试好,直接使用就行了,但遇到以下问题,简单记一下:

0、项目引用了prism.js来加亮代码。高亮后,IE11非常的卡,无法滚动,按F12查看性能,要2秒多去渲染一屏,这和JS无关了。我以为是元素过多,IE性能太差的原因。后来偶然把prism.css文件去掉,结果瞬间显示出来。先想肯定是阴影或变形引起的吧,就把css中的shadow去掉,还不行。就一块块的去CSS代码。在把透明度去掉,就好了!

.namespace {
    opacity: .7;  /*该行引起IE11的性能极大的下降,禁用!*/
}

1、IE11不允许classList.add 多个参数。chrome,ff都可以这样:tag.classList.add("xbrl-selected  animate");

写两遍就是了!    

2、IE11中,在主界面中,获取了iframe初始的contentWindow后,  如果再往里写入一个新页面,那么这个已经获取的window就无效了。 执行它的脚本会提示“不能执行已释放 Script 的代码” 。

这个问题也好理解,因为我是往里写了完整的页面:<html> ......</html>此时浏览器重新生成了一个新的window对象嘛!  

加一句话:if (!!window["ActiveXObject"] || "ActiveXObject" in window)    this.init("再绑定一次");

这个在chrome ff中,不存在window失效问题。

3、获取窗体滚动条的位置,IE11不支持window.scrollY,需要去其它属性找。

解决办法:window.scrollY || window.pageYOffset || document.documentElement.scrollTop

4、在IE11里访问iframe时,document.getElementById("frm")  和 直接用 frm,得到完全不同的东西。

document.getElementById("frm") 返回标签,之后 用 contentWindow去访问它。

frm得到的竟然直接是一个window对象,我的个天呀!  在chrome,ff中, 可不是这样,我还没有去百度原因,不知道有没有什么说法没有。

解决办法:统一用document.getElementById("frm")

5、动画编写。

以前很少写动画的功能,一是没必要太花哨,二是用css3有时能解决一下问题(虽然css3我也不熟,今天才动手实践了一下)。

这次要滚动一下body,我想这个就完全不能用css3了吧,那就动手写一个定时计算吧,总要动手做一次嘛!

/**动画的参数 */
interface IAnimateConfig {
    /**起始值 */
    from: number;
    /**终值 */
    to: number;
    /**延时  s*/
    delay?: number;
    /**持续时间  s*/
    duration?: number;
    /**动画效果 */
    timingFunction?: string; //linear|easeIn|easeOut|easeInOut
}
/**几个常用的效果  借用了TWEEN的代码,详见:https://www.oschina.net/code/snippet_942854_19980 */
var animFun = {
        linear: function (start, alter, curTime, dur) {
            return start + curTime / dur * alter;
        },
        easeIn: function (start, alter, curTime, dur) {
            return start + Math.pow(curTime / dur, 2) * alter;
        },
        easeOut: function (start, alter, curTime, dur) {
            var progress = curTime / dur;
            return start - (Math.pow(progress, 2) - 2 * progress) * alter;
        },
        easeInOut: function (start, alter, curTime, dur) {
            var progress = curTime / dur * 2;
            return (progress < 1 ? Math.pow(progress, 2) : -((--progress)
                * (progress - 2) - 1))
                * alter / 2 + start;
        }
    };
/**动画函数*/
animate(config: IAnimateConfig, action: (value: number) => void) {
        var opt: IAnimateConfig = { from: 0, to: 0, delay: 0, duration: 1, timingFunction: 'linear' };
        for (var p in config) opt[p] = config[p];

        if (opt.from == opt.to) return;
        var begin = +new Date() + opt.delay * 1000, end = begin + opt.duration * 1000, last = +new Date();
        var tick = function () {
            if (last >= begin && last <= end) {
                //此处是过渡值计算公式
                //var v = opt.from + (opt.to - opt.from) * (last - begin) / (end - begin);
                var v = animFun[opt.timingFunction](opt.from, opt.to - opt.from, last - begin, end - begin);
                action(v);
            }
            if (last > end) {
                action(opt.to);
                return;
            }
            last = +new Date();
            requestAnimationFrame(tick);
        };
        tick();
    }
/**动画的调用*/
animate({
            from: scrollY || pageYOffset,
            to: tag.offsetTop,
            delay:0.2,
            duration:1,
            timingFunction: 'easeInOut'
        }, (v) => win.scrollTo(0, v));

自己写完这个animate函数,心情很愉悦。 这才是我想要的动画函数嘛!若要加强一下,就添加一个完成事件即可!

注意:上面代码是我用Typescript写好的,原是放在类里面的,现在摘了代码出来,没有测试!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css3的transform造成z-index无效, 附我的牛逼解法

    我想锁表头及锁定列。昨天新找的方法是用css3的transform,这个应该在IE9以上都可以的。

    申君健
  • oracle 的表空间 原

    申君健
  • HTMLDocument和XMLDocument 的children

    document.children  或者 DOM元素的children都是可以访问的,它返回是该节点下的所有Element节点。 它们同样还有一个childN...

    申君健
  • poiAndEasyExcel学习(二)

    崔笑颜
  • 以太坊DApp系列(二)---从入门到出家

    以太坊自2013年V神提出后,被无数人赋予美好的愿景,甚至被称为区块链2.0,其代币发行量更是达到了全球第二,仅次于比特币,而其带来的智能合约概念颠覆了人们对区...

    forrestlin
  • Task的状态

    在介绍“Task是啥”时,我们提到过,在多任务系统里,任务可能有不同的状态,例如Waiting或Ready。事实上,VxWorks里的任务可能有更多的状态,主要...

    Taishan3721
  • 浅入浅出 Java ConcurrentHashMap

    HashMap 是 Java 中非常强大的数据结构,使用频率非常高,几乎所有的应用程序都会用到它。但 HashMap 不是线程安全的,不能在多线程环境下使用,该...

    沉默王二
  • Python爬虫:一些常用的爬虫技巧总结

    用Python也差不多一年多了,Python应用最多的场景还是Web快速开发、爬虫、自动化运维:写过简单网站、写过自动发帖脚本、写过收发邮件脚本、写过简单验证码...

    龙哥
  • Python 爬虫:8 个常用的爬虫技巧总结!

    用python也差不多一年多了,python应用最多的场景还是web快速开发、爬虫、自动化运维:写过简单网站、写过自动发帖脚本、写过收发邮件脚本、写过简单验证码...

    昱良
  • 天冷了,企业级业务架构设计可以给你“煲鸡汤”!

    架构设计的核心是确定结构和关系,因此,它是一个抽象度较高的方法论,而抽象度较高也意味着它具有更广泛的适用性。企业级业务架构设计也是如此,除了给企业做整体能力规划...

    用户6900693

扫码关注云+社区

领取腾讯云代金券