相关博客: Web前端学习笔记【1】 ---- 1. this在 JavaScript 中主要有以下五种使用场景 ---- 在全局函数调用中,this 绑定全局对象,浏览器环境全局对象为 window = { test: 'obj2test', getAge2: function () { console.log(this.test) } } return obj2; } }; obj.getAge().getAge2() // 'obj2test' // ============== var obj = { birth :@&=+$#")); 输出: http%3A%2F%2Fwww.w3school.com.cn http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F %2C%2F globalStorage 使用于Firefox2+的火狐浏览器,类似于IE的userData。 缺点:IE不支持。
经常被问到为什么前端不写性能分析相关的内容。我觉得有几个原因。 觉得写不专业;2. 不怎么感兴趣。 这个文章也只是梳理下有哪些工具可以用,并没有做深入的分析。 有的人可能看到页面是一次展示出来的,那就是前端设计的太差了。 另外,不同的浏览器用的内核不一样,所以展示的过程会有细微的差别。 还是回到工具上。 charlesproxy ? 这个瀑布视图是我觉得前端性能分析工具中做的最好看的。 各元素的响应时间一目了然。并且也把时间细分的非常好。 但可惜的是它只能支持windows,ipad,iphone。 不知道这个工具开发者是怎么想的。 并且这个工具的专业版也收费。 safari开发者工具 ? 如果是喜欢简洁的人,这个工具必然是首选。 以上的工具中,都有对前端做调试的功能,下个断点,改个页面参数,复制请求,重发请求,自组装请求之类的。 总之,对于前端的性能分析来说,工具真的已经做的非常完整清晰了。要是说分析时间消耗,看这些就够了。
画图工具 figma,我和同事在用的画图工具,色彩丰富,组件丰富,简单熟悉以后很好使。 processon,专业强大的作图工具,支持多人实时在线协作,可用于原型图、UML、BPMN、网络拓扑图等多种图形绘制。
,javascript模块打包方案(方案+工具+插件), - babel, TypeScript, 算是一类,ES编译器, - requirejs , seajs 是一类, 以前基于 commonjs, amd,cmd,umd 之类的模块类包加载方案的框架, - grunt , gulp , 前端工具,结合插件,合并、压缩、编译 sass/less,browser 自动载入资源, - react , angular , vue , backbone 是一类,mvc , mvvm , mvp 之类的前端框架, - jquery , zepto , prototype 是一类,前端 DOM , BOM 类库 , - - Ionic , NativeScript , React Native , Flutter , PhoneGap/Cordova , Xamarin 算是一类,Cross-Platform 开发工具 前端玩移动端 --weex 阿里的,目前来说还行吧。 --React Native ,Facebook的,写起来也凑合。
2.对象转JSON字符串JSON.stringify(response.principal)3.JSON字符串转JSON对象JSON.parse(principal)4.有个响应式对象,然后想清空所有属性 7.解析数组内容用逗号拼接我有个"0", "1", "2", "3", "4",我想输出:"0,1,2,3,4"const warningNotice = ["0", "1", "2", "3", "4 warningNoticeString = warningNotice.join(','); // 使用逗号作为分隔符console.log(warningNoticeString); // 输出: "0,1,2,3,4"8 方法:event.preventDefault()本人其他相关文章链接1.Vue3快速上手简介2.vue3第一章基础:创建Vue3.0工程,包括使用vue-cli 创建、使用 vite 创建3. vue3.0中的响应式原理、计算属性与监听属性4.vue3知识点:setup5.vue3知识点:ref函数6.vue3知识点:reactive函数7.vue3知识点:Vue3.0中的响应式原理和 vue2.
接触过很多部署网站的工具,总体来说分为静态网站托管和 serverless。 基本流程部署工具基本包含以下三大块:触发器、CI、CD触发器触发器指的是触发部署动作,分为两大类:cli: 腾讯云 TCD, vercel-cli 这类工具实现本地命令行登陆账号,通过本地命令行出发构建部署 静态网站部署vercelvercel 是一个前端明星团队。 { "version": 2, "builds": [ { "use": "node" }, { "src": "index.js", _//函数入口_ "use": "@vercel 总结当前处于云原生时代,对前端开发人员也越来越友好,各种部署工具层出不穷,我们只需要专注于自己的核心能力即可,能够被标准化的产业肯定会被标准化的,云函数也好,云托管也好,本质上就是让开发者能够更快更简单的去上线自己的创意
使用path来匹配路由,然后通过query来传递参数,这种情况下 query传递的参数会显示在url路由的两种模式 hash与history 对于Vue 这类渐进式前端开发框架,为了构建SPA(单页面应用 ),需要引入前端路由系统,这也就是Vue-router存在的意义。 前端路由的核心,就在于改变视图的同时不会向后端发出请求。 添加验证码2. 日常工作中用的最对的跨域方案是CORS和Nginx反向代理前端工程化webpack配置,webpack4.0有哪些优化点module.exports={entry: {},output: {},plugins
不论是什么样的前端面试,总会问到的一个问题:前端性能优化。相信如果这个问题没有答好,在面试中会很被动。于是,趁着这个天天宅的时期,好好的整理了一番。 、CSS代码可以内嵌在HTML中,比如:rem动态等5、避免使用iFrame6、使用骨架屏二、CSS优化加载优化1、避免使用css的@import2、避免使用通配符3、避免使用! 1、选择器嵌套尽量不要超过三层2、id选择器尽量不要嵌套3、使用继承体积优化1、提取公共CSS三、JS优化运行速度1、如果没有兼容问题,尽量使用原生方法2、根据兼容浏览器的最低版本,考虑是否使用polyfill3 (Webpack拆包)减少加载体积1、压缩图片2、压缩HTML、CSS、JS代码3、开启网络压缩,如:GZIP参考 前端进阶面试题详细解答减少加载次数1、制作精灵图2、将小图片转换为base64字符串3 、使用浏览器缓存4、使用前端缓存,如: LocalStorage、Cookie、SessionStorage等5、减少重定向请求,比如:nginx反向代理的重定向6、避免使用服务端字体五、React性能优化
文章的核心观点在于:我们不是缺前端工程师,我们是缺优秀的前端工程师。
我再激进一点,我的观点是:我们不是缺前端工程师,我们是缺优秀的具备匠心的工程师。 我们今天的主题是:当下前端开发的工具以及开发流程。
开发工具
1. 2. Sublime编辑器
Sublime是一个非常好用、非常现代的编辑器,据说是专业的前端都用它(Atom默默地瞪了我一眼)。 它的用法可以描述如下,写出表达式section>h2+p*3,光标在末尾的时候单击tab键,就会生成如下html代码。
主要是为了帮助大家搜集一下前端开发中要用到的一些东西,打造一个前端开发工具字典,方便大家查阅。 篇幅比较长,先给大家放一张脑图,看看自己的兴趣在哪,或者说自己需要补充哪方面的,可以从右边的导航栏查看,也可以直接打开我做的工具网站查看,分级明显。前端工具集~ ? 前端开发博客 - 汇集了很多前端有用的东西 搭建博客的工具 VuePress - 能帮助你快速搭建自己的博客,样式还不算很那看,但是更多的可以用作搭建文档。 开发工具 bootCDN - 各种开源库的 cdn 地址,加快开源库访问速度 Awesomes.cn - 前端各种资源库,想用的这里说不定都有 熊猫图片压缩 - 一个压缩图片的网站, chrome 上看 Axure 导出的文件 Postman:模拟请求,很强大,还可以敲代码 Mac工具 iTerm2 - 很强大的命令行 Homebrew - 方便 mac 进行安装软件
分析的方向除了业务本身的特点相关之外,常见的还可以借助一些工具来发现问题。 本文主要介绍前端性能分析可以怎么走~ 前端性能分析工具(Chrome DevTools) 一般来说,前端的性能分析通常可以从时间和空间两个角度来进行: 时间:常见耗时,如页面加载耗时、渲染耗时、网络耗时 由于我们的网页基本上跑在浏览器中,所以基本上大多数的工具都来源于浏览器自身提供,首选工具自然是 Chrome DevTools。本文我们也主要围绕 Chrome DevTools 来进行说明。 我们提及前端监控的时候,大多数都包括了真实用户监控。 TaskDuration: 浏览器执行的所有任务的合并持续时间 JSHeapUsedSize: 使用的 JavaScript 栈大小 JSHeapTotalSize: JavaScript 栈总大小 2.
Parcel 是 Web 应用打包工具,适用于经验不同的开发者。它利用多核处理提供了极快的速度。 https://parceljs.org/getting_started.html 配置了一个简易的web打包工具 https://github.com/MrZHLF/Parcel ? 脚本配置好之后,直接启动dev启动项目,build对项目的打包工具 npm run dev ? "regenerator": true, "useESModules": false } ] ] } 这个打包工具适合一些简易的
省时的浏览器同步测试工具 Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。 安装 Node.js BrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js 2. 打开一个终端窗口,运行以下命令: npm install -g browser-sync 当然您也可以结合gulpjs或gruntjs构建工具来使用,在您需要构建的项目里运行下面的命令: npm install 那么您只需要运行命令行工具,进入到该项目(目录)下,并运行相应的命令: 静态网站 // --files 路径是相对于运行该命令的项目(目录),以css为例: browser-sync start --server
前端性能分析工具-Lighthouse 目录 1、前言 2、简介 3、使用 1、前言 对于前端开发人员来说,除了实现页面功能外,那就是页面的性能响应问题也要关注。 同样对于测试人员在进行性能测试时,也要关注前端页面的性能指标。 测试前端性能市面上可以用到的工具也比较多,比如可以用 HttpWatch 进行页面的抓取与分析,或者也可以使用抓包工具如 Fiddler 抓接口的形式进行分析。 本篇将介绍一款前端性能分析工具,即集成在 Chrome 开发者工具-Lighthouse。 2、简介 Lighthouse 用于分析 Web 应用程序和网页,收集性能指标和对开发人员最佳实践的见解。 1、打开 Chrome 浏览器,跳转到要进行性能监控的页面,例如作者的 CSDN 地址:https://blog.csdn.net/wangmcn 2、之后打开 Chrome 开发者工具(快捷键 F12
[使用wavesurfer.js绘制音频波形图] wavesurfer.js是一个可自定义的语音音频可视化工具,建立于web audio和H5 canvas之上 将wavesurfer.js的包引用到项目中 ; console.log(Object.values(obj)); // ['bar', 42] // array like object var obj = { 0: 'a', 1: 'b', 2: $bus = new Vue(); 复制代码 2.发射事件 复制//GoodsList this.$bus.$emit("aaa") 复制代码 3.监听事件 复制//home.vue this. button: 事件属性返回一个阿拉伯数字 , 0代表 按下 左键 ,1 代表按下 滚轮 ,2 代表按下 右键。 例如,“o{2}”不能匹配“Bob”中的“o”,但是能匹配“food”中的两个o。 {n,} n是一个非负整数。至少匹配n次。
p=478 一般来讲优化前端,涉及到文件优化的有合并、压缩JS和CSS,以及对图片的优化处理,这篇文章的工具很不错,强烈推荐一下。 整理一下我现在用的命令行工具。各有优缺点,混搭着用。 -0.0.1.jar -v -o myfile.js *.js java -jar combiner-0.0.1.jar -v -o myfile.js myfile-1.js myfile-2. smusher imgs/*.* smusher imgs/*.* --service PunyPng Mac下安装: 第一次安装smusher失败,缺东西需要先装xcode(OS安装盘2上有 其实这不算命令行工具,这工具还是有点用的 Rhino + JSLint Javascript/html代码品质检查工具。 my_js_file.js JRE 1.6 (Soylatte16-1.0.2 ) : http://hikejun.com/download/soylatte16-i386-1.0.2.tar.bz2
译文出自:登链翻译计划[1] 译者:翻译小组[2] 校对:Tiny 熊[3] 如果你最近一直在尝试用 React 和 Redux 构建 dapp 前端,估计你已经意识到不能只专注于 dapp 做什么,为了使用 我们来看看它是怎么工作的,怎么用它来构建 dapp 前端。 什么是 drizzle store?它是怎么工作的? > truffle console > compile > migrate 2、初始化 React 应用 在同一个项目中,用create-react-app创建一个名为 client 的新文件夹。 swlh/dapp-front-end-drizzle-store-df39b35b167b 参考资料 [1]登链翻译计划: https://github.com/lbc-team/Pioneer [2]
我在最近的前端项目中用到了 vite 与 swc 作为构建工具和 JavaScript 编译器,二者都比较年轻,但提供更优秀的前端开发体验。 当下前端生态的新选手层出不穷,本文就简单介绍一下最近几年前端生态涌现的诸多新兴的技术与工具。 Node.js 包管理工具 yarn v2 yarn v2做了很多改进,比如使用 Plug’n’Play 模式进行依赖项解析,提高性能与可靠性;支持零安装模式;对 monorepo 的支持更好等。 vite vite是一个新兴的前端构建工具,在开发时使用 HMR 技术实现秒级的热更新,编译时使用 esbuild 和 Rollup 进行编译与打包,速度非常快。 前端框架(React.js 生态) next.js next.js是一个 React 框架,提供了 SSR、SSG、CSR 等多种渲染模式,同时提供了很多优秀的功能,比如图片优化、代码分割、预取、预加载
grunt是什么 grunt是目前非常流行的前端构建工具,支持自定义插件,有丰富的插件帮助我们完成构建任务 自动化完成我们指定的任务,例如压缩、编译、单元测试、linting等 前端为什么需要构建工具 先看下前端的开发场景 小项目中,css文件和js文件并不多,前端部分是很轻的,几乎不需要我们特别的关注 而在一个大项目中,css文件和js文件的数量会达到几十个上百个,一个页面中会引用很多css和js 的开发越来越复杂,那么我们就需要生成文档,来描述各个模块和方法 这时我们就会发现,开发之外的工作繁琐了很多,不仅需要写好代码,还需要做好 合并压缩、单元测试 等一系列的工作,我们就会渴望有一个便利的构建工具来完成这些工作 grunt能做什么 我们在grunt中定义好各个任务,让grunt来自动完成这些任务 例如: (1)合并压缩,把多个js或css文件合并、压缩 (2)对js进行语法检查 (3)js单元测试 (4)
,使得很多前端新入者都以为,学会了这些就是学会了前端,学会了这些,就可以胜任前端开发的工作。结果自然是否定的,许多同学不管是自学还是培训,学完了一样找不着工作。 难道只是单纯的因为他的某个工具或是框架比你熟练?也许这是原因之一,但这就是唯一决定性的吗? 我相信许多同学并没有深入的想过这些个问题。 前端开发是做什么的? 它是解决问题的,主要是解决业务流程在前端表现层的交互和实现。在这其中,工具只是一种手段。 angular是不是工具?vue是不是工具?React它也是工具吧?它们都是在原生Js基础上进行的封装。 不操作dom的前端框架是不存在的,而操作dom是前端开发的基本功之一。 那么,刨除前端工具这一块,如何衡量一个前端开发是好是坏? 一、他的学习能力。遇到不懂的可以很快学会; 二、他的解决问题的能力。 这种能把事情想清楚,理明晰的能力,才是前端开发工程师真正的价值体现。而不是会几个工具,会几个框架。框架与工具只是为实现思想的工具。