node.js(基礎篇)

1.Node.js 用于背景開發的子產品：

基于CommonJS規範分為三種不同部分： 1).内置的node.js子產品，2)。第三方Node.js子產品, 3)自定義node.js子產品

如何使用第三方使用子產品：建立一個package 進行第三方檔案管理

npm init---建立一個package 進行管理第三方檔案：

npm install -g request: 安裝在全局目錄下面，

npm install --save request: 将其安裝在配置資訊的依賴中：如下圖使用--save 之後再dependencies屬性下面會出現我剛才安裝過的包的版本資訊

node.js(基礎篇)

{
  "name": "nodejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2.requests VS request 的差別：

是為浏覽器處理stream XHR的一個小工具，request 是一個請求資料包，requests 進行流分塊處理,是對request的簡化處理，讓我們更加容易發送資料和對響應資料處理

借助URL 子產品對url進行解析：得到相對應的資訊

node.js(基礎篇)

如果url.parse(url,tue, true) 傳回一個query屬性是一個對應的JSON對象：

node.js(基礎篇)

url.resolve(form, to): 将from + to 拼接成一個完成URl資訊：

node.js(基礎篇)

node.js内置核心子產品 querystring: 對URL到對象解析或者對URL進行編碼

node.js(基礎篇)

async : 進行異步流程控制：

1）明白在JS中隐式callback函數到底是什麼？？

jS 中回調指的是：函數可以作為一個參數在另外一個函數中被調用，JS異步程式設計語言，Callback關鍵字是為了簡化代碼，将具有相同邏輯結構，使用對應關鍵字替代：

第一個Callback入參中，表示這個非普通變量，是一個函數，

在JS中關鍵字callback與以往語言調用方式不同，它表示函數體在完成某種操作之後會由内到外調用

// 串行無關聯方式

var async = require('async');
console.time('test')
async.series([
    function(callback) {
        setTimeout(function () {
            callback(null, 'one');
        }, 1000)
    },
    // the second function 
    function(callback) {
        setTimeout(function () {
            callback(null, 'two');
        }, 2000)
    }
], function (err, results) {
    console.log(results);
    console.timeEnd('test');
})

//并行無關聯，最大的長時間：var async = require('async');
console.time('test')
async.parallel([
    function(callback) {
        setTimeout(function () {
            callback(null, 'one');
        }, 1000)
    },
    // the second function 
    function(callback) {
        setTimeout(function () {
            callback(null, 'two');
        }, 2000)
    }
], function (err, results) {
    console.log(results);
    console.timeEnd('test');
})
// 串行有關聯函數
//串行關聯函數
async.waterfall(
    [
        function (callback) {
            callback(null, 'one', 'two');
        },
        function (arg1, arg2, callback){
            callback(null, arg1, arg2, 'three');
        }, 
        function (arg1, arg2, arg3, callback){
            callback(null, [arg1, arg2, arg3,'three']);
        }
    ], function (err, results) {
        console.log(results);
    })

node.js(基礎篇)
npm Scripts:

npm Scripts,通過運作其他*.js 檔案指令

将項目關聯腳本集中在同一個地方，進行集中管理，npm Script 有多個對應的指令

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

vue基礎篇：

https://cn.vuejs.org/v2/guide/index.html

vue 是一種建構使用者界面漸進式架構，vue 是一個自底向上逐層應用，VUE的核心庫隻關注視圖層，vue為複雜的單也應用提供驅動

vue基礎方式：第一種CDN,第二種: vue.js 下載下傳本地，第三種：vue-cli

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		  <!-- 寫一個标簽 -->
		  <div id= "app">
    			  <!-- 響應資料顯示 {{}} ,支援文法-->
				<h1>{{ message }}</h1>
				<!-- 動态連結 
				條件渲染
				    v-if
					v-bind: data
					v-else
					v-show : 隻是切換了display,v-if 是false不會建立标簽，
					v-show:  适合标簽頻繁切換更好，不會讓頁面顯示
				-->
				<div>
					 <a v-bind:href = "href">百度</a>
					 <ul>
						<!-- 循環是li 不能寫在ul上 借助關鍵字in
						  周遊數組
						  周遊對象時 map的Value值 
						  (item, name) 替換 item 第一個參數value, 第二個參數 key-->
						<li v-for= "item in persons">
							I am {{item.name}}
						</li>
					 <ul>
				</div>
		  </div>
	</body>
	<!--通過CDN的方式，将vue進行引入-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
		 var app = new Vue({
			 el: "#app",
			 // 響應資料
			 data : {
				 href : "https://www.baidu.com",
				 message: "hello wolrd",
				 num: 1,
				 persons: [{name: "1111"}, {name: "2222"}]
			 }
		 })
	</script>
</html>

VUE 中計算屬性 computed:

1.什麼叫計算屬性：在模闆表達式内，設計初衷是簡單運算，但是一旦邏輯複雜，難以維護，并且在VUE中V-for|V-if我們不推薦在模闆表達式中使用，不斷調用函數，使用計算屬性，隻有在值進行修改時候才會進行計算

在實際過程中複雜邏輯使用VUE自帶的Computed屬性：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<div>
				<h1>{{message.split(" ").reverse().join()}}</h1>
			</div>
		</div>
	</body>
	<!--通過CDN的方式，将vue進行引入-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
		var app = new Vue({
			el: "#app", // elemetUI 對象
			data: {
				message: "hello world"
			}
		})
		
	</script>
</html>

在如果在模闆中調用回調函數等複雜計算，借助使用VUE中Computed屬性：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id = "app">
			<div>
				<h1>{{message}}</h1>
				<h1>{{reverseMessage}}</h1>
			</div>
		</div>
	</body>
	<!--通過CDN的方式，将vue進行引入-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
		var app = new Vue({
			el: "#app", // elemetUI 對象
			data: {
				message: "hello world"
			},
			computed:{
				reverseMessage: function(){
					`this 指向是VM 執行個體 app`
					return this.message.split(' ').reverse().join(' ');
				}
			}
		})
		
	</script>
</html>

3. Computed 并不會時時觸發，隻會隻修改時候才會觸發，這點很好，不需要頻繁調用函數，消耗記憶體：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<h1>{{message}}</h1>
				<h1>{{reverseMessage}}</h1>
			</div>
			<div>
				<button @click="add()">補充貨物1</button>
				<div>總價為 {{price}}</div>
			</div>
		</div>
	</body>
	<!--通過CDN的方式，将vue進行引入-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
		var app = new Vue({
			el: "#app", // elemetUI 對象
			data: {
				message: "hello world",
				package1: {
					count: 5,
					price: 5
				},
				package2: {
					count: 10,
					price: 10
				}
			},
			methods:{
				add: function(){
					return this.package1.count++;
				}
			},
			computed: {
				reverseMessage: function() {
					//`this 指向是VM 執行個體 app`
					return this.message.split(' ').reverse().join(' ');
				},
				price: function() {
					return this.package1.count*this.package1.price + this.package2.count*this.package2.price 
				}
			}
		})
	</script>
</html>

計算屬性還要其他特性：計算屬性可以依賴其他其他屬性，或者是其他執行個體的資料：

node.js(基礎篇)

總結：雖然我們也可以在VUE.methods 寫一個實作對于邏輯的方法函數，最後兩種方式的結果一樣的，但是計算屬性特性就是基于依賴進行緩存，計算屬性隻有在它的相關依賴發生改變時才會重新求值。這也就意味中隻要依賴屬性沒有發生修改，多次通路計算屬性是之前的值，但是如果是方法的函數，多次方法必須得重複計算，特别是對于那些耗時特别嚴重的邏輯，但是值并不是經常使用，但是頻繁調用

Var _this = this 了解：

this 在不同的作用域範圍之内表示不同函數，在全局中代表是Window,在内部函數代表這個對象，_this 隻是為了記住最初使用對象，入在引入監聽操作時候，顯示答案就利用這個_this

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<h1>{{message}}</h1>
				<h1>{{reverseMessage}}</h1>
			</div>
			<div>
				<button @click="add()">補充貨物1</button>
				<div>總價為 {{price}}</div>
			</div>
			<div>
				// 監聽屬性 監聽事務發展
			question: <input type= "text" placeholder="enter" v-model="question">
			answer: {{answer}}
			</div>
		</div>
	</body>
	<!--通過CDN的方式，将vue進行引入-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
		var app = new Vue({
			el: "#app", // elemetUI 對象
			data: {
				question: '',
				answer: 'no answer',
				message: "hello world",
				package1: {
					count: 5,
					price: 5
				},
				package2: {
					count: 10,
					price: 10
				}
			},
			methods:{
				add: function(){
					return this.package1.count++;
				}
			},
			computed: {
				reverseMessage: function() {
					//`this 指向是VM 執行個體 app`
					return this.message.split(' ').reverse().join(' ');
				},
				price: function() {
					return this.package1.count*this.package1.price + this.package2.count*this.package2.price 
				}
			},
			// 監聽對象是否修改
			watch:{
				question: function(){
					this.answer = 'waiting';
					var _this = this;
					// 模拟web c操作
					setTimeout(function(){
						_this.answer = '404'
					}, 100)
				}
			}
			
		})
	</script>
</html>

v-bind:綁定對象，同時也可以進行簡寫用：替代

為什麼所有監聽資料都需要在VUE中進行初始化：

因為VUE的核心原理是Object.defineProperty() 是核心原理，雙向綁定原理，該方法在一個對象定一個新的屬性

在雙向綁定中，及利用Object.definePerporty 屬性對setter,getter 執行指派

當把一個普通JS對象傳入VUE中data選項中時，VUE周遊對象所有屬性，并使用Object.defineProprrty()把這些全部屬性轉換成為getter/setter ，但是IE8 或低版本的浏覽器不支援

浏覽器對于DOM的複用特性，如果有一個對應ID，不會進行DOM複用

如果沒有添加ID，去進行删除操作，DOM删除是最後一個節點，如果加入:key 删除時候不會進行DOM複用：

：key 屬性：禁止DOM複用：這是虛拟DOM算法決定的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div>
				<h1>{{message}}</h1>
				<h1>{{reverseMessage}}</h1>
			</div>
			<div>
				<button @click="add()">補充貨物1</button>
				<div>總價為 {{price}}</div>
			</div>
			<div>
				// 監聽屬性 監聽事務發展
			question: <input type= "text" placeholder="enter" v-model="question">
			answer: {{answer}}
			</div>
			<div>
				<a :href="href" target="_blank" rel="external nofollow"  :data-id="message" :class="['aaa',message]">百度</a>
			</div>
			<div>
				<button @click="persons.splice(0,1)">CUT</button>
				<ul>
					<!-- item周遊數組value, index 對應索引 -->
					<li v-for= "(item, index) in persons" :key="item.name">
						I am {{item.name}}, my age is : {{item.age}} <input type="text"/>
					</li>
				</ul>
			</div>
		</div>
	</body>
	<!--通過CDN的方式，将vue進行引入-->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
		var app = new Vue({
			el: "#app", // elemetUI 對象
			data: {
				question: '',
				answer: 'no answer',
				message: "hello world",
				href : "https://www.baidu.com",
				persons: [{name: "111", age: 40},{name: "2222", age: 44},{name: "3333", age: 45}],
				package1: {
					count: 5,
					price: 5
				},
				package2: {
					count: 10,
					price: 10
				}
			},
			methods:{
				add: function(){
					return this.package1.count++;
				}
			},
			computed: {
				reverseMessage: function() {
					//`this 指向是VM 執行個體 app`
					return this.message.split(' ').reverse().join(' ');
				},
				price: function() {
					return this.package1.count*this.package1.price + this.package2.count*this.package2.price 
				}
			},
			// 監聽對象是否修改
			watch:{
				question: function(){
					this.answer = 'waiting';
					var _this = this;
					// 模拟web c操作
					setTimeout(function(){
						_this.answer = '404'
					}, 100)
				}
			}
			
		})
	</script>
</html>

VUE的工程搭建和基礎配置

vue-cli 腳手架快速搭建項目：node 版本最好是最新版本為8.11

npm insatll -g @vue/cli ---- vue從2到3 版本更新差異挺大的,是以如果您已經安裝的是2.0，先解除安裝，在安裝最新版本功能，新版本在不斷更新，有人維護，能夠更好的擴充

node.js(基礎篇)

對于其中層級目錄：

/public dir 目錄的公共資源在package 是不會被打包的；

/compoents dir 目錄下面放的自定義的功能元件

/ assets dir : 靜态資源元件；

/ vues: vue 公共的元件

app.vue: 全局的CSS樣式，等元件功能

main.js : 入口檔案，引入/App.vue, ./route , ./store 等元件，全局使用的東西都可以定義在此，在後續安裝elemntUI 同樣也在此定義

route.js 是我們的路由檔案，所有的路由配置都在此；

2）elemtUI 安裝：

npm install element-ui axios --save // 隻安裝本項目，這個插件隻是安裝在dev環境中，隻是在dev時候使用，上線不會将此插件打包上

3）路由配置和生命周期

3-1： @ 代表src

3-2: 對于一個普通元件有三個部分： template, script, style: css,并且在style 中我們可以add scope 來限制css 的作用域範圍；

3-3：路由：指的是在通路時候根據url的正則比對方式通路到不同的頁面上，之前在寫服務d端時候，可以利用模式方式，借助代理模型，根據對應的輸入，通路輸入借助proxy代理模式，通路到不同的設計方式中

app.vue 屬于我們根元件，對應我們的一級路由；

3-4：鈎子結構：

鈎子類似于JAVA中切片，對于DOM中的事件的捕獲和冒泡過程來看：

beforecreate,create,beforeUpdate,beforeDestory 是在捕獲過程中執行，

mounted,updated,destoryed 是在冒泡過程中調用

node.js(基礎篇)

1.Node.js 用于背景開發的子產品：

2.requests VS request 的差別：

async : 進行異步流程控制：

vue基礎篇：

VUE 中計算屬性 computed:

Var _this = this 了解：

VUE的工程搭建和基礎配置

繼續閱讀

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

express 搭建背景建構工程目錄結構

layui多任務上傳添加進度條