前端每周学习分享--第2期

1. 项目工具相关

1.1. ESLint代码检测工具

ESLint属于一种QA工具,是一个ECMAScript/JavaScript语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。

ESLint旨在完全可配置,它的目标是提供一个插件化的javascript代码检测工具。

更多

1.2. nginx

Nginx 是俄罗斯人编写的十分轻量级的 HTTP 服务器,Nginx,它的发音为“engine X”,是一个高性能的HTTP和反向代理服务器,同时也是一个 IMAP/POP3/SMTP 代理服务器。

Nginx 以事件驱动的方式编写,所以有非常好的性能,同时也是一个非常高效的反向代理、负载平衡。其拥有匹配 Lighttpd 的性能,同时还没有 Lighttpd 的内存泄漏问题。

1.3.docker

Docker 是一个开源的应用容器引擎,实现了应用程序的带环境安装。Docker 将应用程序与该程序的依赖,打包在一个文件里面,属于 Linux 容器的一种封装。

更多

1.4. Mock.js

生成随机数据,拦截Ajax 请求。 使前后端分离, 让前端攻城师独立于后端进行开发。 增加单元测试的真实性. 通过随机数据,模拟各种场景。

1.5. Fly.js

一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。
引入之后,可以对fly实例进行全局配置、添加拦截器、发起网络请求。

1.6.webpack

webpack详解

2.阅读列表

2.1.从开发环境到vue框架

之前学习使用vue的时候,看视频和文档,大都是用简单的单文件demo练习,实际开发环境中总是会使用到npm、脚手架、eslint、babel等,开发中也会用到一些东西,比如vue-router、mock、字体文件、CSS预处理器、组件库。

npm是jacascript包管理工具,作用就和python的pip差不多,可以下载、上传包,自动解决依赖。

安装好npm之后,就可以方便的下载其他东西。

脚手架工具用于搭建一个项目的基本环境,如:目录结构、本地调试、代码部署、单元测试、热加载(文件改动后,以最小的代价改变页面相应的区域)。

脚手架工具有webpack、vue-cli、create-react-app、yoman,网上也有很多自建脚手架的教程。npm init的时候可以指定脚手架工具,或者使用npm install安装相应的脚手架后使用脚手架的命令。

脚手架工具搭建好的项目中,一般会安装有eslint、babel。eslint用于检测js代码,常用于统一代码风格(风格不符合配置的规则就会报错提示)。babel可以将ES6代码转换成ES5代码使其能在不支持ES6的浏览器上工作,这样就可以放心的使用ES6开发了。

2.2.commitlint+husky规范commit 日志

在团队协作开发时,定义一个commit信息的规范,在commit时自动检查是否符合规范,并提示修改。

2.3.在小程序、mpvue中使用flyio发起网络请求

Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库。它使得我们可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行。

3.代码

3.1. [{},{},...]复制数组并在{}中增、删、改字段

? 增、改b = c.map((item,index)=>({...item,html1:"4444"}))

? 拓展运算符与剩余运算符的使用技巧

3.2. 自定义组件与插槽(小程序)

父组件通过 Prop 向子组件传递数据,通过插槽向子组件传递内容。

插槽:用于父组件向子组件传递node节点,在子组件中开一个槽<slot></slot>,父组件可以向这个槽中插入东西(元素、组件)。

使用name在子组件中声明一个具名插槽:

<slot name="up"></slot>

在父组件中使用slot属性讲元素插入相应的插槽。

<div class="tmpl" slot="up">
        <span>菜单1</span>
        <span>菜单2</span>
        <span>菜单3</span>
        <span>菜单4</span>
        <span>菜单5</span>
        <span>菜单6</span>
</div>

作用域插槽: 用于子组件向父组件传递数据
(下述例子是匿名插槽)

在子组件中为插槽绑定了数据:

<slot v-bind="slotData"/>

在父组件中使用数据:

<Child>
       <h1 slot-scope="abc">{{ abc.msg }}</h1>
</Child>

3.3. 遍历

  • while 、 for
  • for...of 对可迭代对象,迭代属性值
  • for...in 以任意顺序 迭代属性名称

下面是数组特有的一些遍历方法

  • forEach()
  • map() 会返回处理后的新数组
  • reduce()
  • filter() 返回符合条件的数组
  • every()
  • some()

3.4. 微信小程序自定义组件

3.5. 给子组件传参,并用参数设置样式

设置样式的properties(一般取String),父组件传入后,子组件设置到相应元素的style属性中去。

原文地址:https://www.cnblogs.com/mthz/p/week2.html

时间: 2024-11-06 03:49:11

前端每周学习分享--第2期的相关文章

前端基础学习分享

用a标签制作一个按钮为主线,然后围绕这个按钮,做一些效果样式等操作.附件中可以下载CSS参考手册. 一.工具 工欲善其事必先利其器.我们首先需要准备好调试工具,这里我就简单介绍几种,firefox.chrome以及IE. 1.firefox 我们用到的是firebug,非常好用,工具->附加组件.这里有一篇firebug教程. 安装好后按F12就可以直接调试了: 2.chrome chrome的调试工具默认就是自带的,也是按F12就可以出来,但这个调试工具还带了个手机的模拟器,可以用来调试手机页

web前端开发学习路线图分享,详谈2018web前端开发学习路线

近几年IT业可谓是发展火热,而且新生了很多的职业.例如安卓开发工程师.iOS开发工程师.在这众多的新生职业中备受瞩目的当属web前端工程师了,前端工程师薪资高,就业发展前景好,更多的人选择了这一职业成为自己的发展方向,想要自己成为一名合格的web前端工程师,web前端开发学习路线图值得大家去看看.挺适合大家借鉴来学习的.web前端课程包括了几个方面的内容: 1.学习HTML,这是最简单,最基本的是要掌握div,formtable.Ulli.P.跨度.字体这些标签,这些都是最常用的,尤其是DIV和

极客标签:可能是目前最好的前端代码学习工具

英国著名作家萧伯纳有一句名言:"两个人交换了苹果,每个人手里还是只有一个苹果:但是两个人交换了思想,每个人就同时有了两个人的思想."这说的是知识的分享对于人类进步的重要意义.时间到了现代,技术进步带给人们更多样化的沟通方式.可是,当人们交换各种类型的知识的时候,却发现依然没那么容易. 绝大多数有学问的人都选择了出书:网络的普及也让各种各样的博客出现,之后则是微信公众号的天下:也有人选择了言传身教的现代版--录制讲学视频. 但以上的各种方式都不适合编程学习,特别是web设计方面的学习.你

团队的学习分享

学习与分享是影响团队成长的重要一环,所经历的每个团队几乎都对此很关注,甚至在个人的 KPI 考核中有一定的体现. 最早,加入美团的时候,前端团队内部会每周定期举行一次 RoundTable 分享,每次由 1 人组织,1 - 2 人做分享.组织的同学负责收集分享的议题,有时候大家比较踊跃收集到的议题比较多,还需要大家投票决定哪两个议题进行分享.分享不仅仅局限于团队内部,有时候会邀请其他团队的同学做分享.当时 RoundTable 的影响范围还是挺大的,也有许多其他团队的同学来听分享.分享的内容包括

前端MVC学习总结——AngularJS验证、过滤器

前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令(directive) 3.1.支持AngularJS功能的指令 3.1.1.应用与模块(ng-app) 3.1.2.控制器(ng-Controller) 3.1.3.包含(ng-Include) 3.1.4.不绑定(ngNonBindable) 3.2.扩展表单元素的指令 3.2.1.ng-opti

web前端面试经历分享

十天前,我还在纠结这个暑假到底是呆在实验室研究技术好还是找一份实习见识世面好,而现在我已经接到offer准备工作了.这几天真是累得够呛,一方面需要拼命准备期末考试,另一方面,需要往公司里面跑接受面试.欣慰的是,我不仅顺利通过了公司的面试,还认识了好几个厉害的师兄,自己的人生规划也稍有改变. 开始的纠结是有原因的,主要是考虑到了一下几个方面: 第一,作为一个大二的学生有必要这么着急跑出去找实习么? 第二,去找实习主要目的应该是赚钱还是学习技术? 第三,难得有那么两个月的时间,就这样去工作了会不会浪

Web前端培训学习心得

web前端工程师技术日趋成熟,越来越多的行业巨头正不断向web前端工程师示好,在未来几年,web前端将会以更多的形式渗透到我们生活中的方方面面,因此越来越多的从业者开始关注web前端开发行业,今天小编跟大家共同来分享一下自己的web前端工程师学习心得. 今天只是想要跟大家分享一下学习心得,在选择web前端工程师培训之前,我逃避过.犹豫过.迷茫过,站在人生的十字路口,不知道该何去何从,但从加入培训班的那刻起,就把心中的疑问打消了,看到大家倾吐自己的心声,我开始认识到每个人都渴望成功,更希望能够战胜

web前端开发学习路线

首先分享一下我的经验,想做好一件事,必须要花费一些功夫,然后是多学.多思.多练.多交流.多总结,发现自己的问题,然后一定要克服,在状态不好的情况下,往往要及时调整.新手学习前端的话,一定要想想为什么要学习它,是出于一种什么心态,然后定位好自己,多向大牛请教,多教一些没有自己水平高的人,那样往往能让自己成长的快,切勿急躁.初学可以看一些入门视频教程,之后可以买一些书,做一些小项目,要学会投资,分析自己的现状及能力,实时调整,一定要有自己的想法,懂得创新.在这里一定要对自己做分析,然后找出一种适合的

web前端技术社区分享

web前端技术社区分享 一.国外的前端技术网站:    1. 名称:W3C: 网址:http://www.w3.org/ 理由:前端技术的规范标准几乎都是W3C制定的  2.名称:ECMA 网址:http://www.ecmascript.org/ 理由:JavaScript最核心的内容就是ECMA 3.名称:Mozilla社区 网址:https://developer.mozilla.org/zh-CN/ 理由:Mozilla社区包含了很多有关Web前端的文章,非常值得学习   4.名称:H5