JavaScript越来越简单啦啦啦
我正在对需要从远程API提取并对页面的各个部分进行更改的页面进行更改。听起来像是抽出jQuery和Ajax的时候了,不是吗?相反,我只是使用了老式的JavaScript。实际上,我使用了新的JavaScript。
浏览器在图书馆和框架的出现中并没有停滞不前。因此,当我们需要额外烘烤时,我们可以利用这些功能。
一些JSONP
第一步是执行JSONP调用。这通常很简单:在页面中嵌入脚本标记。该脚本将运行您在页面上定义的功能。
var scr = document.createElement('script'); scr.src = 'http://openexchangerates.org/latest.json?callback=formatCurrency'; document.body.appendChild(scr);
当脚本运行时,它会将数据传递给formatCurrency
函数。优秀。
一旦数据在函数中,我需要获取特定类型的所有元素并根据这些元素进行更改。
querySelectorAll
该querySelectorAll
方法将获取与特定选择器匹配的所有元素 - 类似于jQuery。它仅限于浏览器理解的选择器,这肯定比jQuery可以做的要少。有时用凿子代替大锤。
该querySelectorAll
方法也适用于IE8及以及所有其他流行的浏览器。我还包装了我的整个代码块,以便在执行任何操作之前检查浏览器是否支持此方法。
if (document.querySelectorAll) {function formatCurrency (data) {var els = document.querySelectorAll('.price');/* do stuff with the elements */}var scr = document.createElement('script');scr.src = 'http://openexchangerates.org/latest.json?callback=formatCurrency'; document.body.appendChild(scr); }
正如您在示例中所看到的,我正在寻找的是具有一类价格的每个元素。我可以使用,getElementsByClassName
但在IE8中不支持,而是querySelectorAll
。到现在为止还挺好。
在那之后,只需要获取属性,进行一些更改,然后使用innerHTML将其重新插入到DOM中。十分简单。
渐进式增强
但是那些不支持这种新功能的用户呢?它与那些不支持JavaScript的人一样。就我而言,这意味着用户只会看到加拿大的定价而不是将其转换为本地货币。
这是完整的最终脚本。
if (document.querySelectorAll) {var currencyLookup = {EUR:'€', USD:'US$', CAD:'CDN$'}function formatCurrency (data) {// format germany pricevar els = document.querySelectorAll('.price');for (var i=0; i<els.length; i++) {var price = parseInt(els[i].innerHTML.replace(/[^0-9]*/,'')); var curr = els[i].getAttribute('data-currency');var newPrice = price / data.rates.CAD * data.rates[curr];els[i].innerHTML = '<small>' + currencyLookup[curr] + '</small>' + Math.round(newPrice); }}var scr = document.createElement('script');scr.src = 'http://openexchangerates.org/latest.json?callback=formatCurrency';document.body.appendChild(scr); }
这总共是628个字节。不需要JavaScript库或框架。这可以缩小到469个字节。与只需要在页面上获取jQuery所需的91,000字节相差甚远。
Takes it Easy
“只使用jQuery”可能是首选词,但幸运的是,你并不总是需要那么多代码来解决一个简单的问题。页面越来越大。很高兴知道我们并不总是需要使用大量资源来实现一个小目标。
转载于:https://www.cnblogs.com/jinhengyu/p/10258018.html
JavaScript越来越简单啦啦啦相关推荐
- 加密越来越简单——用JavaScript实现数据加密和解密
加密越来越简单--用JavaScript实现数据加密和解密 概念 常用算法 1. MD5加密算法 2. SHA-1加密算法 3. AES加密算法 代码示例 结论 总结 在当今互联网的世界中,安全性越来 ...
- 技术不是越来越简单,而是框架是你的羁绊
文/张泰峰,原文地址:https://www.cnblogs.com/ztfjs/p/7596617.html 技术是一条湍急的江流,我们或乘着自己的小船,或搭着公司的大帆,在激流中回转翻滚,旧的路途 ...
- 如何仅使用HTML和JavaScript构建简单的URL缩短器
by Palash Bauri 由Palash Bauri 如何仅使用HTML和JavaScript构建简单的URL缩短器 (How to build a simple URL shortener w ...
- JavaScript设计模式--简单工厂模式例子---XHR工厂
JavaScript设计模式--简单工厂模式例子---XHR工厂 第一步,Ajax操作接口(目的是起一个接口检测作用) (1)引入接口文件 //定义一个静态方法来实现接口与实现类的直接检验 //静态方 ...
- js实现html页面倒计30秒,javascript实现简单页面倒计时
这篇文章主要为大家详细介绍了javascript实现简单页面倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了javascript实现简单页面倒 ...
- JavaScript如何简单而准确地判断复杂数据类型
javaScript如何简单而准确地判断复杂数据类型? 1:typeof 只能判断出基本数据类型 例如: var a = 3; typeof a 的结果为 number var b = []; typ ...
- javascript 代码_如何使您JavaScript代码简单易读
javascript 代码 by Arthur Arakelyan 通过亚瑟·阿拉克利安(Arthur Arakelyan) 如何使您JavaScript代码简单易读 (How to keep you ...
- Javascript闭包简单理解
Javascript闭包简单理解 原文:Javascript闭包简单理解 提到闭包,想必大家都早有耳闻,下面说下我的简单理解. 说实话平时工作中实际手动写闭包的场景并不多,但是项目中用到的第三方框架和 ...
- 用浏览器收藏夹的书签保存javascript的简单脚本
用浏览器收藏夹的书签保存javascript的简单脚本 之前一直好奇别人是如何保存常用的javascipt脚本的 油猴脚本,需要考虑整体的运行方式,有时还得专门写个按钮,需要一定基础 记事本保存,用的 ...
最新文章
- mysql binlog 目录_怎么查看mysql 的binlog日志存放的位置(linux和win)
- 【Docker】ADD COPY no such file or directory
- python中浅拷贝与深拷贝
- 用phpcms如何将静态页面制作成企业网站(中)
- 无意中发现的MSDN软件下载网站
- 在QTP中巧用WebTable对象的ChildItem方法进行测试
- 地图标识符号大全_资源小结:中国分省地图大全(10.23版)
- 视频教程-java后台+微信小程序 实现完整的点餐系统-微信开发
- ad转3d视图快捷键_AD详细快捷键按键
- 期货对冲套利实战知识
- Zerotier和NoMachine 开机启动设置
- 四旋翼自主飞行器设计方案
- Eclipse jdt 格式化java代码
- Android imageview 双击放大缩小手势放大缩小自由滑动
- python电化学cv曲线怎么画_Maya创建NURBS曲线:CV曲线工具详解
- e租宝雇佣黑客攻击网贷之家 帮凶被判二年六个月
- Linux通过curl下载jdk
- 伺服电机大小(框号)
- 泰语7个元音变形_泰语元音的三种拼合方式
- Vue 3 迁移策略笔记—— 第2节:Async Components 异步组件
热门文章
- python最短回文串_LeetCode-Python-214. 最短回文串
- 点到直线的投影公式_2021高考复习资料:高中数学必备公式与知识点汇总
- python自动化框架2019_《一头扎进》系列之Python+Selenium自动化测试框架实战篇6 - 价值好几K的框架,呦!这个框架还真牛叉哦!!!...
- C语言字符5,C语言编程(练习5:字符串与字符串函数)-Go语言中文社区
- linux java程序启动脚本
- toad导入数据_利用TOAD实现EXCEL数据在oracle的导入导出
- elementui 搭建布局页面路由_【项目实践】使用Vue.js和ElementUI快速实现后台管理系统的界面布局...
- 微软应用商店_微软自家的软件也放弃Windows 10
- c语言程序加仿真,求助。C语言的程序和仿真
- java高级数据类型_最新精品JAVA高级备课完美版——Java基本数据类型.pdf