學習札記

學習札記

一.JS正則test()方法

每一個正則表達式都有一個 lastIndex 屬性，用於記錄上一次匹配結束的位置，包括exec方法。

var re = /^[1-9]\d{4,10}$/gi;
var str = "123456";
alert(re.test(str));     //返回true
str = "1234567";
alert(re.test(str));     //返回false

解決方法：

var re = /^[1-9]\d{4,10}$/gi;
var str = "123456";
alert(re.test(str));      //返回true

// 執行上面的 test 以後 能夠彈出

alert(re.lastIndex); // 彈出6

即表示上一次在第6個字符以後結束.那麼下一次再調用 test 的時候， 就會從第6個字符以後繼續搜索.解決辦法，將正則表達式的 lastIndex 屬性設置爲0 .具體代碼以下：

var re = /^[1-9]\d{4,10}$/gi;
var str = "123456";
alert(re.test(str));      //返回true
str = "1234567";
re.lastIndex=0;
alert(re.test(str));      //返回true

或：正則模式去掉全局模式。把g去掉就好了，g就是繼續往下的意思，不是必要別加g.改爲:

var re = /^[1-9]\d{4,10}$/i;
var str = "123456";
alert(re.test(str));      //返回true
str = "1234567";
alert(re.test(str));      //返回true

二.獲取圖片的大小

var img = new Image();
img.src = 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png';
img.onload = function(){
    alert(this.width + '*' + this.height);
}

三.使用border-box

box-sizing: border-box; 這裏的寬度就是元素所佔總寬度。使用時最好帶上瀏覽器前綴，ie8以上。

四.onload與ready

load是一個事件，會在頁面包含文件資源加載完成後觸發。支持該事件的HTML標籤：body、frame、frameset、iframe、img、link、script。

那麼 document ready究竟是什麼ready了？ 按資料說明，這個事件指的是文檔結構（DOM）加載完成觸發的。 jq(document).ready(function(jq) { //todo }

五.regular性能優化指引

Regular使用了被詬病無數次的髒檢查機制，可是它提供了很是多的方案來幫助咱們解決性能問題，這個章節將會不斷更新。

請儘可能使用一次綁定

' '

使用list的track by功能

使用isolate

使用if else代替 display:none

使用throttle或until(tid = setTimeout)的方式來避免頻繁更新

六.ng-bind與ng-model

ng-bind是至關於{{object.xxx}}，是用於展現數據的。 而ng-model是控制數據的。 AngularJS 表達式寫在雙大括號內：{{ expression }}。 AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有殊途同歸之妙。

七.加時間戳防止緩存

 

八.畫三角形

九.解析Js的面向對象代碼片斷

如下是prototype.js的一塊代碼片斷

var Class = {
    create: function() {
        return function() {
            this.initialize.apply(this , arguments);
        }
    }
}

Class使用方法以下

var A = Class.create();
A. prototype={
    initialize:function(v){
        this .value=v;
    }
    showValue:function(){
        alert(this.value);
    }
}
var a = new A(‘helloWord!');
a. showValue();//彈出對話框helloWord！

1.initialize是什麼?

initialize是個變量，表明一個方法，用途是類的構造函數。

JS中的全部function都是同樣的，可是用途多是不一樣的，有的用做構造對象抑，有的是執行一個過程。

var Class = {
    create: function() {
        return function() {
            this.initialize.apply(this , arguments);
        }
    }
}
var A = Class.create();

這段代碼是構造個一個function複製給A，這個function是:

function() {
    this.initialize.apply(this , arguments);
}

而且後面這個方法是用來作構造函數的。當使用這個構造函數來構造對象的時候，會讓構造出來的這個對象的initialize變量執行apply()方法。這樣在初始化對象的時候會聯繫到initialize。

A.prototype={
    initialize:function(v){
        this .value=v;
    }
    showValue:function(){
        alert(this.value);
    }
}

Prototype是「原型」的意思。A是一個function（），那麼A. prototype，就是function中的一個變量，實際上是個對象。這個對象擁有什麼方法，那麼function產生的對象就擁有什麼方法，故

var a = new A(‘helloWord!');
a. showValue();//彈出對話框helloWord！

因此a對象也會有initialize方法，不僅如此，每個有A構造出來的對象都會有一個initialize方法，而在前面說過，構造的時候會調用構造函數，構造函數裏面會讓initialize去調用apply方法，因而在new A(‘helloWord!')的時候initialize回去調用apply方法。這也就是調用了一個初始化的方法。

2.apply方法是幹什麼的?

功能基本同樣，function().call(object,{},{}……)或者function().apply (object,[……])的功能就是對象object調用這裏的funciton()，不一樣之處是call參數從第二個開始都是傳遞給funciton的，能夠依次羅列用「，」隔開。而apply只有兩個參數，第二個是一個數組，其中存儲了全部傳遞給function的參數。

this.initialize.apply(this , arguments);

這裏的第一個this，是指用new調用構造函數以後生成的對象，也就是前面的a，那麼第二個this也固然應該是指同一個對象。那這句話就是this（也就是a）調用initialize方法，參數是arguments對象（參數的數組對象），因此在構造函數執行的時候，對象a就會去執行initialize方法來初始化，這樣就和單詞「initialize」的意思對上了。
那麼執行initialize方法的參數怎麼傳遞進去的呢？

3.arguments變量呢?

Arguments對象

function test(){
    alert(typeof arguments);
    for(var i=0; i

執行後alert(typeof arguments);會顯示object，說明arguments是對象。而後會依次打出一、二、3。說明arguments就是調用函數的實參數組。

var Class = {
    create: function() {
        return function() {
            this.initialize.apply(this , arguments);
        }
    }
}

arguments 就是create返回的構造函數的實參數組，那麼在

var a = new A(‘helloWord!');

的時候‘helloWord!'就是實參數組（雖然只有一個字符串），傳遞給方法apply，而後在調用initialize 的時候做爲參數傳遞給初始化函數initialize。

十.高性能Javascript知識

1.數據存儲

在JavaScript中，數據存儲的位置會對代碼性能產生重大影響。

– 能使用{}建立對象就不要使用new Object，能使用[]建立數組就不要使用new Array。JS中字面量的訪問速度要高於對象。

– 變量在做用域鏈中的位置越深，訪問所需實踐越長。對於這種變量，能夠經過緩存使用局部變量保存起來，減小對做用域鏈訪問次數。

– 使用點表示法（object.name）和操做符（object[name]）操做並無太多區別，只有Safari會有區別，點始終更快。

2.循環

在JS中常見的循環有下面幾種：

for(var i = 0,len=arr.length ; i < len; i++) { // do something}
for(var prop in object) { // for loop object}
[1,2].forEach(function(value, index, array) { // 基於函數的循環})

毋庸質疑，第一種方式是原生的，性能消耗最低的，速度也最快,注意把數組的長度用len緩存下來。第二種方式for-in每次迭代都回產生更多的開銷（局部變量），它的速度只有第一種 的1/7 第三種方式明顯提供了更便利的循環方式，可是他的速度只有普通循環的1/8。因此能夠根據本身項目狀況，選擇合適的循環方式。

3.事件委託

當頁面中存在大量元素都須要綁定同一個事件處理的時候，這種狀況可能會影響性能。每綁定一個事件都加劇了頁面或者是運行期間的負擔。對於一個富前端的應 用，交互重的頁面上，過多的綁定會佔用過多內存。 一個簡單優雅的方式就是事件委託。它是基於事件的工做流：逐層捕獲，到達目標，逐層冒泡。既然事件存在冒泡機制，那麼咱們能夠經過給外層綁定事件，來處理 全部的子元素出發的事件。

document.getElementById('content').onclick = function(e) {
    e = e || window.event;
    var target = e.target || e.srcElement;    //若是不是 A標籤，我就退出
    if(target.nodeNmae !=== 'A') { return }   //打印A的連接地址
    console.log(target.href) }

4.重繪與重排

瀏覽器下載完HTMl，CSS，JS後會生成兩棵樹：DOM樹和渲染樹。 當Dom的幾何屬性發生變化時，好比Dom的寬高，或者顏色，position，瀏覽器須要從新計算元素的幾何屬性，而且從新構建渲染樹，這個過程稱之爲重繪重排。

bodystyle = document.body.style;
bodystyle.color = red;
bodystyle.height = 1000px;
bodystyke.width = 100%;

上述方式修改三個屬性，瀏覽器會進行三次重排重繪，在某些狀況下，減小這種重排能夠提升瀏覽器渲染性能。 推薦方式以下，只進行一次操做，完成三個步驟：

bodystyle = document.body.style;
bodystyle.cssText 'color:red;height:1000px;width:100%';

十一.null是什麼數據類型，在內存中如何存儲的？

棧：原始數據類型（Undefined，Null，Boolean，Number、String）堆：引用數據類型（對象、數組和函數）

兩種類型的區別是：存儲位置不一樣；原始數據類型直接存儲在棧(stack)中的簡單數據段，佔據空間小、大小固定，屬於被頻繁使用數據，因此放入棧中存儲；引用數據類型存儲在堆(heap)中的對象,佔據空間大、大小不固定,若是存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址後從堆中得到實體

當咱們爲一個引用變量初始化=null例如：

String str=null；

JVM會讓這個引用變量指向一個不肯定類型的空對象內存(即null內存,),null表示不肯定類型的靜態內存區域（假定虛擬機爲程序分配了個永久固定的null靜態內存），而且，假如這時候你輸出system.out.println(str);至關於輸出了null，而null是一個固定的不肯定類型的內存，便可以看作是什麼類型也不是，也沒有繼承Object，固然沒有toString()方法，因此這句代碼不會默認調用str的toString()方法，因此會報錯NullPointerException(空指針異常)。

這時候str實際上是指向一個內存的（null），當咱們再次爲str初始化（new一個新對象時），就是讓str由指向null變成指向了new出來的新對象，這時候str纔是真正的被初始化。

咱們有可能會發現了有不少時候若是咱們不爲某些引用類型變量初始化null，後面再爲其new 對象時會報錯的（未初始化該類型），爲何呢？？

好比輸入如下代碼：

Connection conn;
String catalog = conn.getCatalog();

系統會提示conn未初始化，當咱們改爲:

Connection conn=null;
String catalog = conn.getCatalog();

這時，系統編譯會經過。但運行時又會報錯空指針異常

這就是由於Connection conn；只是聲明瞭一個變量，告訴虛擬機我過會有可能要用這個變量，但內存中並不存在這個變量，不能執行conn.getCatalog();，所以編譯不會經過。

當咱們爲conn初始化null，虛擬機檢測到conn指向一個內存，即null，所以編譯會經過。

可是注意：當你讓一個非null的引用類型變量長期指向null。這樣這個對象再也不被任何對象應用，JVM垃圾回收機制去會去回收它。

var s = "string";
var s2 = new String("string");
 
console.log(typeof(s)); //輸出的是 string
console.log(typeof(s2)); //輸出的 object

s.substring(s.indexOf(" ")+1,s.length);

經過new，它返回一個新建立的 String 對象，存放的是字符串 s2 或 s2 的字符串表示
當不用 new 時，它只把 s 轉換成原始的字符串，並返回轉換後的值。

字符串既然不是對象，爲何它會有屬性？只要應用了字符串s的屬性，js就會將字符串值經過new String（s）的方式轉換成對象，這個對象繼承了字符串的方法，並被用來處理屬性的引用。一旦引用結束，這個新建立的對象就會被銷燬。同字符串同樣，數字和布爾值也具備各自的方法。

存取字符串、數字或布爾值的屬性時建立的臨時對象稱做包裝對象，它只是偶爾用來區分字符串值和字符串對象、數字和數值對象以及布爾值和布爾對象。

「==」等於運算符將原始值和其包裝對象視爲相等，但「===」全等運算符將它們視爲不等。

十二.app數據緩存問題的解決

問題描述：

當循環根據參數獲取數據，對數據進行顯示到不一樣的結點中（如將數據拼接成字符串模版），當跳出本頁面，按返回後各個結點的顯示都是第一條的數據。

緣由：

app有緩存機制，當不一樣數據擁有相同的變量名時，有一些app只會緩存第一條數據，把後面的當成緩存，因此會形成全部結點顯示一樣的數據問題。

解決：

把循環請求回來的數據賦給不一樣的變量，app不會認爲是緩存數據。代碼以下：

renderHtml = function (data, index) {
         var courseInfo = {};
         courseInfo[index] = data;
         courseInfo[index].forEach(function (courseObj, index2) {
		      //todo
	 }
}

十三.HTTP中GET與POST的區別

常見的區別：

GET在瀏覽器回退時是無害的，而POST會再次提交請求。

GET產生的URL地址能夠被Bookmark，而POST不能夠。

GET請求會被瀏覽器主動cache，而POST不會，除非手動設置。

GET請求只能進行url編碼，而POST支持多種編碼方式。

GET請求參數會被完整保留在瀏覽器歷史記錄裏，而POST中的參數不會被保留。

GET請求在URL中傳送的參數是有長度限制的，而POST麼有。

對參數的數據類型，GET只接受ASCII字符，而POST沒有限制。

GET比POST更不安全，由於參數直接暴露在URL上，因此不能用來傳遞敏感信息。

GET參數經過URL傳遞，POST放在Request body中。

本質區別：

GET和POST是什麼？HTTP協議中的兩種發送請求的方法。HTTP是基於TCP/IP的關於數據如何在萬維網中如何通訊的協議。

HTTP的底層是TCP/IP。因此GET和POST的底層也是TCP/IP，也就是說，GET/POST都是TCP連接。GET和POST能作的事情是同樣的。你要給GET加上request body，給POST帶上url參數，技術上是徹底行的通的。

在萬維網世界中，TCP就像汽車，咱們用TCP來運輸數據，它很可靠，歷來不會發生丟件少件的現象。可是若是路上跑的全是看起來如出一轍的汽車，那這個世界看起來是一團混亂，送急件的汽車可能被前面滿載貨物的汽車攔堵在路上，整個交通系統必定會癱瘓。爲了不這種狀況發生，交通規則HTTP誕生了。HTTP給汽車運輸設定了好幾個服務類別，有GET, POST, PUT, DELETE等等，HTTP規定，當執行GET請求的時候，要給汽車貼上GET的標籤（設置method爲GET），並且要求把傳送的數據放在車頂上（url中）以方便記錄。若是是POST請求，就要在車上貼上POST的標籤，並把貨物放在車箱裏。固然，你也能夠在GET的時候往車箱內偷偷藏點貨物，可是這是很不光彩；也能夠在POST的時候在車頂上也放一些數據，讓人以爲傻乎乎的。HTTP只是個行爲準則，而TCP纔是GET和POST怎麼實現的基本。

可是，咱們只看到HTTP對GET和POST參數的傳送渠道（url仍是requrest body）提出了要求。關於參數大小的限制又是從哪來的呢？

在萬維網世界中，還有另外一個重要的角色：運輸公司。不一樣的瀏覽器（發起http請求）和服務器（接受http請求）就是不一樣的運輸公司。 雖然理論上，你能夠在車頂上無限的堆貨物（url中無限加參數）。可是運輸公司可不傻，裝貨和卸貨也是有很大成本的，他們會限制單次運輸量來控制風險，數據量太大對瀏覽器和服務器都是很大負擔。業界不成文的規定是，（大多數）瀏覽器一般都會限制url長度在2K個字節，而（大多數）服務器最多處理64K大小的url。超過的部分，恕不處理。若是你用GET服務，在request body偷偷藏了數據，不一樣服務器的處理方式也是不一樣的，有些服務器會幫你卸貨，讀出數據，有些服務器直接忽略，因此，雖然GET能夠帶request body，也不能保證必定能被接收到哦。

好了，如今你知道，GET和POST本質上就是TCP連接，並沒有差異。可是因爲HTTP的規定和瀏覽器/服務器的限制，致使他們在應用過程當中體現出一些不一樣。

GET和POST還有一個重大區別：
GET產生一個TCP數據包；POST產生兩個TCP數據包。

對於GET方式的請求，瀏覽器會把http header和data一併發送出去，服務器響應200（返回數據）；
而對於POST，瀏覽器先發送header，服務器響應100 continue，瀏覽器再發送data，服務器響應200 ok（返回數據）。

也就是說，GET只須要汽車跑一趟就把貨送到了，而POST得跑兩趟，第一趟，先去和服務器打個招呼「嗨，我等下要送一批貨來，大家打開門迎接我」，而後再回頭把貨送過去。

十四.自定義瀏覽器滾動條的樣式

自定義IE瀏覽器滾動條樣式

通過不斷的測試發現，如下是Win 8下面的滾動條樣式，並寫出了和CSS支持的狀況：

以上所寫的幾個四個CSS屬性，足以控制Win 8系統下，IE瀏覽器的滾動條樣式了。但通過測試，發現，其它的四個屬性仍然支持（主要是在以上幾個屬性空缺時，就會體現其做用）。具體以下：

1).關於scrollbar-track-color，scrollbar-face-color與scrollbar-base-color。scroll-base-color是一個備用顏色，只要前二者未設置時，它就開始起做用了。可是你得注意，當scrollbar-base-color用來做scrollbar-track-color功能來用時，你會發現，實際顏色與設定的顏色要淡一點。不信你能夠這樣試試：只設置一下scrollbar-base-color看看滾動條的效果。
2)關於scrollbar-dark-shadow-color屬性，經過測試發現Win 8下IE10，IE11滾動條並無改變。多是win 8的滾動條從新定義了，致使沒有了隱影了.
3)經過觀察發現，Win 8下的滾動條中，上箭頭和下箭頭後面的背景顏色都已經從scroll-face-color中脫離出來了，從屬於scroll-track-color屬性控制。
IE瀏覽器滾動條自定製功能並非很強，只能控制同樣顯示各個部分的顏色，寬度，結構等都沒法控制.

webkit內核的瀏覽器滾動條定製

在全部瀏覽器，滾動條可定製性最強的當屬webkit內核的瀏覽器了。例若有：Google Chrome、Opera、360極速瀏覽器，獵豹瀏覽器等，搜狗瀏覽器······

CSS
::-webkit-scrollbar        滾動條總體部分，其中的屬性有width,height,background,border（就和一個塊級元素同樣）等。
::-webkit-scrollbar-button      滾動條兩端的按鈕。能夠用display:none讓其不顯示，也能夠添加背景圖片，顏色改變顯示效果。
::-webkit-scrollbar-track         外層軌道。能夠用display:none讓其不顯示，也能夠添加背景圖片，顏色改變顯示效果。
::-webkit-scrollbar-track-piece        內層軌道，滾動條中間部分（除去）。
::-webkit-scrollbar-thumb               滾動條裏面能夠拖動的那部分
::-webkit-scrollbar-corner               邊角
::-webkit-resizer                       定義右下角拖動塊的樣式

以上CSS代碼所管轄的區域對就關係：以上註釋中的數字與下圖中數字相對應。

注意：對以上各個部分定義width,height時。有以下功能：如果水平滾動條，則width屬性不起做用，height屬性用來控制滾動條相應部分豎直方向高度；如果豎直滾動條，則height屬性不起做用，width屬性用來控制相應部分的寬度。

能過上面的不斷的測試。在Chrome中，滾動條中的各個部分和DOM中塊級元素是同樣的。經過::-webkit-scrollbar等就相似於原來所說的CSS中的選擇器。而{}中的屬性，你就像控制通常塊級元素同樣簡單。

十五.中文網頁字體的最佳選擇

body {font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;}

1)記住這個事實：絕大部分中文字體裏包含西文字母，可是基本上都很醜，而西文字體裏不包含中文字符。在網頁裏中英混排是很常見的，你絕對不會喜歡用中文字體顯示西文的效果，因此必定不要忘了先聲明西文字體，而且西文字體應該在中文字體以前。

2)正文字體應該儘可能使用黑體

從字體的樣式來看，宋體是襯線的，黑體是非襯線的。因此應該把中文網頁正文的font-family儘可能寫成以sans-serif結尾。

3)照顧不一樣的操做系統

對於Windows：在中易宋體和微軟雅黑之間二選一。沒有微軟雅黑的系統會回退到中易宋體。
對於Mac OS X：首先使用冬青黑體簡體中文。沒有冬青黑體簡體中文的系統會回退到華文黑體。
對於iOS：系統會自動使用華文黑體。
對於Linux：首先使用文泉驛微米黑。沒有文泉驛微米黑的系統會回退到別的字體。
對於Android：系統會自動使用Droid Sans。

 

跳轉連接的相對路徑

假設info.html路徑是：c:\Inetpub\wwwroot\sites\blabla\info.html
假設index.html路徑是：c:\Inetpub\wwwroot\sites\wowstory\index.html
在info.html加入index.html超連接的代碼應該這樣寫：

十六.標籤的轉譯

1.轉移escape

2.解移unescape

十七.study下子regularUI對父UI的操做

1.直接關係

子：this.$emit('event',_data);

父：this.$on('event',function(){ todo});

2.間接接關係

如：父UI彈窗，調用nej彈窗，彈窗組件裏內嵌regularUI，這時能夠把父組件掛在window下，子組件取到從而進行父組件的狀態更新

十八.sessionStorage

共同點：都是保存在瀏覽器端，且同源的。

1.sessionstorage，localstorage和cookie之間的區別

cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。

做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。

2.sessionstorage的使用

sessionstorage存儲的是字符串，存儲對象，能夠先把對象轉換成字符串

var obj = { name:'Jim' }; 
var str = JSON.stringify(obj); 
//存入 
sessionStorage.obj = str; 
//讀取 
str = sessionStorage.obj; 
//從新轉換爲對象 
obj = JSON.parse(str);

十九.js數值類型的範圍

js數值類型的範圍：−9007199254740992 and 9007199254740992 （即正負2的53次方）

二十.loading 加載的實現

主要是等待圖片加載完成

updateProgress: function(cb) {
            var $img = $('.m-section').find('img'),
                imgNum = $img.length,
                sucNum = 0;
            var _that = this;
            $img.load(function() {
                sucNum ++;
                _that.data.loadLen = _that.data.len + (sucNum/imgNum)*(_that.data.totalLen-_that.data.len);
                _that.$update();
                if(imgNum === sucNum){
                    _that.$refs.progress.style.display = 'none';
                    cb && cb.call(this);
                }
            });
        }

加載條的演示

給加載條的父級定寬度

進度條寬度隨着img加載完成的數量而增長

二十一.答題的基本實現邏輯（基於regular）

1.list出全部的題目，並設定當前題目currenIndex，顯示當前，隱藏起他；點擊選項時，currenIndex＋＋，及時更新

2.題目的對錯判斷。

設定正確答案的數組（長度與題目數相同），同時設置選擇的數組，每次點擊時向選擇數組裏添加選中題號的index（表明選項），最後對比2個數組便可

3.答題結束

經過currenIndex的值與正確答案的數組長度（即題目的長度）比較便可，每次答完題都要進行判斷

二十一.移動端背景圖

.ux-question_result {
    width: 100%;
    background: url(http://nos.netease.com/edu-image/36AD363C3B2EA38A2C72C1F2BFD46E6C.png) center top no-repeat;
    background-size: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

二十二.bower

Bower的主要做用是，爲模塊的安裝、升級和刪除，提供一種統一的、可維護的管理模式。

首先，安裝Bower。$ npm install -g bower

而後，使用bower install命令安裝各類模塊。下面是一些例子。

# 模塊的名稱
　　$ bower install jquery
　　# github用戶名/項目名
　　$ bower install jquery/jquery
　　# git代碼倉庫地址
　　$ bower install git://github.com/user/package.git
　　# 模塊網址
　　$ bower install http://example.com/script.js

所謂"安裝"，就是將該模塊（以及其依賴的模塊）下載到當前目錄的bower_components子目錄中。下載後，就能夠直接插入網頁。

src="/bower_componets/jquery/dist/jquery.min.js"

bower update命令用於更新模塊。$ bower update jquery

若是不給出模塊的名稱，則更新全部模塊。

bower uninstall命令用於卸載模塊。$ bower uninstall jquery

注意，默認狀況下，會連所依賴的模塊一塊兒卸載。好比，若是卸載jquery-ui，會連jquery一塊兒卸載，除非還有別的模塊依賴jquery。

二十三.angular路由

g.adminApp.config(function($stateProvider,$urlRouterProvider){
        	$stateProvider
        			.state('questionnaire1',{
        				url:'/questionnaire1/',
        				templateUrl:'questionnaire1.htm',
        				controller:'questionnaire1'
        			})
                    .state('questionnaire2',{
                        url:'/questionnaire2/',
                        templateUrl:'questionnaire2.htm',
                        controller:'questionnaire2'
                    });
        	$urlRouterProvider.otherwise('/questionnaire1/');

        }).run(function($rootScope,$state,$stateParams,ngdwr){
        	$rootScope.tabs = [
        		{title:"questionnaire_tab1",active:false},
        		{title:"questionnaire_tab2",active:false}
        	];
        	$rootScope.saveTmp = [{}];
        	$rootScope.selectTab = function(_type){
        		$rootScope.selectType = _type;
        		switch($rootScope.selectType){
        			case 0:
        				$state.go('questionnaire1',{

        				});
        				break;
        			case 1:
        				$state.go('questionnaire2',{

        				});
        				break;
        		}
				for(var i = 0; i < $rootScope.tabs.length; i++) {
					$rootScope.tabs[i].active = false;
				}
				$rootScope.tabs[$rootScope.selectType].active = true;
        	};
        });
        /* 問卷設置 */
        g.adminApp.controller("questionnaire1",function($scope,$rootScope,ngdwr,$stateParams,$interval){
        	$rootScope.tabs[0].active = true;
        	$scope.save = function(_objTmp,_key){
                /* Long specialId,  List
  
  
  
  
   
   
   
    questionList */
                if(!$scope.validate($scope.questionList)){
                    return;
                }
                ngdwr.sendRequest('MicroSpecialAllowBean.saveQuestion1',[{
                        productId:specialId,
                        productType:30,
                        questionList:$scope.questionList
                    }]).then(function(_data){
                    if(!!_data){
                        _bu._$showToastTips({content:"保存成功",type:1});
                    } else {
                        _bu._$showToastTips({content:"保存失敗",type:2});
                    }
                });
        	};
        	/*請求數據 todo: Long specialId*/
	        ngdwr.sendRequest('MicroSpecialAllowBean.getQuestion1', [specialId]).then(function(_data){
                console.log(_data);
	            if(!!_data){
	                $scope.questionList = angular.fromJson(_data);
	            }else{
	            	$scope.questionList = [];
	            }
	        });

        });

        /* 報名管理 */
        g.adminApp.controller("questionnaire2",function($scope,$rootScope,ngdwr,$stateParams,$interval){
        	$rootScope.tabs[1].active = true;
            /* 導出 */
        	$scope.export =function(){
                ngdwr.sendRequest('MicroSpecialAllowBean.exportExcel1',[specialId]).then(function(_data){
                    var _frame;
                    if(!!_data){
                        console.log(_data);
                        _frame = document.createElement("iframe");
                        _frame.setAttribute("style", "display:none;width:0;height:0;position: absolute;top:0;left:0;border:0;height:0;width:0;");
                        _frame.src = _data;
                        document.body.appendChild(_frame);
                        setTimeout(function() {
                            _bu._$showToastTips({content:"導出成功",type:1});
                        },2000);
                    } else {
                        _bu._$showToastTips({content:"導出失敗",type:2});
                    }
                });
        	};
            $scope.changePage = function (index) {
                $scope.loadData(index);
            };
            $scope.loadData = function (_index) {
                if(_index == undefined){
                    _index == 1;
                }
                /*請求數據 todo: Long specialId*/
    	        ngdwr.sendRequest('MicroSpecialAllowBean.getList1', [specialId,30,_index]).then(function(_data){
                    console.log(_data);
    	            if(!!_data){
                        $scope.result = angular.fromJson(_data);
                        console.log(_data);
                        $scope.signupList = $scope.result.list || [];
                        $scope.pagination = $scope.result.query || {};
                        $scope.totlePageCount = $scope.pagination.totlePageCount;
    	            }else{
    	            	$scope.signupList = [];
                        $scope.signupList = {};
    	            }
    	        });
            };
            $scope.loadData(1);
        });

        g.adminApp.filter('getStatusDesc1',function(){
                return function(status){
                    if(status == 0){
                        return '--';
                    }else if(status == 1){
                        return 'do';
                    }else if(status == 2){
                        return 'undo';
                    }
                }
        });

        /*必不可少*/
		angular.resumeBootstrap(['backend','colorpicker.module']);

  
  
  
  

二十四.點擊出現分享的蒙層提示，點擊蒙層消失

shareClick: function(){
			var maskObj = jQuery.showComMask({clickFn:deleNode});
			maskObj.showMask();
			jQuery('.j-shareTips').show();
			jQuery('.j-shareTips').on('click',function(){
				deleNode();
			});
			function deleNode() {
				maskObj.removeMask();
				jQuery('.j-shareTips').hide();

			};
		}

二十五.移動端前端開發真機調試攻略

1、IOS 移動端 （Safari開發者工具） 手機端：設置 → Safari → 高級 → Web 檢查器 → 開。 mac端：Safari → 偏好設置 → 高級 → 在菜單欄中顯示「開發」菜單。 在 OS X 中啓動 Safari 以後，以 USB 電纜正常接入 iOS 設備，並在此移動設備上啓動 Safari。此時點擊計算機上的 Safari 菜單中的「開發」，能夠看到有 iOS 設備的名稱顯示，其子菜單項即爲移動設備上 Safari 的全部標籤頁，點擊任意一個開始調試。 便捷，簡單，還能夠調試外殼包裹的瀏覽器如微信。

二十六.js 小數取整

1).丟棄小數部分,保留整數部分
js:parseInt(7/2)

2).向上取整,有小數就整數部分加1
js: Math.ceil(7/2)

3).四捨五入
js: Math.round(7/2)

4).向下取整
js: Math.floor(7/2)

二十七.用 JQUERY 取得 DIV 的寬度與高度

1.Block 對象由四部份組成：

Content – 放內容的地方

Padding – 邊框與內容之間的留白

Border – 邊框

Margin – 邊框之外的留白

2.通常講的寬度指的是內容寬度，但一個 div 的實際寬度不只只於內容寬度，尤爲在作 CSS 排版時更不能搞錯，必須同時考慮 Padding、Border 與 Margin 的寬度，四個加起來纔是 div 真正佔有的寬度。jQuery獲取各個值的方法以下：

var content = $(‘div’). width();


var contentWithPadding = $(‘div’). innerWidth();


var withoutMargin = $(‘div’). outerWidth();


var full = $(‘div’). outerWidth(true);

二十九.each與forEach

Jq:$(selector).each(function(index,element));


原生:arrayx.forEach(function(value,index,arrayy){…});

三十:git建立ssh

1.建立

ssh-keygen -t rsa -C "jingwhale@126.com"

而後填寫信息，回撤

2.查看公鑰

cat ~/.ssh/id_rsa.pub 

三十一.mac獲取ip地址

ifconfig en0

三十二.選裝cnpm

4.一、說明：由於npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，若是npm的服務器在中國就行了，因此咱們樂於分享的淘寶團隊幹了這事。32個！來自官網：「這是一個完整 npmjs.org 鏡像，你能夠用此代替官方版本(只讀)，同步頻率目前爲 10分鐘 一次以保證儘可能與官方服務同步。」；

4.二、官方網址：http://npm.taobao.org；

4.三、安裝：命令提示符執行npm install cnpm -g --registry=https://registry.npm.taobao.org； 注意：安裝完後最好查看其版本號cnpm -v或關閉命令提示符從新打開，安裝完直接使用有可能會出現錯誤；

注：cnpm跟npm用法徹底一致，只是在執行命令時將npm改成cnpm（如下操做將以cnpm代替npm）。

三十三.移動端h5播放器不調用系統播放器

IOS APP可使用：能夠在 video 標籤上加一個 「playsinline webkit-playsinline」 屬性
Safari瀏覽器是沒有辦法禁止 iPhone Safari video標籤視頻自動全屏

Obj-C中，添加配置：webview.allowsInlineMediaPlayback = YES;

三十四. js數組的操做

1）數組元素的添加

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 將一個或多個新元素添加到數組結尾，並返回數組新長度

arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 將一個或多個新元素添加到數組開始，數組中的元素自動後移，返回數組新長度

arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//將一個或多個新元素插入到數組的指定位置，插入位置的元素自動後移，返回""。

2）數組元素的刪除

arrayObj.pop(); //移除最後一個元素並返回該元素值

arrayObj.shift(); //移除最前一個元素並返回該元素值，數組中元素自動前移

arrayObj.splice(deletePos,deleteCount); //刪除從指定位置deletePos開始的指定數量deleteCount的元素，數組形式返回所移除的元素

3）數組的截取和合並

arrayObj.slice(start, [end]); 

以數組的形式返回數組的一部分，注意不包括 end 對應的元素，若是省略 end 將複製 start 以後的全部元素

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]);

將多個數組（也能夠是字符串，或者是數組和字符串的混合）鏈接爲一個數組，返回鏈接好的新的數組

4）數組的拷貝

arrayObj.slice(0); //返回數組的拷貝數組，注意是一個新的數組，不是指向

arrayObj.concat(); //返回數組的拷貝數組，注意是一個新的數組，不是指向

5）數組元素的排序

arrayObj.reverse(); //反轉元素（最前的排到最後、最後的排到最前），返回數組地址

arrayObj.sort(); //對數組元素排序，返回數組地址

6）數組元素的字符串化

arrayObj.join(separator); //返回字符串，這個字符串將數組的每個元素值鏈接在一塊兒，中間用 separator 隔開。

toLocaleString 、toString 、valueOf：能夠看做是join的特殊用法，不經常使用

三十五. trackEvent打點

/**
	 *
	 * 使用ga跟蹤事件點擊處理
	 *
	 * _category,_action必填
	 * _opt_label選填,_opt_value選填
	 *
	 */
	p._$trackEvent =function(_category, _action, _opt_label,_opt_value){
		if(!!_category && !!_action){
			var _arr = [g.gaTrackEvent,_category,_action];
			if(!!_opt_label){
				_arr.push(_opt_label);
				if((_opt_value != undefined) && (_opt_value != null)){
					_arr.push(parseInt(_opt_value));
				}
			}
			//google統計
			if(!!g[g.gaqStr]){
				g[g.gaqStr].push(_arr);
			}
		}
	}

三十六. scaleImage圖片處理方法

/**
   * 經過相冊或者的服務動態縮放圖片,走CDN
   * @method _$scaleImage
   * @param {String} _url 圖片地址
   * @param {Number} _width 圖片壓縮後的寬
   * @param {Number} _height 圖片壓縮後的高
   * @param {String} _otherProp 附加屬性，默認爲1x95，能夠不傳
   * 
   */
  _module._$scaleImage = _module._$scalePicDynamic = function(_url,_width,_height,_otherProp){

三十七. NEJ打包命令

在工程根目錄下運行下面兩個命令：
nej build tools\newestPublish\release_dev.conf  新文件  
nej build tools\newPublish\release.conf 舊文件  

三十八. CSS BEM規範

這些CSS類名真是太不精確了，並不能告訴咱們足夠的信息。儘管咱們能夠用它們來完成工做，但它們確實很是含糊不清。用BEM記號法就會是下面這個樣子：

咱們能清晰地看到有個叫.site-search的塊，他內部是一個叫.site-search__field的元素。而且.site-search還有另一種形態叫.site-search--full。

.m-thanks{//塊
	&_title{...}//元素
	&_body{...}//元素
	&_img{...}//元素(m-thanks_img在m-thanks_body結構裏，儘可能不嵌套)
	&--full{...}//修飾符,表示m-thanks的不一樣狀態
}

三十九. node scroll

that.$refs.chatScroll.onscroll = function () {
                    var _curScrollDistance = that.$refs.chatScroll.scrollTop;
                    if(_initScrollDistance - _curScrollDistance > _halfChatHeight){
                        that.data.moreMessagePosition = true;
                    }
                    if(_curScrollDistance >= that._getBottomScroll()){
                        that.data.moreMessagePosition = false;
                        that.data.moreMessage = false;
                        that.data.moreMessageCount = 0;
                    };
                    that.$update();
                }

四十. nej animation

_onAnimationBottom: function (_from, _to) {
            var that = this;
            // 建立動畫實例
            var easeoutAnimation = easeout._$$AnimEaseOut._$allocate({
                from: {
                    offset: _from
                },
                to: {
                    offset: _to
                },
                duration: 1000,
                onupdate: function (_event) {
                    that.$refs.chatScroll.scrollTop = _event.offset;
                },
                onstop: function () {
                    this._$recycle();
                }
            });
            // 開始動畫
            easeoutAnimation._$play();
        },

結點沒有scrollto()方法，使用scrollTop移動

四十一. mac 查殺進程

➜  study-platform git:(feature/newversion_tag_jsj_20170205) ✗ lsof -i :8080
COMMAND  PID      USER   FD   TYPE            DEVICE SIZE/OFF NODE NAME
java    1249 jingwhale  509u  IPv6 0x4f1e2718150a993      0t0  TCP *:http-alt (LISTEN)
➜  study-platform git:(feature/newversion_tag_jsj_20170205) ✗ kill -9 1249

四十二. mooc更新組件

cd src

而後：

bower update

最後：

npm run sync -p web

四十三. 起工程大法

第一步：

autoconfig

第二步：

mvn clean compile -U

四十四. 起edu-front-platform

node node/bin/www

打開頁面：

http://localhost:2996/#/sequence

四十五. 校驗emoji表情

var pattern = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g;
if(pattern.test(_tagName)){
   this.data.warnTipTxt = "不能添加emoji表情！";
   return false;;
}

四十六. 校驗特殊字符校驗

//特殊字符校驗
//var pattern = new RegExp("([`~!@#$^&*()=|{}^':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：」「'。，、？\\s])");
//var pattern = new RegExp("([\\;,\/；，、\\s])");
  var pattern =  /[\\;,\/；，、]/;
  if(pattern.test(_tagName)){
      this.data.warnTipTxt = "標籤不可含有如下字符：逗號、分號、頓號、斜槓！";
      this.data.suggestListShow = false;
      return false;
 }

四十七. 運營後臺設置2c

配置路徑

src/views/admin/common/config.ftl

改成2c

四十八. 模塊設計

1.父模塊沒有最後的'/'

'/m/column/manage/topbar': '/m/column/admin/edit',
'/m/column/manage/topbar/info/': '/m/column/admin/edit/info/',
'/m/column/manage/topbar/list/': '/m/column/admin/edit/list/'

2.模塊的加載，會依次走doBuild，onShow，onRefresh；模塊的切換，會走父模塊的onRefresh，本模塊會依次走doBuild，onShow，onRefresh。

四十九. git pull

養成git操做前 git pull一把

五十. css3 兼容性寫法

//flex

ul {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }

li {
  -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

// transform

transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);

五十一. 移動端彈窗樣式修復

body div.m-basewin {
    position: fixed!important;
    top: 50%!important;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

五十二. 後端取不到#後的參數

如：

"http://www.icourse163.org/course/BIT-46003#/info?inviterId=9436180&activityId=14001&isWebShare=1"

只取到

"http://www.icourse163.org/course/BIT-46003"

五十三. chrome全局搜索

option+command＋f

五十四. charles使用

1.將 Charles 設置成系統代理

以前提到，Charles 是經過將本身設置成代理服務器來完成封包截取的，因此使用 Charles 的第一步是將其設置成系統的代理服務器。

2.截取移動設備上的網絡封包

要截取 iPhone 上的網絡請求，咱們首先須要將 Charles 的代理功能打開。在 Charles 的菜單欄上選擇 「Proxy」->」Proxy Settings」，填入代理端口 8888，而且勾上 「Enable transparent HTTP proxying」 就完成了在 Charles 上的設置。以下圖所示:

3.修改服務器返回內容

根據具體的需求，Charles 提供了 Map 功能、 Rewrite 功能以及 Breakpoints 功能，均可以達到修改服務器返回內容的目的。這三者在功能上的差別是：

Map 功能適合長期地將某一些請求重定向到另外一個網絡地址或本地文件。
Rewrite 功能適合對網絡請求進行一些正則替換。
Breakpoints 功能適合作一些臨時性的修改。

Map 功能

Charles 的 Map 功能分 Map Remote 和 Map Local 兩種，顧名思義，Map Remote 是將指定的網絡請求重定向到另外一個網址請求地址，Map Local 是將指定的網絡請求重定向到本地文件。
在 Charles 的菜單中，選擇 「Tools」->」Map Remote」 或 「Map Local」 便可進入到相應功能的設置頁面。

對於 Map Local 功能，咱們須要填寫的重定向的源地址和本地的目標文件。對於有一些複雜的網絡請求結果，咱們能夠先使用 Charles 提供的 「Save Response…」 功能，將請求結果保存到本地（以下圖所示），而後稍加修改，成爲咱們的目標映射文件。

參考

五十五. intellij idea解決慢的問題

1.將intellij idea的VM設置的儘量大

# custom IntelliJ IDEA VM options


-Xms2g

-Xmx4096m

-XX:ReservedCodeCacheSize=1024m

-XX:+UseCompressedOops

2.不使用沒有的插件

3.將不要提交的代碼not excluded

五十六. CSS動畫效果的回調

1.經過@keyframes咱們能夠定義動畫從開始到結束的樣式變化 ：

@keyframes show
{
    0%   {color: red;}
    25%  {color: yellow;}
    50%  {color: blue;}
    100% {color: green;}
}

@-webkit-keyframes show /* Safari 與 Chrome */
{
    0%   {color: red;}
    25%  {color: yellow;}
    50%  {color: blue;}
    100% {color: green;}
}

在使用@keyframes定義了動畫效果以後,咱們能夠經過 animation 來將動畫效果綁定到元素,以下:

div:hover{
   animation:show 5s;
}

2.CSS動畫的回調函數

像以上的CSS動畫,若是想使用回調函數來控制動畫完成後的事務處理,是比較麻煩的.

1）延時函數

setTimtout(function(){
     dosomething()  //動畫的回調函數
     }, delaytime);      //動畫的持續時間

可是這種方法因爲並非真正意義的回調,會形成如下幾個問題:

-因爲動畫和延時函數並不必定是同一時間開始,致使函數和動畫不一樣步
-會形成JS代碼和CSS代碼相互關聯耦合,修改和維護比較麻煩
-存在多個動畫須要回調時會形成代碼混亂和臃腫
-在多個動畫效果同時結束時會引發回調函數衝突

所以,不建議使用延時函數做爲動畫的回調函數.

2)JS事件

其實,JS提供了兩個事件,能夠完美的解決動畫的回調函數問題,那就是 transtionend 和 animationend,當動畫完成時,即會觸發對應的事件。具體用法以下:

transtionend

document.getElementById("myDIV").addEventListener("transitionend", myFunction); //myFunction即爲動畫回調函數

animationend

document.getElementById("myDIV").addEventListener("animationend", myFunction); //myFunction即爲回調函數

例子以下： 回調函數觸發div變爲粉色

五十七. js數組的map與forEach方法的區別及兼容性用法

原理：

高級瀏覽器支持forEach方法 語法：forEach和map都支持2個參數：一個是回調函數（item,index,list）和上下文；
forEach:用來遍歷數組中的每一項；這個方法執行是沒有返回值的，對原來數組也沒有影響；
數組中有幾項，那麼傳遞進去的匿名回調函數就須要執行幾回；
每一次執行匿名函數的時候，還給其傳遞了三個參數值：數組中的當前項item,當前項的索引index,原始數組input；
理論上這個方法是沒有返回值的，僅僅是遍歷數組中的每一項，不對原來數組進行修改；可是咱們能夠本身經過數組的索引來修改原來的數組；
forEach方法中的this是ary,匿名回調函數中的this默認是window；

var ary = [12,23,24,42,1];
var res = ary.forEach(function (item,index,input) {
     input[index] = item*10;
})
console.log(res);//-->undefined;
console.log(ary);//-->會對原來的數組產生改變；

map:和forEach很是類似，都是用來遍歷數組中的每一項值的，用來遍歷數組中的每一項；

區別：map的回調函數中支持return返回值；return的是啥，至關於把數組中的這一項變爲啥（並不影響原來的數組，只是至關於把原數組克隆一份，把克隆的這一份的數組中的對應項改變了）；

無論是forEach仍是map 都支持第二個參數值，第二個參數的意思是把匿名回調函數中的this進行修改。

var ary = [12,23,24,42,1];
var res = ary.map(function (item,index,input) {
     return item*10;
})
console.log(res);//-->[120,230,240,420,10];
console.log(ary);//-->[12,23,24,42,1]；

兼容寫法：

無論是forEach仍是map在IE6-8下都不兼容（不兼容的狀況下在Array.prototype上沒有這兩個方法）,那麼須要咱們本身封裝一個都兼容的方法，代碼以下：

/**
* forEach遍歷數組
* @param callback [function] 回調函數；
* @param context [object] 上下文；
*/
Array.prototype.myForEach = function myForEach(callback,context){
    context = context || window;
    if('forEach' in Array.prototye) {
        this.forEach(callback,context);
        return;
    }
    //IE6-8下本身編寫回調函數執行的邏輯for(var i = 0,len = this.length; i < len;i++) {
        callback && callback.call(context,this[i],i,this);
    }
}

/**
* map遍歷數組
* @param callback [function] 回調函數；
* @param context [object] 上下文；
*/
Array.prototype.myMap = function myMap(callback,context){
    context = context || window;
    if('map' in Array.prototye) {
        return this.map(callback,context);
    }
    //IE6-8下本身編寫回調函數執行的邏輯var newAry = [];
    for(var i = 0,len = this.length; i < len;i++) {
        if(typeof  callback === 'function') {
            var val = callback.call(context,this[i],i,this);
            newAry[newAry.length] = val;
        }
    }
    return newAry;
}

五十八. 0.14*100

0.14*100 = 14.000000000000002

五十九. 模塊中禁止使用id獲取模板節點

this._saveBtnNode = e._$getByClassName(this.__body, 'j-save-btn')[0];

六十. 圖片壓縮問題

全部圖片必須小於100k

多張圖標使用精靈圖，減小請求

圖片使用壓縮方法 imageUtil#_$scaleImage

六十一. 避免全局查找

function search() {  
    //當我要使用當前頁面地址和主機域名
    alert(window.location.href + 
    window.location.host);
}
//最好的方式是以下這樣  先用一個簡單變量保存起來
function search() {  
    var location = window.location;
    alert(location.href + location.host);
} 

六十二. http & https 協議不帶

//錯誤的
var link = 'http://study.163.com';  
//正確的
var link = '//study.163.com'; 

六十三. 使用AlloyDesigner進行視覺的修改優化

AlloyDesigner

六十四. Git如何忽略已經被提交的文件

爲何我增長了 .gitignore 裏的規則卻沒有效果？

這是由於咱們誤解了 .gitignore 文件的用途，該文件只能做用於 Untracked Files，也就是那些歷來沒有被 Git 記錄過的文件（自添加之後，從未 add 及 commit 過的文件）。

之因此規則不生效，是由於那些 .log 文件曾經被 Git 記錄過，所以 .gitignore 對它們徹底無效。

問題解決

1.先把.gitignore中css/忽略規則刪掉，提交代碼
2.刪除git對於該文件的追蹤信息；
git rm -r --cached 
  
  
  
  
   
   
   
   
3.add＋commit + push

  
  
  
  

六十五. 如何清除圖片下方出現幾像素的空白間隙？

方法1：
img{display:block;}
方法2：
img{vertical-align:top;}
除了top值，還能夠設置爲text-top | middle | bottom | text-bottom，甚至特定的
  
  
  
  
   
   
   
   和
   
   
   
   
     值均可以 方法3： #test{font-size:0;line-height:0;} #test爲img的父元素 
   
  
  
  
  

六十六. 如何使連續的長字符串自動換行？

方法：
#test{width:150px;word-wrap:break-word;}
word-wrap的break-word值容許單詞內換行

六十七. 如何作1像素細邊框的table？

方法1：
#test{border-collapse:collapse;border:1px solid #ddd;}
#test th,#test td{border:1px solid #ddd;}


  
  
  
  

	
   
   
   
   
 
    
 
     
姓名
 
     
Joy Du
 
    
 
    
 
     
年齡
 
     
26
 
    
 
   
  
  
  
  
方法2：
#test{border-spacing:1px;background:#ddd;}
#test tr{background:#fff;}


  
  
  
  

	
   
   
   
   
 
    
 
     
姓名
 
     
Joy Du
 
    
 
    
 
     
年齡
 
     
26
 
    
 
   
  
  
  
  
IE7及更早瀏覽器不支持border-spacing屬性，可是能夠經過table的標籤屬性cellspacing來替代。

六十八. -webkit-line-clamp

  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

演示

六十九. NEJ調用登陸彈窗

NEJ.P('edu.cms').showLoginDialog();

七十. ykt默認字體樣式f-f0

默認字體樣式：f-f0

七十一. img加上類名選擇

img加上類名選擇

七十二. setTimeout 0

function a() {  
  setTimeout( function(){  
    alert(1)  
  }, 0);  
  alert(2);  
}  
a(); 

實際的執行結果確是 「2」、「1」

JavaScript 是單線程執行的，也就是沒法同時執行多段代碼，當某一段代碼正在執行的時候，全部後續的任務都必須等待，造成一個隊列，一旦當前任務執行完畢，再從隊列中取出下一個任務。這也常被稱爲 「阻塞式執行」。因此一次鼠標點擊，或是計時器到達時間點，或是 Ajax 請求完成觸發了回調函數，這些事件處理程序或回調函數都不會當即運行，而是當即排隊，一旦線程有空閒就執行。假如當前 JavaScript 進程正在執行一段很耗時的代碼，此時發生了一次鼠標點擊，那麼事件處理程序就被阻塞，用戶也沒法當即看到反饋，事件處理程序會被放入任務隊列，直到前面的代碼結束之後纔會開始執行。若是代碼中設定了一個 setTimeout，那麼瀏覽器便會在合適的時間，將代碼插入任務隊列，若是這個時間設爲 0，就表明當即插入隊列，但不是當即執行，仍然要等待前面代碼執行完畢。因此setTimeout 並不能保證執行的時間，是否及時執行取決於 JavaScript 線程是擁擠仍是空閒。