包管理

• npm
• cnpm
• yarn

作用：自动下载东西，解决依赖问题。下载东西顺，便下载依赖包

npm

1.常用命令：

npm上传自己的模块

• 先注册一个用户
• npm adduser 链接、npm login

2.建立自己的package

npm publish 发布自己的包

如果重新发布需要修改版本号

3.版本号（主版本+次版本+build号）

较大变动 + 功能改进 + 小修补

~版本号 近似版本

^版本号 兼容版本

*版本号 所有版本

a-b a版本-b版本都可以

1
2
3
4
5

{
"dependencies": {},//生产环境
"devDependencies": {}//开发环境
//esLint检测代码质量，是开发环境需要用的
}

4.package.json中注意

script的作用

npm test //测试
npm start //启动
npm stop //关闭
npm restart //重启

cnpm

npm的镜像

cnmp地址

yarn

1.yarn的特点

• 快
• 有缓存

2.yarn使用

yarn init 初始化
yarn add 添加依赖包
yarn upgrade
yarn remove 卸载依赖包
yarn install 安装所有依赖

package.json yarn.lock

举例

browserify node.js打包，给前台使用 编译打包前台js
brower-sync 同步-多端 源码 页面

1.盒模型

不想多说，太基础了

2.项目中的实现

针对性的问你一些做过的项目，但是dj这次面试基本问题都是从项目出发问的，很少问到基础，
问性能优化相对多一点

3.jQuery经常用到那些方法

其实一问觉得有点懵逼，自己经常把js和jQuery的方法搞混，就说出extend扩展，remove（），append()
之类的

4.开发者工具面板常用的

常用 Elements、Sources、Network、Application、Console

还有三个不常用的 Memory Audits Security

5.webpack和require的区别

这题问的有点懵，我还在想，webpack就是模块的打包工具，requireJS是js中文件和模块的框架，
有点没有get到面试关想问我的点，webpack和requireJS是异步的模块使用方案，通过配置文件配置
最后打包，另外一点webpack自身有打包的功能，requireJS需要结合打包工具一起使用。

另外webpack和requireJS在配置打包文件时文件分配逻辑应该不一样。

没有真正的去分析过到底有什么区别。

6.有很多图片请求怎么优化

图片优化

7.不知道源码情况按钮被无故移除怎么办

其实我不知道在开发者模式下是可以打DOM断点的

8.最近在看那些书

最近在重新巩固js，所以下了js红宝书的pdf版，之后打算看http指南。

9.遇到问题怎么解决

（1）自己找问题
（2）百度
（3）谷歌
（4）如果有github直接上issue上提问，这个是比较暴力的

10.node的express是否用过

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。
使用 Express 可以快速地搭建一个完整功能的网站。

这个确实不知道

11.图片的垂直水平居中（使用css3特性）

flex：几个属性搞定 但是宝宝忘了

transform的translate属性

1
2

<div class="center">您可以尝试改变浏览器大小，这个元素依然是水平垂直居中的哦！</div>

1
2
3
4
5
6
7
8
9
10
11
12

.center{
position: absolute;
top: 50%;
left: 50%;
width:50%;
height:30%;
padding:20px;
text-align:center;
background:#393;
color:#fff;
transform: translate(-50%, -50%);
}

12.ES6

新增let 字符串模版 for of Map 解构 Promiss
但是不知道怎么了，居然没说 箭头函数 模块化 面向对象 我一定是疯了。

13.setTimeOut和setInterval

setInterval 不断地执行指定代码直到调用clearInterval清除定时器对象
setTimeout 执行一次指定代码，使用clearTimeout清除定时器对象
setInterval和setTimeout都返回定时器对象标识符，用于clearInterval和clearTimeout调用

我回答的是一个是延时，一个是周期性的。

ES6 常用的那80%

编译工具

1. babel

2. traceur 编译工具

3. bootstrap 引导程序

定义变量

let定义变量

1. let具备块级作用域

2. 不允许重复声明

1
2

let a = 15 ; 
let a = 5;//报错

1. var 具备函数作用域

2. 用处(i问题):let拥有 块级作用域 = 匿名函数自执行

const定义变量

1. 定义常量 赋值之后不能被修改 //const必须给初始值 不能被重复定义

2. 用途:防止变量被意外修改，比如 引入库或者组件名

字符串连接

字符串模板
var a = haha 使用方式 ${a}

以前字符串拼接 ‘abc ‘+变量名+’efg’

现在 ‘abc${变量名}def’

第一题 js的this call apply bind

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

var a = {
    a: 'haha',
    getA: function () {
        console.log(this.a);
    }
};
var b = {
    a: 'hello'
};
var getA = a.getA;
var getA2 = getA.bind(a);
function run (fn) {
    fn();
}
//一下分别输出
a.getA();//haha
//this指向当前调用函数的对象a
getA();//a 对象
//当前的this指向全局this,一般遇到这样的函数调用，fn（）=this.fn()，当前this指向全局
run(a.getA);//a 对象
//这里 fn = a.getA = a对象中getA这个函数，fn（）this指向全局。所以 a对象
getA2.call(b);// 'haha'
//call（b）幌子。getA.bind(a) 'haha'

第二题 原型

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
42
43
44
45

function clone(obj) {
    //实现
}
var a = {name:'a'};
var b = clone(a);
//完善实现中部分，让一下代码成立
console.log(b.name)//'a'
a.name = 'a1';
console.log(b.name)//'a1'
b.name = 'b';
console.log(b.name)//'b'
console.log(a.name)//'a1'
a.name = 'a2';
console.log(b.name)//'b'
//当b没有值时，b的值是a的值，当b被赋值，ab的值互不影响
第一种答案
function clone(obj){
    return Object.create(obj);
    //Object.create()创建一个具有指定原型且可选择性地包含指定属性的对象。
}
第二种答案
function clone(obj){
    function fn(){};
    fn.prototype = obj
    return new fn();
}
第三种答案
function clone(obj) {
    var ret = {};
    ret.__proto__ = obj;//__proto__并不是所有浏览器都支持
    return ret;
}

第三题 异步

//现在有三个异步接口，分别是
（1）getTodyUser:获取当天用户id，callBack返回userId
（2）getTodyMovie:获取当天电影的id，callBake返回
（3）bookMovieFor:为用户预定影片，参数是userId和MoveId

现在要实现一个接口，bookTodyMovieForTodyUser,为当天的用户预定当天的电影

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//获取当天预定客户
getTodyUser(function(userId){});
//获取当天的电影
getTodyMovie(function(movieId){});
//为用户预定影片
bookMovieFor(userId,movieId,function(isDone){
    
})
//根据以上接口封装这个函数
bookTodyMovieForTodyUser(function(isDone) {
    //为今天的客户预定今天的影片
    
    alert("预定成功")
});

XX公司面试

今天的事今天做，分享面筋，大家共同进步。加油。

有的部分忘记了，想起啥写啥，可能有点乱。

第一部分组长面

1.URL的结构

URI—Universal Resource Identifier通用资源标志符

Web上可用的每种资源如HTML文档、图像、视频片段、程序等都是一个来URI来定位的
URI一般由三部组成
①访问资源的命名机制
②存放资源的主机名
③资源自身的名称，由路径表示，着重强调于资源。

URL—Uniform Resource Location统一资源定位符

URL是Internet上用来描述信息资源的字符串，主要用在各种WWW客户程序和服务器程序上，特别是著名的Mosaic。
采用URL可以用一种统一的格式来描述各种信息资源，包括文件、服务器的地址和目录等。
URL一般由三部组成
①协议(或称为服务方式)
②存有该资源的主机IP地址(有时也包括端口号)
③主机资源的具体地址。如目录和文件名等

例子
URI = 作文
URL = 议论文、记叙文、诗歌……

那么

1.宏观描述时，老师会问：今天考试的“作文”大家写的都不错，而不会说大家的“议论文”写的不错，虽然指的是一种东西。
2.客观描述时，你会和同桌说：我今天写的是“诗歌”，而不会啰嗦的说我今天用了诗歌的方式写的作文。

同理

当你写一篇技术文档规范时，你会说某个参数要传递一个URI，而不必说某个参数要传递一个“URL格式的字符串”。

• Scheme：// 　协议部分，以：作为结束，常见的协议包含HTTP、HTTPS等

• //: 层级URL标识符号 可以理解为把协议和后面的信息分开

• Login：password@：身份认证 一般的协议都会使用默认的匿名形式进行数据获取

• Address：服务器地址 一般是以域名的形式存在

• port：服务器端口 不同协议有自己默认的端口号

• /path/to/resource: 文件路径 指向唯一一个确定的资源

• ?query_string：查询字符串

• ／#fragment：片段ID 这部分内容不会被传递到服务器 一般用于页面的锚，页面下方返回顶部的按钮就是利用这个实现的

  URL结构参考资料

  ​

  阅读全文 »

Mac前端环境搭建

虽然平时用ipad，但是换Mac OSX系统之后，如果用于娱乐可能不会觉得不适应，但是用于前端
开发，觉得需要适应的还很多，安装git、nvm、php等工具就费了老多时间，把遇到的坑和一些好的工具分享给大家。

Homebrew

1.Homebrew是干嘛的

首先是Homebrew，按我的理解就是类似npm，npm是包管理工具，用来管理各种依赖包，而Homebrew是软件包管理工具。
可以在Mac中方便的安装软件或者卸载软件，如git、wget、zsh等

2.为什么需要Homebrew

linux系统有个通病，软件包依赖，当前主流的两大发行版本都自带了解决方案，Red hat有yum，Ubuntu有apt-get
你用mac os，有第三方支持：Homebrew，Homebrew简称brew。

3.Homebrew的安装

1
2

//打开终端
sudo ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

CI框架学习篇(1)

关于CI

• 特点：轻量(2.2M)、快速(用到哪些进行手动的加载)、功能强大
• 基于MVC模型
• 能够生成干净的URL，便于SEO优化
• 扩展性强
• 不需要模板引擎(写原生速度更快、不需要重新编译模板)

MVC框架

模型：提供增、删、改查数据库这些功能
视图：负责给用户展示页面功能
控制器：连接视图和模型，是模型和视图以及其他处理的中介

URL片段

CI是访问单入口来执行的其中的功能 访问index.php来操作controller

index.php/home/index home/index就是URL片段 类名/方法 index是默认的方法

localhost/ci/index.php/home 会直接索引到home下的index方法

CI的一些操作

1. 配置默认控制器
2. 载入视图文件 $this->load->view(‘file_name’) php文件不需要写后缀，其他文件需要后缀名
3. 给视图传递数据

   1 2 3 4

   $data['title'] = '标题'; $this->load->view('file_name1'，$data); $this->load->view('file_name2'); //file_name2可以使用$data的数据，其他视图使用也只需要加载一次

面试闯关2

继续总结

1.一个页面从输入URL到页面加载显示完成，这个过程中都发生了什么？

1. 浏览器都会开启一个线程来处理这个请求，同时在远程DNS服务器上启动一个DNS查询，这样就可以使得浏览器获得请求对应的IP地址了
2. 浏览器通过与远程web服务器TCP三次握手协商来建立一个TCP/IP链接。
3. TCP/IP链接建立，浏览器会通过该链接向远程服务器发送HTTP的GET请求。远程服务器找到资源并使用HTTP响应返回该资源，值为200的HTTP状态码表示一个正确的响应。
4. web服务器提供资源服务，客户端开始下载资源。
5. 解析html构建dom树->构建render树->布局render树->绘制render树。

TCP/IP三次握手示意图

你懂JSON么？

前端常做的事就是和后台调接口，总会有人告诉你，转成JSON格式。。。可是有时候本来就是JSON了，为什么还要转JSON。
不知道我对JSON的理解对不对，不对的可以指正。

什么是JSON

• JavaScript Object Notation 就是我们所说的JSON
• JSON 是存储和交换文本信息的语法。类似 XML。
• JSON 比 XML 更小、更快，更易解析。
• 你在js中写 var a = {“a”:”1”},js会直接解析成js对象{a:”1”}

JSON的值可以有哪些

• 数字（整数或浮点数）
• 字符串（在双引号中）
• 逻辑值（true 或 false）
• 数组（在方括号中）
• 对象（在花括号中）
• null

面试闯关1

在面试过程中，总会被问到一些你用到过、但是记不清一些零碎的知识，现在做一下总结。

第一部分：HTML+CSS

1.常用那几种浏览器测试？有哪些内核(Layout Engine)?

• 主要内核：Trident，Gecko，Presto，Webkit。

• IE（Trident）、Firefox（Gecko）、Opera（Presto）、Chrome（Webkit）

2.box-sizing常用的属性有哪些？分别有什么作用？

• content-box：在宽度和高度之外绘制元素的内边距和边框。
• border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
• inherit：从父元素继承 box-sizing 属性的值。

3.Doctype作用？标准模式与兼容模式各有什么区别?

• Doctype作用：告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
• 区别：标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

4.页面导入样式时，使用link和@import、行内、嵌入中有什么区别？

• 行内：失去的css的优势，但是优先级最高
• 嵌入：style方式，修改起来复杂
• @inportant：页面全部加载完成才导入css，在页面非常大的情况下会到时页面加载完成闪一下出现样式
• link：在页面加载之前加载css文件