网站前端

SVG、JavaScript、CSS、HTML、各种框架。Web前端开发是从美工演变而来的,名称上有很明显的时代特征。在互联网的演化进程中,Web 1.0时代,网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。

各种各样的框架让人目不暇接,新技术层出不穷。让我们这些前端狗情何以堪。

目前web前端工程师的年薪待遇平均在10万以上,高级HTML前端工程师年薪达30—50万,很多企业对于与web前端相关的技术职位更是求贤若渴。

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

2022年09月22日

今天在使用 webpack-cli 打包的时候,出现了如下错误:[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema. - configuration[0].module.rule...

css rem 理解

2022年08月04日

最近编写前端组件的时候,由于组件的字体大小使用的是 rem,导致组件在不同模板之间显示的样式不一样。之后详细了解了 rem 单位,总结如下:概括地说,rem 单位的意思是“根元素的字体大小”。概括地说,在排版属性中 em 单位的意思是“父元素的字体大小”。也就是 rem 是从 <html> 获取字体的大小,而 em 是从父元素获取字体的大小。下面是做的一个示例:<!DOCTYPE html><ht...

异步加载 CSS 的最简单方法

2022年06月09日

为了提高页面性能和弹性,我们可以做的最有影响力的事情之一:是以不延迟页面呈现的方式加载 CSS。这是因为默认情况下,浏览器会同步加载外部CSS——在下载和解析 CSS 时停止所有页面渲染——这两者都会导致潜在的延迟。当然,在允许页面开始渲染之前,至少应该加载网站的一部分 CSS,并且要立即将初始 CSS 获取到浏览器,我们建议内联(或 HTTP2 服务器推送)CSS。对于整体数量较少的网站,仅此一...

Angular disable 导致无法获取值的解决办法

2022年05月25日

最近再使用 Angular 写后台的时候,出现 FormControl Disable() 无法获取值,下面是示例代码:从后端获取值:getCloudEmailSubscribeInfo() { this.loading = true; this.sub = this.phoneNumber.getEmailSubscribeInfo(this.data.id).subscribe(r...

Javascript 取消事件默认行为

2022年05月21日

最近在使用表单的时候,默认点击按钮会通过 action 值提交到后端,导致无法在表单出现问题的时候,无法很好的给出提示,所以决定使用 Javascript JQuery.ajax() 向后台提交数据,所以首先是需要取消表单按钮的默认事件动作。取消默认事件的方法有下面三种方式:cancelabledefaultPreventedpreventDefault()returnValue我们在使用的时候,...

jQuery bind() 动态绑定无效解决方案

2022年05月12日

最近帮朋友写一个商城,在使用 jQuery .ajax() 动态生成内容时候,使用 .bind() 绑定,点击却无效。👇是示例代码:function checkoutAreaBox1IdAttr() { // checkout 页面用户选择送货地址动作 $("#province_boxIdAttr .group_item").bind("click", function ()...

Google reCAPTCHA 异步加载的方式总结

2022年04月25日

Google reCAPTCHA 作为一个可保护您的网站免受垃圾邮件和滥用。它使用先进的风险分析技术来区分人类和机器人。但是他的 js 库在加载的时候也是特别大,如果不适用异步加载,将严重影响网站加载速度,给用户带来不好的体验。我们看看如何使 Google reCAPTCHA 异步加载,下面是前端代码:<script src="https://recaptcha.net/recaptcha/api...

Javascript string false boolean

2022年04月20日

最近遇到一个类型为 string 的字符串,值为:false,如果直接判断,可能我们的想法相去甚远。所以需要将 string 类型的 false 转换成 boolean 类型。最佳写法:var isTrueSet = (myValue === 'true');上面使用了恒等运算符 ( ===),当比较变量具有不同类型时,它不会进行任何隐式类型转换。参考资料:1、How can I convert ...