​ 最近公司调整，我有机会从0开始做一个项目感觉很爽；下面简单说一下我们的技术选型：

​ 1.前端展示页选用公司自己的nodejs框架搭建前端页面

​ 2.后台系统用react作为框架搭建后台页面

​ 3.后台系统是用nodejs作为中间层接收后端接口数据后渲染模版传给客户端（浏览器）

​ 之前一直在看react的demo和API从来没有在项目中用过，之前看demo和api时觉得react的写法上实在让我这个纯前端觉得高大上同时望而却步的感觉，这次有机会用react在实际项目中使用内心却有那么一点的小激动；好了废话不多说，下面就说说react吧（由于第一次用，记录不对的地方还请看官大大批评指正）

​ 由于是实战小记，这里就不说react是什么，react解决了什么等问题了，这些问题可以在搜索引擎搜到一堆大大们的文章学习，今天以实战经历为主；我们用了（antDesign）这个前端框架的，先说说react创建组件的ES5和ES6两种方法：

ES5：

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

import React from 'react';
import reactDOM from 'react-dom';
/*子组件*/
var Hello = React.createClass({
  getIntialState: function(){}, //初始化组件状态
  getDefaultProps： function(){}, //初始化组件的默认属性
  
  propTypes: {}, //规定属性的存在性和类型
  
  //一些生命周期相关函数
  componentWillMount: function(){}, //组件被嵌入之前触发
  componentDidMount: function(){}, //组件被嵌入之后触发
  componentWillReceiveProps: function(){}, //当props有改变时触发
  componentWillUnmount: function(){}, //组件被注销之前触发
  //渲染函数，不能省略    
  render: function() {
    return <h1>Hello {this.props.name}</h1> ;     
  }
});
export default Hello
/*父组件*/
ReactDOM.render(
  <Hello name="John" />,
  document.getElementById('App')
);

上周没事深入了解了下node的运行机制和原理，并在内部做了个小分享，今天拿出来整理下分享出来！之前配置了mongodb，所以最后用node+mongodb做了个小demo，简单易理解！好了下面进入正题！

首先我们一定要记住一点：nodejs本身不是开发语言，它是一个工具或者平台，在服务器端解释、运行javascript；nodejs利用Google V8引擎来解释运行javascript，但是系统真正执行的代码是用C++写的。javascript做的只是调用这些API而已。

NodeJS的三大特点

• 单线程
• 异步I/O(非阻塞)
• 事件驱动

运行机制解析

在 Java 和 PHP 这类语言中，每个连接都会生成一个新线程，理论上最大的并发连接数量是 4,000 个用户。随着您的客户群的增长，如果希望您的 Web 应用程序支持更多用户，那么，您必须添加更多服务器。所以在传统的后台开发中，整个 Web 应用程序架构（包括流量、处理器速度和内存速度）中的瓶颈是：服务器能够处理的并发连接的最大数量。这个不同的架构承载的并发数量是不一致的。
而Node的出现就是为了解决这个问题：更改连接到服务器的方式。在Node 声称它不允许使用锁，它不会直接阻塞 I/O 调用。Node在每个连接发射一个在 Node 引擎的进程中运行的事件，而不是为每个连接生成一个新的线程

这周手里没项目，所以闲来没事就吓研究，之前一直想搞一搞node+mongoDB一直没有机会，所以这周就考虑了一下vue+node+mongodb组合做个后台之类的demo，首先我之前完全没有用过mongodb+node的经验所以基本是从0开始摸索，今天我就来说说mongodb的安装配置和启动；

首先必须要有一套node环境这是必须的，我就不多说了，目前大部分前端多少都要搭建node环境来开发；

下面今天的主角登场MongoDB，先下载MongoDB，这里的下载连接是官方64位msi包，有其他系统或需求的可直接到官网自行下载，由于我本机是win7(64-bit)，所以我今天是围绕win7来讲解的；

mongoDB 本地安装如图：

CSS变量应该称之为 CSS 自定义属性 ，不过下文为了好理解都称之为 CSS 变量。

一直以来我们都知道，CSS 中是没有变量而言的，要使用 CSS 变量，只能借助 SASS 或者 LESS 这类预编译器。

这个重要的 CSS 新功能，所有主要浏览器已经都支持了。本文主要介绍如何使用它，我们发现css如此强大，这是一个令人激动的革新，下面写个简单的demo来感受下CSS变量的强悍：

See the Pen css变量 by kevin (@it_hack) on CodePen.

今天记录个随笔，希望大家在应用vue各种插件构成中少踩一些坑；

上周做公司内部一个累死数据看板的页面，在原来vue的后台中加了一个组件；这个组件其实就是一个轮播效果其他的没什么太多东西，本来以为是so easy的事，谁想到遇到了个问题，一开始没想明白，用了一天时间我基本搞明白问题，今天记录下来，希望亲们有遇到相同问题时先考虑是不是我这次踩的坑；

我在vue轮播组件式选用了vue-awesome-swiper,这个vuejs组件是基于swiper开发的；至于这个组件是怎么用的可到github上查看这里不做详细介绍，下面上我的代码

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

<template>
<span>{{activeIndex}}---{{in}}</span>
   <swiper :options="swiperOption" class="swiperbox" :class="{swiper2:activeIndex==1,swiper3:activeIndex==2}">
        <swiper-slide class="swiperItem" v-for="(keyP,itemBox) in swiperTitle">{{activeIndex}}---{{in}}
        </swiper-slide> 
       <div class="swiper-pagination" slot="pagination"></div>
   </swiper>
</template>

return {
       swiperOption: {
         height: 300,
         autoplay: false,//20000
         loop : true,
         autoplayDisableOnInteraction : false,
         setWrapperSize :true,
         pagination : '.swiper-pagination',
         paginationClickable :true,
         mousewheelControl : true,
         observer:true,
         observeParents:true,
         onSlideChangeStart: function(swiper){
           vm.activeIndex=swiper.realIndex;
           vm.in=swiper.activeIndex;
           console.log(vm.activeIndex,vm.in)
         }
       },
       activeIndex:0
}

这段轮播看上去没什么问题，假如我们有3个slide索引分别是：0=>1=>2，我们手动切换会发现0=>1=>2正序切换怎么切都ok，当我们从0=>2时出问题了，在onSlideChangeStart回调中activeIndex和in控制台是更新了索引的，但是在dom中swiper-slide里的dom数据是未更新的，而swiper外的dom是更新的，这是怎么回事呢？我google后发现segmentfault有相同的问题，有人回答说要配置swiper的观察者模式为true，我想说这是分情况的，这是针对组件数据是异步进去时开启观察者管用，但我这个情况是不起作用的，经过多方考证发现这是swiper的loop问题，开启了loop的话，swiper只是自己在dom上自己复制了两个节点进去，但是vm是不知道这个节点状态的，所以导致在0=>2时出现不更新dom的问题，我最后的解决办法是舍弃了loop这个功能，反正开了自动轮播，手动切换就关了loop吧；

希望大家在vue中用swiper时注意一下这个loop问题，尽量绕开loop;

如上文章有点潦草，还望谅解；有问题随时艾特本人；

VUE1.0记录

场景介绍

16年在大数字总有一些需求，把一些原生的页面改用H5来做，其中有几大块（个人中心、抽奖中心）等一些集合型比较强的页面，当时如果一个页面一个页面做的话，需要制作好几十个html页面然后用两三个ajax接口请求数据然后渲染页面，所以考虑用vue的双向绑定、组件和路由来解决不断copy的尴尬过程！

当时vue2还在测试阶段，所以先用的vue1做的第一个项目，下面是我当时遇到的一些问题，如果用法和理解上有错误还希望各位看官给个建议意见和指正；

问题1

由于一开始用vue我是直接上手，上手前就大概看了一样vue的api，所以当时想了一个问题，为什么我在入口文件里已经引入了vue，在接口用到vue时还要在引用一次呢？现在其实我了解了，不知道这么解释对不，入口文件也只是一个引入，只有在组件里用到vue可以不用引入，接口文件的js如果需要用vue还是需要引用的，入口文件这个简单理解为是个模块，当在其他js文件需要用这个模块时也是需要引入使用的！

问题2

这其实不算个问题，只是当时没有详细查看时间绑定api，绑定方法时可以访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法:

1
2
3
4
5
6
7
8

<button v-on:click="say('hello!', $event)">Submit</button>
// ...
methods: {
  say: function (msg, event) {
    // 现在我们可以访问原生事件对象
    event.preventDefault()
  }
}

问题3

​ 由于安卓端需要获取页面一个a函数作为回调，这个a必须在全局下，所以这里遇到vue问题，钩子的问题！这个问题我一直研究到晚上十一点才算解决，问题场景如下：

在项目里又一个index.vue和silder.vue,在index里我

很久没来更新文章了，因为我从大数字离开了，现在才刚刚稳定一点吧，今天开始不定期和大家分享一些我面试遇到的一些问题，可能有些问题我都忘了，但一些比较经典，比较基础的问题还记住了一些；

其实前段时间面试发现，前端面试基本上离不开那几个知识点，对象继承、闭包、数组、作用域等等这些js基础只是，关于其他的框架问题不外乎就是最近比较流行的vuejs，webpack，react，gulp，nodejs等等这些东西，但不同公司侧重点不同，因为公司有的用vue，有用react的等等；其实面试还是靠自己的基础知识是否扎实，这几年前端面试比较稳了没有以前那么简单和粗糙了，这两年的前端都比较看重个人的基础和发展空间等多方面因素；

好了闲话不多说，先来说说今天的一个比较基础的js题；

    var z = 10;
    function foo(){
            console.log(z);
    }
    (function(funArg){
            var z = 20;
            funArg();
    })(foo);

有人说这题很基础啊，但是也有一部分人会被迷惑；这里说一下两种作用域；

作用域”我们知道是一套规则，用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找。

作用域有两种主要工作模型：词法作用域和动态作用域。

大多数语言采用的都是词法作用域，少数语言采用动态作用域（例如 Bash 脚本），这里我们主要讨论词法作用域。

前端还是一个年轻的行业，新的行业标准， 框架， 库都不断在更新和新增，正如赫门在2015深JS大会上的《前端服务化之路》主题演讲中说的一句话：“每18至24个月，前端都会难一倍”，这些变化使前端的能力更加丰富、创造的应用也会更加完美。所以关注各种前端技术，跟上快速变化的节奏，也是身为一个前端程序员必备的技能之一。

1. 面试题目： 根据你的等级和职位的变化，入门级到专家级，广度和深度都会有所增加。

2. 题目类型： 理论知识、算法、项目细节、技术视野、开放性题、工作案例。

3. 细节追问： 可以确保问到你开始不懂或面试官开始不懂为止，这样可以大大延展题目的区分度和深度，知道你的实际能力。因为这种知识关联是长时期的学习，临时抱佛脚绝对是记不住的。

4. 回答问题再棒，面试官（可能是你面试职位的直接领导），会考虑我要不要这个人做我的同事？所以态度很重要、除了能做事，还要会做人。（感觉更像是相亲( •̣̣̣̣̣̥́௰•̣̣̣̣̣̥̀ )）

5. 资深的前端开发能把absolute和relative弄混，这样的人不要也罢，因为团队需要的是：你这个人具有可以依靠的才能（靠谱）。

前端开发知识点：

1
2
3
4
5
6
7
8
9
10
11

HTML&CSS：
    对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、
    HTML5、CSS3、Flexbox

JavaScript：
    数据类型、运算、对象、Function、继承、闭包、作用域、原型链、事件、RegExp、JSON、Ajax、
    DOM、BOM、内存泄漏、跨域、异步装载、模板引擎、前端MVC、路由、模块化、Canvas、ECMAScript 6、Nodejs

其他：
    移动端、响应式、自动化构建、HTTP、离线存储、WEB安全、优化、重构、团队协作、可维护、易用性、SEO、UED、架构、职业生涯、快速学习能力

作为一名前端工程师，无论工作年头长短都应该掌握的知识点：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

2、DOM操作 —— 如何添加、移除、移动、复制、创建和查找节点等。

3、事件 —— 如何使用事件，以及IE和标准DOM事件模型之间存在的差别。

4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。

5、严格模式与混杂模式 —— 如何触发这两种模式，区分它们有何意义。

6、盒模型 —— 外边距、内边距和边框之间的关系，及IE8以下版本的浏览器中的盒模型

7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们

8、浮动元素 —— 怎么使用它们、它们有什么问题以及怎么解决这些问题。

9、HTML与XHTML —— 二者有什么区别，你觉得应该使用哪一个并说出理由。

10、JSON —— 作用、用途、设计结构。

很久没有更新了，今天趁着中午吃饭前先来说说最近忙的事情，简单说下流水账，得空时把项目放到博客里做个demo，做个纪念！

最近一直在忙这单页面这方面的事情，之前一直没有好的项目练手！现在终于让我抓到了练手的了！先是有个内部数据后台用了angularjs,后有一个VUE单页面活动应用！

首先这两个东东都是现成的，都是其他部门后端开发的！我只是负责修改一下用到我们自己的项目中！但是从这两个已经完成的项目中我学到了很多！首先在网上所有的资料没有一个完整项目！都是零碎的，而且只有在我们自己项目中遇到的问题才是最好的老师！

由于这两个已有的现成的东东基本都算是后端开发！所有这两个项目中有很多在网上学不到的思想！

首先，项目中的所有页面全是模块

其次，项目中完全没用后端语言，所有数据全是通过接口解决，而整个项目不过用了三四个接口来做，只是修改下请求的参数就可返回当前页面想要的数据

javascript深拷贝是初学者甚至有经验的开发者，都会经常遇到问题，有时候面试也回问道这个问题；今天我就来聊一聊这个深拷贝；

深拷贝

有深拷贝自然就有浅拷贝，很人在接触这个概念的时候，是很懵逼的。

我们为什么要用深拷贝？

在很多情况下，我们都需要给变量赋值，给内存地址赋予一个值，但是在赋值引用值类型的时候，只是共享一个内存区域，导致赋值的时候，还跟之前的值保持一直性。
栗子：

// 给test赋值了一个对象
var test = {
    a: 'a',
    b: 'b'
};
// 将test赋值给test2
// 此时test和test2是共享了同一块内存对象，这也就是浅拷贝
var test2 = test;
test2.a = 'a2';
test.a === 'a2'// 为true