好多年前写的笔记移动到博客上
jS基础 关于基础 工程师的自我修养 - 基础 扎实的基础会让你高效学习新技术 关于面试 看到面试题首先想到的是什么 -> 考点 如何看待网上永远看不完的面试题 -> 以不变应万变 如何对待接下来遇到的面试题 题目考察知识点 JS变量类型 强制类型转换 浏览器渲染过程 作用域 JS模块化 JS基础算法 JS变量类型 变量计算 值类型(在内存中有多份)undefined,string,number,boolean 引用类型(在内存中只有一份指针)对象(object), 数组(array),函数(function),null typeof 运算符可以得出的类型共6种 - undefined
- string
- boolean
- object
- number
- function(typeof引用类型中唯一能区分出来的)
变量计算 - 强制类型转换 - 字符串拼接
- == 运算符
- if 语句(变量)
- 逻辑运算符
何时使用=== 何时使用== 1 2 3 4 5 6 7 8 9 10 // 除了以下情况都用=== // 看一个对象里是否存在某个属性的时候用 if (bja.a == null) { // jqury 里就这么写 } function (a,b) { if (a == null) { return } }
JS中的内置函数 - object
- array
- boolean
- number
- string
- function
- Date
- RegExp
- Error
原型 原型链 构造函数(其实就是为了补充引用对象共同使用一个指向的问题) new关键字 的运行过程 创建一个新对象 this 属性赋值 return this(当前对象) 构造函数- 扩展 var a = {} 其实是 var a = new Object 的语法糖 var a = [] 其实是 var a = new Array 的语法糖 function Fn(a.b){} 其实是 var Fn = new Function 的语法糖 使用 instanceof 判断一个函数是否是一个变量的构造函数 原型规则和示例 5条原型规则 1. 所有的引用类型(数组, 对象, 函数) ，都具有对象的特性,即可自由扩展属性(除了 ‘null’ 以外)
2. 所有的引用类型(数组, 对象, 函数) ，都有一个 __proto__(隐式原型) 属性 ,属性值是一个普通对象
3. 所有的 **函数** 都有一个 prototype(显式原型) 属性,属性值也是一个普通对象
4. 所有的引用类型(数组, 对象, 函数), __proto__ 属性值指向它的构造函数的 prototype 属性值
5. 当试图得到一个(引用类型)对象的某个属性时,如果这个对象本身没有这个属性,那么会去它的 __proto (即它的构造函数的 prototype ) 中去寻找
原型链 proto .proto 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 // 原型链例子 function Fn() { this.getElement = function (el) { return document.querySelector(el) } } function Fn2() { this.getElementAll = function (el) { return document.querySelectorAll(el) } } Fn.prototype = new Fn2() let getElement = new Fn()
arr, Obj , fn instanceof Array, Object, Function 作用域 闭包 变量提升 - 执行上下文 (把函数和变量先拿出来)
1. 范围 :一段script 或者一个函数
2. 全局: 变量定义 函数声明
3. 函数 ： 变量定义函数声明 this, arguments
this - this 要在执行时才能确认值, 定义时无法确认
this的执行 - 作为构造函数执行
- 作为对象属性执行
- 作为普通函数执行
- call bind apply 执行
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function name(age) { alert(age) console.log(this) } name.call({x:100}, 12) // this = {x:100} name.apply({x:100}, [12]) let fn = function name2(age) { alert(age) console.log(this) }.bind({x:100}) // this = {x:100} bind 返回一个新的函数 name2(11)
作用域 - JS没有快级作用域
- 只有函数和全局作用域(函数内的变量外部无法访问无法修改)
作用域链 - 由内向外 外层称为自由变量
- 函数只需要关心在哪里定义 无需关心在哪里执行 函数在定义的时候作用域链就定义了 除非后续的bind call等函数修改作用域
闭包 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 // 函数作为返回值 // 函数作为参数传递 function F1() { let a = 100 return function () { console.log(a) } } let f1 = F1() let a = 200 f1() // 闭包的常用实例(保存变量等) for (let i = 0;i < 9; i++) { ( function(i){ var a = document.createElement('a') a.innerHTML = i + '<br>' a.addEventListener('click', function () {alert(i)}) document.body.appendChild(a) } )(i) }
异步 单线程 什么是异步(对比同步) - 异步不会阻塞后续代码执行
- 同步会阻塞后续代码执行
前端使用异步的场景 - 在可能发生等待的情况
- 定时任务
- 网络请求 ajax请求 动态img 加载
- 事件绑定
异步和单线程 - 含有异步的代码会先单独放一边 等待执行
- 单线程一次只能干一个活 干一件事
其他知识 日期 - Date.now() //获取当前毫秒数
- dt.getTime // 获取毫秒数
- dt.getFullYear() // 年
- dt.getMonth() // 月
- dt.getDate() // 日
- dt.getHours() // 小事
- dt.getMinutes() // 分钟
- dt.getSeconds() //秒
Math - Math.random() // 随机数
数组API - forEach // 遍历
- every // 判断所有元素是否都符合条件
- some //至少一个元素符合条件
- sort 排序
- map 对元素重新组装,生成新数组
- filter 过滤符合条件的元素
对象API - for in 遍历
Js-WEB-API - 全面考虑 JS 内置对象有哪些?
- 之前的 Ecma262 标准的内置函数 Object Array String Boolean Number Regexp Date Error
- 内置对象 Math JSON 等
- 浏览器对象 window 文档对象 document
- 还有 全局变量 navigator
DOM操作 DOM 的本质 - dom 把html字符串结构化成js和浏览器能识别和操作的文档模型而已
- DOM 是树 的数据结构
DOM 节点操作 - document.getElementById() // 获取节点
- property 是操作js对象
- attribute 是操作html文档对象
DOM 结构操作 - 新增节点
- appendChild (已有节点就是移动)
- crateElment 新增
- 获取父元 素
- elemnt.parentElement
- 获取子元素
- elemnt.childNodes
- 删除节点
- removeChild()
- nodetype 是节点类型
- 1 是元素节点 3是文字节点
- nodeName 是元素名
- 大写的英文字母
BOM 操作 - 检查浏览器类型
- navigator
- userAgent 浏览器信息
- screen 屏幕特性
- width
- location
- href
- protocol
- pathname
- search
- hash
- history (浏览器前进后退)
- back
- forwart
- 解析 URL 各部分
AJAX - new XMLHttpRequest
1 2 3 4 5 6 7 8 9 let xhr = new XMLHttpRequest xhr.open('GET', "/api",false) xhr.onreadystatechange = function () { if(xhr.readyState == 4 && xhr.status == 200) { // ....... } } xhr.send(null) // POST 数据放在send里边
事件绑定 通用事件绑定 事件冒泡 - 冒泡往上层冒
- e.stopPropatation 阻止冒泡
代理 - 绑定事件在父级元素上
存储 - 描述 cookie, sessionStorage和 localStorage的区别
- cookie 限制4kb大小 localStorage 可以存5m
- cookie
- 本身用于客户端和服务的通信
- 但是它有本地存储功能于是就被借用
- 使用 document.cookie = ... 获取和修改
- cookie所有 http 请求都带着 会影响获取资源效率
- sessionStorage和 localStorage
- html5专门为存储而设计
- API 简答易用
- localStorage.setItem(key, value)
- localStorage.getItem(key)
JS开发环境 IDE - webstorm
- sublime
- vscode
- atom
- 插件
GIT 代码版本管理 - 正式项目都需要代码版本管理
- 大型项目需要多人协作开发
- git 和 linux是一个作者
- 网络git服务器 如coding.net github.com
- 一般公司代码非开源,都有自己的 git 服务器
- 搭建 git 服务器 无需了解太多
git 基本操作 - git add
- git status //查看哪些改动
- git diff // 查看文件有哪些修改
- git checkout xxx // 还原
- git commit -m 'xxx' // 提交
- git push origin master // 提交到主分支
- git pull origin master // 下载到本地
- git branch // 分支
- git checkout -b xxx / git checkout xxx //切换分支
- git merge xxx // 合并分支
JS 模块化 不使用模块化 - 全局变量污染
- 必须按顺序引入
使用模块化 - 用什么就直接暴露出什么
- 没有引入问题
- 没有全局变量污染的问题
AMD (requirejs) - 全局 define 函数
- 全局 require 函数
- 依赖 js 自动 异步加载
CMD - nodejs 模块化方案
- 从 npm 获取开发依赖和库
- 构建工具自动化 使得npm 成本非常低
- CommonJS 不会异步加载js,而是同步一次性加载出来
- 需要构建工具支持
- 和 npm 一起使用
AMD 和 CMD 的使用场景 - 需要异步加载 JS 使用AMD
- 使用 npm 之后 使用CMD
打包工具 - webpack
上线回滚 - 不会有具体的问题, 交流询问的方式
基本流程 - 是非常重要的开发环节
- 各个公司的具体流程不同
- 由专门的工具或者系统完成
上线要点 - 把测试完成的代码提交到GIT 版本库的master分支
- 把当前服务器的代码全部打包并记录版本号,备份
- 把 master 分支代码提交覆盖到线上服务器 生成新版本号
回滚流程要点 - 把当前服务器代码打包并记录版本号,备份
- 把备份的上个版本解压,覆盖到线上服务器,生成新的版本号
linux 基本命令 - mkdir // 创建文件夹
- ls 查看文件夹名字
- ll 查看详细信息
- cd 切换文件夹
- rm -rf 删除文件夹
- cp 复制 源文件 拷贝目录名
- mv 移动 源文件 移动目录名
- rm fileName 删除文件
- cat fileName 查看文件 head -n 第几行 fileName 前 tail 后
- grep '内容' fileName 内容搜索
vim 操作命令 - vim fileName
- i 写入
- esc 退出写入环境
- esc :w 保存
- esc :q 退出
- :wq 保存退出
运行环境 - 浏览器
页面加载过程 - 加载资源形式
- 输入 url 加载 html
- 加载静态资源 图片 音频视频 样式 js
- 加载一个资源过程
- 浏览器根据 DNS 服务器得到域名的 IP地址
- 向这个 IP 的服务器发送 http 请求
- 服务器收到, 处理并 返回 http请求
- 浏览器得到返回内容
- 浏览器渲染页面过程
- 根据 html 结构生成 DOM Tree(树)
- 根据 css 生成 CSSOM
- 将 DOM 和 CSSOM 整合成 RenderTree
- 根据 RenderTree 开始渲染和展示
- 遇到 script 时, 会执行并阻塞渲染
为什么把 CSS 放在 head 中 - 渲染的时候已经知道 css 样式
- 放在最后会出现默认情况 再改成 css 样式
- 用户体验好
- 性能好
为什么把 JS 放在 body 最后 - 不会阻塞 html 内容渲染
-
从输入 URL 到得到HTML 的详细过程 - 浏览器根据 DNS 服务器得到域名的 IP地址
- 向这个 IP 的服务器发送 http 请求
- 服务器收到, 处理并 返回 http请求
- 浏览器得到返回内容
window.onload 和 DOMContentLoaded 的区别 - window.onload 是把所有资源加载完才会执行,包括图片,视频等
- DOMContentLoaded 是 DOM 渲染完即可执行,此时的图片, 视频可能还没有加载完
性能优化 优化策略 - 多使用内存, 缓存或者其他方法
- 减少 CPU 计算， 减少网络
入手 - 加载页面和静态资源
- 静态资源合并压缩
- 静态资源缓存
- 使用 CDN 让资源加载更快
- 使用 SSR 后端渲染, 数据直接输出到 HTML 中
- 页面渲染
- css 放head
- js 放 body 最后
- 懒加载 (图片懒加载, 下拉加载更多)
- 减少 DOM 查询, 对 DOM 查询做缓存
- 减少 DOM 操作, 多个操作尽量合并在一起执行
- 事件节流
- 尽早执行操作 (如DOMContentLoaded)
前端安全性 安全性 XSS 攻击 - 写一篇文章同时插入一段 script
- 攻击代码中, 获取 cookie 发送到自己服务器
预防 替换 <> 进行转义 XSRF 跨站请求伪造 - 以登入购物网站,正在浏览商品
- 付费接口 是 xxx/api?id=100 但是没有任何验证
- 然后收到一封邮件 隐藏着 IMG src指向这个接口
- 你查看邮件的时候 已经偷偷付费购买了
预防 增加验证流程 指纹 密码 短信等 面试技巧 注意事项 简历怎么写 - 简介明了, 重点突出项目经验和解决方案
- 把个人博客放在简历中, 并且定期维护更新博客
- 把个人的开源项目 放在简历中, 并维护开源项目
- 简历千万不要造假, 要保持能力和经历上的真实性
过程中 - 如何看待加班? 加班就像借钱, 救急不救穷
- 千万不可挑战面试官, 不要反考面试官
- 学会给面试官惊喜 但不要太多
- 遇到不会回答的问题, 说出你知道的也可以
- 谈谈你的缺点--说一下你最近学什么就可以了
基础工程师 - 基础知识 高级工程师 - 项目经验 架构师 - 解决方案 读源码 高级前端 高级基础 ES6 常用语法 原型高级应用 异步全面讲解 框架原理 虚拟 DOM MVVM vue 组件化 React 混合开发 hybrid bybrid VS H5 前端客户端通讯 框架原理 APP混合开发 热爱编程 读书 博客 开源 
.png)
.png)
.png)