前端工程化
文章平均质量分 72
前端工程化是一种思想,即用做工程的思维来看待和开发前端,具体来讲是指让前端开发在整个软件工程中代码规范化、流程规范化、接口标准化的管理思想。Angular/Reactjs/vue三分前端天下,目前深入研究为Angular.
杨晓风-linda
这个作者很懒,什么都没留下…
展开
-
h5如何使用navigateBack回退到微信小程序页面并携带参数
在h5中使用navigateBack回退到微信小程序页面很常见,但是有一种交互需要在回退之后的页面可以得到通知,拿到标识之后,进行某些操作,这样的话,由于微信官方并没有直接提供这样的api,就需要我们开动脑筋曲线救国一下:navigateBack + postMessage。原创 2023-11-23 12:20:09 · 1924 阅读 · 0 评论 -
代码规范之-理解ESLint、Prettier、EditorConfig
1、在代码格式化时采用Perttier规则,在代码校验时使用ESLint2、遇到项目内有多个层叠配置时,采用就近原则作为高优先级3、ESLint等解决的是团队开发规范的问题,并不能解决其他诸如编码能力、代码合理性等问题, 还属于工程化中比较弱的一环。EditorConfig 是用来抹平编辑器差异的,比如文件编码,锁进格式等ESLint 关注于代码质量校验 和 代码格式校验,配合插件支持autoFix和错误提示,完全可插拔。原创 2023-11-22 20:19:54 · 744 阅读 · 0 评论 -
Git玩转技巧
工作中,总结git的使用技巧原创 2023-11-22 19:48:20 · 120 阅读 · 0 评论 -
《Charles配置教程之Mac》
背景开发toc应用,开发调试和线上问题解决避免不了需要使用代理工具,进行抓包查看具体的url来确定接口、页面地址等一些内容。代理工具有Charles、W配置教程一、简介Charles是一款代理工具,通过拦截客户端(PC或者手机等终端设备)向后台服务器发送的请求,通过它向服务器发送请求,然后再将服务器返回的响应返回给客户端。通过这个工具可以实现截取请求和请求结果达到分析抓包的目的。二、下载安装安装链接:https://www.charlesproxy.com/或者其他的链接下.原创 2022-04-14 18:50:20 · 5236 阅读 · 0 评论 -
《H5的庐山真面目》
从 2014 年起,一个叫做 H5 的词出现了,稀里糊涂的火成了辣子鸡!背景不知何时,h5这个名词频繁出现在日常的工作交流中,虽然一直接触,期间也思考过什么是h5,也被人问起什么是h5,但没有系统地去搜索和思考过这个问题。今天小编站在巨人的肩膀上同时也结合自己开发的经验来谈一谈h5whatH5的定义众说纷纭,业界内也没有一个标准的定义,目前我比较认同的一种说法是:H5在狭义和广义上有两层含义,狭义上的H5只是一种编程语言,是HTML5的简略写法,而广义上的H5则涵盖了HTML5、CSS原创 2022-04-13 20:50:12 · 293 阅读 · 0 评论 -
《图片懒加载之react-lazyload》
背景懒加载是一种对网页性能优化的方式,而图片懒加载当一个网站加载图片过多时就需要懒加载的协助,从而提高页面的加载速度,减轻服务器的压力,节省流量。那么在react框架下,PC端的电商项目如何对商品feed流的图片做懒加载处理呢?下面跟随小编一起来看看……技术方案站在巨人的肩膀上通过百度等搜索引擎,react框架下有npm包专门针对图片懒加载:react-lazyload查看相关用法1、npm网站:react-lazyload - npm2、props属性 数据类型原创 2022-03-29 20:56:25 · 4324 阅读 · 1 评论 -
《Express之Node》
背景内容结语原创 2022-03-21 23:05:40 · 124 阅读 · 0 评论 -
《翻转组件库之搭建文档站点》
背景至此,组件库框架搭建、组件设计、打包、发布等都告一段落,本篇内容介绍搭建该组件库的文档站点,降低使用和维护成本资料1、VuePress官方文档:VuePress2、github网站:GitHub: Where the world builds software · GitHub流程具体实现文档结构初始化1、安装依赖包npm i -D vuepress2、创建第一篇文档mkdir docs && echo '# Hello VuePre.原创 2022-03-20 18:38:37 · 460 阅读 · 0 评论 -
《翻转组件库之打包》
背景继博客之后,业务内容基本完毕,接下来涉及到的内容便是打包,构建,发布,使用文档等内容,本篇博客主要内容为使用Webpack打包资料相关1、Webpack:概念 | webpack 中文文档2、Gulp:gulp.js - 基于流(stream)的自动化构建工具 | gulp.js 中文网具体流程Webpack打包js1、在跟目录下新建webpack.component.js/* * @Descripttion: * @version: v1.0 * @Autho原创 2022-03-18 16:01:30 · 917 阅读 · 0 评论 -
《翻转组件库之卡片设计》
背景本次组件库的实现以封装一个卡片组件为例,本篇博客主要展现基本流程和大致思路设计思路设计原则注重通用性,提高开发效率具体方案组件设计UIAttributes编写html和样式html目录结构1、components → lib2、components/lib/card/src/main.vue<!-- * @Descripttion: * @version: v1.0 * @Author: linda * @Date:.原创 2022-03-17 15:28:18 · 693 阅读 · 0 评论 -
《翻转组件库之init项目》
前言背景:几乎所有大厂都会使用组件库,有的会开发自己的组件库价值:提升开发效率,节省时间成本和人力成本example:阿里巴巴-Antd Design;饿了么-Element全流程原创 2022-03-16 21:46:53 · 1081 阅读 · 1 评论 -
《nginx安装教程》
前言: 项目即将上线,对于前端生产环境的部署也着实经历了一番,下面随着小编依赖看看吧。正文:结语: 不断打磨,不断上进,终有一天你的才华可以撑得起你的梦想。原创 2017-12-24 22:57:48 · 6553 阅读 · 32 评论 -
《webpack的打包开发》
一张图来表示小编对于webpack的认知:同时也在实战中对于webpack进行了验证:/* * @Descripttion: * @version: v1.0 * @Author: linda * @Date: 2020-03-10 17:31:43 * @LastEditors: linda * @LastEditTime: 2020-03-10 22:05:29 ...原创 2020-03-10 22:17:47 · 174 阅读 · 2 评论 -
《Angular6之ng项目搭建、构建、部署简介》
前言: 随着Angular的深入发展,Angular6版本的框架部署较之前有了变化,至于变化是什么?请随小编一起来看看吧。正文:Angular5.x用@angular/cli脚手架搭建的工程,配置文件名称为: .angular-cli.json, 内容详情如下:{ "$schema": "./node_modules/@angular/cli/l...原创 2019-02-02 10:25:56 · 2846 阅读 · 2 评论 -
《Angular之ES6语法实现数组去重》
前言: 我希望我的希望不再是希望正文: 实现去重的主人翁-----set和Array.from set是一种新的数据结构,它可以接收一个数组或者是类数组对象,自动去重其中的重复项目。 1.在ts中:constructor() { let arr = ['杨晓风','杨晓风','linda','linda...原创 2018-07-31 20:34:48 · 3120 阅读 · 4 评论 -
《信审系统之产品流程配置管理》
前言: 金融风控系统,核心模块之产品流程配置管理。正文:结语: 让工作带我飞。原创 2018-04-22 21:18:28 · 1530 阅读 · 17 评论 -
《Angular之any类型慎用》
前言: 千锤万凿出深山,实践知识刷新。正文: 在 typescript语法中有一种数据类型为any类型,比如:ruleResultModel: any;let url = 'riskTip/eruleRestult/B001/申请审核' this.http.get(url).subscribe( res => { this.ruleResultMod...原创 2018-06-17 17:11:32 · 3712 阅读 · 4 评论 -
《Angular之表格操作列》
前言: 表格几乎是每个项目当中都会涉及到的一种组件,表格也因项目需求不同,所具备的功能不同,此篇博文小编为大家讲述要求操作列根据数据项而显示不同。正文: 业务需求:根据表格中的状态不同,操作列显示的内容不同。 实践技术:Angular4+ng-zorro 一。原生引用: 1.html <nz-table #nzTable [nzDataSource]="data" [nz...原创 2018-06-28 20:31:26 · 625 阅读 · 12 评论 -
《FontEnd之HTML》
前言: 作为公司目前的前端架构组负责人,同事的学习能力非常强,大家询问的更多是想法和技术评估,继而身为前端架构组的负责人对于前端宏观把控是非常重要的,继而系统地去了解这方面的知识,有助于自身前端实力的增强,同时也为公司前端进一步的成长贡献力量。正文: 元素包含了所有的头部标签元素。在 元素中你可以插入脚本(scripts), 样式文件(CSS),及各种meta信息。原创 2018-03-15 18:02:57 · 268 阅读 · 17 评论 -
《Input+Dropdown-Model》
前言: 重复的工作没有必要人工一直来做,可以形成模板,提高前端开发效率。正文: Input<div class="form-group"> <label>{{'dataModelInfo.modelName' | translate}}:</label> <!-- input框 start--> <...原创 2018-04-04 16:51:07 · 469 阅读 · 7 评论 -
《Angular4之Typescript用法》
前言: 随着Angular的深入实践,对于typescript用法一些细节之处很值得去总结的,请随小编一起来看看吧。正文: find this.eachName = this.allCount.find(x => x.id == Id).index; forEach this.questionTypeSetModels.forEach( sc...原创 2018-03-04 22:30:48 · 1164 阅读 · 9 评论 -
《Angular4之must be absolute》
前言: 2018年2月22日两个同事同时出现使用命令创建组件报错,成长的机会到了,请随小编一起来看看呗。正文: 问题 解决方案以上两种错误截图本质上是同一类问题,暂时定位是下载依赖包命令的问题,从国外网站上下载依赖包没问题,出现此问题解决方案:<1>将原有依赖包删除:rimraf node_modules<2>用np...原创 2018-02-28 14:06:37 · 366 阅读 · 16 评论 -
《初识Gulp》
软件开发未来的发展趋势是前后端分离,维护性更强,互相独立。随着这种趋势的发展,必然也伴随着一些工具的产生。本篇博文的主人公Gulp就是在未来适应于这种发展趋势的web前端开发过程中对代码进行构建的工具,是自动化项目的构建利器,下面就跟着小编一起来认识一下吧。原创 2016-12-31 17:13:07 · 590 阅读 · 23 评论 -
《Angular2初步涉略》
继Gulp研究之后,开始了Angular2的研究之旅,这样的研究层次呈递进关系,两者之间理论知识相互牵连,后者的进一步学习使得前者的研究更加地清晰。接着请跟着小编一起来看看吧。原创 2017-01-22 21:46:41 · 1063 阅读 · 23 评论 -
《Angular2之TypeScript》
上一篇博文为大家介绍了关于Augular2的宏观上的研究成果,在后记中提到,深入学习Angular2是从TypeScript开始的,此篇博文就为大家介绍TypeScript是什么鬼?原创 2017-01-23 17:28:38 · 1861 阅读 · 30 评论 -
《linux+jmeter,压力测试教你一招》
大概是2017年2月5日正式参与到ITOO测试组,之前由于进度问题,错过了这样一个锻炼自己的机会,现在很开心自己得到了这样的一个机会。ITOO测试组分为两个小组,测试一组每天进行手工测试,他们需要了解整个项目的需求,运用禅道管理BUG的提出,并且还把之前自考和软考当中学习到的关于黑盒测试和白盒运用到实践当中他们很棒。这样的经历会延伸到他们以后的开发中,用户体验度以及软件的质量会、更胜一筹。为他们点赞。我是后来加入的,被分配测试二组,进行自动化测试的一些研究。本篇博文便是最近几天研究的一些小心得,跟着小编一起原创 2017-02-19 21:58:56 · 9193 阅读 · 85 评论 -
《前端工程化之Nodejs》
定义: Node.js就是运行在服务端的 JavaScript。Node.js是一个基于Chrome JavaScript运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。 组成: 1. 引入 required 模块:我们可以使用原创 2017-03-12 22:45:06 · 2046 阅读 · 25 评论 -
《前端工程化之NPM》
定义:NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。由来:Nodejs自身提供了基本的模块,但是开发实际应用过程中仅仅依靠这些基本模块则还需要较多的工作。幸运的是,Nodejs库和框架为我们提供了帮助,让我们减少工作量。但是成百上千的库或者框架管理起来又很麻烦,有了NPM,可以很快的找到特定服原创 2017-03-19 22:16:37 · 831 阅读 · 35 评论 -
《Angular2之i18n运行机制》
最近由于项目需要,需要对于angular2进行深入研究,之前虽有所研究,但由于缺乏最佳实践,继而真正到实践的时候还是遇到很多关键点。切身体会到:“考虑一千次,不如去做一次!犹豫一万次,不如实践一次!”。在angular2相关的前端项目里面,会出现i18n这样的一个文件,想知道这个文件干嘛用的吗?跟着小编一起来看看吧。原创 2017-04-09 23:07:38 · 2790 阅读 · 34 评论 -
《Angular2路由跳转之代码跳转》
最近小编在进行前端框架Angular2的最佳实践,现在对于其中的路由跳转有一些新的体会,在这里小编与君共勉。原创 2017-04-23 22:33:47 · 14477 阅读 · 92 评论 -
《Angular之getSymbolByModule of undefined》
小编最近在用angular这种开箱即用的前端框架重构项目的前端页面,遇到问题是不可避免的,然解决问题也是势在必行的,下面请听小编娓娓道来。原创 2017-06-18 23:10:56 · 467 阅读 · 6 评论 -
《Angular2项目之目录结构》
小编最近在进行前端工程化的工作,使用Angular2前端框架对项目前端界面进行重构。继而对于Angular2项目运行原理有一些新的体会,在这里与君共勉。原创 2017-05-07 22:45:38 · 5481 阅读 · 34 评论 -
《Angular之'app-tab' is not a known element》
小编运用angular前端开发框架重构项目页面,在利用angular组件的过程中遇到问题,且听小编娓娓道来。原创 2017-07-16 22:02:55 · 4371 阅读 · 32 评论 -
《Angular路由跳转之指令跳转》
随着ITOO项目的深入,前端框架Angular的应用也在不断加深,路由的跳转分为两个部分,一个是代码跳转,另外一个是指令跳转。此篇是继上次代码跳转的姊妹篇。接下来请听小编娓娓道来。原创 2017-07-30 23:00:11 · 2037 阅读 · 69 评论 -
《Angular之简介》
AngularJS2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行。是Angular 1.x 的升级版本,性能上得到显著的提高,能很好的支持 Web 开发组件。发布于2016年9月份,它是基于ES6来开发的。现在已出现Angular4,不过会angluar2的伙伴无需担心,2与4之间没有太大的区别。具体详细的介绍,请听小编娓娓道来。翻译 2017-08-06 17:41:13 · 1205 阅读 · 20 评论 -
《前端工程化》
任何事情都不是一帆风顺的,我们要直面这件事情,有问题就是解决问题喽。请随小编看看吧原创 2017-08-20 23:53:41 · 535 阅读 · 25 评论 -
《Angular之资源荟萃》
Angular从零开始研究到最佳实践应用已历时将近四个月,对于Angular的相关研究也有了一定的思路和经验,此篇博文就让小编为Angular的使用者或者读者提供一个基本的方向吧。原创 2017-08-27 23:10:27 · 969 阅读 · 25 评论 -
《Angular与ng-zorro结合》
随着Angular的深入发展,组件库开始涌现,比较成形的有两种:primeNG和ng-zorro,当然在最开始Angular自身就有自己的组件库,Boostrap也与之相结合,产生相应的组件库,下面随着小编来看看,前端框架Angular与组件库ng-zorro是如何结合的。结语: 现在的项目都不是白手起家,而是站在巨人的肩膀上移花接原创 2017-08-31 23:22:18 · 8834 阅读 · 22 评论 -
《Angular与primeNG结合》
前言: 正文:结语:原创 2017-09-03 15:38:37 · 5319 阅读 · 22 评论 -
《Angular之渐入动画》
前言: 承接ITOO即将胜利之风,图书馆项目先进行了开门红。在图书馆这次项目开发中,有很多细节之处得到了验证,接下来请听小编谈谈这渐入动画效果实现。正文: 以图书馆为例,四步搞定。第一。下载动画库-@angular/animations结语: 一款好的产品上线宏观把控比不可少,微观掌握不可或缺,细节之处考量周全。原创 2017-11-05 19:48:45 · 855 阅读 · 14 评论