![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
大前端
文章平均质量分 87
whhlu
夕阳下前端小白的刷怪之路!
展开
-
微前端简介
微前端(Micro frontends)复杂、跨团队、高性能要求的项目同时保证 DX 和 UX 的困境?开发者体验:MPA,我不管其它管理平台,它们不要影响我!用户体验:SPA,入口找得到,页面跳转不要白屏!微前端架构一种架构理念:将单一的web应用拆解成多个可以独立开发、独立运行、独立部署的小型应用,并将它们整合为一个应用子系统之间开发、技术体系、测试、发布、监控隔离子系统之间可通信方案对比路由分发式: 通过 HTTP 服务器的反向代理功能,来将请求路由到对应的应用原创 2021-10-20 18:09:57 · 2511 阅读 · 0 评论 -
可视化搭建系统 原理介绍与对比
未来前端的机会在哪里?-圆心搭建服务;Serverless;智能化;IDE。前端三件套:提升效率;性能/体验优化;保障质量。提升:商业化的思考能力;数据化的能力;产品化的能力。是什么?前期介绍原始:页面渲染后是一棵 HTML 元素构成的树前端框架:页面是由组件树组成,组件内部维护自身的 HTML 元素结构、样式和功能逻辑, 并通过组件的 props 获取外部传入的数据页面可视化搭建, 是用可视化交互的方式对页面的 HTML Tree, 属性 和 动态逻辑 进行增删和修改,.原创 2021-08-02 11:36:56 · 483 阅读 · 0 评论 -
React基础再回顾
从16年夏天初学React,到17年正式投入到工作中使用,直到现在V16.2发版,React发生了巨大的变化,最近在工作中使用时遇到很多基础不是非常清晰,借此再读React官方文档【中文】。React核心的单向数据流、一切皆数据的state、不会改变的props,以及状态提升等等经常使用便不多总结,需要的看官方文档。JSXJSX 本质只是为 React.createElem...原创 2018-03-10 21:38:34 · 217 阅读 · 0 评论 -
javascript阻止浏览器默认行为,兼容性解决方案
先看一段代码://阻止浏览器默认行为触发的通用方法 function stopDefault(e) { if (e && e.preventDefault) { e.preventDefault();//防止浏览器默认行为(W3C) } else { window.event.retu...原创 2018-05-10 16:07:48 · 9436 阅读 · 0 评论 -
令人愉悦的性能统计分析工具-hiper 【发个copy】
Hiper · �� A statistical analysis tool for performance testing 令人愉悦的性能统计分析工具The name is short for Hi **per**formanceThe outputInstallnpm install hiper -g# or use yarn:# y...转载 2018-06-05 15:12:25 · 1183 阅读 · 0 评论 -
【翻译】GRAIL-手写识别
阮一峰推特更新推荐一篇外文,闲来无聊,就(工具)翻译一波,菜鸟英文欢迎指正。原文链接 文中包含大量演示案例,如果有人关注这篇文章可以给我留言,我将继续整合中文版代码演示案例。翻译原文 上图汤姆·艾利斯在20世纪60年代使用RAND平板电脑与屏幕上的图像进行交互。前因后果在这篇文章中,我们将重温Gabriel Groner 对圣杯计划的贡献。格罗纳发明了一个非常聪明...翻译 2018-06-13 17:22:11 · 368 阅读 · 0 评论 -
【深入理解webpack】library,libraryTarget,externals的区别及作用
经过前端框架的迅猛发展,大家开始慢慢对模块化习以为常但却不知道通过script引入和require(import)引入的区别。如何引入取决于之前如何导出,在重构一个验证码老项目时,不知如何把项目导出为可通过script引入后使用内部方法?情景简化为如下:插件代码import {util} from 'util'import styles from 'css'expo...原创 2018-06-07 20:32:24 · 9208 阅读 · 0 评论 -
Chrome DevTools的Network面板
Network 面板记录页面上每个网络操作的相关信息,包括详细的耗时数据、HTTP 请求与响应标头和 Cookie,等等。Network 面板概览Controls。使用这些选项可以控制 Network 面板的外观和功能。Filters。 使用这些选项可以控制在 Requests Table 中显示哪些资源。提示:按住 Cmd (Mac) 或 Ctrl (Windows/Linux) ...原创 2018-10-25 14:25:56 · 3068 阅读 · 0 评论 -
zepto绑定事件改变冒泡事件流
如果你写zepto操作DOM元素不多,肯定不会认为它会改变冒泡事件流。Zepto 的事件委托是:在代码解析的时候,所有document的所有 click 委托事件都依次放入一个队列里,click 的时候先看当前元素是不是.a,符合就执行,然后查看是不是.b,符合就执行。话不多说,直接看案列:<div class="a"> A <div class=...原创 2018-11-15 15:23:50 · 455 阅读 · 0 评论 -
组件库按需加载 借助babel-plugin-import实现
对于大中型前端项目为了解耦与复用,更多的公司会选择自己封装组件库,那么一次引入整个组件库必然导致项目过大,如何按需加载则必须要做前世 ant-design的babel插件babel-plugin-import原理 [git项目地址](https://github.com/ant-design/babel-plugin-import)在babel转码的时候,把整个库‘antd’的引用,变...原创 2019-05-28 22:56:02 · 2419 阅读 · 1 评论 -
用工具思路来规范化 git commit message
为什么要规范 Git Commit Message发生问题快速识别问题代码commit和代码建立联系,和相关prd、bug予以关联。如何写出规范化的 Git Commit Message选用当前业界内应用比较广泛的 Angular Git Commit Guidelines<type>(<scope>): <subject><BLANK L...原创 2019-06-12 09:51:44 · 1515 阅读 · 1 评论 -
【前端】性能优化 - WebP
[外链图片转存失败(img-CGVOyWb7-1562054149238)(evernotecid://D0AE4054-ADFA-401E-B09B-0C01AF6E4F1D/appyinxiangcom/13527544/ENResource/p1994)]前言不管是PC还是移动端,图片一直是流量大头。评价网站性能好坏的一个主要指标就是页面响应时间,也就是说用户打开完整页面的时间。基于...原创 2019-07-02 15:57:15 · 2978 阅读 · 0 评论 -
前端性能优化
一、简介web 性能优化包括:无用代码移除 (Tree-shaking)、作用域提升(Scope hoisting)、代码分割(Code-spliting),交叉观察器(Intersection observer)、服务器推送(server push)、客户端提示(clients hints)、HTTP/2、service workers 等等这些手段。性能优化不是在开发之后!根据性能的影响...原创 2019-07-03 19:30:55 · 341 阅读 · 0 评论 -
GMTC 全球大前端技术大会2019汇总(持续更新)
Flutter 最新进展与未来展望主题演讲嘉宾:董韬Google Flutter 团队 高级研究员GMTC2019演讲实录|闲鱼基于Flutter的架构演进与创新专题演讲嘉宾:于佳(宗心)阿里巴巴 闲鱼客户端团队负责人基于跨平台框架 Flutter 的动态化平台建设专题演讲嘉宾:刘志磊美团 大前端技术专家前端开发编程语言的过去、现在和未来Hax(贺师俊)360...原创 2019-07-10 10:45:01 · 2080 阅读 · 0 评论 -
webpack学习笔记—优化缓存、合并、懒加载等
除了前面的webpack基本配置,还可以进一步添加配置,优化合并文件,加快编译速度。转载 2017-10-26 18:16:39 · 566 阅读 · 0 评论 -
使用WebUploader解决安卓微信浏览器上传图片中遇到的bug
【摘自ZAZ个人博客】:走啊走的记录,欢迎点击查看,效果更佳!微信浏览器上传图片bug的原因微信在新版本中采用的是自己的X5内核浏览器,而在较老的版本中还有可能是安卓的原生浏览器。具体的环境我也不太了解,但是经过实际多台安卓机型的测试,我采取的方案可以基本确保在安卓机中微信浏览器的成功上传。苹果机型没问题,因为微信的ios客户端使用的是Safari的内核,没有各种坑,且效果最好。原创 2016-11-15 10:58:09 · 7273 阅读 · 0 评论 -
React 中 context 的使用
【引自ZAZ个人博客 [走啊走的记录] - React 中 context 的使用】官方文档说明(英)看了别人写的中文博客,再看了官方英文文档,发现还是官方文档讲的浅显易懂一些,看了之后,半翻译半理解地写了这篇博客,更易于新手理解。介绍context 是在 react @ 0.14 版本以后发布的一个高级且实验性的功能,有可能在未来做出更改。不推荐频繁使用原创 2016-11-15 19:51:51 · 999 阅读 · 0 评论 -
七牛 js JDK使用 - 上传APP
【整理whh-原文地址】背景介绍使用JS将APP(包括安卓和IOS)上传到七牛 (上传APP所以不考虑数据处理)uptoken使用JAVA后台得到七牛上传基于plupload下面不详述如何使用参见七牛上传的简单案例也不详述,参见官网事例很清楚了。就是参数一定看仔细!清除缓存问题IOS APP上传icon和ipa自动生成plist原创 2016-11-11 13:32:34 · 1893 阅读 · 0 评论 -
【收集-转载】前端布局
感谢csdn原文:浅谈前端移动端页面开发(布局篇) 感谢:移动前端自适应解决方案和比较 使用Flexible实现手淘H5页面的终端适配原创 2017-03-28 11:16:48 · 269 阅读 · 0 评论 -
响应式开发网站
FlexLayouthttps://github.com/whhlulu/ResponsiveWeb响应式布局原创 2017-03-28 11:22:40 · 759 阅读 · 0 评论 -
[转载]一个由React.js编写的新闻WebApp
ReactNewsApp介绍一个由React.js编写的新闻WebApp。 A news WebApp by React.js. 本应用仅供学习,请不要用于商业用途,供学习交流�� 因为技术有限,所以可能有好多不足,欢迎提建议哦��转载 2017-03-30 09:17:24 · 3747 阅读 · 2 评论 -
介绍npx:一个npm包执行器
【翻译】原文来自medium,作者Kat Marchán如果你把NPM升级到最新版本,npm@5.2.0,可能会发现,它会安装一个新的包npx。npx是一个工具,旨在提高从npm注册表使用软件包的体验 ,npm使得它非常容易地安装和管理托管在注册表上的依赖项,npx使得使用CLI工具和其他托管在注册表。它大大简化了一些事情,到目前为止,如何安装npx:使用本地安装的工具没有 npm翻译 2017-10-27 12:19:10 · 20492 阅读 · 0 评论 -
Js数组排序函数sort()介绍
原文:Js数组排序函数sort()介绍转载 2017-03-28 13:30:18 · 920 阅读 · 0 评论 -
如何实现响应式图片?
如何挑选第三方组件,轮播carousel插件,owl-carousel2响应式图片图片压缩,与webp原创 2017-03-28 11:20:28 · 1119 阅读 · 0 评论 -
[转]HTML5离线存储和本地缓存
感谢原文一.离线存储有一个web应用有三个文件index.html,a.js,b.css,现在需要把js和css文件缓存起来1.在index.html里加上2.manifest清单格式如下CACHE MANIFEST#上面一句必须#v1.0.0#需要缓存的文件CACHE:a.jsb.css#不需要缓存的文件NETWORK:*#无法访问页面FALLBACK:404.html3转载 2016-12-15 09:12:43 · 757 阅读 · 0 评论 -
学习“HTML5 移动webapp阅读器”心得
【整理自whh】先来点题外话:实习ing,工作之余想找些开源的项目学习一波,看着慕课实战的项目不错,通过多番寻找在某鱼上面找了一个“HTML5 移动webapp阅读器”学习视频,然后就花了两天时间学习恶补了一波,希望大家多多指正!项目源码:https://github.com/whhlulu/webappbook有视频资源需要的另外联系!想搞一个在线案例,新人小白不会搞,会的可以交流一波!原创 2016-11-11 17:26:17 · 3672 阅读 · 3 评论 -
【转】理解CSS模块化
[原文链接:][1] https://www.sitepoint.com/understanding-css-modules-methodology在瞬息万变的前端开发世界中,很难找到一个真正有意义的概念,并且将其清晰明了的向广大人民群众普及。把目光投向CSS,一个重大转折就是CSS预处理器的出现(在工具方面来看),其中, Sass应该是最为著名的一个。此外,还有 PostCSS,它和Sass略有不转载 2016-11-13 20:26:28 · 318 阅读 · 0 评论 -
css3制作广告栏效果的疑问?
【整理自whh-原文地址】 本人新手,国庆苦逼加无用班,那是我在夕阳下的奔跑吗?闲来无聊整理以前学习的资料,关于广告栏的效果制作,详情观看这里。其中用了一个作者自己写的move.js插件也就是移动动画完成(重点就是定时器setinterval如果有人有代码欢迎送上);另一个就是用jq完成,下面主要说说jquery的实现方法吧。 jquery实现的重点就是animate方法,这是官网。原创 2016-11-11 17:34:53 · 463 阅读 · 0 评论 -
《WEB全栈工程师的自我修养》——读后心得
【整理自ZAZ-原文地址】原创 2016-11-11 17:38:17 · 1009 阅读 · 0 评论