首页 文章 精选 留言 我的

精选列表

搜索[前端性能]，共10012篇文章
优秀的个人博客,低调大师

前端杂谈: Attribute VS Property

第一个问题: 什么是 attribute & 什么是 property ? attribute 是我们在 html 代码中经常看到的键值对, 例如: <input id="the-input" type="text" value="Name:" /> 上面代码中的 input 节点有三个 attribute: id : the-input type : text value : Name: property 是 attribute 对应的 DOM 节点的 对象属性 (Object field), 例如: HTMLInputElement.id === 'the-input' HTMLInputElement.type === 'text' HTMLInputElement.value === 'Name:' 第二个问题: 从上面的例子来看, 似乎 attribute 和 property 是相同的, 那么他们有什么区别呢? 让我们来看另一段代码: <input id="the-input" type="typo" value="Name:" /> // 在页面加载后, 我们在这个input中输入 "Jack" 注意这段代码中的 type 属性, 我们给的值是 typo, 这并不属于 input 支持的 type 种类. 让我们来看看上面这个 input 节点的 attribute 和 property: // attribute still remains the original value input.getAttribute('id') // the-input input.getAttribute('type') // typo input.getAttribute('value') // Name: // property is a different story input.id // the-input input.type // text input.value // Jack 可以看到, 在 attribute 中, 值仍然是 html 代码中的值. 而在 property 中, type 被自动修正为了 text, 而 value 随着用户改变 input 的输入, 也变更为了 Jack 这就是 attribute 和 Property 间的区别: attribute 会始终保持 html 代码中的初始值, 而 Property 是有可能变化的. 其实, 我们从这两个单词的名称也能看出些端倪: attribute 从语义上, 更倾向于不可变更的 而 property 从语义上更倾向于在其生命周期中是可变的 Attribute or Property 可以自定义吗? 先说结论: attribute 可以 property 不行 我们可以尝试在 html 中自定义 attribute: <input value="customInput" customeAttr="custome attribute value" /> 然后我们尝试获取自定义的属性: input.getAttribute('customAttr') // custome attribute value input.customAttr // undefined 可以看到, 我们能够成功的获取自定义的 attribute, 但是无法获取 property. 其实不难理解, DOM 节点在初始化的时候会将html 规范中定义的 attribute 赋值到 property 上, 而自定义的 attribute 并不属于这个氛围内, 自然生成的 DOM 节点就没有这个 property. 一些补充 需要注意, 有一些特殊的 attribute, 它们对应的 Property 名称会发生改变, 比如: for (attr) => htmlFor (prop) class (attr) => className (prop) (如果我们追到 DOM 的源码中, 应该是能列出一份清单的: 哪些 attribute 的名称会对应到哪些 Property, 感兴趣不妨试试) 关于 attribute 和 property 两者之间的差别, stackoverflow 上有一些很有意思的讨论: https://stackoverflow.com/a/6377829/5033286 其中有些人认为 attribute 的值表示的是 defaultValue, 而 DOM 节点的 Property 则是另一回事. 比如: check (attr) 对应的是 defaultChecked (prop), value(attr) 对应的应该是 defaultValue (prop) 关于我们在 attribute 中 value 的限制 (如 input 的 type 有那些有效值), 可以参考这个链接: https://www.w3.org/TR/html5/infrastructure.html#reflect 想了解更多 D3.js 和 数据可视化 ? 这里是我的 D3.js 、 数据可视化 的 github 地址, 欢迎 star & fork :tada: D3-blog
2018-11-12
优秀的个人博客,低调大师

快速了解 前端打包 webpack

一、介绍 （1）概念 webpack 用于编译 JavaScript 模块，是JavaScript 静态模块的打包工具。从 webpack v4.0.0 开始，可以不用引入一个配置文件。 （2）核心 1.入口(entry)：指定webpack打包编译从哪个文件开始下手 入口起点(entry point)指示 webpack 使用哪个模块，作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。 webpack.config.js： module.exports = { entry: { main: './src' //打包入口，来指定一个入口起点（或多个入口起点,默认值为 ./src) }, entry: './src', //这个是上面的简写方式，是等价的 entry: { home: "./home.js", about: "./about.js", contact: "./contact.js" },//对象法指定多个入口,如果你想要多个依赖一起注入到一个模块,向 entry 属性传入「文件路径(file path)数组」。 entry: () => new Promise((resolve) => resolve(['./demo', './demo2'])),//动态入口,当结合 output.library 选项时：如果传入数组，则只导出最后一项 }; 2.出口(output)：指定webpack打包编译后的路径及文件名 output属性告诉 webpack 在哪里输出它所创建的bundles，以及如何命名这些文件。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。 webpack.config.js： const path = require('path'); module.exports = { entry: './src',//配置入口路径 output: { path: path.resolve(__dirname, 'dist'),//打包文件夹名，默认值为./dist filename: '[name].js'//入口文件名 } }; 3.loader(加载器)：webpack识别不了的语言通过加载器来翻译 loader 用于转换某些类型的模块，webpack 自身只理解 JavaScript，loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块。loader 能够import导入任何类型的模块（如.css），是 webpack 特有的功能，其他打包工具有可能不支持。 webpack.config.js： const path = require('path'); const config = { output: { filename: 'my-first-webpack.bundle.js' }, module: { rules: [//在 webpack 配置中定义 loader 时，要定义在module.rules中,里面包含两个"必须属性"：test和use { test: /\.txt$/, //test定义需要使用相应 loader 进行转换的某类文件 use: 'raw-loader' //use定义使用哪个 loader 进行转换 } ] } }; module.exports = config; 常见的例子： 4.插件(plugins)：webpack完成不了的功能通过插件来完成 插件接口功能极其强大，可以用来处理各种各样的任务。通过require()使用插件，然后把它添加到plugins数组中。多数插件可以通过选项(option)自定义。 webpack.config.js： const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装 const webpack = require('webpack'); // 用于访问内置插件 const config = { module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] }, plugins: [ //在一个配置文件中因为不同目的而多次使用同一个插件，需要通过使用new操作符来创建它的一个实例 new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({template: './src/index.html'}) ] }; module.exports = config; 5.模式(mode)：通过模式确定是开发环境还是生产环境以便加载不同配置 module.exports = { mode: 'production'//通过选择development(开发)或production(生产)，启用相应模式下的 webpack 内置的优化 }; 二、安装 （1）安装nodeJs webpack 配置是标准的 Node.js CommonJS 模块，在安装webpack之前，请确保安装了Node.js的最新版本，使用旧版本可能遇到各种问题（可能缺少 webpack 功能或者缺少相关 package 包）。 （2）安装webpack 1.本地安装 对于大多数项目，我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。 npm install --save-dev webpack //安装最新版本 npm install --save-dev webpack@<version> //安装特定版本 操作如下： 2.全局安装 不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。 npm install --global webpack 3.最新体验版本 最新体验版本（可能仍然包含 bug）不应该用于生产环境 //直接从 webpack 的仓库中安装 npm install webpack@beta npm install webpack/webpack#<tagname/branchname> 4.安装 CLI 如果你使用 webpack 4+ 版本，你还需要安装 CLI。 npm install --save-dev webpack-cli //webpack-cli用于在命令行中运行 webpack 操作如下： 三、配置(configuration) webpack 的配置文件，是导出一个对象的 JavaScript 文件。webpack 需要传入一个配置对象(configuration object)， 根据对象定义的属性进行解析，因此很少有 webpack 配置看起来很完全相同。可以通过两种方式（终端、Node.js）使用 webpack。 webpack 配置是标准的 Node.js CommonJS 模块，你可以： 通过require(...)导入其他文件，使用 npm 的工具函数 使用 JavaScript 控制流表达式 对常用值使用常量或变量 编写并执行函数来生成部分配置 请在合适的时机使用这些特性，虽然技术上可行，但应避免以下做法： 在使用 webpack 命令行接口(CLI)（应该编写自己的命令行接口(CLI)，或使用--env）时，访问命令行接口(CLI)参数 导出不确定的值（调用 webpack 两次应该产生同样的输出文件） 编写很长的配置（应该将配置拆分为多个文件） 你需要从这份文档中收获最大的点，就是你的 webpack 配置，可以有很多种的格式和风格。但为了你和你的团队能够易于理解和维护，你们要始终采取同一种用法、格式和风格。 基本配置 webpack.config.js const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装 const webpack = require('webpack'); //访问内置的插件 const path = require('path'); const config = { entry: './path/to/my/entry/file.js', output: { filename: 'my-first-webpack.bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /\.(js|jsx)$/, use: 'babel-loader' } ] }, plugins: [ new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({template: './src/index.html'}) ] }; module.exports = config; 也可以 多个 Target：导出多个配置，或者，使用其他配置语言，webpack 接受以多种编程和数据语言编写的配置文件。
2018-09-21
优秀的个人博客,低调大师

xss前端预防措施

用户在输入框中输入个js标签 或者在 src 上传图片，路径干个 alert 干扰程序，评论的时候，也干一下 1.输入过滤 对于用户提交的数据进行有效性验证，仅接受指定长度范围内并符合我们期望合适的内容提交，阻止或者忽略除此之外的其他任何数据。比如：电话号码必须是数字，而且要设置长度限制。过滤一些常见的敏感字符，例如：《》‘’ “” &#\javascript expression "onclick=" "onfocus" ; 过滤或者移除的特殊html标签，例如：<script>,<iframe>,&lt;for < &gt; for > , &quot for ; 过滤javascript事件的标签。输出编码，当需要将一个字符串输出到web网页的时候，同时又不确定这个字符串是否包含xss特殊字符（如<> & "等），为了确保输出内容的完整性和正确性，可以使用编码（HTMLcode）进行处理 2.DOM型的xss攻击防御 把变量输出到页面的时候要做好编码转义工作，如要输出到<script>中，可以进行JS编码；要输出到html内容或者属性，则要进行html编码处理，根据不同的语境采用不同的编码处理方式。 3.httpOnly cookie 将重要的cookwebie设置为httpOnly,这样的话当浏览器向web服务器发起请求的时候就会带上cookie字段，但是在脚本中却不能访问cookie，这样就避免了xss攻击利用javascript的document。cookie来获取cookie.
2018-08-07
优秀的个人博客,低调大师

前端特殊错误，Bug汇总

一直在做移动端的网页，遇到的各种问题感觉丝毫不下于PC端的各种浏览器兼容，这里总结一下，也是对自己的一个知识梳理 JavaScript UC白屏问题 错误表现：网页在微信和QQ内置浏览器访问正常，但是UC和大部分的手机自带浏览器访问页面会出现白屏，打印调试后发现，JS代码一句都没有执行。 解决：这种问题是因为使用了浏览器不支持的语法导致的，第一种是ES6没有转换为ES5。但是很多人使用了Babel转义后依然会出现这种情况，这就是第二种错误：使用了浏览器不支持的Api。某些函数方法是不会被Babel转义的，但是浏览器依然不支持。例如Object.freeze()冻结函数，使用了这个方法后即使进行Babel转义，UC和自带浏览器中也会出现白屏。 // 特意去babel官网去测试了一下，只是比原代码多加了一个 'use strict' Object.freeze({ a: 0 }) // => "use strict"; Object.freeze({ a: 0 }); 这样的 Api 应该有很多，如果项目中出现了这个错误，不知道错误具体出现在哪儿，那就只能用二分法慢慢排除了。 UC浏览器返回上一页不刷新页面 表现：这个属于浏览器的特殊行为了，特点是UC浏览器返回上一页时不会更新页面。 解决： // 第一种方法，强制刷新页面，当从pageB返回到pageA时，刷新页面 //（pageA => pageB => pageA => upDated） $(window).on('pageshow', function (evt) { setTimeout(function () { if (evt.persisted) { location.reload(true) } }, 10) }) // 第二种方法，在跳转到新的页面前把页面回归到想要的状态 //（pageA => upDated=> pageB） // 在pageA 跳转到pageB前执行 btn.onclick = function() { setTimeout(function() { upDated() // 更新待会返回时想要的页面的状态 }, 0) location.href = "{{跳转的域名}}" } 移动端浏览器左右滑动导致的BUG 表现：现在的手机浏览器很多都自带左右滑动前进后退的，但是如果你有一个轮播图或其他一些触发touch事件的元素，有时就会和浏览器自带的行为有冲突。 解决： 在touchstart中加入e.preventDefault()可以阻止浏览器的自带行为。然后会发现click事件无法触发了，在移动端，浏览器认为执行了touchstart和touchend才算一次完整的点击，但是由于在touchstart中加入了e.preventDefault()导致点击事件不能触发，这时如果要出发click事件可以把e.preventDefault()放入touchmove事件中。就可以完美执行了。 但是在UC浏览器下，使用了e.preventDefault()后有时还会触发UC自带的行为，需要注意。。。 再附一篇相关博文 移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法 CSS IOS点击不触发事件回调函数 错误表现：在IOS中，点击非a标签的元素无法触发点击事件。 解决：这种情况出现在动态添加的Dom节点上，即使使用了事件代理，或者在Dom被添加后进行绑定都不会触发元素绑定的JS事件。解决方法是给Dom元素添加样式 cursor: pointer; 这样就可以正确触发事件了。 IOS下为元素添加overflow样式滑动变卡 错误表现：在IOS中，元素添加了overflow样式后，滑动惯性会被取消，导致滑动不顺畅。 解决：可以给元素添加-webkit-overflow-scrolling: touch;样式，解决一切滑动不顺畅问题，但是IOS下使用-webkit-overflow-scrolling: touch;会导致另外的Bug，position定位的元素如果和设置了overflow的元素是兄弟关系或父子关系，会导致定位元素也会随着一起滚动，需要注意。 系统版本过低导致flex布局失效 错误表现：移动设备的系统版本过低时，flex布局失效 解决：设置display: flex;样式的子元素，必须是块级元素，否则失效（必须设置display: block;）。还有一点要注意，flex-wrap低版本的系统是完全不支持的，可以用display: inline-block;替代。 原文链接：http://blog.csdn.net/qq_25243451/article/details/78811776
2017-12-14

资源下载

更多资源
Nacos

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

时间: 2026-08-21 大小: 189MB 下载: 7次
Spring

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

时间: 2026-08-21 大小: 5MB 下载: 2次
Rocky Linux

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

时间: 2026-08-21 大小: 1.42GB 下载: 6次
WebStorm

WebStorm

WebStorm 是jetbrains公司旗下一款JavaScript 开发工具。目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。与IntelliJ IDEA同源，继承了IntelliJ IDEA强大的JS部分的功能。

时间: 2025-12-13 大小: 249.54MB 下载: 22次
热门标签
DeepSeek Jdk25 OpenAi HarmonyOS6 Nacos3 SpringBoot4 SpringCloud Docker Kubernetes Service Mesh Redis Gemini3 Rocky

欢迎您来访！

登录后，您将获得更多功能！
热门文章
联系我们

有任何问题或合作意向欢迎联系我们

Email: 99873273@qq.com

QQ: 99873273

用户登录
用户注册