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屬性下面會出現我剛纔安裝過的包的版本信息

{
  "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進行解析：得到相對應的信息

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

url.resolve(form, to): 將from + to 拼接成一個完成URl信息：

node.js內置核心模塊 querystring: 對URL到對象解析或者對URL進行編碼

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);
    })

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>

計算屬性還要其他特性：計算屬性可以依賴其他其他屬性，或者是其他實例的數據：

總結：雖然我們也可以在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" :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，先卸載，在安裝最新版本功能，新版本在不斷更新，有人維護，能夠更好的擴展

對於其中層級目錄：

/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的工程搭建和基礎配置

android （四）手勢

Android開發（五）

Andorid 開發三（Intent）

Android 開發二

andorid 開發

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結