接口设计
来源:https://juejin.cn/post/7095532251118567431#comment
拓展阅读:https://juejin.cn/post/7041202819264675854
质量控制
[TOC]
来源:https://juejin.cn/post/6844903824512008205
项目能力
基础认知项目开发开发流程新项目维护老项目工具库开发需求与绩效版本控制接口设计前置资源服务器端口运维环境测试工具链
前台:vue2 + vuex + vueRouter
自定义工具函数库
[toc]
打包自定义工具库自定义功能函数相关防抖函数(debounce)函数防抖(Debounce):指触发事件后在 n 秒内函数只执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。如:搜索框,滚动条
功能:当事件被触发N秒之后再执行回调,如果在N秒内被触发,则重新计时。
比如一个输入框,当应用实现防抖函数之后,用户不断输入内容时,函数会一直被触发,则不会发送请求。只有当用户在一段规定时间N内未进行输入操作,才会发送一次请求。如果在N秒内间断的输入内容,且间断的时间小于规定时间N时,则会重新计时且不会发送请求。这样降低了发送请求的次数,提高性能的同时也提升了用户体验。
注意:防抖和节流函数中 return 的函数不能使用箭头函数,如果使用箭头函数则 this 就会指向 globalFunction,就会有问题
手写实现防抖函数(js):
1234567891011121314151617// func是用户传入需要防抖的函数// wait是等待时间,若不传参,默认50ms// 因为闭包,timer将一直在内存中const debounce = (func, wait ...
页面案例物料准备
物料准备标注图如果有psd设计稿最好,但练习时通常是对着别人网站写的,可以用这个插件来获取尺寸:VisBug - Crx4Chrome插件下载
不建议直接调控制台看尺寸,因为直接就看到了dom结构和样式,不利于练习;最好是先自己实现,然后对比人家的,看看差异在哪儿,才能更好的提升
获取图片资源由于是别人的网站,需要下载
使用AIX智能下载器-crx插件,下载链接:AIX智能下载器
如果想要批量下载,浏览器配置中,下载选项设置下载地址和取消询问
不过建议,用到哪个就选哪个下载
记得把该页面所有的内容滚动看一下,先缓存一下,如下:
获取视频资源
图标
使用阿里图标库,注重图标素材积累
在线引入
1<link rel="stylesheet" href="http://at.alicdn.com/t/font_3144739_ot22wco7hul.css">
图标找和案例类似的即可,最后案例结束,图标以本地形式引入
取色工具使用edge浏览器自带的CSS概述,但复制不了
下载TakeColor取色工具,Alt + C保 ...
《JavaScript高级程序设计(第4版)》
JavaScript高级程序设计(第4版)
关于第四版出版的若干问题:https://www.zhihu.com/question/20825869
正如权威指南作者所说,最新的参考现在在网上可以轻易查到,还实时更新,不存在时效问题。他推荐的是 Mozilla 的 MDN Web Docs 和 Node 的 Node.js参考文档。
语言基础语法
区分大小写
标识符
注释
严格模式
语句
关键字、保留字这些词汇不能用作标识符,但现在还可以用作对象的属性名。一般来说,最好还是不要使用关键字和保留字作为标识符和属性名,以确保兼容过去和未来的 ECMAScript 版本。
变量
var
var声明作用域
局部变量
12345function test() { var message = "hi"; // 局部变量} test(); console.log(message); // 出错!
全局变量
12345function test() { message = "hi"; // 全局变量} te ...
CSS选择器深度剖析
选择器常用选择器:
元素选择器
类选择器
id选择器
交集选择器:123div.red{ color:red;}
并集选择器:123h1, span{ color:red;}
关系选择器:
父元素:直接包含子元素的元素
子元素:直接被父元素包含的元素
祖先元素:直接或间接包含后代元素的元素
后代元素:直接或间接被祖先元素包含的元素
兄弟元素:拥有相同父元素的元素
子元素选择器:123div.box > span{ color:red;}
后代元素选择器:123div.box span{ color:red;}
兄弟选择器:123p + span{ color:red;}
选择下面所有的兄弟:123p ~ span{ color:red;}
属性选择器:123456789101112131415161718p[title]{ color:red;}[title=abc] ...
开发流程及功能模块注意事项
初学者怎么做项目项目分类小而专的项目
初学一种技术,专门针对它进行实践,写demo
比如初学ajax,学会了怎么发网络请求,学会了怎么异步请求数据。
就可以调用google的搜索图书的api,专门写一个图书搜索的小项目
比如学了一个UI库,可以做一些小卡片
也可以将结合几个小而专的技术在一起
耗时一两天
大而全的项目
进阶,融合技术
JS => React
耗时一两周
做什么项目
有自己的想法(有想法很简单,但很多想法以初学者的角度,实现起来是很难的)
有合适的想法
大胆去做
做自己喜欢的
为自己做项目,每个项目都用心去打磨下
自己没想法
模仿+创新
比如看板、微软的todo
在模仿的基础上创新
逛github
怎么逛
观察平时看的网页,想象这些页面都是怎么实现的,自己试试看
去哪儿找项目的ideaKelvinQiu802/project-ideas: 集合优质的项目仓库,找到适合你的项目。 (github.com)
app-ideas ⭐⭐⭐⭐⭐
https://github.com/florinpop17/app-ideas
...