
web前端开发技术
文章平均质量分 54
SZ_FED
学如逆水行舟,不进则退。
展开
-
动态闪动文字
css的高级用法原创 2023-02-01 14:34:33 · 1753 阅读 · 0 评论 -
使用jquery准确获取iframe中的元素
window.onload=function(){// 确保jquery 可用//先获取iframe的document对象,在最外层window中加载的js默认会使用最外层的document对象,直接使用$("iframe.子元素")大概率取不到元素 let iframeDocument=$("iframe[name='iframeName']")[0].contentWindow.document; let targetDom=$(iframeDocument).find('子元素');}原创 2022-05-16 17:19:33 · 4231 阅读 · 0 评论 -
requested an insecure resource的解决方法
在一次接口调试中遇到以下问题:出现原因:跨域请求配置只有POST,未加上OPTIONS,这是浏览器自身安全限制,必须要这样写的options是解决跨域。需要改成这样:response.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");改了之后先用options请求试一下,没问题,在用post测一下,没问题,即ok.参考链接:https://stackoverflow.com/ques原创 2022-05-10 11:39:36 · 478 阅读 · 0 评论 -
gulp 4.0.2打包配置
gulp 打包原创 2022-01-04 14:47:24 · 1474 阅读 · 0 评论 -
前端基础面试题
1. 请写出box-sizing属性的值及其含义答:content-box:在宽度和高度之外绘制元素的内边距和边框。border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制inherit:规定应从父元素继承 box-sizing 属性的值2.请描述 sessionStorage、localstorage及cookies三者之间的异同点答:从不同的方面列出相同点和不同点:含义:sessionStorage, localStorage, cookie这三者都可以翻译 2021-07-27 10:09:37 · 145 阅读 · 0 评论 -
排列显示阿拉伯语、数字及英文时的处理方法
这段时间参与开发沙特阿拉伯的网站模板,模板使用的语言是阿拉伯语,其显示顺序为从右到左,而中文、数字及英文的显示顺序为从左到右 ,所以当遇到一行文字内既有阿拉伯语又有数字和英文时会出现语序混乱的问题,如期待显示的文案为:按顺序写入,对应的代码如以下,其中currency_pay为变量,值为356SAR<span>الدفع الفعلي:{{currency_pay}}</span>显示为الدفع الفعلي : 356SAR金额356和货币符号SAR分开了,这样显原创 2021-02-24 12:59:12 · 4879 阅读 · 0 评论 -
在devServer中拦截请求,更改cookie
直接贴代码: devServer: { contentBase: __dirname + "/develop/", host: "localhost", port: 8000, historyApiFallback: false, inline: true, proxy: { '/proxy/': { target: 'http://www.bck.zero.net', changeOrigin: true, pathRewrite: { '原创 2021-01-26 17:07:21 · 1289 阅读 · 0 评论 -
await命令后面如果是一个 Promise 对象,则返回该对象的结果
async函数的await命令后面,可以是 Promise 对象和原始类型的值(数值、字符串和布尔值,但这时会自动转成立即 resolved 的 Promise 对象)。 const fetchMembers = async function (classList) { for (let i = 0; i < classList.length; i++) { let item = classList[i]; //await后面是一个promise对象,这时得到的结果原创 2020-09-09 20:21:51 · 6374 阅读 · 0 评论 -
vue源码中优秀的函数
读Vue源码时发现有一段函数优化的代码值得我们学习。它将每次执行函数后的值进行缓存,当再次执行的时候直接调用缓存的数据而不是重复执行函数,以此提高前端性能,这是典型的用空间换时间的优化,也是经典的偏函数应用。function cached (fn) { var cache = Object.create(null); // 创建空对象作为缓存对象 return (function cachedFn (str) { var hit = cache[str]; return hit |原创 2020-07-03 17:22:20 · 294 阅读 · 0 评论 -
通过插件postcss-pxtorem轻松实现px到rem转换,完成移动端适配
移动端适配:为什么要适配呢?使用px单位设置页面的大小时,不进行适配处理,在不同的设备中显示结果是这样的,分辨率越大,显示的元素越小。如下图1所示,使用的是px单位,未进行适配:iPhone5、iPhone6及iPhone6 Plus的显示效果:控制台看到的css单位为px:适配的方法有很多种,本节介绍之前开发项目使用的适配方法:使用post-loader 加 postcss-pxto...原创 2020-04-24 19:29:44 · 31932 阅读 · 5 评论 -
老版本浏览器兼容性问题的解决方案 (shim/polyfill)
if(!Array.prototype.push){ Array.prototype.push = function(item){ this[this.length-1] = item } }以上代码称为polyfill(或者shim),用来给老版本浏览器提供新版本浏览器所具有的新方法。polyfill 能有效地为不符合最新规范的老版本浏览器填补缺失的功能,让你能够通过可靠的代码来...翻译 2020-04-05 20:13:46 · 1172 阅读 · 0 评论 -
javascript 中容易出错的知识点
undefined : 指从未赋值;null : 指曾赋过值,但是目前没有值;NaN : 无效数值,失败数值,指执行数学运算没有成功,这是失败返回的结果。NaN != NaN; 值为true,判断是否为NaN需要用 ES6 新增的 Number.isNaN( .. ) ,不能用window.isNaN( … ), 因为window.isNaN( ‘foo’ ) 值为true。typ...原创 2020-04-04 13:53:51 · 184 阅读 · 0 评论 -
JavaScript 显示类型转换、隐式类型转换、 || 及&&逻辑运算符浅析
基本知识类型之间的转换通过以下内置函数(原生函数)来实现:1. String()2. Number( )3. Boolean( )注意:前面没有new关键字;抽象操作规则:toString : 显示转换其他类型为字符串JOSN.stringify() 在转换字符串、数字、布尔值和null时的规则和toString基本相同。toNumber :1. 使用方法 , 例: Nu...原创 2020-03-07 15:21:24 · 322 阅读 · 0 评论 -
vue-cli、webpack等打包工具在浏览器调试环境下的跨域解决配置方法
前端开发 浏览器调试环境下,需要配置localhost往实际后台接口的代理:以下是用不同工具时的配置方案:vue项目:vue.config.jsmodule.exports = { publicPath: './', outputDir: 'dist', assetsDir: 'static', devServer: { open: true, // 自动打开浏览器 ...原创 2020-03-05 16:37:58 · 407 阅读 · 0 评论 -
call、apply及bind用法解析
JavaScript中的函数也是对象,是一种可以被调用的对象。函数就是对象的一个子类型。 typeof functionName === "object"也说明了这一点。函数对象可以包含方法,我们今天要讨论的是函数的call、apply和bind方法。任何函数可以作为任何对象的方法来调用,哪怕这个函数不是那个对象的方法,函数作为对象的方法调用之后函数内部的this指向被绑定的对象。ca...原创 2020-02-08 15:42:07 · 212 阅读 · 0 评论 -
node环境和浏览器环境不同点简析
构造函数的prototype属性值 === 实例对象的__proto__属性值:有些书籍或者文档中提到的 [[Prototype]] 实际上就是指 __proto__例:在node环境中执行JavaScript代码得到的结果:node环境与浏览器环境的不同点简析:node环境中没有Window等全局对象,有global全局对象。对浏览器内置函数的处理不同。node环境中:浏览器...原创 2020-02-06 16:12:25 · 1101 阅读 · 0 评论 -
this的判断规则、Object.assign
对象遍历for … in : 循环遍历对象的属性值;数组遍历以下方式通过遍历数组下标得到值:forEach() : 遍历数组中的所有值并忽略回调函数中的返回值;map( callback ) : map方法对类型化数组中的元素调用提供的 callback函数,按照顺序,并且会从结果构造新的类型化数组every() : 会一直运行直到回调函数返回false;some() :...原创 2020-02-06 00:02:21 · 522 阅读 · 0 评论 -
使用npm踩过的坑
项目背景:项目使用的是前端框架是Vue , 使用Vue-cli搭建。web移动网页,嵌入原生APP访问。项目中用到一些与原生APP交互的通用的api方法,为了便于维护及场景通用,抽取了一个npm依赖包。通过以下配置请求地址方式放到package.json中:由于app-mobile-api这个抽取出来的api库放在公司代码仓库,且只能通过公司内网访问,所以执行 npm install ...原创 2019-12-31 17:11:44 · 594 阅读 · 0 评论 -
微信小程序开发--笔记
参考:微信小程序官方文档技术发展史:逻辑线程阻塞渲染线程,导致长时间的页面空白。小程序与普通网页的区别:小程序的渲染线程和脚本线程分别运行在不用的线程中。无法进行DOM操作;运行环境不同;开发环境不同;开始开发:申请账号,获得小程序AppID;安装开发工具,输入AppID;编辑,微信扫码预览;小程序代码构成:.json 配置app.json : 当前小程序的...原创 2019-12-25 18:07:17 · 170 阅读 · 0 评论 -
Promise对象
Promise初识生成实例:const promise = new Promise((resolve,reject)=>{//成功时执行,走thenresolve()//失败时执行,走catchreject()})promise实例.then(成功的函数,失败的函数(可选))//摘自阮一峰-ES6let promise = new Promise(function(re...转载 2019-12-13 10:54:46 · 133 阅读 · 0 评论 -
js事件循环(同步函数及异步函数)
Event Loop(事件循环)Event Loop 即事件循环,是指浏览器或 Node 的一种解决 javaScript 单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理。之所以称之为事件循环,是因为它经常按照类似如下的方式来被实现:while (queue.waitForMessage()) { queue.processNextMessage();}如果当前没有任...原创 2019-11-26 23:04:57 · 839 阅读 · 0 评论 -
监听事件系列之冒泡事件demo
事件冒泡定义:当一个元素上的事件被触发时,其所有父元素上的同类型事件都会被触发,这一过程叫做事件冒泡。这个事件从被触发的原始元素开始一直冒泡到DOM树的最上层。冒泡顺序为:原始元素 --> 父元素(一个或多个) --> body —> document —> window只要父元素注册了与子元素类型相同的事件,当子元素的事件被触发时父元素的事件就会被触发。问:事...原创 2019-11-22 11:48:35 · 697 阅读 · 0 评论