├── 07-移动web开发 └── 02-Bootstrap使用.md ├── 03-JavaScript基础 ├── 13-事件委托.md ├── 04-对象简介.md ├── 02-JavaScript语法基础：运算符和表达式.md ├── 14-原型链.md ├── 06-对象、作用域和this.md ├── 13-BOM的常见内置方法和内置对象.md └── 05-函数.md ├── 18-前端面试 ├── 其他.md ├── 计算机网络.md ├── web安全.md ├── 11-02.ES6.md ├── 15-虚拟DOM.md ├── 11-00.JavaScript高级面试：前言.md ├── 23-面试技巧 by smyhvae.md ├── 22-网友面经.md ├── 推荐文章.md ├── 11-01.ES6：模块化的使用和编译环境.md ├── 16-01.MVVM.md ├── 08-算法问题.md ├── 21-面试题整理 by smyhvae.md ├── 10-02.前端错误监控.md ├── 05-02.面向对象：类的定义和继承的几种方式.md ├── 09-01.浏览器渲染机制.md ├── 05-01.创建对象和原型链.md ├── 04-HTTP协议.md ├── 07-安全问题：CSRF和XSS.md ├── 09-02.js运行机制：异步和单线程.md └── 00-准备.md ├── 19-面试题积累 ├── 05-BAT爱考的JS面试题.md ├── 函数.md ├── 清单.md ├── 异步.md ├── 03-http.md ├── 01-我的面试经历 by smyhvae.md ├── 04-变量提升的题目.md └── 03-JS相关.md ├── 21-Vue基础 ├── Vue-router路由.md ├── 生命周期.md └── 02-过滤器.md ├── 08-Ajax ├── 1.php ├── 05-模板引擎.md ├── 04-同源和跨域.md └── 03-函数封装：Ajax发送http请求（get&post）.md ├── 09-Node.js ├── server.js ├── Node.js代码举例.md ├── WebSocket.md ├── 03-模块化结构.md ├── 12-ES6.md ├── 02-事件驱动和非阻塞机制.md └── 11-JavaScript模块化开发.md ├── 00-前端工具 ├── chrome浏览器.md ├── 推荐链接.md ├── 04-Atom在前端的使用.md ├── 03-VS Code.md ├── 01-Sublime Text在前端中的使用.md └── 02-WebStorm的使用.md ├── README.md ├── 22-Vue框架-组件化思维 ├── Vue基础知识.md ├── 11-面试技巧.md ├── z商城系统.md ├── Vue-router.md ├── 03-京东金融的首页.md ├── 08-上线指导.md ├── 09-构建工具.md ├── 01-项目介绍.md └── 02-项目设计与原理分析.md ├── 17-前端进阶 ├── 04-前端监控技术.md ├── 09-lazyload&防抖动和节流阀.md └── 01-前端的几道题目.md ├── 03-JavaScript进阶 ├── 浅拷贝和深拷贝.md ├── 07-call、apply、bind的区别.md ├── this.md └── 创建对象和继承.md ├── 02-CSS ├── 浏览器的兼容性问题.md └── 10-CSS的一些小知识.md ├── 04-前端基本功：JavaScript特效 ├── 04-JS的小知识.md └── 03-client家族(可视区).md ├── 20-网友 ├── 面经链接推荐.md └── 20180116-博客园：一年经验初探阿里巴巴前端社招.md ├── 10-ES6 ├── 01-ES5中的严格模式.md ├── 03-ES6的介绍和环境配置.md ├── 06-ES6：字符串、数组、对象的扩展.md └── 02-ES5中的一些扩展.md ├── 推荐链接.md ├── 02-CSS进阶 └── Sass入门.md └── 04-前端基本功：CSS和DOM练习 ├── 05-DOM操作练习：访问关系的封装.md └── 08-JavaScript基础：定时器.md /07-移动web开发/02-Bootstrap使用.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /03-JavaScript基础/13-事件委托.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 事件委托 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /18-前端面试/其他.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 前端基础 4 | 5 | ### 闭包和作用域，面试喜欢问。 6 | 7 | -------------------------------------------------------------------------------- /19-面试题积累/05-BAT爱考的JS面试题.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ## this 在各个场景下的指向 5 | 6 | -------------------------------------------------------------------------------- /21-Vue基础/Vue-router路由.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 前言 4 | 5 | 路由：就是SPA（单页应用）的**路径管理器**。 6 | 7 | -------------------------------------------------------------------------------- /18-前端面试/计算机网络.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | - [HTTP最强资料大全](https://github.com/semlinker/awesome-http) 4 | 5 | -------------------------------------------------------------------------------- /18-前端面试/web安全.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | ## 前言 6 | 7 | 攻击的原理也许你能讲出来，主要是想知道如何发现这个网站的漏洞，毕竟大部分的网站都已经把用户输入的内容各种花式过滤了 -------------------------------------------------------------------------------- /08-Ajax/1.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /09-Node.js/server.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const http = require('http'); //因为 这个 http 库引用之后就不会去改它，所以我们用常量来表示 4 | 5 | http.createServer(); //创建一台服务器 -------------------------------------------------------------------------------- /00-前端工具/chrome浏览器.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ### show user agent shadow DOM 4 | 5 | 20180206_1610.png 6 | 7 | 20180206_1616.png 8 | 9 | 把上图中的红框部分打钩。 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 前端入门和进阶学习笔记。从零开始学前端，做一个web全栈工程师。持续更新... 4 | 5 | 更多内容，请点开文件夹。 6 | 7 | 8 | 另外，欢迎关注本人的公众号「生命团队」，会分享一些技术之外的软技能（和代码完全无关）。公众号里的每篇文章，自认为写得还算用心。“全栈”不应该只是体现在技术上，而是全方位。 -------------------------------------------------------------------------------- /19-面试题积累/函数.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ``` 4 | var arr = [1, 2, 3]; 5 | 6 | fun(arr); 7 | console.log(arr); 8 | 9 | function fun(a) { 10 | a = []; 11 | 12 | } 13 | ``` 14 | 15 | 上方代码的打印结果是：[1,2,3] 16 | 17 | -------------------------------------------------------------------------------- /19-面试题积累/清单.md: -------------------------------------------------------------------------------- 1 | 01.md 2 | 3 | 4 | 5 | ### CommonJS、RequireJS(AMD) SeaJS（CMD）区别 6 | 7 | 8 | 9 | 10 | ### Webpack 打包 11 | 12 | 13 | ### WebSocket 14 | 15 | 16 | ### ES6 17 | 18 | 会 ES6 是应该的部分，不算加分项。 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /22-Vue框架-组件化思维/Vue基础知识.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 基础知识介绍 4 | 5 | Vue 的基础知识包括： 6 | 7 | 20180303_1237.png 8 | 9 | 20180303_1238.png 10 | 11 | 12 | 实例 --> 组件 --> 指令 --> 选项 --> 模板渲染 --> 事件绑定 --> 计算属性 --> 内置动画 --> 组件交互 --> 路由等。 13 | 14 | 15 | ## 实例对象 -------------------------------------------------------------------------------- /17-前端进阶/04-前端监控技术.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 前言 4 | 5 | 要监控的内容： 6 | 7 | - 业务数据 8 | 9 | - 稳定性 10 | 11 | - 性能 12 | 13 | - 错误 14 | 15 | - 用户操作路径 16 | 17 | 18 | 怎么监控： 19 | 20 | - PV/UV、业务操作上报 21 | 22 | - 根据上报寻找异常 23 | 24 | - 将页面性能数据上报 25 | 26 | - 将页面产生错误上报 27 | 28 | - 跟踪用户操作路径 29 | 30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /18-前端面试/11-02.ES6.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## Class和普通构造函数有何区别 4 | 5 | > 我们经常会用ES6中的Class来代替JS中的构造函数做开发。 6 | 7 | 8 | - Class 在语法上更加贴合面向对象的写法 9 | 10 | - Class 实现继承更加易读、易理解 11 | 12 | 13 | 14 | - 更易于写 java 等后端语言的使用 15 | 16 | 17 | - 本质还是语法糖，使用 prototype 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /21-Vue基础/生命周期.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | - beforeCreate和created。 8 | 9 | created之后，就拿到了数据和方法。create一般用来**获取ajax，初始化操作** 10 | 11 | - beforeMount和mounted。 12 | 13 | mounted之后，表示**真实DOM渲染完了，可以操作DOM了**。 14 | 15 | 16 | - beforeUpdate和updated 17 | 18 | 数据发生变化时，会触发这两个方法。不过，我们一般用watch来做。 19 | 20 | - beforeDestory和destoryed 21 | 22 | 可以在beforeDestory里**清除定时器、或清除事件绑定**。 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /03-JavaScript进阶/浅拷贝和深拷贝.md: -------------------------------------------------------------------------------- 1 | 2 | ## 浅拷贝 3 | 4 | 对于对象或数组类型，当我们将a赋值给b，然后更改b中的属性，a也会随着变化。 5 | 6 | 也就是说，a和b指向了同一块堆内存，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝。 7 | 8 | ## 深拷贝 9 | 10 | 那么相应的，如果给b放到新的内存中，将a的各个属性都复制到新内存里，就是深拷贝。 11 | 12 | 也就是说，当b中的属性有变化的时候，a内的属性不会发生变化。 13 | 14 | 15 | 16 | 17 | 18 | 参考链接： 19 | 20 | - [深拷贝与浅拷贝的实现（一）](http://www.alloyteam.com/2017/08/12978/) 21 | 22 | - [javaScript中浅拷贝和深拷贝的实现](https://github.com/wengjq/Blog/issues/3) 23 | 24 | 25 | -------------------------------------------------------------------------------- /22-Vue框架-组件化思维/11-面试技巧.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ## 前言 5 | 6 | **面试提问**包括： 7 | 8 | - 同学做过哪些项目 9 | 10 | - 为什么用这样的框架 11 | 12 | - 在项目中的角色是什么？解决过哪些**难题**？ 13 | 14 | “难题”是表现自己的机会，不要错过。 15 | 16 | - 通过这个项目学到了什么？ 17 | 18 | 这个问题不好回答。要独具一格，不要芸芸众生。 19 | 20 | 21 | **面试分析**： 22 | 23 | - 二面考什么 24 | 25 | - 项目要怎么准备 26 | 27 | - 项目该怎么介绍 28 | 29 | - 沟通有哪些技巧 30 | 31 | 32 | 33 | ## 面试演练 34 | 35 | 36 | 37 | 参考链接： 38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /17-前端进阶/09-lazyload&防抖动和节流阀.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ## lazyload 5 | 6 | 用的最多的场景是： 7 | 8 | - 图片lazyload 9 | 10 | - 组件lazyload 11 | 12 | 现在一般都单独做css的lazyload或者js的lazyload，因为这种方式，其实还是要加载图片和组件。 13 | 14 | 15 | 16 | ### 图片lazyload 17 | 18 | 图片一般是页面最大的资源，所以**非首屏**延迟加载很重要（让首屏尽快显示）。 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | ## 防抖动（Debouncing）和节流阀（Throtting） 31 | 32 | 33 | 34 | 35 | 参考链接： 36 | 37 | - [实例解析防抖动（Debouncing）和节流阀（Throttling）](http://www.css88.com/archives/7010) 38 | 39 | 40 | -------------------------------------------------------------------------------- /02-CSS/浏览器的兼容性问题.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 我们在div里放一个img，发现： 4 | 5 | 在html和html5中，div的长宽是不同的，后者的高度要超过几个像素。 6 | 7 | 比如说，下面这个是html的。 8 | 9 | ```html 10 | 11 | 12 | 13 | 14 | Document 15 | 21 | 22 | 23 |
24 | 25 | 26 |
27 | 28 | 29 | ``` 30 | -------------------------------------------------------------------------------- /22-Vue框架-组件化思维/z商城系统.md: -------------------------------------------------------------------------------- 1 | 02-商城系统.md 2 | 3 | ## 商城系统介绍 4 | 5 | ### 商城系统包含的模块 6 | 7 | - 商品列表 8 | 9 | - 购物车 10 | 11 | - 地址 12 | 13 | - 结算 14 | 15 | - 订单 16 | 17 | - 登录等 18 | 19 | 20 | ### 技术栈 21 | 22 | 前端使用：Vue 全家桶以及 ES6。 23 | 24 | 后端使用：Express 框架、DB 使用 Mongo。 25 | 26 | ### 项目整体架构 27 | 28 | 20180302_1850.png 29 | 30 | 31 | ### 课程安排 32 | 33 | 34 | 20180302_1851.png 35 | 36 | 20180302_1852.png 37 | 38 | 39 | ### 项目地址 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /18-前端面试/15-虚拟DOM.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 前言 4 | 5 | 6 | 7 | vdom 是 vue 和 React 的**核心**，先讲哪个都绕不开它。 8 | 9 | vdom 比较独立，使用也比较简单。 10 | 11 | 如果面试问到 vue 和 React 和实现，免不了问 vdom： 12 | 13 | - vdom 是什么？为何会存在 vdom？ 14 | 15 | - vdom 的如何应用，核心 API 是什么 16 | 17 | - 介绍一下 diff 算法 18 | 19 | 20 | ## 什么是 vdom 21 | 22 | 23 | ### 什么是 vdom 24 | 25 | DOM操作是昂贵的。 26 | 27 | 步骤一：用JS对象模拟DOM树 28 | 29 | 步骤二：比较两棵虚拟DOM树的差异 30 | 31 | 步骤三：把差异应用到真正的DOM树上 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /19-面试题积累/异步.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 面试题 4 | 5 | ### 20180321面试题 6 | 7 | ```javascript 8 | console.log(1); 9 | 10 | setTimeout(function () { 11 | console.log(2); 12 | }, 1000); 13 | 14 | setTimeout(function () { 15 | console.log(3); 16 | }, 0); 17 | 18 | console.log(4); 19 | ``` 20 | 21 | 22 | 23 | ### 20180321面试题 24 | 25 | ```javascript 26 | var arr = [1, 2, 3]; 27 | for (var i = 0; i < arr.length; i++) { 28 | setTimeout(function () { 29 | console.log(i); 30 | }, 0); 31 | } 32 | ``` 33 | 34 | 打印结果：3，3，3 35 | 36 | -------------------------------------------------------------------------------- /22-Vue框架-组件化思维/Vue-router.md: -------------------------------------------------------------------------------- 1 | 2 | ## 路由的概念 3 | 4 | 5 | ### 前端路由 6 | 7 | 路由：根据不同的 url 地址展示不同的内容或页面。 8 | 9 | 前端路由：把不同路由对应不同的内容（页面）的任务交给前端来做。以前是通过服务器端根据url的不同返回不同页面来实现的。 10 | 11 | 12 | 什么时候使用前端路由：在单页面应用中，大部分页面结构不变，只改变部分内容的使用。 13 | 14 | 15 | ### 前端路由的优点和缺点 16 | 17 | 18 | 优点： 19 | 20 | - 用户体验好，不需要每次都从服务器全部获取，快速展现给用户。 21 | 22 | 缺点： 23 | 24 | - 不利于 SEO。 25 | 26 | - 使用浏览器的前进、后退键时，会重新发送请求，没有合理利用缓存。 27 | 28 | - 单页面无法记住之前滚动的位置，无法在前进、后退时记住滚动的位置。 29 | 30 | 31 | ## vue-router 构建 SPA 32 | 33 | ### 动态路由 34 | 35 | 20180303_1335.png 36 | 37 | 38 | 39 | ## axios 40 | 41 | 尤雨溪之前发微博说， vue-resource 不再是官方推荐的插件，推荐使用 `axios`。 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /18-前端面试/11-00.JavaScript高级面试：前言.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 前言 4 | 5 | 6 | 一、基础知识： 7 | 8 | - ES 6常用语法：class 、module、Promise等 9 | 10 | - 原型高级应用：结合 jQuery 和 zepto 源码 11 | 12 | - 异步全面讲解：从原理到 jQuery 再到 Promise 13 | 14 | 二、框架原理： 15 | 16 | - 虚拟DOM：存在价值、如何使用、diff算法 17 | 18 | - MVVM vue：MVVM、vue响应式、模板解析、渲染 19 | 20 | - 组件化 React：组件化、JSX、vdom、setState 21 | 22 | 三、混合开发： 23 | 24 | - hybrid 25 | 26 | - H5 27 | 28 | - 前端客户端通讯 29 | 30 | 31 | 内容优势 32 | 33 | - 面试官爱问“源码”、“实现”。 34 | 35 | - 介绍常用框架实现原理 36 | 37 | - 介绍hybrid原理和应用 38 | 39 | 40 | 41 | 42 | ## ES6 43 | 44 | 45 | - 模块化的使用和编译环境 46 | 47 | - Class与JS构造函数的区别 48 | 49 | - Promise的用法 50 | 51 | - ES6其他常用功能 52 | 53 | ## 异步 54 | 55 | 56 | - 什么是单线程，和异步有什么关系 57 | 58 | 59 | 60 | 61 | 62 | -------------------------------------------------------------------------------- /18-前端面试/23-面试技巧 by smyhvae.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ## 写简历的注意事项 5 | 6 | - 最多可以写“深入了解”，但不要写“精通”。 7 | 8 | 9 | ## 遇到不知道的问题，该怎么回答 10 | 11 | - 这块儿我没了解过，准备回去看一下。 12 | 13 | - 这块儿我没研究过，您有没有好的资料，我可以补充一下细节。 14 | 15 | - 写不出详细的代码，但是知道思路。 16 | 17 | 18 | 19 | ## 项目经历 20 | 21 | 22 | - 面试要体现项目的设计思路、方案设计等 23 | 24 | 25 | 26 | ## 模块化思维 27 | 28 | 29 | 30 | 31 | （1）模块化设计的关键词：**封装、继承**；把**通用**的模块**先抽象，后具体**，达到**复用**。【面试记住】 32 | 33 | 比如，**panel、按钮、轮播图**、列表等等，都可以提取为**抽象**的组件，复用。 34 | 35 | （2）页面有哪几个模块 36 | 37 | （3）每个模块分成不同的文件，然后在index页面中import。 38 | 39 | 40 | 41 | 42 | 43 | ## ES6新特性 44 | 45 | - let、const 46 | 47 | - 函数扩展：参数默认值、箭头函数、扩展运算符`...` 48 | 49 | - for ... of 循环 50 | 51 | - map 52 | 53 | - 模块化 54 | 55 | 56 | 57 | ## 薪资 58 | 59 | 面试官；"你要求多少薪资？" 60 | 61 | 我：“能给个范围吗？” 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /18-前端面试/22-网友面经.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ### 2018-03-08 5 | 6 | - [jawil | 一年经验初探阿里巴巴前端社招](https://github.com/jawil/blog/issues/22) 7 | 8 | 9 | 此博主的博客签名： 10 | 11 | 20180308_1703.png 12 | 13 | 14 | - [2017我遇到的前端面试题](https://blog.dunizb.com//2017/09/08/interview-questions-2017/) 15 | 16 | 作者整理的这些题目，很多是来自面试跳槽的视频。非常推荐。 17 | 18 | 作者说，性能优化和ES6，是必问的。 19 | 20 | 21 | 22 | - [2018年web前端经典面试题及答案](https://www.cnblogs.com/wdlhao/p/8290436.html) 23 | 24 | 写得很长啊。 25 | 26 | 27 | ### 2018-03-11 28 | 29 | - [2017年BAT面试题大全集](http://www.bijishequ.com/detail/421600?p=) 30 | 31 | - [bat前端面试内容记录](https://www.jianshu.com/p/d94d5290328c) 32 | 33 | 34 | 35 | ### 2018-03-18 36 | 37 | - [笔记：阿里、网易、滴滴共十次前端面试碰到的问题](https://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html) 38 | 39 | - [笔记补充：阿里、网易、滴滴共十次前端面试碰到的问题](https://zhoukekestar.github.io/notes/2017/07/06/interview-answers.html) 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /18-前端面试/推荐文章.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 征服JavaScript面试系列 | 众城翻译 4 | 5 | 6 | - [征服 JavaScript 面试：什么是闭包？](http://www.zcfy.cc/article/master-the-javascript-interview-what-is-a-closure) 7 | 8 | - [征服 JavaScript 面试：什么是函数组合](http://www.zcfy.cc/article/master-the-javascript-interview-what-is-function-composition) 9 | 10 | - [征服JavaScript面试系列：类继承和原型继承的区别](http://www.zcfy.cc/article/master-the-javascript-interview-what-s-the-difference-between-class-amp-prototypal-inheritance-2185.html) 11 | 12 | - [征服 JavaScript 面试：什么是纯函数](http://www.zcfy.cc/article/master-the-javascript-interview-what-is-a-pure-function-2186.html) 13 | 14 | - [征服 JavaScript 面试: 什么是函数式编程？](http://www.zcfy.cc/article/master-the-javascript-interview-what-is-functional-programming-2221.html) 15 | 16 | - [征服 JavaScript 面试: 什么是 Promise？](http://www.zcfy.cc/article/master-the-javascript-interview-what-is-a-promise) 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /22-Vue框架-组件化思维/03-京东金融的首页.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 需求分析 4 | 5 | 京东金融首页的需求分析如下： 6 | 7 | - 头部 8 | 9 | - 轮播图 10 | 11 | - 新手特权 12 | 13 | - 极速借贷 14 | 15 | - 理财精选 16 | 17 | - 新品推荐 18 | 19 | - 生活服务 20 | 21 | - 在线客服 22 | 23 | - 公司介绍 24 | 25 | - 导航条 26 | 27 | 20180308_1953.png 28 | 29 | 30 | 目前，大多数设计稿的尺寸是iPhone5：320*568。 31 | 32 | 拿到设计稿后，要先做架构： 33 | 34 | 35 | ### 组件化设计 36 | 37 | 38 | ### 按钮 39 | 40 | 俺就可以设计成抽象的组件。 41 | 42 | 我们要先给它一个**默认**类名，然后**允许传递进来一个自定义**的类名，这样就实现**继承**了；让自定义的类名去**覆盖**默认的样式，就实现了**复用**。 43 | 44 | ### panel 45 | 46 | 47 | ### 轮播图 48 | 49 | Vue有一些常用的组件，可以直接拿来用，比如`vue-awesome-swiper`。链接： 50 | 51 | 52 | 定义一个抽象的轮播图，然后把轮播图的图片和跳转的url作为参数传递。 53 | 54 | 55 | ### css module 56 | 57 | 这个组件有一个类名，另外一个组件可能还有个同名的，为了防止冲突，可以使用命名空间。 58 | 59 | 60 | ### 第三方的自适应解决方案 61 | 62 | hotcss： 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /04-前端基本功：JavaScript特效/04-JS的小知识.md: -------------------------------------------------------------------------------- 1 | JS的小知识.md 2 | 3 | 4 | 5 | 6 | ### 方法的注释 7 | 8 | 9 | 方法写完之后（注意，一定要先写完整），我们在方法的前面输入`/**`，然后回车，会发现，注释的格式会自动补齐。 10 | 11 | 比如： 12 | 13 | 14 | 15 | ```javascript 16 | /** 17 | * 功能：给定元素查找他的第一个元素子节点，并返回 18 | * @param ele 19 | * @returns {Element|*|Node} 20 | */ 21 | function getFirstNode(ele){ 22 | var node = ele.firstElementChild || ele.firstChild; 23 | return node; 24 | } 25 | ``` 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | ### 断点调试 35 | 36 | （1）先让程序运行一遍。 37 | 38 | （2）f12，弹出代码调试工具 39 | 40 | （3）打断点： 41 | 42 | ![](http://img.smyhvae.com/20180124_2035.png) 43 | 44 | 然后刷新页面。 45 | 46 | （4）一步步调试，每点击一次，执行一步： 47 | 48 | ![](http://img.smyhvae.com/20180124_2036.png) 49 | 50 | （5）监视变量： 51 | 52 | 当然，也可以添加变量或者表达式到监视窗口。操作如下： 53 | 54 | ![](http://img.smyhvae.com/20180124_2037.png) 55 | 56 | 上图中，选择变量或表达式，然后右键add to watch. 57 | 58 | 然后监视窗口： 59 | 60 | ![](http://img.smyhvae.com/20180124_2038.png) 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /19-面试题积累/03-http.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## HTTP 状态码知道哪些？ 4 | 5 | 301 和 302 的区别： 6 | 7 | - 301 永久重定向，浏览器会记住（有缓存） 8 | 9 | - 302 临时重定向（无缓存） 10 | 11 | 12 | ## HTTP 缓存怎么做？ 13 | 14 | 强缓存： 15 | 16 | - **`Expires`**或**`Cache-Control`** 17 | 18 | 协商缓存： 19 | 20 | - 第一对：`Last-Modified`、`If-Modified-Since` 21 | 22 | - 第二对：`ETag`、`If-None-Match` 23 | 24 | 25 | ## Cookie 是什么？Session 是什么？ 26 | 27 | ### Cookie 28 | 29 | - HTTP响应通过 Set-Cookie 设置 Cookie 30 | 31 | - 浏览器访问指定域名是必须带上 Cookie 作为 Request Header 32 | 33 | - Cookie 一般用来记录用户信息 34 | 35 | ### Session 36 | 37 | - Session 是服务器端的内存（数据） 38 | 39 | - session 一般通过在 Cookie 里记录 SessionID 实现 40 | 41 | - SessionID 一般是随机数 42 | 43 | 44 | ## LocalStorage 和 Cookie 的区别是什么？ 45 | 46 | - Cookie 会随请求被发到服务器上，而 LocalStorage 不会 47 | 48 | - Cookie 大小一般4k以下，LocalStorage 一般5Mb 左右 49 | 50 | ## GET 和 POST 的区别是什么？ 51 | 52 | GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。 53 | 54 | 55 | 需要注意的是，web 中的 get/post 只是 http 中的 get/post 的子集。http 中的 get 与 post 只是单纯的名字上的区别，get 请求的数据也可以放在 request body 中，只是浏览器没有实现它，但是 get 并不只是在 web 中使用 56 | 57 | 58 | 参考链接： 59 | 60 | - 61 | 62 | - 63 | 64 | 65 | 66 | -------------------------------------------------------------------------------- /20-网友/面经链接推荐.md: -------------------------------------------------------------------------------- 1 | 2 | ### 2018-01-25 3 | 4 | 5 | 6 | - [有时在面试时，我都替候选人着急——候选人完全可以在面试前准备](https://www.cnblogs.com/JavaArchitect/p/8353578.html) 7 | 8 | ### 2018-01-26 9 | 10 | - [转眼人到中年：前端老程序员无法忘怀的一次百度电话面试](https://www.cnblogs.com/chyingp/p/a-telephone-interview-long-age.html) 11 | 12 | 八年前的面经，咋记得这么清楚？ 13 | 14 | 15 | ### 2018-01-27 16 | 17 | - [16年毕业的前端er在杭州求职ing](https://www.cnblogs.com/qianduantuanzhang/archive/2018/01/27/8365670.html) 18 | 19 | 20 | ### 2018-02-04 21 | 22 | - [2018秋招前端总结](https://www.cnblogs.com/Mr-stockings/archive/2018/02/02/8407295.html) 23 | 24 | 25 | 26 | 27 | ### 2018-02-25 28 | 29 | - [前端开发面试题(CSS)](http://www.bijishequ.com/detail/379621) 30 | 31 | - [超过20家的前端面试题](https://www.jianshu.com/p/8b68f4df749e) 32 | 33 | 34 | - [来聊聊前端工程师的面试套路](https://baijiahao.baidu.com/s?id=1570338146494165&wfr=spider&for=pc) 35 | 36 | - [我的前端进阶之路（面试题）](https://www.cnblogs.com/libin-1/p/6864344.html) 37 | 38 | 这几个链接里讲到了 less。听说面试爱问 less 和 Sass的区别。 39 | 40 | 41 | 42 | 43 | 44 | ### 2018-03-02 45 | 46 | - [记录前端的面试日常(持续更新)](https://www.cnblogs.com/fangdongdemao/p/8492563.html) 47 | 48 | 49 | 50 | ### 2018-03-06 51 | 52 | - [我遇到的前端面试题2017](https://segmentfault.com/a/1190000011091907) 53 | 54 | 55 | 里面有很多面试跳槽里的内容。 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /18-前端面试/11-01.ES6：模块化的使用和编译环境.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 前言 4 | 5 | 6 | ### ES6的主要内容 7 | 8 | - 模块化的使用和编译环境 9 | 10 | - Class与JS构造函数的区别 11 | 12 | - Promise的用法 13 | 14 | - ES6其他常用功能 15 | 16 | 本文来讲“模块化的使用和编译环境”。 17 | 18 | ### 面试常见问题 19 | 20 | - ES6 模块化如何使用，开发环境如何打包 21 | 22 | - Class 和普通构造函数有何区别 23 | 24 | - Promise 的基本使用和原理 25 | 26 | - 总结一下 ES6 其他常用功能 27 | 28 | 29 | ### ES6的现状 30 | 31 | - 开发环境已经普及使用 32 | 33 | - 浏览器环境却支持不好（需要开发环境编译） 34 | 35 | - 内容很多，重点了解常用语法 36 | 37 | - 面试：开发环境的使用 + 重点语法的掌握 38 | 39 | 40 | ## 模块化的基本语法 41 | 42 | 43 | （1）util1.js： 44 | 45 | ```javascript 46 | export default var a = 100; 47 | 48 | export function foo { 49 | console.log('util1-foo'); 50 | } 51 | ``` 52 | 53 | `export default`命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出。 54 | 55 | 有了默认输出之后，其他模块加载该模块时，import命令可以为该匿名变量/函数，起**任意的名字**。 56 | 57 | 上面的代码中，默认输出是一个变量。当然，我们也可以换成**默认输出一个匿名函数**： 58 | 59 | ```javascript 60 | export default function() { 61 | console.log('util1-function'); 62 | } 63 | ``` 64 | 65 | 66 | （2）util2.js： 67 | 68 | ```javascript 69 | 70 | export var myUtil2 = 'this is util2'; 71 | 72 | export function fn1() { 73 | console.log('util2-fn1'); 74 | } 75 | 76 | export function fn2() { 77 | console.log('util2-fn2'); 78 | } 79 | ``` 80 | 81 | 82 | 上方代码中，我把一个变量和两个函数作为了导出。 83 | 84 | 85 | （3）index.js： 86 | 87 | -------------------------------------------------------------------------------- /18-前端面试/16-01.MVVM.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 前言 4 | 5 | MVVM的常见问题： 6 | 7 | - 如何理解MVVM 8 | 9 | - 如何实现MVVM 10 | 11 | - 是否解读过Vue的源码 12 | 13 | 14 | 题目： 15 | 16 | - 说一下使用 jQuery 和使用框架的区别 17 | 18 | 19 | - 说一下对 MVVM 的理解 20 | 21 | 22 | - vue 中如何实现响应式 23 | 24 | 25 | - vue 中如何解析模板 26 | 27 | - vue 的整个实现流程 28 | 29 | 30 | 31 | ## 说一下使用 jQuery 和使用框架的区别 32 | 33 | 34 | 35 | 36 | ## MVVM / Vue 37 | 38 | 39 | ## MVVM模式 40 | 41 | - Model：负责数据存储 42 | 43 | - View：负责页面展示 44 | 45 | - View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示 46 | 47 | 数据驱动视图，只关心数据变化，DOM操作被封装。 48 | 49 | ### MVVM / Vue的三要素 50 | 51 | - **响应式**：vue 如何监听到 data 的每个属性变化？ 52 | 53 | - **模板引擎**：vue 的模板如何被解析，指令如何处理？ 54 | 55 | 56 | - **渲染**：vue 的模板如何被渲染成 html ？以及渲染过程 57 | 58 | 59 | 60 | ### 什么是虚拟 DOM 61 | 62 | 传统的web开发，是利用 jQuery操作DOM，这是非常耗资源的。 63 | 64 | 我们可以在 JS 的内存里构建类似于DOM的对象，去拼装数据，拼装完整后，把数据整体解析，一次性插入到html里去。这就形成了虚拟 DOM。 65 | 66 | 67 | Vue1.0没有虚拟DOM，Vue2.0改成了基于虚拟DOM。 68 | 69 | 70 | ### 如何理解MVC 71 | 72 | C指的是Controller。控制器能够控制视图的变化，也能控制数据的变化。 73 | 74 | 单项通信。一般情况下是：view 发出命令给控制器，控制器处理业务逻辑后控制 Model，Model再去改 view。 75 | 76 | 77 | ## hybrid 78 | 79 | ### 使用场景 80 | 81 | 不是所有的场景都适合用 hybrid： 82 | 83 | - 使用原生应用：体验要求极致，变化不频繁（如头条的首页） 84 | 85 | - 使用 hybrid：体验要求高，变化频繁（如新闻详情页） 86 | 87 | - 使用H5：体验无要求、不常用（比举报、反馈等） 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | -------------------------------------------------------------------------------- /09-Node.js/Node.js代码举例.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ## 在 Node.js 上建一个 http 服务器 5 | 6 | 7 | （1）新建一个文件 `server01.js`，然后在里面输入如下代码： 8 | 9 | ```javascript 10 | 11 | const http = require('http'); //引入 node.js里面的一个http包。因为引入之后，我们不会去修改它，所以用常量来表示 12 | 13 | 14 | // 创建一台服务器 15 | var server = http.createServer(function (){ //当有人来访问这台服务器时，就会执行 function 回调函数 16 | console.log('有人来访问我了'); 17 | }); 18 | 19 | server.listen(8080); //要让服务器设置为监听状态，端口设置为8080 20 | 21 | ``` 22 | 23 | 注意看注释。 24 | 25 | 我们把上面这个 js 文件跑起来，然后在浏览器端输入`http://localhost:8080/`，每请求一次，服务器的控制台就会打印 `有人来访问我了`。 26 | 27 | 28 | （2）write()函数和 end()函数： 29 | 30 | 将上面的代码修改如下： 31 | 32 | server02.js： 33 | 34 | ```javascript 35 | const http = require('http'); 36 | 37 | 38 | // 创建一台服务器 39 | var server = http.createServer(function (request, response) { //当有人来访问这个服务器时，就会执行function 这个回调函数 40 | console.log('有人来访问我了'); 41 | 42 | response.write('smyhvae'); //向浏览器输出内容 43 | response.end(); //结束了，浏览器你走吧。 44 | 45 | }); 46 | 47 | server.listen(8080); 48 | 49 | 50 | ``` 51 | 52 | function 回调函数里可以设置两个参数：request 和 response。`response.write()`表示向浏览器输出一些内容。 53 | 54 | 将上面的 js 代码跑起来，产生的问题是，无论我们在浏览器端输入`http://localhost:8080/1.html`，还是输入`http://localhost:8080/2.jpg`，浏览器上显示的都是`smyhvae`。 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /00-前端工具/推荐链接.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 积累平时看到的一些好的前端文章。 5 | 6 | 7 | 8 | 9 | ### 2017-08-17 10 | 11 | - [面试分享：一年经验初探阿里巴巴前端社招](https://github.com/jawil/blog/issues/22) 12 | 13 | 在公众号「web前端课程」上看到的文章。作者经历了4面，也是厉害了。另外，作者在gihub上的[博客](https://github.com/jawil/blog)也是出彩的。比如说下面这篇文章就值得推荐： 14 | 15 | - [挖 "掘" 淘 "金" 之 前端闯关历险记学习资料汇总](https://github.com/jawil/blog/issues/4) 16 | 17 | 作者搜集了几百篇在掘金上看到的好文章，让人惊叹。 18 | 19 | 20 | ### 2017-08-16 21 | 22 | - [道阻且长啊TAT(前端面试总结)](https://segmentfault.com/a/1190000010631325?_ea=2359607) 23 | 24 | 作者毕业于华科，面的是前端的实习，还拿了不少offer：百度外卖，头条，美团，狗东，其他，最终在美团实习。我最初是在[微信公众号](https://mp.weixin.qq.com/s/_clHr5a6_JzTos9bKpvKrA)上看到的文章。 25 | 26 | 27 | hello。我看你拿了不少实习offer。有没有推荐的前端学习资料呀？比如说：网站、链接、书籍等。可否分享给我？如果内容较多，欢迎发表成博客。谢啦～～～ 28 | 29 | 30 | ### 2017-08-01 31 | 32 | - [资深Web技术专家曹刘阳：2016年前端技术观察](http://geek.csdn.net/news/detail/128912) 33 | 34 | 有很多争议，[知乎](https://www.zhihu.com/question/53625757)上都有人评论了。 35 | 36 | 37 | 38 | ### 2017-07-31 39 | 40 | - [你可能不需要 Vuex](https://github.com/chenbin92/blog/issues/1) 41 | 42 | 这篇文章里的流程图画得挺好看的，gif图也很小，只有200多kb。我发邮件问作者用的什么软件，很幸运的是，得到了作者的回复。答案是： 43 | 44 | - 录制 GIF：[licecap](https://github.com/justinfrankel/licecap) 45 | 46 | - 画图：[processon免费在线作图](https://www.processon.com/) 47 | 48 | 49 | 50 | 51 | 52 | 53 | ### 2017-07-13 54 | 55 | - [前端开发面试题](https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions) 56 | 57 | 在逛公众号「前端大全」的时候发现的，然后顺着找到了对应的GitHub链接。面试题有答案哦。 58 | 59 | 60 | 61 | 62 | 63 | 64 | ### 2017-01-20 65 | 66 | - [阿里9年，我总结的前端架构演进3大阶段及团队管理心法](http://www.infoq.com/cn/news/2017/01/Ali-9-3) 67 | 68 | 伟明的推荐，说是对前端开发的价值观形成有良好的影响。 69 | 70 | 71 | -------------------------------------------------------------------------------- /00-前端工具/04-Atom在前端的使用.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 常用插件 4 | 5 | 6 | - `Emmet`：快速生成HTML片段，比如输入ul>li*3可以快速生成： 7 | 8 | ```html 9 |
    10 |
  • 11 |
  • 12 |
  • 13 |
14 | ``` 15 | 16 | [详细地址](https://atom.io/packages/emmet)，[Emmet教程](https://docs.emmet.io/cheat-sheet/) 17 | 18 | - `Snippets`：快速生成 js 代码片段（用来处理代码片段的模板输出），[详细地址](https://atom.io/packages/snippets) 19 | 20 | - `Tree View`：文件浏览器，[详细地址](https://atom.io/packages/tree-view) 21 | 22 | - `file icons`：文件识别图标，使用这个插件会让你的编辑器显示对应的图标，[详细地址](https://atom.io/packages/file-icons) 23 | 24 | - `language-javascript-jsx`：jsx语法高亮 ，[详细地址](https://atom.io/packages/language-javascript-jsx) 25 | 26 | - `language-vue`：vue语法高亮，[详细地址](https://atom.io/packages/language-vue) 27 | 28 | - `linter-eslint`：eslint插件，[详细地址](https://atom.io/packages/linter-eslint) 29 | 30 | - `vue-snippets`：vue代码片段，[详细地址](https://atom.io/packages/vue-snippets) 31 | 32 | - `pigments`：颜色显示器，[详细地址](https://atom.io/packages/pigments) 33 | 34 | - `linter-eslint`：语法检查 35 | 36 | - `Atom-Beautify`：代码格式化 37 | 38 | 参考链接： 39 | 40 | ## 插件无法安装的问题 41 | 42 | ### 方法一：设置代理 43 | 44 | `C:\Users\smyhvae\.atom\.apm`目录下的.apmrc配置文件（没有就新建一个）,然后添加代理信息： 45 | 46 | ``` 47 | strict-ssl=false 48 | https-proxy=http://127.0.0.1:1080/ 49 | http-proxy =http://127.0.0.1:1080/ 50 | ``` 51 | 52 | 这里的 http://127.0.0.1:1080，是我自己的 Shadowsocks 代理，你需要设置成自己的可用代理。 53 | 然后再执行： 54 | 55 | ``` 56 | apm install --check 57 | ``` 58 | 59 | 应该可以测试成功，祝好运~~ 60 | 61 | 参考链接： 62 | 63 | - 64 | 65 | - 66 | 67 | 68 | 69 | 70 | ## 相关设置 71 | 72 | ### 显示缩进线 73 | 74 | settings -->Editor --> Show Indent Guide 75 | 76 | -------------------------------------------------------------------------------- /09-Node.js/WebSocket.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ## WebSocket 的引入 5 | 6 | ### 背景分析 7 | 8 | HTTP协议是无状态的，服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接。 9 | 10 | 11 | 当用户在浏览器上进行操作时，可以请求服务器上的api；但是反过来却不可能：服务器端发生了一个事件，无法将这个事件的信息**实时主动**地通知客户端。只有在客户端查询服务器当前状态时，所发生事件的信息才会从服务器传递到客户端。 12 | 13 | 14 | 那怎么去实时地知道服务器的状态呢？方法有两个： 15 | 16 | （1）**轮询**：客户端每隔很短的时间，都会对服务器发出请求，查看是否有新的消息，只要轮询速度足够快，例如1秒，就能给人造成交互是实时进行的印象。这种做法是无奈之举，实际上对服务器、客户端双方都造成了大量的性能浪费。 17 | 18 | 19 | （2）**长连接**：客户端只请求一次，但是服务器会将连接保持，不会返回结果。当服务器有了新数据时，实时地发给客户端，而一直保持挂起状态。这种做法的也造成了大量的性能浪费。 20 | 21 | ### WebSocket 协议 22 | 23 | 最新的 HTML5协议，制定了 WebSocket 协议标准，允许客户端和服务器端以**全双工**的方式进行通信。 24 | 25 | WebSocket 的原理非常简单：利用HTTP请求产生握手，HTTP头部含有 WebSocket 协议的请求，**握手之后，二者转用TCP协议进行交流*（QQ的协议）。 26 | 27 | WebSocket协议需要浏览器和服务器都支持才可以使用： 28 | 29 | 30 | - 支持WebSocket协议的浏览器有：Chrome 4、火狐4、IE10、Safari5 31 | 32 | - 支持WebSocket协议的服务器有：Node 0、Apach7.0.2、Nginx1.3 33 | 34 | 35 | ### http 长连接和 websocket 的长连接区别 36 | 37 | HTTP1.1通过使用Connection:keep-alive进行长连接，HTTP 1.1默认进行持久连接。在一次 TCP 连接中可以完成多个 HTTP 请求，但是对每个请求仍然要单独发 header，Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个时间。 38 | 39 | websocket是一个真正的全双工。长连接第一次tcp链路建立之后，后续数据可以双方都进行发送，**不需要发送请求头**。 40 | 41 | keep-alive双方并没有建立正真的连接会话，服务端可以在任何一次请求完成后关闭。WebSocket 它本身就规定了是正真的、双工的长连接，两边都必须要维持住连接的状态。 42 | 43 | ### Socket.IO 的引入 44 | 45 | Node.js上需要写一些程序，来处理TCP请求。 46 | 47 | Node.js从诞生之日起，就支持 WebSocket 协议。不过，从底层一步一步搭建一个Socket服务器很费劲（想象一下Node写一个静态文件服务都那么费劲）。所以，有大神帮我们写了一个库 Socket.IO。 48 | 49 | Socket.IO 是业界良心，新手福音。它屏蔽了所有底层细节，让顶层调用非常简单。并且还为不支持 WebSocket 协议的浏览器，提供了长轮询的透明模拟机制。 50 | 51 | Node的单线程、非阻塞I/O、事件驱动机制，使它非常适合Socket服务器。 52 | 53 | ### Socket.IO 的安装 54 | 55 | Socket.IO 的官网是： 56 | 57 | 安装方式： 58 | 59 | ``` 60 | npm install socket.io 61 | ``` 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /00-前端工具/03-VS Code.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 常用插件 4 | 5 | 方式一：打开VS Code，左侧有五个按钮，点击最下方的按钮，然后就可以开始安装相应的插件了。 6 | 7 | 方式二：在vscode中输入快捷键「ctrl+shift+P」，弹出指令窗口，输入`extension:install`，回车，左侧即打开扩展安装的界面。 8 | 9 | 10 | ### sftp：文件传输 11 | 12 | 13 | 输入快捷键「ctrl+shift+P」，弹出指令窗口，输入`sftp:config`，回车，当前工作工程的`.vscode`文件夹下就会自动生成一个`sftp.json`文件，我们需要在这个文件里配置的是： 14 | 15 | - `host`：服务器的IP地址 16 | 17 | - `username`：工作站自己的用户名 18 | 19 | - `privateKeyPath`：存放在本地的已配置好的用于登录工作站的密钥文件（也可以是ppk文件） 20 | 21 | - `remotePath`：工作站上与本地工程同步的文件夹路径，需要和本地工程文件根目录同名，且在使用sftp上传文件之前，要手动在工作站上mkdir生成这个根目录 22 | 23 | - `ignore`：指定在使用sftp: sync to remote的时候忽略的文件及文件夹，注意每一行后面有逗号，最后一行没有逗号 24 | 25 | 26 | 举例如下：(注意，其中的注释不能保留) 27 | 28 | ```json 29 | { 30 | "host": "", //服务器ip 31 | "port": 22, //端口，sftp模式是22 32 | "username": "", //用户名 33 | "password": "", //密码 34 | "protocol": "sftp", //模式 35 | "agent": null, 36 | "privateKeyPath": null, 37 | "passphrase": null, 38 | "passive": false, 39 | "interactiveAuth": false, 40 | "remotePath": "/root/node/build/", //服务器上的文件地址 41 | "context": "./server/build", //本地的文件地址 42 | 43 | "uploadOnSave": true, //监听保存并上传 44 | "syncMode": "update", 45 | "watcher": { //监听外部文件 46 | "files": false, //外部文件的绝对路径 47 | "autoUpload": false, 48 | "autoDelete": false 49 | }, 50 | "ignore": [ //忽略项 51 | "**/.vscode/**", 52 | "**/.git/**", 53 | "**/.DS_Store" 54 | ] 55 | } 56 | ``` 57 | 58 | 59 | 60 | 参考链接： 61 | 62 | - 63 | 64 | - 65 | 66 | 67 | 68 | 69 | ## 常用快捷键 70 | 71 | ### 代码格式化 72 | 73 | Shift + Alt + F 74 | 75 | ## 问题 76 | 77 | 问题1 78 | 79 | 解决；You can kill the Microsoft.VSCode.Cpp.IntelliSense.Msvc process to save the file successfully. 也就是 IntelliSense 这个进程。 -------------------------------------------------------------------------------- /09-Node.js/03-模块化结构.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ## 全局对象 5 | 6 | ### global 7 | 8 | 类似于客户端 JavaScript 运行环境中的 window。 9 | 10 | 11 | ## process 12 | 13 | 用于获取当前的 Node 进程信息，一般用于获取环境变量之类的信息。 14 | 15 | ### console 16 | 17 | Node 中内置的 console 模块，提供操作控制台的输入输出功能，常见使用方式与客户端类似。 18 | 19 | ## 全局函数 20 | 21 | - setInterval(callback, millisecond) 22 | 23 | - clearInterval(timer) 24 | 25 | - setTimeout(callback, millisecond) 26 | 27 | - clearTimeout(timer) 28 | 29 | - Buffer：Class 30 | - 用于操作二进制数据 31 | - 以后介绍 32 | 33 | 34 | ## Node 调试 35 | 36 | ### 最简单的调试 37 | 38 | 最方便也是最简单的调试：console.log() 39 | 40 | 41 | ### Node 原生的调试 42 | 43 | 网址： 44 | 45 | ### 第三方模块提供的调试工具 46 | 47 | ``` 48 | $ npm install node-inspector –g //方式一 49 | 50 | 51 | $ npm install devtool -g //方式二 52 | ``` 53 | 54 | ### 开发工具的调试 55 | 56 | - Visual Studio Code 57 | 58 | - WebStorm 59 | 60 | ## 模块化结构 61 | 62 | Node 实现 CommonJS 规范，所以可以使用模块化的方式组织代码结构。 63 | 64 | - Node 采用的模块化结构是按照 CommonJS 规范。 65 | 66 | - 模块与文件是一一对应关系，即加载一个模块，实际上就是加载对应的一个模块文件。 67 | 68 | ### CommonJS 规范 69 | 70 | CommonJS 就是一套约定标准，不是技术。用于约定我们的代码应该是怎样的一种结构。 71 | 72 | 参考链接： 73 | 74 | - 75 | 76 | ### 常用内置模块 77 | 78 | - `path`：处理文件路径。 79 | 80 | - `fs`：操作（CRUD）文件系统。 81 | 82 | - `child_process`：新建子进程。 83 | 84 | - `util`：提供一系列实用小工具。 85 | 86 | - `http`：提供 HTTP 服务器功能。 87 | 88 | - `url`：用于解析 URL。 89 | 90 | - `querystring`：解析 URL 中的查询字符串。 91 | 92 | - `crypto`：提供加密和解密功能。 93 | 94 | 95 | 总结：更多内容可以参考 api文档： 96 | 97 | 98 | ## 文件系统操作 99 | 100 | ### 相关模块 101 | 102 | - fs：基础的文件操作 API 103 | 104 | - path：提供和路径相关的操作 API 105 | 106 | - readline：用于读取大文本文件，一行一行读 107 | 108 | - fs-extra（第三方）： 109 | 110 | 111 | 112 | 113 | 114 | 115 | -------------------------------------------------------------------------------- /22-Vue框架-组件化思维/08-上线指导.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ## 前言 4 | 5 | 上线指导包括： 6 | 7 | - **生产构建**：合并、抽取、压缩、调试。 8 | 9 | 10 | - **发布部署**：提交、部署、开启gzip压缩、更新CDN。 11 | 12 | 下面来讲一下。 13 | 14 | ## 生产构建 15 | 16 | 生产构建包括： 17 | 18 | - 合并：style、js 19 | 20 | - 抽取：样式要从javaSCript中抽取出来 21 | 22 | - 压缩：JS、CSS都要压缩。 23 | 24 | - 调试：开启SourceMap。 25 | 26 | 下面分别讲一下。 27 | 28 | ### 1&2：合并和抽取 29 | 30 | 我们发现，首页引入了很多` 32 | 33 | 34 | 46 |
47 |
div0
48 |
div1
49 |
div2
50 |
div3
51 |
div4
52 |
53 | 54 | 55 | 56 | 57 | 58 | ``` 59 | 60 | 61 | 点击其中的任何一个元素后，上方代码的正确打印结果是5。你可能会觉得很惊讶。我们来解释一下： 62 | 63 | 当代码执行完毕后，i已经等于5了。因为一旦运行程序，for循环已经执行完了，此时i等于5。 64 | 65 | 现在，我们尝试在 myDiv[i].onclick事件中写代码，如果打印： 66 | 67 | ``` 68 | console.log(i); //打印结果为5 69 | ``` 70 | 71 | 72 | 如果打印： 73 | 74 | ``` 75 | console.log(myDiv[i].id); 76 | ``` 77 | 78 | 上方这行代码，打印会报错，因为i=5；如果想打印每个div的id，应该这样写： 79 | 80 | ``` 81 | console.log(this.id); 82 | ``` 83 | 84 | 你看，this的作用，就体现出来了。 85 | 86 | PS：顺便提醒一下，上面的代码中，如果把`var i`改成`let i`，效果又完全不同了。参考链接：[let和var在for循环中的表现](http://blog.csdn.net/stopllL/article/details/64130664) 87 | 88 | ### 全局作用域中的this 89 | 90 | 当一段代码在浏览器中执行时，所有的全局变量和对象都是在window对象上定义的。换而言之，所有的全局变量和对象都属于window对象。 91 | 92 | 93 | ## this的定律 94 | 95 | this关键字永远指向函数（方法）运行时的**所有者**。 96 | 97 | ### 函数赋值给变量时，this指向window 98 | 99 | 100 | 比如： 101 | 102 | ``` 103 | var foo1 = args.getInfo; 104 | foo1(); 105 | 106 | var foo2 = function(){}; 107 | foo2(); 108 | ``` 109 | 110 | 111 | this都是指向window。 112 | 113 | ### 以函数形式调用时，this永远都是window 114 | 115 | 116 | ### 以方法的形式调用时，this是调用方法的对象 117 | 118 | 119 | ## 解决闭包中的this指向问题 120 | 121 | 122 | 内部函数是可以访问到外部函数的变量的。 123 | 124 | 方式一：直接通过父函数的名字访问 125 | 126 | 方式二：如果不知道父函数的名字，在父函数里加一句`_this = this`，此时`_this`相当于父函数的名字。 127 | 128 | ### 当this遇到一些特殊的函数时 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | -------------------------------------------------------------------------------- /10-ES6/01-ES5中的严格模式.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | ## ES的几个重要版本 5 | 6 | - ES5 : 09年发布。 7 | 8 | - ES6(ES2015) : 2015年发布，也称为ECMA2015。 9 | 10 | - ES7(ES2016) : 2016年发布，也称为ECMA2016 (变化不大)。 11 | 12 | 13 | ## 严格模式的理解 14 | 15 | ### 概念 16 | 17 | 18 | **理解**：除了正常运行模式(混杂模式)，ES5添加了第二种运行模式："严格模式"（strict mode）。 19 | 20 | 顾名思义，这种模式使得Javascript在更严格的语法条件下运行。 21 | 22 | **目的**： 23 | 24 | - 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为 25 | 26 | - 消除代码运行的一些不安全之处，为代码的安全运行保驾护航 27 | 28 | - 为未来新版本的Javascript做好铺垫 29 | 30 | ### 使用 31 | 32 | - 针对整个脚本文件：将`use strict`放在脚本文件的第一行，则整个脚本文件将以严格模式运行。 33 | 34 | - 针对单个函数：将`use strict`放在函数体的第一行，则整个函数以严格模式运行。 35 | 36 | PS：如果浏览器不支持，则这句话只解析为一条简单的语句, 没有任何副作用。 37 | 38 | 脚本文件的变通写法：因为第一种调用方法不利于文件合并，所以更好的做法是，借用第二种方法，将整个脚本文件放在一个立即执行的匿名函数之中。 39 | 40 | ### 语法和行为改变 41 | 42 | - 必须用var声明变量 43 | 44 | - 禁止自定义的函数中的this指向window 45 | 46 | - 创建eval作用域 47 | 48 | - 对象不能有重名的属性 49 | 50 | 51 | ## 严格模式和普通模式的区别 52 | 53 | ### 1、全局变量显式声明 54 | 55 | 在正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明。 56 | 57 | 58 | ### 2、禁止this关键字指向全局对象： 59 | 60 | ```javascript 61 | var foo = function () { 62 | console.log(this); 63 | } 64 | 65 | foo(); 66 | ``` 67 | 上方代码中，普通模式打印的是window。严格模式下打印的是undefined。 68 | 69 | ### 3、创设eval作用域 70 | 71 | 72 | 73 | ### 2、禁止使用with语句 74 | 75 | 因为with语句无法在编译时就确定，属性到底归属哪个对象。 76 | 77 | 78 | 79 | ### 构造函数必须通过new实例化对象 80 | 81 | 构造函数必须通过new实例化对象，否则报错。因为this为undefined，此时无法设置属性。 82 | 83 | 比如说： 84 | 85 | 86 | ``` 87 | var Cat = function (name) { 88 | this.name = name; 89 | } 90 | 91 | Cat('haha'); 92 | ``` 93 | 94 | 上方代码中，如果在严格模式下，则会报错。 95 | 96 | 97 | ### 5、为了让代码更安全，禁止函数内部遍历调用栈 98 | 99 | ### 6、严格模式下无法删除变量 100 | 101 | 102 | ### 7~10 属性相关 103 | 104 | 普通模式下，对一个对象的只读属性进行赋值，不会报错，只会默默地失败。严格模式下，将报错。 105 | 106 | 严格模式下，对禁止扩展的对象添加新属性，会报错。 107 | 108 | 普通模式下，如果对象有多个重名属性，最后赋值的那个属性会覆盖前面的值。严格模式下，这属于语法错误。 109 | 110 | 111 | 普通模式下，如果函数有多个重名的参数，可以用arguments[i]读取。严格模式下，多个重名的参数属于语法错误。 112 | 113 | 114 | 比如下面这样的代码： 115 | 116 | ```javascript 117 | var obj = { 118 | username: 'smyh'; 119 | username: 'vae' 120 | } 121 | ``` 122 | 123 | 上面的代码，在严格模式下属于语法错误，因为有重名的属性。 124 | 125 | ### 函数必须声明在顶层 126 | 127 | 128 | 将来Javascript的新版本会引入"块级作用域"。为了与新版本接轨，严格模式只允许在全局作用域或函数作用域的顶层声明函数。也就是说，不允许在非函数的代码块内声明函数。 129 | 130 | ### 新增关键字 131 | 132 | 为了向将来Javascript的新版本过渡，严格模式新增了一些保留字：implements, interface, let, package, private, protected, public, static, yield。 133 | 134 | 135 | ## 总结 136 | 137 | 至少要能答出四五条。 138 | 139 | 140 | 参考链接： 141 | 142 | - [阮一峰 | Javascript 严格模式详解](http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html) 143 | 144 | 145 | 146 | -------------------------------------------------------------------------------- /18-前端面试/21-面试题整理 by smyhvae.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ## JavaScript 8 | 9 | ### 存储相关：请描述以下cookie、localStorage、sessionStorage的区别 10 | 11 | 12 | > 在H5之前，cookie一直都是本地存储的一个重要的方法。直到后面的两个出现了， 就开始用后面的两个做本地存储。 13 | 14 | 15 | **1、cookie**： 16 | 17 | - 本身用于客户端和服务器端的通信。 18 | 19 | - 但是它有本地存储的功能，于是就被“借用”。 20 | 21 | 我们可以通过`document.cookie`获取和修改cookie，获取到的其实就是一个字符串。 22 | 23 | 24 | cookie用于存储时的缺点： 25 | 26 | - 存储量太小，只有4kb 27 | 28 | - 所有http请求都带着，会影响获取资源的效率 29 | 30 | - api简单，需要封装才能用。`document.cookie = ...` 31 | 32 | 33 | 34 | ## HTML5 35 | 36 | ### HTML5新增了哪些内容或API？使用过哪些？ 37 | 38 | 新元素： 39 | 40 | - `
`、`