1. 程式人生 > >一些前端注意事項整理

一些前端注意事項整理

angular

angular 的service實現方法:

1,value 變數
angular.module(‘app’,[]).value(‘realname’,’sqliang’);

2,constant 常量(不可以改變)

angular.module(‘app’,[]).value(‘http’,’www.baidu.com’);

3,factory
angular.module(‘app’,[]).factory(‘Data’,function(){
return {
msg: ‘Hello’,
setMsg: function(){
this.msg = “no Hello”;
}
};
});

4,service
angular.module(‘app’,[]).service(“User”,function(){
this.firstname = “司馬”;
this.lastname = “長風”;
this.getName = function(){
return this.firstname + ” ” + this.lastname;
}
});
5,provider
ng-show , ng-hide , ng-hide

檔案上傳解決方案

普通的檔案上傳實現方案:

常見非同步上傳方案:

1,使用第三方控制元件(Flash,ActiveX,瀏覽器外掛等)
適用與專門的檔案上傳應用
優點:
互動與可控性好(多檔案,進度展示,續傳,暫停)
效能好(可使用底層協議)
缺點:
需要瀏覽器安裝外掛

2,使用隱藏的iframe模擬非同步上傳(偽非同步上傳)
優點:瀏覽器原生支援,不需要外掛,廣泛的瀏覽器相容性
缺點:互動差,體驗差,上傳過程基本不可控;效能差

3,使用xhr level2純ajax非同步上傳
優點:
(1)支援H5的瀏覽器原生支援,不需要外掛
(2)互動性較好
缺點:受瀏覽器支援限制
關鍵過程:
1,建立FormData,放入待上傳檔案
2,通過xhr操作將FormData傳送到伺服器,實現檔案上傳,
3,繫結progress、load、error等事件監聽傳輸過程並在頁面顯示動態互動資訊

var fd = new FormData();
fd.append('myFile'
,element.files[0]); // 建立xhr物件 var xhr = new XMLHttpRequest(); // 監聽狀態,實時響應。 // xhr 和 xhr.upload 都有progress事件,xhr.progress是下載進度,xhr.upload.progress是上傳進度 xhr.upload.onprogress = function(event){ if(event.lengthComputable){ var percent = Math.round(event.loaded * 100 / event.total); console.log("%d%",percent); } }; // 傳輸開始 xhr.onloadstart = function (event) { console.log('load start'); } // ajax過程成功完成事件 xhr.onload = function(event){ console.log("load success"); console.log(xhr.responseText); } // ajax 過程發生錯誤事件 xhr.onerror = function(event){ console.log("error"); } // ajax被取消 xhr.onabort = function (event) { console.log("abort"); } // loadend傳輸結束,不管成功失敗都會被觸發 xhr.onloadend = function (event) { console.log("load end"); } xhr.open('POST','/upload3',true); xhr.send(fd);

七天學會nodejs

1,為了實現高效能web伺服器,首先看重的是事件機制和非同步IO模型的優越性
執行在NodeJS中的JS的用途是操作磁碟檔案或搭建HTTP伺服器,NodeJS就提供了fs,http等內建物件
2,寫的稍微大一點的程式程式碼都會將程式碼模組化。nodejs中一般將程式碼合理拆分到不同的js檔案中,每一個檔案就是一個模組,二檔案路徑就是模組名

在編寫每一個莫虧啊時,都有require,exports,module三個預訂好的變數可供使用
var foo1 = require(‘./foo’);//可以不加 .js
var foo2 = require(‘./foo.js’)

另外,可以使用以下方式載入和使用一個JSON檔案。
var data = require(‘./data.json’);

exports物件是當前模組的匯出對戲那個,用於匯出模組公有方法和屬性。別的模組通過require函式使用當前模組時得到的就是當前模組的exports物件
exports.hello = function(){
console.log(“heelo”);
}
module,
通過module物件可以訪問當前模組的一些相關資訊,但最多的用途是替換當前模組的到處物件。

3,Nodejs使用CMD模組系統,主模組作為程式入口點,所有模組在執行過程中只初始化一次。另外,除非js模組不能滿足需求,夠足不要輕易使用二進位制模組,否則使用者會叫苦連天

4,包(package),js模組的基本單位是單個js檔案,但複雜的模組往往由多個子模組子組成,為了便於管理和使用可以把多個子模組組成的大模組稱作包,並把所有子模組凡在同一個目錄裡。

在組成一個包的所有子模組中,需要有一個入口模組,入口模組的到處物件被作為包的到匯出物件

— /home/user/lib/
—— cat/
head.js
body.js
index.js

index.js:

var head = require(‘./head’);
var body = require(‘./body’);

exports.create = function (name) {
return {
name: name,
head: head.create(),
body: body.create()
};
}

當模組的檔名是index.js,載入模組時可以使用模組所目錄的路徑代替模組檔案路徑:
var cat = require(‘/home/user/lib/cat’);
等價於
var cat = require(‘/home/user/lib/cat/index’);

=====另外,如果想自定義入口模組的檔名和存放位置,就需要在包目錄下包含一個package.json檔案,並在其中指定入口模組的路徑,上例中的cat模組可以重構如下:
— /home/user/lib
- cat/
+ doc/
- lib/
head.js
body.js
main.js
+ test/
package.json

package.json:

{
‘name’: ‘cat’,
‘main’: ‘./lib/mian.js’
}

這樣,同樣可以使用 require(‘/home/user/lib/cat’)的方式載入模組。NodeJS會根據包目錄下的package.json找到入口模組所在位置

版本號:
使用npm下載和釋出程式碼都會接觸到版本號,npm使用語義版本號來管理程式碼:
語義版本號分為X.Y.Z三位,分別代表主版本號,次版本號和補丁版本號,當代碼更新時,版本號按以下原則更新:

如果只是修改bug,需要更新Z位;如果是新增了功能,但是向下相容,需要更新Y位;如果有大變動,向下不相容,需要更新X位。

=======總結:
1,編寫程式碼前先規劃好目錄結構,才能做到有條不紊;
2,稍大些的程式可以將程式碼拆分為多個模組管理,更大些的程式可以使用包來組織模組
3,合理使用node_modules和NODE_PATH來解耦包的使用方式和物理路徑
4,使用NPM加入NodeJS生態圈互通有無。

====================
檔案操作
讓前端覺得如獲神器的不是NodeJS能做網路程式設計,而是NodeJS能夠操作檔案。幾乎也也只需要一些資料處理邏輯,再加上一些檔案操作,就能編寫出大多數前端工具。

NodeJS通過fs內建模組提供對檔案的操作,fs模組提供的API基本上分為三類:

(1)檔案屬性讀寫,fs.stat,fs.chmod,fs.chown等
(2)檔案內容讀寫,fs.readFile,fs.readdir,fs.writeFile,fs.mkdir等等
(3)底層檔案操作,fs.open,fs.read,fs.write,fs.close等等

非同步讀取檔案與同步讀取的處理區別:
fs.readFile(pathname,function(err, data){
if(err){
//deal with error
}else {
//deal with data.
}
});

try {
var data = fs.readFileSync(patheName);
//deal with data.
} catch (err) {
// deal with erro.
}

一些後臺知識

1、使用了redis
2、mongoDB
3、Paxos一致性演算法,理論複雜,難以實現
4、raft演算法

前端工程精粹

前端工程精粹(一,二,三),fis前端自動化工具解決開發效能優化等方案
基於依賴關係表的靜態資源管理系統與模板框架設計:

一些專案思考

1,使用fis後,可以本地測試,或者編譯部署到測試機,很方便。可以合併,壓縮,js,css,以及圖片。可以

2,如何基於fis進行commonJS規範程式設計????==========
fis-pure

=====================

專案相關:
1,如果後臺基於nginx和php,檔案部署,以後後臺新增資料介面(json格式的資料介面),需要注意什麼??

====

====
2,目前專案想做前後端分離,由前端來處理路由,模板,傳送ajax等(能否推薦一套類似於angular這樣的能提供路由,傳送http的MV*框架)