博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
记几处原生JS的开发
阅读量:6521 次
发布时间:2019-06-24

本文共 3602 字,大约阅读时间需要 12 分钟。

hot3.png

年后换工作,一直不稳定,我就没有正式写过程序,博客也荒芜了。最近才正式接手工作,遇到很多奇葩的领导,总有很多奇葩的想法和理念。比如不让用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写好的,原是放在类里面的,现在摘了代码出来,没有测试!

转载于:https://my.oschina.net/u/1540190/blog/908015

你可能感兴趣的文章
微信小程序上传图片(附后端代码)
查看>>
IDC:企业需求疲软 第三季度全球服务器市场收入下滑7%
查看>>
案例分享,数据型人才短缺的应急三法
查看>>
Check Point与IBM安全共建威胁防御联盟
查看>>
凝聚整合,加速服务机器人产业化进程
查看>>
张建锋:阿里是世界领先的大数据公司
查看>>
文思海辉:面向新一代数据中心 打造全面云服务能力
查看>>
尝试一下Apache的开源服务吧!这是由AWS提供的
查看>>
HBase最佳实践-写性能优化策略
查看>>
怎样解决Java/J2EE中文问题
查看>>
红帽公司调整OpenStack平台升级策略,旨在吸引更多受众
查看>>
小米新机红米与QNAP NAS TS-212P易迅网同时首发
查看>>
android studio 第一个真机调试
查看>>
IT经理们,这10个专业的法律问题你都了解吗?
查看>>
NEC人工智能联合实验室成立
查看>>
昆腾:Scale-out存储成为唯一增长点
查看>>
9月15日云栖精选夜读:BCG与阿里研究院等联合揭秘中国互联网经济:成功的关键是什么?...
查看>>
浪潮再获百度数据中心年度“技术创新奖” 联合创新推进AI
查看>>
黑客究竟用什么姿势偷走了你的钱? | 硬创公开课
查看>>
Java面试题——Spring
查看>>