JavaScript——巧妙使用eval() & 开发模式 & 资源
ztj100 2024-10-27 18:32 28 浏览 0 评论
JavaScript —— 极简主义
点关注，不迷路~
天天都是肉，也会有吃腻的那天。本篇文章我们就来一个小插曲儿，来调调情儿，调调味儿；其实主要是看到这个两个知识点，怕后续会忘掉把它分享出来，所以活在当下，就好比我遇到不懂的或疑惑的问题就会立刻百度一下，否则这件事件就会被搁置，这也是一种好的学习习惯哦~
1、巧妙使用eval()
1.1) eval是做什么的？
它是把代码字符串解析成JS代码并运行该代码。
str = 'console.log(123)' eval(str); 打印结果：123
但是，我们不建议使用eval，原因有两点：一是不安全(++number运算会改变全局变量number)；二是非常消耗性(2次，1次解析成js语句，1次执行)；
1.2) 如何巧妙使用eval()？
在将json字符串转换成json对象的时候使用eval。比如：发起一个Ajax请求，然后服务器返回一个类似'{x:1,y:1}'结构的json字符串
str = '{"name":"anita","age":"10"}';
// 如果eval的时候不加括号还会报脚本错误,这是为什么呢？
result = eval('(' + str + ')');
console.log(typeof str, typeof result, result)
结果: string object {name: "anita", age: "10"}
为什么eval要添加括号？
原因：eval本身的问题。 由于json是以{}的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象，而不是作为语句(statement)来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。
console.log(eval("{}"); // undefined
console.log(eval("({})");// object[Object]
小结：JSON.parse的功能和eval一样，不建议使用eval。仅作了解，现在基本不用了。
2、Doctype、严格模式与混杂模式
<!Doctype html> 文档声明，位于文档中的最前面的位置，处于<html>标签之前。此标签告知浏览器文档使用哪种HTML或XHTML规范。用于告知浏览器以何种模式来渲染文档。
2.1) 严格模式：标准模式，页面排版和js解析是以该浏览器支持的最高标准(W3C)来执行。
2.2) 混杂模式：quirks模式，不严格按照标准模式执行，主要用以兼容旧的浏览器，向后兼容。兼容低版本浏览器的行为以防止老站点无法工作。
两者的区别：总体会有布局、样式解析和脚本解析三方面的区别。
1)、盒模型：在W3C标准中，如果设置一个元素的宽度和高度，值得是元素内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包含了padding和border。
2)、设置行内元素的宽高：在标准模式下，给<span>等行内元素设置width和height都不会生效，而在quirks模式下，则会生效。
3)、设置百分比的高度：在标准模式下，一个元素的高度尤其包含的内容决定，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
4)、margin:0 auto设置水平居中：使用margin:0 auto在标准模式下可以使元素水平居中，但在quirks模式下却会失效。解决办法：用text-align属性：
body{text-align:center;}
#content{text-align:left;}
5)、quirks模式下设置图片的padding会失效
6)、quirks模式下Table中的字体属性不能继承上层的设置
7)、quirks模式下white-space:pre（保留空白）会失效，(预格式化的文本, 保留换行或空格)
3、link和import的区别
页面中使用CSS的方式主要有3种:
1) 行内样式——在行内添加定义style属性值;
2) 内联样式——页面头部内嵌调用；
3) 外部样式——外面链接调用；
3.1) 其中外面引用有两种：link和@import。
HTML代码
<link rel="stylesheet" rel="stylesheet" href="CSS文件" type="text/css" />
HTML代码
<style type="text/css">
@import url("CSS文件");
</style>
外面引用两者的区别：
区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务，比如：设置rel引入字体图标库；@import属于CSS范畴，只能加载CSS。
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。
所以，一般情况下建议使用link，但性能优化需要按需加载时可以考虑使用@imort，后续会有专题文章来讲解性能优化。
小结：其他事务、同时加载、兼容、控制DOM。
3.2) URL、src 、 href 的区别
区别：
- URL 是统一资源定位器，用于定位互联网上的各种资源，如web页面。
http://segmentfault.com/html/index.asp <img src="../abc" />
- href 是引用，建立资源关系，常用在link、a标签中；不会暂停浏览器的渲染。
<link href="reset.css" rel="stylesheet"/>
- src 是嵌入，替换，常用在img、script、iframe标签中；会暂停浏览器的渲染，放在底部。img标签页与此类似，浏览器暂停加载直到提取和加载图像。
<script src="script.js"></script>
小结：
URL不是属性，src 与 href均是属性；
建立资源关系 VS 替换；
是否暂停浏览器渲染。
相关推荐
- Python 操作excel的坑__真实的行和列
-
大佬给的建议__如何快速处理excelopenpyxl库操作excel的时候，单个表的数据量大一些处理速度还能接受，如果涉及多个表甚至多个excel文件的时候速度会很慢，还是建议用pandas来处理，...
- Python os.path模块使用指南:轻松处理文件路径
-
前言在Python编程中，文件和目录的操作是非常重要的一部分。为了方便用户进行文件和目录的操作，Python标准库提供了os模块。其中，os.path子模块提供了一些处理文件路径的函数和方法。本文主要...
- Python常用内置模块介绍——文件与系统操作详解
-
Python提供了多个强大的内置模块用于文件和系统操作，下面我将详细介绍最常用的几个模块及其核心功能。1.os模块-操作系统交互...
- Python Flask 建站框架实操教程（flask框架网页）
-
下面我将带您从零开始构建一个完整的Flask网站，包含用户认证、数据库操作和前端模板等核心功能。##第一部分：基础项目搭建###1.创建项目环境```bash...
- 为你的python程序上锁:软件序列号生成器
-
序列号很多同学可能开发了非常多的程序了，并且进行了...
- PO设计模式全攻略，在 UI 自动化中的实践总结(以企业微信为例)
-
一、什么是PO设计模式？PO（PageObject）设计模式将某个页面的所有元素对象定位和对元素对象的操作封装成一个Page类，即一个py文件，并以页面为单位来写测试用例，实现页面对象和测试用例的...
- 这种小工具居然也能在某鱼卖钱?我用Python一天能写...
-
前两天在某鱼闲逛，本来想找个二手机械键盘，结果刷着刷着突然看到有人在卖——Word批量转PDF小工具...
- python打包成exe，程序有图标，但是任务栏和窗口都没有显示图标
-
代码中指定图标信息#设置应用ID，确保任务栏图标正确显示ifsys.platform=="win32":importctypesapp_id=...
- 使用Python构建电影推荐系统（用python做推荐系统）
-
在日常数据挖掘工作中，除了会涉及到使用Python处理分类或预测任务，有时候还会涉及推荐系统相关任务。...
- python爬取并分析淘宝商品信息（python爬取淘宝商品数据）
-
python爬取并分析淘宝商品信息背景介绍一、模拟登陆二、爬取商品信息1.定义相关参数2.分析并定义正则3.数据爬取三、简单数据分析1.导入库2.中文显示3.读取数据4.分析价格分布5.分析销售...
- OpenCV入门学习基础教程(从小白变大神)
-
Opencv是用于快速处理图像处理、计算机视觉问题的工具,支持多种语言进行开发如c++、python、java等,下面这篇文章主要给大家介绍了关于openCV入门学习基础教程的相关资料,需要的朋友可以...
- python图像处理-一行代码实现灰度图抠图
-
抠图是ps的最基本技能，利用python可以实现用一行代码实现灰度图抠图。基础算法是...
- 从头开始学python:如何用Matplotlib绘图表
-
Matplotlib是一个用于绘制图表的库。如果你有用过python处理数据，那Matplotlib可以更直观的帮你把数据展示出来。直接上代码看例子：importmatplotlib.pyplot...
- Python爬取爱奇艺腾讯视频 250,000 条数据分析为什么李诞不值得了
-
在《Python爬取爱奇艺52432条数据分析谁才是《奇葩说》的焦点人物？》这篇文章中，我们从爱奇艺爬取了5万多条评论数据，并对一些关键数据进行了分析，由此总结出了一些明面上看不到的数据，并...
- Python Matplotlib 库使用基本指南
-
简介Matplotlib是一个广泛使用的Python数据可视化库，它可以创建各种类型的图表、图形和可视化效果。无论是简单的折线图还是复杂的热力图，Matplotlib提供了丰富的功能来满足我们...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- Python 操作excel的坑__真实的行和列
- Python os.path模块使用指南:轻松处理文件路径
- Python常用内置模块介绍——文件与系统操作详解
- Python Flask 建站框架实操教程（flask框架网页）
- 为你的python程序上锁:软件序列号生成器
- PO设计模式全攻略，在 UI 自动化中的实践总结(以企业微信为例)
- 这种小工具居然也能在某鱼卖钱?我用Python一天能写...
- python打包成exe，程序有图标，但是任务栏和窗口都没有显示图标
- 使用Python构建电影推荐系统（用python做推荐系统）
- python爬取并分析淘宝商品信息（python爬取淘宝商品数据）
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)