互聯網 - 大數據

文章出處
為了方便查手冊等，把w3schools上的所以屬性弄成json版的了，到時候再修改一下，查起來就比較方便了，這里免費分享一下。一共為兩份，一份為選擇器部分，還有一部分是屬性。
選擇器部分json
屬性部分json

文章出處
mongodb學習筆記
1.下載：http://www.mongodb.org/downloads
2.安裝
3.啟動mongodb
3.1mongod 設置數據庫路徑
mongod --dbpath 路徑
3.2 連接數據庫
mongo
使用mongo服務時不能關閉mongodb進程，并且因為mongodb不是服務所以每次開機都得執行一次，如果不想每次開機都執行一次可以將mongodb弄成服務。
4.簡單使用
> db //查看當前數據庫
test
> db.zmz.insert({hello:123}) //如果沒有zmz這個數據庫則新建一個并且插入一條數據
WriteResult({ "nInserted" : 1 })
> db.zmz.find() //查看zmz這個數據庫中所有的數據
{ "_id" : ObjectId("5827eb8f1625be96b146c9e3"), "hello" : 123 }
>

"show dbs" 命令可以顯示所有數據的列表。
"db" 命令可以顯示當前數據庫對象或集合。
"use"命令，可以連接到一個指定的數據庫。
MongoDB學習筆記
項目目錄結構
CSS預處理器stylus
1.安裝
npm install stylus -g
2.編譯并且生成壓縮文件
stylus -c -w ./
-c 編譯
-w 監控文件變化
./ 要編譯到的文件路徑
不知道為什么不支持../
nodejs
1.nodejs修改了代碼以后自動刷新
下載supervisor
npm -g install supervisor
執行
supervisor app.js
2.安裝express和ejs
3.Express 托管靜態文件
var express = require('express');
var app = express();
app.use(express.static('路徑'));
http://www.expressjs.com.cn/starter/static-files.html
4.修改ejs后綴名
4.1引入ejs
var ejs = require('ejs');
4.2注冊html模板引擎：
app.engine('html',ejs.__express);
4.3將模板引擎換成html:
app.set('view engine', 'html');
4.4修改模板文件的后綴為.html。
頁面設計的一些假想
目前效果是這樣的，如圖
首先頭部有一個標題和一段文字內容，另外因為頁面多個地方需要用到，因此需要把它做成組件，接著是一個導航條，也是一個公共的也需要弄成組件，但做成組件以后有一個小小的問題，就是當前選中的那個需要加一個狀態，原本想用:target來寫，但因為鏈接到的是不同的頁面，因此也不太行。想來想去也只能用JS來實現了，不知道大家都用的什么方法。
下面就是主體內容部分了，開始部分放一篇推薦文章，打算把閱讀量高的或者評論高的，又或者隨機推薦一篇，這還在考慮之中，接著左邊放最新文章，但考慮到有些可能加圖片，因此還需要進行調整，另外屏幕比較小的時候放圖片上去會有些問題，因此用了一下媒體查詢，過小就隱藏。屏幕過小標題也得重新設計一下，因為默認是居中對齊的，但屏幕太小的時候，文字會斷行，斷后的那個文字也會居中，實在太難看了，還有一點就是應該給標題來一個首行縮進。右邊就是猜你喜歡，這個功能我是這樣想的，如果用戶是第一次過來，那么就放瀏覽量高的，如果用戶瀏覽過本站的一些文章，那么把它瀏覽過的文章標題記錄下來，做一個分析，到時候這個就推薦關于用戶喜歡的一些文章，按照瀏覽量排序。現在想到一個更好一點的部分，如果說直接分析標題，還是有些困難的，想起那些文章都是有分類的，因此提取一下用戶訪問的分類就好了。
列表也通過判斷訪問的參數顯示相應的內容，如下圖
代碼是這樣的
<link rel="stylesheet" href="nav/css/nav.css">
<nav class="navbar">
<a href="./" class="active">首頁</a>
<a href="./list?css">CSS指南</a>
<a href="./list?html5">HTML5</a>
<a href="./list?javascript">Javascript</a>
<a href="./list?life">學會生活</a>
<a href="./list?message">我有話說</a>
</nav>
而顯示對應的列表內容則通過查詢數據庫articleClass字段來篩選
// 插入一篇文章
data.insert('zmz','article',{
title:'5555',
content:'這是內容',
img:'httt',
date:new Date().getTime(),
url:'/article?' + new Date().getTime(),
author:'追夢子',
articleClass:'CSS指南',
articleClassUrl:'list?css',
readquan:2222,
recommendcount:5435
});
因為mongodb本身沒有自增，所以打算通過發布時間作為每一篇文章的唯一ID，到時候查詢的時候就好辦了，也就是下圖這個
html頁面是這樣的
數據庫的封裝
這個封裝是從網上找的，然后修改了一下，一些細節還不是很理解，項目完成以后還得再看看。
查詢時代碼
后臺管理
目前的想法，如下圖
已經實現的效果圖
話說有點丑，不過能實現就挺不錯的了。
新增文章頁的一些細節
如上圖我把每一個li都添加了一個自定義屬性，這個用來確定選擇的分類，提交數據的時候有用。因為首頁有個分類功能，如下圖
在選擇分類的時候將選中的元素上的自定義屬性賦值給標題元素，如下
// 選擇分類
$(className).attr("data-articleClassUrl",$(this).attr("data-articleClassUrl"));

發送數據時
而對應的nodejs端則如下處理接收的數據
因為nodejs無法直接接收post數據，因此用了如下方法
function parseJSON(req,res,next){
var arr = [];
req.on("data",function(data){
arr.push(data);
});
req.on("end",function(){
var data= Buffer.concat(arr).toString(),ret;
next(data);
})
}
但它獲取的數據是form類型的字符串，因此使用了一個nodejs自帶的功能
var qs = require('querystring');
qs.parse(data);
關于后臺編輯器
原本打算用markdown，但因為一些原因，最后還是自己寫了個小腳本，寫作方式如下:
<zmz>
<h1>h111111111</h1>
<h2>h222222222</h2>
<h3>h333333333</h3>
<h4>h444444444</h4>
<h5>h555555555</h5>
<h6>h666666666</h6>
<ul>
123123/li/
123123/li/
</ul>
<ol>
111111/li/
222222/li/
333333/li/
</ol>
<bgtitle>帶背景的標題</bgtitle>
<captitle>帶大寫數字的標題</captitle>
<lowtitle>帶大寫數字的標題</lowtitle>
<info>
Alternate elements/h4/
提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息提示信息/p/
</info>
<a>是嗎</a>
<blockquote>
模式啊
</blockquote>
<code>alert</code>
<center>居中</center>
<left>居左</left>
<right>居右</right>
</zmz>
最外層是一個包含塊，好去獲取代碼，里面可以使用html來寫，以及少量的自定義元素，效果如下
但最后發現這根本就是一個沒用的設計，最初的想法無非就是為了方便寫作，而設計這些條條框框即是為了能夠正常匹配。因此這些設計反倒沒有簡單多少，實際上我們只需要寫一份CSS就可以了。
圖片上傳
圖片上傳筆記
訪客系統
訪客系統筆記
一些問題
1.組件應該包含其自身的所有文件。
頭部和導航是一個公共的，于是就提取出來了，一開始是這樣引入的，如下圖：
但感覺這樣太麻煩了，每次還得分別引入多個文件，于是我把css直接在header.ejs里面引入，如下圖：
于是每次只需要引入一個文件就好了，這里說一下，link標簽不一定得寫到head里面，只是加載的順序不一樣罷了，因為有些東西具體的實現還是根據瀏覽器廠商的。
2.職責明確
是布局的就不應該和組件混亂，比如說下圖這個
這個main實際上是用來布局的，就是讓它水平居中，如下：
.main{
display:flex;
width:70%;
margin-left:auto;
margin-right:auto;
}
如果說你打算把里面的一些東西當做一個單獨的模塊，那么就不要和這個main掛上關系，而是單獨起一個class，比如說里面的那個推薦，代碼我寫成了這樣
rec-articles.styl
@import "../../global.styl"
.like-article
& h2
margin-bottom:0.25rem;
font-size:1rem;
text-align:center;
& h3
font-size:0.9rem;
line-height:1.5rem;
text-align:center;
& h2,
& a
color:g-color2;
& a
font:0.8rem "宋體", Arial, Helvetica, sans-serif;
rec-articles.html
<link rel="stylesheet" href="articles/css/rec-articles.css">
<nav class="like-article">
<h2>猜你喜歡</h2>
<h3><a href="#">標題</a></h3>
<h3><a href="#">標題</a></h3>
</nav>
另外代碼的抽離也需要注意一點，實際上.like-article頁面中是用了這么一句的
.like-article
flex:1;
但想想這個肯定是不能放到組件里面的，而是需要的地方單獨去寫，因為這個都是不確定的，不一定每個頁面都需要用到。
整個項目分享：點我下載
mongodb數據庫文件下載 ：點我下載

文章出處
分類統計
需求：
統計用戶點擊這三個分類的次數，用來分析用戶喜歡哪些話題。
實現原理：
通過給a標簽設置一個背景圖片屬性，當點擊的時候發送一條請求給服務器。
服務器端：
app.get('/stat',routes.stat);

數據庫：
設置相應的幾個字段
接著處理相應的請求，如下
請求的參數就是對應的key，因此只需要先將對應的數據先查詢出來，然后在其基礎上 + 1 即可。
對應的數據表
完。
統計首頁用戶請求來源
如果懂點HTTP該有多好，那是很久以后才明白的。
HTTP中的請求頭部有一個referer屬性，這個屬性記錄著用戶從哪個頁面過來的，因此只需要在服務器腳本中寫上這么一句就可以了。
nodejs中的
req.headers.referer

可以用來獲取來源。
在數據中查到的數據
完。
統計用戶訪問量
思路：
通過獲取用戶的IP地址來統計訪問量
實現方法:
nodejs通過如下可以獲取到用戶的ip
req.connection.remoteAddress

數據庫設計思路
[
{
visitorip:["127.0.0.1","162.124.0.24","182.150.1.56"],
date:currentDate
}
]

currentDate為當天的日期，將同一天訪問的ip，都添加到同一個數組中，否則新建一個對象。
實現過程
查詢當天有沒有相關的數據
false
新建一個對象，將對應的數據插入進去
true
在原數據的基礎上再添加一條，接著將這個新數組更新到數據庫中
一些亂想
在添加到數據庫之前，并沒有過濾重復IP，這樣的原因是：這些重復的數據也許有其他用處。
能保留完整的數據盡量保留完整，而過濾應該是單獨考慮的事。
用戶訪問量統計
獲取前幾天的訪問量將數組倒序一些即可，因為mongodb后添加的數據越往后。
這里的訪問量并不包括重復的IP，因此通過map方法將所有數據通過Set對象過濾，再取它的長度即可。
獲取到的數據
結果
一些問題
這個設計中，關于統計都是通過客服端或服務器來計算的，并沒有將這些計算的結果單獨設計一個字段，如果數據量較大的情況下，會不會出現什么問題，這是值得思考的問題。
完。

文章出處
嚴重問題
做一半，思考一半，結果出現了很多的問題
1、后臺系統
一開始竟然沒有上傳圖片的功能，最后只好重新加一個，另外返回按鈕也沒有，這是一個很常用功能啊。
2、內容頁
編輯呢
總結
是否能想的更長遠一點呢，對于整體的規劃性有待提高。
學到了哪些
1、mongodb
之前有過了解，但沒有用過，也沒有實踐過，一直感覺不會，這一次剛好重新對mongodb有了新的認識，并且不再畏懼了，以后就是老朋友了。
對數據庫結構的設計。
2、stylus
一開始并沒有打算用這個，而是想用less，但想想多用一些不同的處理器，或許會有新的收獲，然最主要使用預處理器的目的就是它能更好的管理CSS，之前覺得預處理器的好處就是方便寫后代，然現在懂了，這更本就不是問題，問題是可維護性。
3、nodejs
之前有過畏懼心理，雖然是用javascript來寫，但有著很大的區別，而根本原因是缺乏對后端的整體流程感知，更嚴重的問題是之前的學習方式，根本不適合自己，因此才導致，一直覺得學不會，而實際上是能寫出來的。
4、圖片上傳
這幾個屬性有過了解，但忘了，這幾個新屬性還得加深點印象
5、訪客系統
有過了解HTTP，但實踐的太少，因此在本次項目中，用它來獲取用戶來源。然其他的幾點，已忘。
8、加深對后端的認識
7、組件
通過ejs引入頁面還不錯，但在寫組件時應該明確的知道那些是可以公用的，并且在寫CSS的時候，不應該把布局的CSS放在組件中，而是單獨寫。
8、頁面設計
9、重新認識自己
對應該怎樣去學，有了明確的方式，也不再畏懼很多，忘記了之前那個不堪的自己。
感悟
保證數據的完整性，不要事先過濾，而是交給客戶端或其他，一些方法不要寫太死，應該保證靈活性。
難的是一直不敢改變，再見博客項目。

文章出處
let

不存在變量提升

通過let聲明的變量僅在塊級作用域內有效

不允許在同一個作用域內重復聲明一個變量

防止值公用
var oUl = document.querySelectorAll('ul>li');
for(let i=0,len=oUl.length;i<len;i+=1){
oUl[i].onclick = function(){
console.log(`text:${this.innerText} index:${i}`);
};
}
不用再使用自執行函數了，興奮。
typeof不再安全
直接typeof一個不存在的變量
console.log(typeof x); //undefined
而如果typeof一個后定義的let變量，則會報錯
console.log(typeof x); //Uncaught ReferenceError: x is not defined
let x = 1;
解決方法:
try{
console.log(x);
}catch(err){
console.log(err);
}
let x = 1;
注意點
盡管通過let聲明的變量不存在變量名提升，但只要在一個塊級作用域中使用了let，那么就算這個let在定義之前使用，也不會到外部查找同名的變量。
var a = 10;
if(true){
console.log(a);
let a = 12;
}
不能在定義之前使用
a = 10;
console.log(a); //Uncaught ReferenceError: a is not defined
let a = 15;
塊級作用域
在大括號中通過let或函數聲明的變量不存在變量名提升，但因為一些歷史原因，函數可能還是會存在變量提升的問題。
const

定義一個常量，不可更改，并且在初始化時就得賦值，不然報錯。

只在當前作用域內有效

不存在變量提升

在同一個作用域中，不可重復聲明

當值是一個對象時，對象的值還是可以改變的，只是說引用不可改變

只在當前作用域內有效
const a = 10;
{
const a = 15;
console.log(a); //15
}
console.log(a); //10

當值是一個對象時
const obj = {
name:'zmz',
love:[1,2,3]
};
console.log(obj.name); //zmz
obj.name = 'o-o';
console.log(obj.name); //o-o
如果不想讓其進行修改，可以使用Object.freeze方法
const obj = Object.freeze({
name:'zmz',
love:[1,2,3]
});
console.log(obj.name); //zmz
obj.name = 'o-o';
console.log(obj.name); //zmz
從es6開始新增的一些聲明命令，其變量名不再屬于頂級對象window
變量解構賦值
按照一定的模式進行賦值
數組解構賦值
var [a,b] = [1,2];
console.log(a,b); // 1 2
左邊變量，右邊值，一一對應
var [a,...b] = [1,2,3,4,5];
console.log(a,b); // 1 [2,3,4,5]
...會將后面剩余的所有參數當作一個數組，但為了方便閱讀，也可以用一個括號將值闊起來，如下代碼
var [a,[...b]] = [1,[2,3,4,5]];
console.log(a,b); // 1 [2,3,4,5]
直接用...和使用[]還是有區別的，如下
var [a,[...b],c] = [1,[2,3,4,5],6];
console.log(a,b,c); // 1 [2,3,4,5] 6
而直接用...的
var [a,...b,c] = [1,2,3,4,5,6];
console.log(a,b,c); // Uncaught SyntaxError: Rest element must be last element in array
報錯了。
...的真正目的
var [a,...b] = [1,[2],3,4];
console.log(a,b); //1 [Array[1], 3, 4]
...所做的兩件事，將剩余的所有參數歸為所有，并且其自身是一個數組。
解構不成功的值
當解構不成功值為undefined
var [a,b] = [1];
console.log(a,b); //1 undefined
當值多余時
屬于不完全解構，只解構需要的。
默認值
只有當值全等與undefined時才會起作用
var [a,b = 2] = [1];
console.log(a,b); //1 2
var [a,b = 2] = [1,null];
console.log(a,b); //1 null
默認值也可以引用解構賦值中的其他變量，但是這個變量必須已經聲明
let [a,b = a] = [1];
console.log(a,b); //1 1
let [a = b,b = 1] = [];
console.log(a,b); //Uncaught ReferenceError: b is not defined
對象解構賦值
對象的解構，變量和屬性名對應即可，跟順序無關。
var {a} = {haha:'haha',a:'hello'};
console.log(a); //hello
也可以起一個別名
var {haha:a} = {haha:'haha',a:'hello'};
console.log(a); //haha

最后被賦值的是a，而不是haha
對象解構也可以使用默認值。
字符串解構
var [a,b,c] = 'haa';
console.log(a,b,c); //h a a
解構的用途
1、簡寫
var {log,info,time,timeEnd} = console;
time('time');
log('Hello');
timeEnd('time');
2、使接口更友好，并且與順序無關
function fn({name,age,hello}){
hello(name,age);
}
fn({
name:'老王',
age:23,
hello:function(name,age){
console.log('This is ' + name + ' ' + age); // This is 老王 23
}
});
3、交換變量
var a = 1;
var b = 2;
[a,b] = [b,a];
console.log(a,b); //2 1
4、函數默認值
function fn({a = 1,b}){
console.log(a,b); // 1 2
}
fn({b:2});
5、只取需要的值
var arr = [
{
title:1111,
love:{
one:'one_1',
two:'two_1'
}
},
{
title:2222,
love:{
one:'one_2',
two:'two_2'
}
}
];
for(let {title,love:{two}} of arr){
console.log(title,two);
}
完。

文章出處
接到個新需求，類似以下這種需求，得把它封裝成一個插件
后端給返回一個這種數據
var data = [
{
key:"020506",
num:5
},
{
key:"03",
num:2
}
];
key:
02:表示第一層，0205:表示第二層，020506：第三層
如果第三層有新消息，則它本身和它上面的層級都需要顯示提示，并顯示數量，另外，后端將需要添加提示的元素，都加上了data-newinfo屬性，里面的值是它當前的層級。
num:
消息提示的數量
一些注意點
var newinfo = document.createElement('newinfo');
原本想創建一個span元素，但想想還是不太行，因為對應的那個頁面很有可能設置了span的樣式，而我們是不希望這樣的，因此創建了一個特別的元素。
/*
使用說明：
data:數據
setInfo():將消息提示添加到頁面中
new NewInfo(data).setInfo();
------------------------------------
<div data-newinfo="020505"></div>
var data = [
{
key:"020506",
num:5
},
{
key:"03",
num:2
}
];
*/
function NewInfo(data){
this.data = data;
// 獲取所有需要添加新消息提示的元素
this.newinfoDoms = Array.prototype.slice.call(document.querySelectorAll("[data-newinfo]"));
// 樣式
this.sty = "padding: 2px 5px;background-color: red;border-radius: 100%;color: #fff;font-size: 12px;vertical-align: 4px;line-height:1;";
}
NewInfo.prototype = {
// 獲取所需的信息
getInfo:function(){
var _this = this;
var arr = [];
this.newinfoDoms.forEach(function(item,index){
var isTrue = true;
_this.data.forEach(function(item2,index){
var isNewInfo = item2.key.substring(0,item.dataset.newinfo.length)===item.dataset.newinfo;
if(isNewInfo&&item.dataset.newinfo){
if(isTrue){
arr.push({
'item':item,
'num':item2.num
});
}else{
arr[arr.length-1].num += item2.num;
}
isTrue = false;
}
});
});
return arr;
},
// 添加到相應的頁面中
setInfo:function(){
var _this = this;
var arr = this.getInfo();
arr.forEach(function(current,index){
var newinfo = document.createElement('newinfo');
newinfo.style.cssText = _this.sty;
if(current.num>0){
newinfo.innerHTML = current.num;
}else{
newinfo.style.paddingTop = '0';
newinfo.style.paddingBottom = '0';
}
current.item.appendChild(newinfo);
})
}
};

效果

文章出處
計算給定數組 arr 中所有元素的總和
輸入描述:
數組中的元素均為 Number 類型
輸入例子:
sum([ 1, 2, 3, 4 ])

輸出例子:
10

解題方法
1、定義一個變量，將前面的和后面的相加
function sum(arr) {
var count = 0;
arr.forEach(x=>count+=x);
return count;
}

2、eval
function sum(arr) {
return eval(arr.join("+"));
}

將數組轉成字符串，并且將，號轉成+號，再用eval執行。
3、reduce方法
function sum(arr) {
return arr.reduce((pre,current)=>pre + current);
}

reduce() 方法接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終為一個值，第一個為參數為上一次處理后的值，第二個參數為當前處理的值。
注意：如果是第一次執行這個方法，那么第一個參數就是第一個值，第二個參數就是第二個值。第二次的第一個值才是處理后的值

文章出處
自以為的理解
當拿到一個需求時，總是自以為是的理解了這個需求以及要解決的問題，再不經過思考就盲然的開始了這個項目，然而往往會遇到巨多的bug，讓你頭疼。
真正的問題
是的，真正的問題是什么？這一直是我的一道坎，不幸的是今天又遇到了，幸運的是我開始懂得重視這個問題，如下這個需求：
是一個進度條，就是當前音樂播放的時間比，一開始的想法是這樣的：
(滑動塊的長度 / 音樂總長度) * 進度條的寬
但這是有很大的問題的，根本行不通，實際上應該是這樣：
(總路程 - 滑塊長度)/ 總時間 * 當前播放的長度
總路程 / 總時間 算出每一秒的路程 然后乘以當前播放的時間，這樣就完成了。
找到問題為什么這么難
當你真正找到要解決的問題時，所有的問題就會變得簡單許多，比如上面我所需要解決的問題是，獲取每一秒走了的長度，再乘上當前走了的時間。但往往我們看不到真相，而這其中有很多原因，常見的有下面幾種：
1、沒經過思考
2、想復雜了
3、理解能力有限
4、個人技術所限
這是大部分程序員所會觸犯的錯誤，第一種，比較難發現但一直就在身邊，比如說你學一個東西，你有問過自己為什么要學它嗎？大部分人沒有想過的，工作需要吧？那么問題就來了，你為什么學習前端，不學后端，又如你為什么學后端不學前端，可能覺得前端入門簡單，以及等等原因，但如果你當初真的是這么想的，那么就錯了，前端可不簡單，有時可能比后端還復雜。導致這個情況的出現是什么？當初就沒有認真的想過，如果你是想找一門比較簡單的語言，那你應該去想哪些語言比較簡單啊，而不是直奔前端。又如你學習新技術，往往又出現了這種情況，api，api，看文檔，看視頻。但真的這是正確的學習方式嗎？不一定，為什么你永遠不質疑一個問題？以前寫的好好的，老來新的api做什么？之所以某個語言不斷的更新，很大情況下，都是因為之前版本有bug，或者有些不足，如果你是做前端的，你會發現各種技術再不斷的更新，它不斷的更新還不是因為之前的不足，比如javascript中的forEach。forEach是es5新增的，確實好用，但es6又新增了一個for of迭代器，假如你沒有經過思考，感覺這是理所當然的事，那就大錯特錯了，forEach雖然好用但它也不是無所不能的，缺陷也很多，比如break;continue;在forEach中這些就不能用，那你可能會想可以使用for in啊，但for in也是有問題的，自己搜索去吧，在這一切的技術中，思考往往比任何都重要，一個語言的設計者，如果思考不當，造成的結果是無數的程序員得背負同樣的后果，而我們不思考，那就是只好在原地了，來一個學一個，別人說什么好，什么就是好。
想復雜了
這是前幾天在網上找的一道題
其中一個朋友寫的代碼
function indexOf(arr, item) {
for(var i in arr){
if(arr[i]==item){
return i;
}else if (i==arr.length-1){
return -1;
}
}
}
實際上它的代碼可以寫成這樣
function indexOf(arr, item) {
for(var i in arr){
if(arr[i]==item){
return i;
}
}
return -1;
}
為什么他會那樣去寫，首先他寫了一個for in，再想他為什么使用循環對象的方式來寫，而不直接用for來寫，我猜測是因為，他覺得直接寫for循環，看起來代碼多了一些，還需要加啊，減啊之類的。另外一方面，對for in理解的比較淺。這還不足以引起我的好奇，而是下面那一段它用了else if，順著他的想法就是，如果當前項等于傳進來的值，那么就返回，否則接著判斷它是不是最后一位（因為如果它走到了最后一位，說明前面都沒有成立的），如果是，那么就說明這個數組中沒有我要找的東西，可以返回-1。這種思維方式，看似很清晰，但如果細想就很容易發現問題，他這里每次都去判斷是不是最后一項，但這完全沒有必要，因為如果說它整個循環完了都沒有返回出去，那么就說明這個數組中沒有匹配的項，我們在循環外部直接返回就可以了。看似一個很小的問題，但在其他方面，我們同樣也會犯很多這樣的錯，我并不覺得寫這個代碼的人很笨，如果說他笨，我覺得自己笨的要死了。正如寫這篇文章，是我犯了無數的錯誤之后才開始重視起來的，可想而知，我想那位朋友一定忘了思考吧。在編程的生涯中，想復雜的事情遠遠不止這一個，有些嚴重些，也有些微不足道，但我想只有真正的開始學會思考以后，我們才能在這場戰爭中，看的清，看的明。
理解能力有限
評論：
這個題雖然沒有說出是用原生的方法還是自己模擬一個，但如果我是一個面試官，大部分情況是想讓你模擬一個數組的indexOf方法，而不是原生方法，這里也說明，理解也是一種硬傷，往往產品經理等，他們覺得你應該可以理解，但往往背道而馳。
個人技術所限
有位朋友寫了如下代碼：
var ary = [ 1, 2, 3, 4 ];
function indexOf(arr, item) {
for(var i=0;i<arr.length;i++){
if(arr[i]==item)
{
return i;
break;
}
}
return -1;
}
indexOf(ary, 3)
但有點javascript經驗的，肯定能看到這里面有個多此一舉的代碼塊，break;是不需要的，因為函數一旦返回，后面的代碼不會被執行，這或許是因為對技術了解的比較少吧。
沉靜
在實際工作中，找到問題所在確實不易，但也唯有解決這個問題，我們才能前進，反之，永遠也在原地，難道不是嗎，所謂的編程不過是突破那重重的阻礙，一開始我們以為學習語法是一切，但后來，發現那只是很小的一部分，我們需要有很多突破，比如剛接觸AJAX時的茫然，再到后來前端與后端的混亂，對于大部分人來說，遇到困難，都想逃避，這很正常，但如果想解決這個問題，我們只能硬著頭皮往前走，是的，它之前是我的一道坎，不知困了我多少個日夜，但一切都過來了，而這思考又將會是我的一道坎，但那又怎么樣呢，因為有明天，解決只是時間。

文章出處
所流走的時光
一點知覺都沒有，一年就這樣悄然的過去了，2016對我來說，是個不一樣的一年，回顧這一年，做了太多的荒唐事。這一年一個人在北京闖蕩，所有的一切似乎只能自己解決，經歷了一個月沒找到工作的辛酸，體會到什么才叫做工作，也是這一年，知道了自己究竟是怎樣的一個人，也是這一年第一次寫書，但細想，卻沒有一件自己所滿意的。
一開始的目標，只是想通過自己的努力，等有些錢了，可以自由的去旅行，然而這一年才真正的明白，旅行真的不需要很多，去年也是這個時候，雖然那時的車子很破，但玩的一樣很快樂，那時總想著要是有一輛捷安特就好了，今年中秋節買了，卻沒有一點感覺，或許是沒有那種心情吧，一方面編程還有很多不會，另外一方面剛剛出社會工作都是問題，最重要的是在北京這個大都市里，真不知道該往何處走，主要是喜歡家鄉的那種山和水，更喜歡那種寧靜，而不是高樓大廈。這或許也是好的吧，以后就懂得珍惜了。
現在看著這些好像一切都是那樣的輕松，但在經歷時，那絕不是一件簡單的事，記得沒找到工作的那段時間里，真的心情不知道怎么去形容，面試的也不難，但就是沒有一個答案，一些前端朋友，技術比我差的反而找到了不錯的工作，他們比我會說，這一點我承認，我也不嫉妒他們，只是以前在很長一段時間里以為自己努力了，總是會有收獲的，但現實也不總是這樣，于是我問自己，學編程，你究竟是為了什么，遇到點挫折就這樣了，那是你最初的目標嗎，雖然說技術不等于一切，但總該有些愛好吧，自己喜歡就好了啊，和其他的東西扯在一起，那只能丟失了自己，再者說，只要有時光在，該是什么的就是什么。多希望，再停留一會，可2016總該過去了。
浪費了太多不必要的時間
由于一開始分不清重點，花了太多的時間做一些無意義的事，因為自己英語不好，剛開始編程的時候，總會花很長的時間去背那些單詞，但到頭來，該記住的早就記住了，記不住的早就忘了。
為什么那時會覺得記這些單詞很重要，一方面對編程本身就了解的不多，其二越是不會的越覺得重要，另外一點那時根本就不知道還有很多不會，但也多虧了自己那時不知道還有很多要學，不然基礎肯定靜不下心來學。
另外一方面在學習語法以及api上花了太多的時間，最后也沒能記住幾個，其三，在選擇上花了太多的時間，總是找很多的資料，然而卻很少有真正拿來看的，永遠都在找，而不是學，這也是比較浮躁的一種表現，真正讓我看一本書，看不了幾頁，然而資源卻一大堆，要是自己能把這些時間拿來干別的事，那也有意義的多。
所缺失的
有太多需要總結的沒有總結，總覺得做過的，就能記住，往往造成的后果就是，明明才前幾天犯的錯，卻一次次的重復上演，真不知道該怎么說才好，看似自己道理懂得很多，然而有幾件是做的滿意的。該思考的，思考的太少，雖然前端和后端現在都能寫一些，但現在想想那些所會的，原本就很簡單，真正該學習的，卻沒有花多少時間，如果把更多的時間放在思考問題上，學的肯定不是這樣的粗淺，不喜歡質疑，導致分不清什么是真什么是假，少了一顆對真理的求知欲，雖然說不是100%的喜歡編程，但現在在這個行業工作，每天都得做的事，如果一點樂趣都沒有，那還有什么意義，還賺錢做什么。工作不是一切，但有點追求，活著也充實一些。
幾件還算滿意的事
以前把別人的評論太過于認真，導致各種自卑，今年經過一些思考后，才恍然大悟，有時別人并不是針對你，他一貫是如此，所以不要想太多了。另外一點就是堅持寫博客了，雖然有過斷斷續續，但總歸還是堅持了下來，很少有事情是能堅持下來的。也沒那么在乎別人對我文章的看法了，想寫就寫，不想寫就不寫。有些文章我很不喜歡，因為總是帶著說教的方式，可我并不是為了別人而寫啊，那樣的寫作風格，實在是難受，因此以后的文章，不會有那么多的解釋，就算解釋哪里又能解釋清楚。不同的時期適合不同的文章，對他們有幫助時自然就有幫助，沒有幫助時，解釋也沒有用。
對于編程，有幾件事做的還是挺正確的，把一些基礎的東西，差不多都過了一遍，也學會了看文檔和使用搜索引擎，剛開始學編程的時候，總覺得文檔沒什么好看的，現在反而多希望有那么幾個文檔，找起來就方便多了。一開始總是會忘了去搜索，這也是初學者的通病，雖然前人不斷的告訴你要懂得利用搜索引擎來學習，但就像對牛彈琴一樣，沒到理解的時候，永遠學不會。
2017
要說2016我最不滿意的就是，各方面思考的太少，因此這也是2017的一個目標，另外一點就是未來的規劃總是遲遲沒有寫，雖然之前也有寫過，但里面的各方面都有很多的不足，導致堅持不了幾天就不了了之了，所以還是得花些時間想個適合自己的方法，但對于所有的一切，最希望的還是不要迷失自己，快樂的生活，那才是我所希望的。

文章出處
需求
上面文字和圈圈是對齊的。
想法
一開始是想把文字和圈圈分開來的，也就是兩個盒子放置。但操作中發現，想把它們對齊非常的難，總有一些是無法對齊的。
最終換了一種實現方式，按照需求，不就是想把它們關聯起來嘛，既然如此不把它們分開就好了，那個圈圈就用偽元素來實現，最終代碼如下：
<div class="route">
<em>下單</em>
<em class="active">付款</em>
<em>配貨</em>
<em>出庫</em>
<em>完成</em>
</div>
<style>
.route{
position:relative;
display:flex;
justify-content:space-between;
margin-top:10px;
padding:10px;
background-color:#fff;
}
.route::after{
content:"";
position:absolute;
left:0;
top:58px;
width:calc(100% - 3.6rem);
height:1px;
margin:0 1.8rem;
background-color:#e1e1e1;
}
.route em{
position:relative;
margin:10px 0 40px;
color:#999;
font-size:1.3rem;
font-style:normal;
}
.route em::after{
content:"";
position:absolute;
bottom:-24px;
left:50%;
width:1rem;
height:1rem;
border-radius:100%;
background-color:#e1e1e1;
transform:translateX(-50%);
}
.route .active::after{
width: 1.2rem;
height: 1.2rem;
background-color: #1bc865;
z-index: 999;
top: 32px;
box-shadow: 0 0 0px 5px #adebc7,0 0 0px 10px #dcf7e7;
}
</style>
這種實現方式，就簡單的多了，如果不把它們關聯起來，在不同手機里面，對齊是很難實現的。
感想
有些東西之所以難實現，就是沒有想清楚它們之間的關系，如果能早點想清楚，一切就簡單的多。