发表于   |   分类于   |     |   阅读次数

手机端的布局和PC端的布局，应该差不多，但是要注意几个点：

  1. 手机端有个最基本的meta标签要加：
    1
    <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">

网页手机wap2.0网页的head里加入下面这条元标签，在iPhone的浏览器中页面将以原始大小显示，并不允许缩放。

说到移动平台meta标签，那就不得不说一下viewport了，那么什么是viewport呢？

viewport即可视区域，对于桌面浏览器而言，viewport指的就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域

非必须标签

1
2
<meta name="format-detection" content="telephone=yes"/>
//当该 HTML 页面在手机上浏览时，该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。

手机端的像素一般用em或者rem,这次用rem主要是想动态计算一下网页各个元素展示的大小，具体用js来计算，加在网页的head里面

1
2
3
4
5
6
7
8
9
10
11
12
13
  <script type="text/javascript">
        ;(function(window){
            var width = window.screen.width;
            var html = document.getElementsByTagName("html")[0];
            html.style.fontSize = width / 30 + "px";
            console.log(html.style.fontSize);
            window.onresize = function(){
                var width = window.screen.width;
                html.style.fontSize = width / 31 + "px";
            }
        })(window);
    </script>
//具体html.style.fontSize = width / 31 + "px";中的31是多少，这就要看自己要做多大的适应了。

这里的意思是，根据屏幕的大小来设置html的font-size大小，假如width是3000px;那么html的font-size大小就是3000/30 == 100px;也就是说1rem就是100px的大小，假如一个div的宽度是100px,就可以设置width:1rem,这样做的好处是动态去计算html根元素的font-size大小，要是自己开发调试的时候记得切换不同分辨率的手机的时候记得刷新一遍

以下是我自己做的效果：
ipad
ipad适应

6plus

图片名称

这只是两个不同分辨率下的效果。

css 代码（例如）

1
2
3
4
5
6
.header-description{
    width: 17rem;
    padding-top: 5rem;
    margin: auto;
    text-align: center;
}

以上布局总结

资料：
手机适配比好好的博客文章

发表于   |   分类于   |     |   阅读次数
缩进层级

1.一个制表符（设置为4个空格，强制）

语句结尾

1.都要加分号（强制）

行的长度
  1. 一行的长度限定在80个字符
如何空行
  1. 在方法之间
  2. 在方法中的局部变量和第一条语句之间
  3. 在多行或者单行注释之前
  4. 在方法内的逻辑片段之间插入空行，提高可阅读性
命名

1.变量和函数 —驼峰式，变量前缀是名词，函数和方法前缀应该是动词，常见的动词 can has is get set

2.常量 —全部大写

3.构造函数 —首字母大写

对象直接量、数组直接量
  1. 直接用对象直接量，然后添加属性。取代先显式地创建Object的实例。数组也是直接建
for-in循环

1.for-in循环都必须使用hasOwnProperty()

函数变量提升
  1. 因为函数变量提升，所以建议总是将局部变量的定义作为函数内的第一条语句，推荐合并var 语句,那些没有初始值的变量来说，它们应当出现在var的尾部
1
2
3
4
var value = 10,
    result = value + 10,
    i,
    len;
  1. 和变量声明一样，函数声明也会被javascript引擎提前,推荐先声明javascript函数然后使用函数
严格模式
  1. 不推荐在全局作用域下使用”use strict”,假如几个文件合并成一个文件会污染了其他文件
相等
  1. 发生强制类型转换的场景一般是判断相等运算符==和!= console.log(5 == “5”);//true,我们规定使用 ‘===’和’!==’
零全局变量
  1. 实现的方法就是使用一个立即执行的函数调用并将所有脚本放置其中，使用的场景是这段不提供任何接口的单会被单独立插到一个页面中，独立开来，也不污染
1
2
3
4
5
6
7
8
9
10
11
//js原生
(function(win) {
    var doc = win.document;
    //在这里定义其他变量
    //其他相关代码
})(window);
//jq
$(function(){
  //在这里定义其他变量
    //其他相关代码   
});
命名空间
  1. 在javascript中可以轻而易举地创造自己的命名空间，每个文件都需要给一个命名空间挂载东西，处理全局污染的代码一般这样子写，这样子保证最少的全局变量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var YouGlobal = {
    namespace: function(ns) {
        var parts =ns.split("."),
        object = this,
        i,
        len;
        console.log(this);
        for(i = 0,len = parts.length; i< len; i++){
            if(!object[parts[i]]){
                object[parts[i]] = {};
            }
            object = object[parts[i]];
        }
        
        return object;
    }
}

//使用
YouGlobal.namespace("Books.MaintainableJavaScript");
阅读全文 »

发表于   |   分类于   |     |   阅读次数

前端工程化已经深入人心，而工程化中必不可少的环节就是构建，所谓构建(bulid)就是基于既定的流程对项目中的文件进行处理，从而得到最终用于发布的文件，协助我们把工作做得更加简单.多页面是指有很多页面是独立的，然后它们引用的js也没有关联性

这里是对gulp和webpack协助工作的初步探讨，webpack作为gulp一个子任务项目根目录下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
-source
 -css
 -images
 -js
    -product
     -EasiCamera.js
     -EasiNet5.js
     -EasiNote.js
     -EasiNote3.js
     -EasiNote3C.js
     ----
 -less
 -plugins(一些插件)
 -views
  -products
   -EasiCamera.html
   -EasiNet5.html
   -EasiNote.html
   -EasiNote3.html
   -EasiNote3C.html
   -----

构建后的文件目录

1
2
3
4
5
6
-public
 -static
  -css
  -images
  -js
  -plugins

views下面的文件输出到./modules/font-end,这个文件夹下

下面是配置文件的结构

1
2
3
4
5
6
7
8
9
10
-gulpfile.js
-gulp-tasks
    clean.js
    css-compile.js
    gulp-webpack.js
    packup-libs.js
    resources-copy.js
-webpack-config
    -webpack.config.dev.js
    -webpack.config.pro.js

clean.js

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

var gulp = require('gulp');
var path = require('path');
var clean = require('gulp-clean');
var gulpSequence = require('gulp-sequence');

gulp.task('clean:all', gulpSequence('clean:views', 'clean:resources'));

gulp.task('clean:views', function(callback){
	return gulp.src(path.join(APP_PATH, 'modules', 'front-end', 'views'), { read: false })
		.pipe(clean({ force: true }));	
});

gulp.task('clean:resources', function(callback){
	return gulp.src(path.join(APP_PATH, 'public'), { read: false })
		.pipe(clean({ force: true}));	
});

gulp.task('clean:rev', function(callback){
	return gulp.src(path.join(APP_PATH, 'public', 'rev'), { read: false })
		.pipe(clean({ force: true }));
});

css-compile.js

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

var gulp = require('gulp');
var pump = require('pump');
var plumber = require('gulp-plumber');
var gulpLess = require('gulp-less');
var notify = require('gulp-notify');
var gulpSequence = require('gulp-sequence');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
var autoprefixer = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');

var autopreLess = ['last 10 versions', 'ie >= 8', 'Chrome >= 42', 'ff >= 38', 'Safari >= 7', 'Opera >= 29', 'iOS >= 7.1', 'ie_mob >= 10', 'Android >= 4.4', 'and_uc >= 9.9']

gulp.task('compile:css:dev', function(){
	return pump([
		gulp.src(['./source/less/**/*.less', './source/css/**/*.css']),
        plumber({errorHandler: notify.onError('Error: <%= error.message %>')}),
        gulpLess(),
		autoprefixer(autopreLess),
		gulp.dest('./public/static/css')
	])
});

gulp.task('compile:css:pro', function(){
	return pump([
		gulp.src(['./public/rev/**/*.json', './source/less/**/*.less', './source/css/**/*.css']),
		plumber({errorHandler: notify.onError('Error: <%= error.message %>')}),		
		revCollector(),
		gulpLess(),
		autoprefixer(autopreLess),
		minifyCSS(),
		rev(),
		gulp.dest('./public/static/css'),
		rev.manifest(),
		gulp.dest('./public/rev/css')
	])		  
});

gulp-webpack.js

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
46
47
48
49
50
51
52
53
54
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

var gulp = require('gulp');
var webpackDevConfig = require(APP_PATH + '/webpack-config/webpack.config.dev.js');
var webpackProConfig = require(APP_PATH + '/webpack-config/webpack.config.pro.js');
var webpack = require('webpack');
var gutil = require('gulp-util');
var pump = require('pump');
var uglifyjs = require('uglify-js');
var minifier = require('gulp-uglify/minifier');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
var clean = require('gulp-clean');
var gulpSequence = require('gulp-sequence');

var UglifyOption = {
    //不混淆变量名
    mangle:{
        except: ['jQuery']
    },
    preserveComments:false,
    report: "gzip",
    ASCIIOnly: 'true',
    beautify: {
        beautify: false,
        "ascii_only": true
    },
    compress:{
        sequences:true,
        dead_code:true,
        conditionals:true,
        booleans:true,
        unused:true,
        hoist_funs:false,
        join_vars:true,
        drop_console:true,
        global_defs: {
            "DEBUG": false
        }
    }
};


gulp.task('webpack:dev', function(callback){
	webpack(webpackDevConfig, function(err, stats){
		if(err) throw new gutil.PluginError("webpack:build-js", err);
		gutil.log("[webpack:build-js]", stats.toString({
            colors: true
        }));
		callback();
	});
});

gulp.task('webpack:rev', function(callback){
	webpack(webpackProConfig, function(err, stats){
		if(err) throw new gutil.PluginError("webpack:build-js", err);
		gutil.log("[webpack:build-js]", stats.toString({
            colors: true
        }));
		callback();
	});
});

gulp.task('min:js', function(){
	return pump([
		gulp.src(['./public/rev/**/*.json', './public/rev/**/*.js']),
		revCollector(),
        minifier(UglifyOption, uglifyjs),
        rev(),
		gulp.dest('./public/static'),
        rev.manifest(),
		gulp.dest('./public/rev/js')
	])
});


gulp.task('webpack:pro',
    gulpSequence(
        'webpack:rev',
        'min:js'
    )
)

packup-libs.js

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

var gulp = require('gulp');
var pump = require('pump');
var gulpConcat = require('gulp-concat');

var sources = ['./source/js/lib/jquery.js','./source/js/lib/mod.js','./source/js/lib/moment.js','./source/js/lib/underscore.js'];

gulp.task('packup:libs:dev', function(){
	pump([
		gulp.src(sources),
        gulpConcat('libs.js'),            
        gulp.dest('./public/static/js/lib')
	])
});

gulp.task('packup:libs:pro', function(){
	pump([
		gulp.src(sources),
        gulpConcat('libs.js'),            
        gulp.dest('./public/static/js/lib')
	])
});

resources-copy.js

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
46
47
48
49
50
51
52
53
54
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

var gulp = require('gulp');
var pump = require('pump');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
var gulpSequence = require('gulp-sequence');

gulp.task('copy:html', function() {
    return pump([
        gulp.src('./source/views/**/*'),
        gulp.dest('./modules/front-end/views')
    ])
});
gulp.task('copy:html:pro', function(){
    return pump([
        gulp.src(['./public/rev/**/*.json', './source/views/**/*.html']),
        revCollector(),
        gulp.dest('./modules/front-end/views')
    ])
});


gulp.task('copy:images', function() {
    return pump([
        gulp.src('./source/images/**/*'),
        gulp.dest('./public/static/images')
    ])
});
gulp.task('copy:images:pro', function(){
    return pump([
        gulp.src('./source/images/**/*'),
        rev(),
        gulp.dest('./public/static/images'),
        rev.manifest(),
        gulp.dest('./public/rev/imgs')
    ])
});

gulp.task('copy:font', function(){
    return pump([
        gulp.src(['./source/css/**/icomoon.*']),
        gulp.dest('./public/static/css')
    ])
});
gulp.task('copy:plugins',function() {
    return pump([
        gulp.src('./source/plugins/**/*'),
        gulp.dest('./public/static/plugins')
    ])
});
gulp.task('copy:favicon.ico',function() {
    return pump([
        gulp.src('./source/favicon.ico'),
        gulp.dest('./public')
    ])
});
gulp.task('copy:well-known', function() {
	return pump([
		gulp.src('./source/.well-known/**/*'),
		gulp.dest('./public/.well-known')
	])
});
gulp.task('copy:seewo-link', function(){
    return pump([
        gulp.src('./source/doc/**/*'),
        gulp.dest('./public/doc')
    ])
});

gulp.task('copy:dev', 
    gulpSequence(
        'copy:html',
        'copy:images',
        'copy:plugins',
        'copy:font',
        'copy:favicon.ico',
        'copy:well-known',
        'copy:seewo-link'
    )    
);

webpack.config.dev.js

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

var webpack = require('webpack'),
    CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"),
    path = require('path'),
    fs = require('fs'),    
    srcDir = path.resolve(process.cwd(), 'source');//cwd方法返回进程的当前目录（绝对路径）

    //获取多页面的每个入口文件，用于配置中的entry
    function getEntry() {        
        var jsPath = path.resolve(srcDir, 'js','product');//path.resolve方法用于将相对路径转为绝对路径。
        var dirs = fs.readdirSync(jsPath);
        //判断是一个目录还是一个对象
        var matchs = [], files = {};
        dirs.forEach(function (item) {
            matchs = item.match(/(.+)\.js$/);
            if (matchs) {
                files[matchs[1]] = path.resolve(srcDir, 'js','product',item);
            }
        });
        return files;
    }

module.exports = {
    entry: getEntry(),
    output: {
        path: path.join(APP_PATH, 'public', 'static', 'js'),        
        filename:'[name].js'
    },
    module: {
        loaders: [
            {
                loader: 'babel',
                test: /\.jsx?$/,
                exclude: /node_modules/,
                query: {
                    presets: ['es2015','stage-2']
            }
      },
        ]
    }
}
阅读全文 »

发表于   |   分类于   |     |   阅读次数

各种前端build工具

有段时间我比较混乱，对前端build工具本能上就给它们设置了一个高的入门门槛（可能与刚开始接触的时候，师兄给一份巨大的配置文件给我看熟悉，那时候还不知道node.js是什么东东），所以就~赶脚大佬好高上啊，忘了撸起袖子就是干啊。

下面的build总结来源于这篇文章：我终于弄懂了各种前端build工具

image
即使对于一些经验丰富的开发者来说，诸多的前端工具还是会让他们感到头痛，例如这篇文章作者。解决这个问题的最好办法，就是在概念上理解他们的工作方式，以及他们之间相互配合的方式。

不要被各种专业名词唬住

Node, NPM, Grunt, Gulp, Bower, Webpack, Browserify, Yeoman, Brunch……诸多的名词让你一时间感到手足无措，好像根本学不完。

其实关键就是，不要被它们唬住。要知道，所有这些工具，其最初的设计目的，==都是要让你的工作变得更简单==。

要想弄明白这些工具是什么、如何工作以及为何要使用它们，你其实只需要抓住少数几个核心概念。

概念1：build工具的两大核心功能，就是“安装vs做事”

从本质上说，开发工具做的事情就两个

  • 帮你安装东西
  • 帮你做事

安装类的工具，例如npm、Bower和Yeoman几乎什么东西都能装，它们可以用来安装前端库，例如Angular.js或是React.js。它们还可以为你的开发环境安装服务器。它们可以安装测试库。它们甚至可以帮你安装其他的前端开发工具和开发工具所带的插件等。

简而言之，任何你能想到的与代码有关的东西，它们都能安装。

众所周知，现在前端开发，早不是三剑客的形式了。基于node.js的运行开发环境，在package.json中可以看到各种安装的库，不过一般还是安装前端开发工具居多（这类工具帮我们把事情做得简单）

而帮你做事类的工具，例如Grunt、Webpack、Require.js、Brunchu和Gulp则更加复杂一点。这类工具的目标，是在web开发中帮你完成自动化。有的时候，这类工具所做的事情，被称为“任务（task）”。

为了完成这些任务，这类工具经常需要自己的包和插件生态。每一个工具都会使用不同的方式来完成任务。这些工具所做的事情也不尽相同。一些工具，擅长处理那些你所指定的任务，例如Grunt和Gulp等工具。还有一些工具，只只专注于一件事情，例如处理JavaScript的依赖，例如Browserify和Require.js等工具。

有的时候，你在一个项目之中可能需要使用多种工具。例如，我就曾在一个项目中使用了不同的工具来将下列任务进行自动化处理：

  1. 在一个文件中替换文本字符串
  2. 创建文件夹，并且将文件转移到这些文件夹中
  3. 用一条单一命令运行单元测试
  4. 在我保存文件的时候刷新浏览器
  5. 所有JavaScript文件整合为一个文件，将所有CSS文件整合为一个文件
  6. 对所有JavaScript和CSS进行简化处理
  7. 在html页面中修改script标签的位置

==做事类的工具这么多，而且它们的插件更多，如何知道我们需要什么插件，我们项目需要用什么，我感觉这是个新手不能掌握的。==

在你理解了前端工具分为安装类工具和帮你做事的工具之后，你就可以轻松的对它们进行归类：
image

概念2：build工具的“祖宗”是Node和npm

Node和npm负责安装和运行所有这些工具，因此你的所有项目中都会有它们的身影。由于这个原因，很多开发者在安装新的工具之前，都会尽可能的尝试使用这两个工具解决问题。

它们两个一个负责安装，一个负责帮你做事情。Node是做事工具，而npm则是安装工具。

npm可以安装Angular.js和React.js等库。它还可以安装服务器，让你的应用在开发阶段可以在本地运行。它还可以安装很多其他工具，帮你完成很多事情，例如简化代码。

而Node，则是帮你完成事情的，例如运行JavaScript文件，以及服务器等。

如果你刚刚开始学习，那么Node和npm都是必学的东西。随着你的项目不断丰富，你将会逐渐知道这两个工具的极限能力。当它们无法满足你的需要的时候，就是你需要开始安装其他工具的时候了。==（所以这就是经验）==

阅读全文 »

发表于   |   分类于   |     |   阅读次数

过程
前段时间在网上投了网易游戏，本来不怎么抱希望人家叫我去面试的，但是昨天就接到电话了，叫我今天三点去面试，心情五味杂陈，因为有点紧张。昨晚和今天都紧张到准备不下，看不下面试题，在公交上头还很晕，就告诉自己尽力而为吧，总结一下今天的面试情况，照例，还是把面试题尽最大程度上写下来，为以后更好的自己。
下面是一面的面试题，一面的两个面试官都是挺好的人，至少全程都是在微笑的，只怪我不知道答对了多少了。

一面

  • 1.自我介绍
  • 2.快速排序的原理，它的时间复杂度是多少，为什么是那个数，冒泡排序呢
  • 3.如何理解闭包，闭包有什么特点，有什么优缺点
  • 4.原型作用域链是怎么样的，用过原型作用链不，对类的继承的理解
  • 5.如何去写模块化的Js，你们工作室的js代码编写的分工
  • 6.说说你对jq和react这两个库的区别
  • 7.react中两个组件的通信是怎么样的，比如我这个组件有个按钮，里面如果点击这个按钮返回的数值在另外一个组件里面要用，如何通信
  • 8.你的css怎么样，如何让子元素的div相对父元素的div垂直水平居中
  • 9.上一道题假如我不知道父元素的长宽，父元素的长宽是根据页面的高度来的，像弹框那样
  • 10.不清楚this的机制，那你平时是怎么样处理this指向的问题，要是我要用到某个具体的对象的话
  • 1
    2
    3
    4
    5
    6
    (function(a){
        console.log(a);
        function a(){};
        a=999;
        console.log(a);
    })(1000);

11.这里面的两个a输出的是什么，为什么输出的是这样

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var a={
        const=1,
        getName=function(){
        alert(this.const);
        }
    }
    a.getName();
    var fn;
    fn=a.getName;
    fn();

12.请问这两个会输出什么，为什么会输出的是这样

  • 1
    2
    3
    4
    function(str){
        //13.传字符串abc，如何写里面的函数，让这个字符串处理成a b c,也就是往每个字符串后面加一个空格
    }
    //14.也是这道题，如何给这个字符串加一个方法，去引用它，比如说我有一个方法叫做simify();如何把这个方法加到这个字符串上面

  • 15.除了前端，还有没有其他的技能，假如说让你学习一门服务器端语言，你觉得你的学习能力怎么样

  • 16.你有什么要问的吗。。。
  • 17.假如页面有好几张图片，你是如何给每一张的时间处理点击的事件，用到的事件是那些，你为什么要用addListenEnter这个事件，这个与你直接如何进行绑定的区别
  • 18.call 和apply的区别;

也是神奇，我面完这个之后感觉没有多大的戏了因为全程也不知道自己答对了多少，还是尽量的答了，可以说每个问题都答了，人家每个问题都给我挖深，比如我答了快排的两种方法之后人家就问我时间复杂度，不知道我答完之后人家又接着挖深什么。。。然后我准备收拾收拾书包走人的时候两个已经出门的面试官推门进来叫我等一下，他们跟HR商量一下，然后我那个心啊欣喜若狂，然后等了10多分钟，就有一位老大进来了，感觉就是大boss啊，凶凶的样子，不过人也是很好的，只不过他问的技术问题我就没有答对几个了。

二面

  • 1.自我介绍一下
  • 2.想不想考研，为什么你不喜欢数据挖掘就不考研，我们这个岗位就是在做数据挖掘的你不知道吗，你没有看清楚职位要求就投了这个岗位吗？
  • 3.你们的工作室是什么性质
  • 4.哪里人
  • 5.c++的什么机制你了解吗
  • 6.网络的7层还记得是哪7层
  • 7.TCP和UDP的区别
  • 8.Mysql用过吗，左连接是怎么样写的
  • 9.逛网站也是一种兴趣爱好？
  • 10.平时逛什么网站，淘宝吗？
  • 11.喜欢看书都看过一些什么书
  • 12.之前有没有去找过实习
  • 13.你们班有多少人，3.2绩点在你们班排名多少
  • 14.未来的职业规划是怎么样的
  • 15.大三时候成绩优秀的话你印象最深的知识是什么

。。。还有一堆想不起来了，不知道这算什么面试，感觉面试官全程对我不太爽，也有可能他是c++的，问我c++的东西我一毛都不懂，问我数据库的我也不懂，然后人家就只能乱扯了，我也不知道为何这样子，如果是技术面，不会跟我多讲这些话题的，他一直在质疑我的东西，也是，大神都是这样的，我的技能不过是小菜一桩。留给时间吧，明天我会整理答案，明早还有个面试，希望不辜负自己甚好的年华。good night.

发表于   |   分类于   |     |   阅读次数

感想

等了两个星期，终于来给我电话了，我从最初的惊喜期待到后面的焦虑不堪到后面的伤心欲绝再到后面的一丝丝期望再到波澜不惊，不为什么
她说要我5，6月份就要去珠海实习，要不就很抱歉，可是我不想那么早离校，因为地点是在珠海，我还要上课还要考试，所以我拒了，这到底是不是正确的选择，留给时间吧，至少我现在也觉得就这样没了。。我期待的公司，就这样拒了，正如同学所说，我希望一切都是我自己可以选择的，当初知道消息是内部通过10多个，只选3，4个，我处于待定状态，就知道选择权不在我手上了，现在是设一个门槛给我还是他们的工期确实很赶，想不到我也有这么个抉择的时刻，当初找实习只是想先上了再说，然后我也没有心机先答应下来之后去不去是我们的事。。这招是不是学到了。。
想想要是我答应了5，6月份会有怎么样的生活，上学期的绩点3.85 大三想拿个一二等奖学金，工作什么时候都会有的，问题是自己足够好了吗，不可或缺了吗，有话语权了吗。谢谢金山，因为它最终还是给了我个答案，不会石沉大海。我也得好好学习好好沉淀了。

发表于   |   分类于   |     |   阅读次数

先谈感想

早上9点半开始面试，面完了一面20分钟吧，去等候室在等了10分钟然后进行了第二面，第二面有多少分钟我也忘了，只知道我一直在说。。之后差不多等了半个钟，就进入hr面，当时我不知道只剩hr面了，还以为会有三面什么压力面啊等等。hr面面了半个钟吧，从查户口到我的价值观我的男友，到为什么我选择做技术，到问到金山在我们同学的眼中是怎么样的位置，我机智得答除了bat就是金山了。。最后我心机婊的问了一下她，我这是过了吗？那个hr说，对呀你过了呀。我们的offer会在整个流程结束之后就发，也就这一个星期之内吧，到时候会通知你。之后她还跟我说金山见，我超级开心的。感觉幸福来的比较突然，虽然这次面试我也是准备了，人有时会否定自己，有那么多牛人在我的前面他们才是offer收割机，其实不能是这样的想法。
一面的时候除了问我简历上的东西，会再次问到我的笔试试卷的题目我感觉我这个试卷做的怎么样，这就直接问到我的兴奋点了，因为为了整理那个试卷答案我还专门写了个博客去记录，人家看你都这么认真对待当然叫你回去等候室等待二面啊。。
二面的时候那个面试官可能是今天第一次面人？就是感觉他还没有进入虐我的状态，然后他就叫我重复一下自我介绍还有我的简历上的一些问法，感觉就是重复了一面的描述（一面的面试官就在后面啊，求他听到我二面都在重复一面的话的心理阴影面积）然后问的问题是我之前刷题的时候都有比较深入的去百度和理解透的问题，比如跨域。反倒没有问闭包内存泄漏和安全的知识，tcp和浏览器渲染过程而已。两个面试官都是很nice的感觉，以至于我感觉我不是进入技术面，我以为他会问到我会答不出来。下面会总结一下过程中没有回答出来的问题。

一面：流式布局主要是用来解决什么问题，为什么要使用流式布局

阅读全文 »

发表于   |   分类于   |     |   阅读次数

题目

  • 1.console.log(typeof NaN),打印出是什么
  • 2.sum(2,3)=>5,sum(2)(3)=>5,请实现sum函数
  • 3.现有整型变量a,b，如何不定义临时变量，实现整型a,b的值的交换
  • 4.写出两种以上异步加载js的方案思路
  • 5.实现image的水平和垂直居中，请写出html和css
  • 6.HTTP/2有哪些优化网络的请求

下面给出开放化答案

  • 1.console.log(typeof NaN),打印出是什么
1
2
3
4
5
number//(NaN,即非数值（Not is Number）是一个特殊的数值，这个数值用于表示一个本来要返回的数值的才作数未返回数值的情况（这样就不会抛出错误了），在ECMAScript中，任何数值除与0会返回NaN);

alert(NaN==NaN);   //false(NaN与任何值都不相等，包括NaN本身)
isNaN() //函数会帮我们确定这个参数是否“不是数值”
isNaN(10) //false
  • 2.sum(2,3)=>5,sum(2)(3)=>5,请实现sum函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function sum(){
    for(var i in arguments){
        if(isNaN(arguments[i])){
        return;
        }
        switch(arguments.length){
            case 1:
                var a=arguments[0];
                return function(){
                    return a+arguments[0];
                }
                break;
            case 2:
                return arguments[0]+arguments[1];
        }
    }
}

或者这样写：

阅读全文 »