<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          JavaScript事件和修改this指向

          前端達人

          1、鼠標事件:

          onclick 左鍵單擊 ondblclick 左鍵雙擊 onmouseover onmouseenter 鼠標移入 onmouseout onmouseleave鼠標移出 onmousedown 鼠標按下 onmousmove 鼠標移動(鼠標滑動) onmouseup 鼠標抬起 oncontextmenu 右鍵單擊(右鍵菜單)

           2、鍵盤事件:

          onkeydown onkeypress 鍵按下 onkeyup 鍵抬起 鍵盤事件必須放在整個文檔(document)里面去操作,不能放在節點里面去操作

          3、系統事件:

          onload 加載完成后 onerror 加載出錯后 onresize 窗口調整大小時 onscroll 滾動時

          
          
          1. //onload 加載完成后 onerror 加載出錯后 onresize 窗口調整大小時 都是放在window的身上
          2. window.onload = function(){};
          3. //onscroll 滾動時 可以放在document和window身上
          4. document.onscroll = function(){};

           4、表單事件:

          onfocus 獲取焦點后 onblur 失去焦點后 onchange 改變內容后 onreset 重置后 onselect 選擇后 onsubmit 提交后

          5、監聽事件(綁定事件)寫法:

          節點.事件 = 函數。

          document.getElementById("main").onclick = function(){alert(1)};

          document.getElementById("main").addEventListener("click",function(){},false);

          行內綁定

          <button οnclick="alert('hello world')">Click</button>

           <button οnclick="func()">Click</button>

          <script type="text/javascript">

                    var func = () => {

                              alert('hello world')

                    };

          </script>

          6、事件函數this指向:在事件函數中,關鍵詞 this 就表示觸發事件的這個節點對象。

           7、修改this指向:

          call() 第一個參數為 函數this將要修改指向的對象 函數有參數時 后面, 一一跟上即可 可以主動執行函數

          apply() 第一個參數為 函數this將要修改指向的對象 函數有參數時 數組包一下 可以主動執行函數

          bind() 第一個參數為 函數this將要修改指向的對象 函數有參數時 后面, 一一跟上即可 不不不會主動執行函數 但會return函數本體 再加一個括號即可執行  

          
          
          1. window.a = 0 //在window對象下創建一個屬性,屬性值為0
          2. let obj1 = {
          3. a: 1
          4. }
          5. let obj2 = {
          6. a: 2
          7. }
          8. function fn(num1, num2, num3) {
          9. console.log(this.a);
          10. console.log(num1, num2, num3);
          11. }
          12. //修改函數里面this的指向
          13. fn.call(obj1,4,5,6)
          14. fn.apply(obj2,[4,5,6])
          15. fn.bind(obj1,4,5,6)()

           


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          轉自:csdn
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          Vue的雙向數據綁定原理是什么?

          前端達人

          vue.js 是采用數據劫持結合發布者-訂閱者模式的方式,通過 Object.de?neProperty()來劫持各個屬性的 setter,getter,在數據變動時發布消息給訂閱者,觸發相應的監聽回調。 具體步驟: 第一步:需要

          observe 的數據對象進行遞歸遍歷,包括子屬性對象的屬性,都加上 setter 和 getter,這樣的 話,給這個對象的某個值賦值,就會觸發 setter,那么就能監聽到了數據變化。 第二步:compile 解析模板指令,將模板中的變量替換成數據,然后初始化渲染頁面視圖,并將每個指令對 應的節點綁定更新函數, 添加監聽數據的訂閱者,一旦數據有變動,收到通知,更新視圖。 第三步:Watcher 訂閱者是

          Observer 和 Compile 之間通信的橋梁,主要做的事情是:

          1、在自身實例化時往屬 性訂閱器(dep)里面添加自己

          2、自身必須有一個 update()方法

          3、待屬性變動 dep.notice()通知時,能調用自身的update()方法,并觸發 Compile 中綁定的回調,則功成身退。 第四步:MVVM 作為數據綁定的入口, 整合 Observer、Compile 和 Watcher 三者,通過 Observer 來監聽自己 的 model 數據變化,通過Compile 來解析編譯模板指令,最終利用 Watcher 搭起 Observer 和 Compile 之間的通信 橋梁,達到數據變化 -> 視圖更新;視圖交互變化(input)-> 數據 model 變更的雙向綁定效果。









          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          轉自:csdn
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          SpringBoot與Vue交互解決跨域問題

          前端達人

          Hello,你好呀,我是灰小猿,一個超會寫bug的程序猿!

          最近在利用springboot+vue整合開發一個前后端分離的個人博客網站,所以這一篇總結一下在開發中遇到的一個問題,關于解決在使用vue和springboot在開發前后端分離的項目時,如何解決跨域問題。在這里分別分享兩種方法,分別在前端vue中解決和在后臺springboot中解決。

          瀏覽器同源策略

          為什么會出現跨域問題? 首先一個定義一定要了解,就是瀏覽器的同源策略,

          什么是瀏覽器的同源策略, 簡單來說就是瀏覽器發送請求的協議、域名和端口要和服務器接收請求的協議、域名以及端口一致。這樣才能完成交互,但是很顯然這樣是不可能的,尤其在對于在同一臺電腦上開發前后端分離的項目的時候,一定是會使用兩個端口的。那么這樣就形成了跨域問題。

          在這里分享一下我解決跨域問題用到的兩個方法,

          一、VUE前端配置代理解決跨域

          (1)Vue中讓瀏覽器請求攜帶cookie

          先說一下我是怎么發現出現跨域問題的吧,最開始我在從前端瀏覽器向后臺發送請求的時候是沒有攜帶瀏覽器的cookie的,但是這樣就導致了無法對瀏覽器的請求進行驗證,所以在后來我用了一個方法讓瀏覽器在每次發送請求的時候在http請求頭中攜帶上cookie,方法如下:

          在vue的main.js方法中寫入如下代碼:

          //引入axios依賴 import axios from 'axios' //讓請求攜帶上瀏覽器的cookie axios.defaults.withCredentials=true Vue.prototype.$axios = axios 
          
          • 1
          • 2
          • 3
          • 4
          • 5

          以上表示引入axios請求,也就是ajax請求,同時開啟寫入憑證,只有withCredentials等于true的時候,才會攜帶cookie。

          (2)vue中配置代理解決跨域

          在vue中解決跨域問題其實也比較簡單,因為我們每次瀏覽器發送的請求中,URL的前半部分一定是相同的,比如http://localhost:8080/blogs與http://localhost:8080/login,我們就可以將他們相同的URL提取出來,封裝到axios.defaults.baseURL中,這樣我們在每次請求的時候,就可以將請求地址簡寫成“/blogs”這樣,也相當于是將URL頭部進行了一個簡單的封裝。

          注意:設置統一請求路徑的axios.defaults.baseURL =
          "http://localhost:8080"應該寫在axios.js中

          但是在解決跨域問題的時候,我們應該將axios.defaults.baseURL = "http://localhost:8080"寫成axios.defaults.baseURL = “/api”。
          這樣我們每次請求的路徑前面都會是“/api”的形式。
          這也是第一步:

          第一步,設置統一訪問路徑

          在axios.js中設置axios.defaults.baseURL = "http://localhost:8080"寫成axios.defaults.baseURL = "/api"

          第二步、配置跨域代理

          在babel.config.js的同級目錄下新建一個js文件vue.config.js
          在這里插入圖片描述

          在其中寫入如下代碼:這段代碼是解決跨域問題而配置的一個代理。我這里后臺服務器的請求連接是http://localhost:8081,所以如果你的不是的話需要修改一下。

          /**
           * 解決跨域問題
           * @type {{devServer: {proxy: {"/api": {changeOrigin: boolean, pathRewrite: {"^/api": string}, target: string}}, host: string, open: boolean}}}
           */ module.exports = { devServer: { host: 'localhost', open: true, // 自動打開瀏覽器 // 代理配置表,在這里可以配置特定的請求代理到對應的API接口 // 例如將'localhost:8080/api/xxx'代理到'www.example.com/api/xxx' proxy: { '/api': { // 匹配所有以 '/api'開頭的請求路徑 target: 'http://localhost:8081', // 代理目標的基礎路徑 // secure: false,  // 如果是https接口,需要配置這個參數 changeOrigin: true, // 支持跨域 pathRewrite: { // 重寫路徑: 去掉路徑中開頭的'/api' '^/api': '' } } } } } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23

          第三步、測試請求

          如我們現在要發送login登錄請求,那么請求應該是這樣寫的:

          this.$axios.post("/login") 
          
          • 1

          二、springboot后端配置解決跨域

          在springboot框架的后端想要解決跨域問題,只需要添加一個類CorsConfig,并且讓它實現WebMvcConfigurer接口, 其中代碼如下,一般在開發的時候直接將代碼復制過去就可以了。

           import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; /**
           * 解決跨域問題
           */ @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOriginPatterns("*") .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS") .allowCredentials(true) .maxAge(3600) .allowedHeaders("*"); } } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24

          以上我解決跨域的兩種方法,在網上也查找了很多解決跨域的方法,但是錯綜復雜,經過嘗試和自己研究,以上兩種方法是我親測成功的,當時前后端都配置了。

          所以小伙伴們有不同的見解或者更好的方法,歡迎提出指正!

          我是灰小猿,我們下期見!











































          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          轉自:csdn
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          Vue 組件通信(父傳子,子傳父,跨組件傳值)

          前端達人

          目錄

          一, 簡單介紹組件通信

          二, 詳解傳值方法

          1.父傳子 props

          2.子傳父 $emit

          3.跨組件通信 event-bus


          一, 簡單介紹組件通信

                  我們知道在現在的開發環境下,不管前后端開發都是組件化模塊化,這是因為組件的優勢無比的巨大,可以進行多次的復用增加開發效率,也可以分類鮮明,便于維護,而我今天所寫的就是開發中分割成不同的組件互相傳遞數據和互動

                  我的工作中常用地組件通信大致分為三類: 父傳子 , 子傳父 , 跨組件傳值

                  下面就來分別介紹一下 我常用的這三種傳值方法

          二, 詳解傳值方法

                  父子組件的確認方法:我將 B 組件import引入到 A 組件中,那么 B 就是 A 的子組件,A 就是 B 的父組件

          1.父傳子 props

                  簡而言之,父傳子就是父組件把數據傳給子組件,具體就是如下,在子組件的props中定義自定義屬性來待接收父組件的數據,有兩種方法 如下:

                  第一種,也是最推薦用的一種,以復雜類型的方式進行聲明,這樣存儲的便是一個地址,可以和父組件的數據進行雙向綁定,同步數據,雖然可以雙向綁定,但是在Vue2.0中還是不可以直接在子組件中更改父組件的數據,需要用到子傳父才行,這點等下會寫到

                  這里只是用 text 舉個栗子,具體叫什么都可以哈,只是父子里面需要對應上相同

                  這個 text 接收到數據后的使用方法和一般data中聲明的變量一樣,只是不能再子組件中改變他

          子組件中:        props 定義屬性接收

           
          
          1. <template>
          2. <div>
          3. <h2>son組件</h2>
          4. <p>props:{{ text }}</p>
          5. </div>
          6. </template>
          7. <script>
          8. export default {
          9. // 在此處定義props
          10. props: {
          11. // props中定義 接收父組件數據的自定義屬性,叫什么都可以,我隨便起了個text
          12. text: {
          13. type: String, // type 是用來規定此屬性接收到的數據的數據類型
          14. default: "未傳遞時默認的文字" // 這個default是當這個 text 沒有接收到傳遞的數據時的默認值
          15. }
          16. }
          17. }
          18. </script>

          父組件中:        標簽內 傳遞數據

           
          
          1. <template>
          2. <div id="app">
          3. <!--
          4. 這里的text就是子組件props里定義的text,這兩個名字得一致
          5. 并且傳遞的數據也要符合 type 規定的數據類型
          6. text就是傳遞字符串,:text就是傳遞動態數據
          7. -->
          8. <Son text="我是大娃 傳給子啦" />
          9. <Son :text="wenzi" />
          10. </div>
          11. </template>
          12. <script>
          13. import Son from './components/son.vue';
          14. export default {
          15. data () {
          16. return {
          17. wenzi: '我是二娃 傳給子啦'
          18. }
          19. },
          20. components: {
          21. Son
          22. }
          23. }
          24. </script>

                  如上 雖然我的注釋寫的很清楚了,但是還是在介紹一下, <Son/> 是子組件的標簽,在此標簽的基礎上書寫 子組件props 定義的屬性名,并且傳遞參數具體對應關系和效果如下:

                  如上就是第一種我最常用的父傳子,其實還有一種方法,但是我一般也不用,很不方便,也貼到下邊了,這個是以數組方式聲明

           
          
          1. export default {
          2. // 在此處定義props
          3. props: ['text']
          4. }
          5. </script>

           

          2.子傳父 $emit

                  剛剛說到了在 Vue2.0 子組件不能直接改父組件的數據,否則會報錯,這個解決方法就是在子組件中發起一個 自定義事件 ,在父組件監聽這個事件,并且定義一個函數來改變數據,具體操作如下:

          子組件:        發起一個自定義事件,等待父組件監聽到執行函數

           
          
          1. <template>
          2. <div>
          3. <h2>son組件</h2>
          4. <p>props:{{ text }}</p>
          5. <button @click="changeTextFn">改變文字</button>
          6. </div>
          7. </template>
          8. <script>
          9. export default {
          10. // 在此處定義props
          11. props: {
          12. // props中定義 接收父組件數據的自定義屬性,叫什么都可以,我隨便起了個text
          13. text: {
          14. type: String, // type 是用來規定此屬性接收到的數據的數據類型
          15. default: "未傳遞時默認的文字" // 這個default是當這個 text 沒有接收到傳遞的數據時的默認值
          16. }
          17. },
          18. methods: {
          19. // 按鈕點擊事件
          20. changeTextFn () {
          21. // 發起自定義事件,名字叫什么都行,第一個參數是事件名,之后再跟著的都是傳遞的參數
          22. this.$emit('changeFn', '我想變成三娃')
          23. }
          24. }
          25. }
          26. </script>

                  我先在原有的代碼上添加了一個<button>按鈕,在點擊調用的函數中,通過 $emit 來發起事件并且可以傳遞參數

          格式:        this.$emit('changeFn', '我想變成三娃') 

          格式:        this.$emit('自定義事件名', 傳遞的參數) 

           

          父組件:        行內監聽子組件的 自定義事件名(函數上不用寫參數,在 methods 中直接寫形參就行)

           
          
          1. <template>
          2. <div id="app">
          3. <Son :text="wenzi" @changeFn="changeFn" />
          4. </div>
          5. </template>
          6. <script>
          7. import Son from './components/son.vue';
          8. export default {
          9. data () {
          10. return {
          11. wenzi: '我是二娃 傳給子啦'
          12. }
          13. },
          14. components: {
          15. Son
          16. },
          17. methods: {
          18. // 監聽子組件自定義事件
          19. changeFn (newText) {
          20. // 這里的形參接受到的就是子組件中 第二個參數傳遞的數值
          21. this.wenzi = newText
          22. }
          23. }
          24. }
          25. </script>

          對應關系和效果圖如下:

           

           

           

          3.跨組件通信 event-bus

                  如果兩個組件的關系非常的復雜或者沒有未產生直接聯系,那么通過父子組件通訊是非常麻煩的。這時候可以使用通用的組件通訊方案:事件總線(event-bus)

                  按照我的習慣,我會將事件總線創建到 main.js 中,這個使用原理是將bus掛載到Vue原型上,這樣就可以保證所有的組件都能通過 this.bus 訪問到事件總線,從而通過同一個事件總線監聽同一個事件,具體原理和父子傳參差不多,都是 $emit 傳遞數據, 只不過接收變成了$on 

                  我這次以送禮物舉例用了兩個關系不大的組件 分別是 男組件 和 女組件 (隨便起的名)具體如下圖:

          發送數據 男組件:   

              this.bus.$emit('自定義事件名',傳遞的參數) 

           
          
          1. <template>
          2. <div>
          3. <h1>男組件</h1>
          4. <button @click="sendGiftFn">送禮物</button>
          5. </div>
          6. </template>
          7. <script>
          8. export default {
          9. data () {
          10. return {
          11. gift: '玫瑰花'
          12. }
          13. },
          14. methods: {
          15. sendGiftFn () {
          16. // 通過 bus 事件總線發起 自定義事件,并且傳遞參數(第一個是事件名,第二個開始是參數)
          17. this.bus.$emit('sendMessage', this.gift)
          18. }
          19. }
          20. }
          21. </script>

          接收數據 女組件:         

           this.bus.$on('監聽的事件名',(e)=>{ e這個形參所接收的就是監聽事件所攜帶的參數數據 }) 

           
          
          1. <template>
          2. <div>
          3. <h1>女組件</h1>
          4. <p>來自男組件的禮物:{{ info }}</p>
          5. </div>
          6. </template>
          7. <script>
          8. export default {
          9. data () {
          10. return {
          11. info: ""
          12. }
          13. },
          14. created () {
          15. // e 就是 sendMessage 這個事件所傳遞的數據
          16. this.bus.$on("sendMessage", (e) => {
          17. this.info = e;
          18. });
          19. }
          20. }
          21. </script>
          22. <style>
          23. </style>

          具體效果如下:

           

          綜上所述,就是我在工作中總結出來的一些組建通信的方法,希望您看到這里會有所收獲

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          轉自:csdn
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          JavaScript作用域

          前端達人

          • 作用域簡介

          • JavaScript 作用域:就是代碼名字,在某個范圍內起的作用和效果。目的是為了提高程序的可靠性,減少命名沖突;

          • 作用域是可訪問變量的集合。

          • 在 JavaScript 中, 對象和函數同樣也是變量。

          • 在 JavaScript 中, 作用域為可訪問變量,對象,函數的集合。

          • JavaScript 函數作用域: 作用域在函數內修改。

          •  變量的作用域:根據作用域的不同我們的變量可以分為全局變量和局部變量

          • 局部作用域

            
                                
            1. function fn() {
            2.     var str = '我是一個局部作用域';
            3. }
            4. console.log(str);    // 這時是訪問不到的
            5. // 局部變量:在局部作用域下的變量   或者在函數內部的變量就是局部變量
            6. // 注意:函數的形參也可以看做是局部變量
            7. function fun(aru) {
            8.     var num1 = 50; // num1就是局部變量  只能在函數內部使用
            9.     console.log(num1); // 在這里使用是正確的 但是在函數外面使用報錯
            10.     num2 = 70;
            11.     console.log(num2); // num2在這里可以正常輸出
            12.     console.log(aru);
            13.     // 首先在fun括號里面傳入一個hello 然后在函數內部輸出是正確的但是在函數外部輸出是錯誤的
            14. }
            15. //fun(); 
            16. fun('hello');
            17. //console.log(num1);// 報錯 num1是局部變量
            18. console.log(num2); // 這里可以輸出num2是因為num2是特殊的全局變量
          • 全局作用域:

            全局變量:在全局作用域下的變量稱為全局變量,在全局下都可以使用
            // 注意:如果在函數內部沒有聲明直接賦值的變量也屬于全局變量
             

            
                                
            1. var num = 10; //num就是一個全局變量
            2. console.log(num);
            3. function fn() {
            4.     console.log('全局變量在函數內部也可以使用' + num);
            5. }
            6. fn();
          • 作用域鏈

          • 作用域鏈:內部函數訪問外部函數的變量,采取的是鏈式查找的方式決定取哪個值 這種結構我們稱為作用域鏈 就近原則

          • 
                                
            1. var num = 10;
            2. function fn() { //外部函數
            3.     var num = 20;
            4.     function fun() { //內部函數
            5.         console.log(num);
            6.     }
            7.     fun();
            8. }
            9. fn();
          • 作用域鏈總結:

          • 內部函數訪問外部函數的時候,采取的是鏈式查找的方式,一層一層往外查找

          • 先是查找外一層,有沒有,沒有在往外接著查找,找到了我就輸出相應的結果

          • 沒有的話繼續往上找就可以了,所以這個方法,我們稱為作用域鏈

          • 簡單總結就是就近原則,誰離我近我就執行誰


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          轉自:csdn
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          前端腳手架的執行原理

          前端達人

          最近收到幾位老師留言,提到一些腳手架相關的問題,跟著自己淺顯的理解,以vue腳手架在windows系統上的執行為例做個分析。

          正題之前,先說幾個概念

          腳手架的本質:運行在操作系統上node客戶端里的可執行程序。

          腳手架做了哪些工作?一般腳手架的工作內容主要包括三方面:

          1. 創建項目+通用代碼: 埋點、http請求、工具方法、組件庫。
          2. git操作: 創建倉庫、代碼沖突、遠程代碼同步、創建版本、發布打tag。
          3. 構建+發布上線: 依賴安裝和構建、資源上傳CDN、域名綁定、測試\正是服務器。

          腳手架給我們帶來哪些好處?提升前端研發效能?。ň瓦@么一句空話~~)從其為我們帶來的最終體驗上來講,是實現研發過程的:

          1. 自動化:項目重復代碼的copy、git操作、發布上線操作;
          2. 標準化:項目創建、git flow、發布流程、回滾流程;
          3. 數據化:使研發過程系統化、數據化、使得研發過程可量化。

          腳手架的命令執行

          vue create csjName –g
          1. vue 是腳手架名稱
          2. create 是command,腳手架中已注冊的命令
          3. csjName 是params,命令的參數
          4. –g 是options,命令的配置
          5. 一般options后也會有參數,我們稱之為配置參數,上面命令其實是省略了true
            vue create csjName –g true

          下面說一下vue腳手架的執行過程

          環境要求,已安裝node

          先來思考一個問題:

          我們安裝vue腳手架時,安裝的是@vue/cli

          npm install @vue/cli –g

          為什么創建項目的時候用的卻是vue

          vue create projectName

          咱們先看 npm install @vue/cli –g命令完成拉資源后,在操作系統中都做了什么。

          命令執行完成后,咱們切換到D:\mysoft\node\node_global(這個是自己安裝node時設置的全局npm包的安裝路徑,并且已配置到環境變量中,不清楚的老師可以去熟悉一下node的安裝教程),發現此路徑下已經生成了一個cmd命令vue.cmd,因為此路徑已配置到環境變量中,所以在cmd我們必然可以直接輸入vue來執行vue.cmd。

          那么vue.cmd文件中又執行了什么?打開vue.cmd

          可以看到,其實它是去調用了vue腳手架資源路徑下的vue.js文件

          正如我們在這個路徑下執行

          node vue.js create csjName

          是一樣的。腳手架的命令及其參數的注冊與解析都在此文件中完成。具體的代碼邏輯不再深入講了,因為我也沒看。。。。。

          再來思考個問題,在完成腳手架資源的下載后,為什么會在D:\mysoft\node\node_global下自動生成一個vue.cmd?我們能不能自定義這個腳手架的名字?

          其實每個腳手架都是npm項目,vue.cmd是在此npm項目的package.json中配置的,我們也可以對其自定義修改。

          欲修改腳手架名稱,直接去D:\mysoft\node\node_global下重命名vue.cmd即可。如果是自己的腳手架,可在npm項目內的package.json中通過上述配置,指定腳手架的名稱。

          補充

          另外在linux或mac系統中,其實node\node_global下并未生成vue.cmd,而是生成了一個叫做vue軟鏈接,并且鏈向了node_global\node_modules\@vue\cli下的vue.js。

          而且在linux和mac系統中,并未使用node vue.js,而是直接執行了vue.js那是因為在vue.js頂部已通過Shebang聲明當前文件默認使用系統中環境變量/usr/bin/env 下的node解釋器執行。此語法在windows系統中無效。

          以上是對vue腳手架在windows中執行過程的淺顯理解。不到之處,還請指正~~

          最后安利一個自己已發布的npm項目csjtools,旨在打造一個前端通用的工具庫,就是自己平常封裝的js工具函數,如對timeout的異步封裝、對storage的面向對象的封裝、對日期格式的轉換、還有對象之間的深比較等,目前工具還不夠豐富,歡迎大家一起使用&完善,一個人的力量很小~~

          npm install csjtools -g 


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          轉自:csdn
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          Vue的防抖和節流(接口頻繁調用如何處理)

          前端達人

          首先描述一下我所使用的業務場景:系統有一個批量審批的功能,每個審批的流程需要根據提交的用戶實時的反饋回去進去用戶頁面的刷新,如果一個用戶同時有多個流程被審批通過,前端會向服務端頻繁的多次調用同一個接口,造成服務器壓力過大和頁面卡頓,非常影響用戶體驗。
          目標:需要短時間內向服務端頻繁調用接口時只去調用最后一次的接口。(防抖)

          防抖和節流的區別:主要體現在執行次數上的區別,比如我們寫一個200ms的延遲時間,節流就是每200ms執行一次,而抖動是只有在最后一次事件的200ms內調用一次回調函數。
          防抖和節流都可以用于 mousemove、scroll、resize、input、click等事件,他們的區別在于防抖只會在連續的事件周期結束時執行一次,而節流會在事件周期內按間隔時間有規律的執行多次。

          防抖 debounce

          當事件被頻繁觸發時,在一定的時間內再去執行回調函數,如果在等待期間再次被觸發,則重新計時,直至整個等待期間沒有新的事件被觸發,執行回調函數。

          舉個例子:一個點擊事件,為了防止用戶重復發起請求,如果用戶在三秒內多次發生點擊事件,點擊事件將只執行一次,第一次和第二次點擊的間隔只要在三秒鐘內就會重置這個等待時間,第二次和第三次之間的最大等待時間也是三秒,如果第二次點擊事件發生后的三秒內沒有新的點擊事件產生,第二次點擊后的三秒就會調用回調函數。

          可以直接引用loadsh的debounce方法來實現函數防抖,也可以自己寫一個防抖函數(利用定時器)

          1. 引用loadsh

          這里先給一個中文文檔的地址:https://www.lodashjs.com/docs/lodash.debounce
          在vue3.x中也推薦了這種方式:https://v3.vuejs.org/guide/data-methods.html#methods
          有多種引用方式,這里我直接采用npm的方式

          npm i --save lodash 
          
          • 1

          使用loadsh的debounce方法

          <el-button id="myBtn" type="goon" icon="el-icon-search" @click="test">點擊事件</el-button> 
          
          • 1
          let _ = require('lodash'); _.debounce(fun,ms,options) fun: 回調函數
          ms:等待時間,毫秒
          options:選項對象 
          
          • 1
          • 2
          • 3
          • 4
          • 5

          注意:這里點擊事件要寫成test: 的形式,test()這樣是不生效的

          import debounce from 'lodash/debounce' methods:{ test:debounce(()=>{ console.log("防抖函數執行",) },3000) } //或者下面這種寫法 document.getElementById("myBtn").addEventListener('click', debounce(function (event) { console.log("防抖函數執行",) }, 3000)) 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          1. 自定義防抖函數
          <el-button type="goon" icon="el-icon-search" @click="test">點擊事件</el-button> 
          
          • 1
          data:{ timer:null }, methods:{ //在最后一次點擊三秒后才會觸發一次點擊事件 test(){ clearTimeout(this.timer) //自定義個定時器三秒后執行,一旦有新的事件發生會將這個定時器清除重新創建一個,只有三秒內不出現事件這個定時器才不會被銷毀重構 this.timer = setTimeout(()=>{ console.log("防抖執行,這里就是你需要執行的操作") },3000) } } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15

          節流 throttle

          在規定的時間內只觸發一次回調函數,在規定時間內多次觸發函數,只會執行一次

          舉個例子:一個點擊事件,你設定了節流的延遲時間為一秒鐘,那么在你一直點擊的情況下,每隔一秒會觸發一次這個事件,直到你的點擊停止,這個不會累積,比如一秒鐘內點擊了五次,然后不再點擊時,事件也只會觸發一次而不會累積到觸發五次,這種累積的可以采用定時器實現。

          節流一般多用于監聽輸入框和滾動條,同樣的在我們的loadsh中也有寫好的節流的函數throttle,使用方法和上面防抖類似,這里就不詳細寫了,主要寫一下 自定義的節流函數。

          throttle(fun, ms,options) fun:需要節流的回調函數
          ms:等待時間
          options:額外配置項 
          
          • 1
          • 2
          • 3
          • 4

          自定義節流函數:
          原理就是用時間戳判斷是否到了回調的執行時間,記錄上次執行的時間戳,然后每次觸發 事件執行回調,回調里邊判斷當前時間戳距離上一次執行時間戳的間隔是否已經到達規定的時間,如果是就執行,并且會更新上次執行的時間戳。
          下面是我寫的一個簡單的例子,可以根據自己需求進行修改

          data:{ //這里我直接頁面創建時定義了一個初始的變量,保存上一次函數執行的時間 lastTime:new Date() }, methods:{ //fun 代表要執行的函數,需要被節流的函數 throttle(fun){ //函數執行時的時間 let now = new Date() console.log("now",now) console.log("lastTime",this.lastTime) //兩次調用的時間差 if (now - this.lastTime > 1000){ fun() //調用成功,上一次調用時間值修改 this.lastTime = now } }, test(){ this.throttle(function (){ //1000ms內無論點擊多少下,只會調用一次 console.log("節流函數調用,時間1000ms") }) }, } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26
          • 27

          image.png

          如果項目多次用到可以將以上的方法封裝成一個工具類。

          參考文章:https://www.jb51.net/article/161713.htm














          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          轉自:csdn
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          ES6——數組擴展 ... Array.from() Array.of() flat() reduce()

          前端達人

          1.擴展運算符…

          ES6——擴展運算符…

          2.Array.from()

          將兩類對象轉為真正的數組:類數組(querrySelectAll)和可遍歷(iterable)的對象(包括 ES6 新增的數據結構 Set 和 Map)

          類數組

          1.賦給length屬性的對象

           //將類數組轉化為真正的數組 let k={ 0:'a', 1:'b', length:2 //沒有length屬性就不行 } console.log(Array.from(k)); //['a', 'b'] 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7

          2.字符串也有length屬性,它也是類數組

           let str='hello'; console.log(Array.from(str)); // ['h', 'e', 'l', 'l', 'o'] 
          
          • 1
          • 2

          3.參數如果是真正的數組 則返回一個全新數組

           let s1=[1,2,3]; let s2=Array.from(s1); console.log(s2==s1); //false 
          
          • 1
          • 2
          • 3

          3.Array.of()

          一組值,轉換為數組

          Array.of(3, 11, 8) // [3,11,8] Array.of(3) // [3] Array.of(3).length // 1 
          
          • 1
          • 2
          • 3

          這個方法的主要目的,是彌補數組構造函數Array()的不足。因為參數個數的不同,會導致Array()的行為有差異。

          只有當參數個數不少于 2 個時,Array()才會返回由參數組成的新數組

          Array() // [] Array(3) // [, , ,] Array(3, 11, 8) // [3, 11, 8] 
          
          • 1
          • 2
          • 3

          4.find() 和 findIndex()

          find方法,用于找出第一個符合條件的數組成員

           var result1=[1,2,3,4].find(function (item) { return item%2==0; }) console.log(result1); //2 
          
          • 1
          • 2
          • 3
          • 4

          findIndex方法,返回第一個符合條件的數組成員的位置。
          如果所有成員都不符合條件,則返回-1

           var result1=[1,2,3,4].findIndex(function (item) { return item%2==0; }) console.log(result1); //1 
          
          • 1
          • 2
          • 3
          • 4

          5.fill() 填充數組

          使用給定值,填充一個數組

          console.log(new Array(5).fill('a')); //['a', 'a', 'a', 'a', 'a'] 
          
          • 1

          fill方法還可以接受第二個和第三個參數,用于指定填充的起始位置和結束位置。

          ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c'] 
          
          • 1

          6.數組實例的 entries(),keys() 和 values()

          Set,Map,Object中都有這些方法

          entries(),keys()和values()——用于遍歷數組。
          它們都返回一個遍歷器對象,可以用for…of循環進行遍歷
          唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷,entries()是對鍵值對的遍歷。

           let yes=[1,2,3,4]; console.log(yes.keys()); //Array Iterator {} console.log(yes.values()); //Array Iterator {} console.log(yes.entries()); //Array Iterator {} 
          
          • 1
          • 2
          • 3
          • 4
           let yes=[1,2,3,4]; for(let key of yes.keys()){ console.log(key); //0 1 2 3 } for(let key of yes.values()){ console.log(key); //1 2 3 4 } for(let [key,value] of yes.entries()){ console.log(key,value); //0 1 //1 2 //2 3 //3 4 } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14

          7.includes()

          console.log([1, 2, 3].includes(1)); //true console.log([1, 2, 3].includes(1,1)); //false 從1號索引開始找 
          
          • 1
          • 2

          8.flat()

          將嵌套的數組“拉平”,變成一維的數組。
          該方法返回一個新數組,對原數據沒有影響

          //默認只能拉平一層 console.log([1, 2, [3, 4]].flat()); //[1, 2, 3, 4] //如果拉平多層 設置層數 console.log([1, 2, [3, [4, 5]]].flat(2)); // [1, 2, 3, 4, 5] //如果層數太多 設置Infinity console.log([1, 2, [3, 4, [5, 6, [7, 8]]]].flat(Infinity)); //[1, 2, 3, 4, 5, 6, 7, 8] 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8

          9.reduce()

          reduce() 方法接收一個函數作為累加器,數組中的每個值(從左到右)開始縮減,最終計算為一個值。對空數組是不會執行回調函數的。

          1.計算數組總和

          var num = [1,2,3,4,5]; var res = num.reduce(function(total,num){ return total+num; //return total + Math.round(num);//對數組元素四舍五入并計算總和 },0); console.log(res); //15 //num.reduce((total,num) => total += num, 0); //沒有初始值initialValue(即上面例子中的0),當數組為0時會拋出異常提示reduce函數沒有初始值,所以為兼容性一般加上initialValue 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9

          2.合并二維數組

          var red = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) { return a.concat(b); }, []); console.log(red); //[0, 1, 2, 3, 4, 5] 
          
          • 1
          • 2
          • 3
          • 4

          3.統計一個數組中有多少個不重復的單詞
          reduce()函數










          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          轉自:csdn
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          Vue的設計理念

          前端達人

          目錄

          Mvvm模型

          Vue中的Mvvm實現原理

          自己實現雙向數據綁定的示例

          Vue與模板引Thymeleaf擎對比

          顯示變量值(Vue)

           顯示變量值(Thymeleaf)

          替換Html(Vue)

          替換Html(Thymeleaf)

          綁定屬性(Vue)

          綁定屬性(Thymeleaf)

          隱藏顯示區塊(Vue)

          隱藏顯示區塊(Thymeleaf)

          遍歷列表數據-帶索引(Vue)

           遍歷列表數據-帶索引(Thymeleaf)

          引入其他文件內容(vue)

          引入其他文件內容(Thymeleaf)

          Vue的頁面定義基石-Options API

          Vue中的代理運用

          nginx反向代理

          vue代理(正向代理)

          Vue特性能力-filter


          Vue (讀音 /vju?/,類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層,不僅易于上手,還便于與第三方庫或既有項目整合

          Mvvm模型

          MVVM 是Model-View-ViewModel 的縮寫,它是一種基于前端開發的架構模式,其核心是提供對View 和 ViewModel 的雙向數據綁定,這使得ViewModel 的狀態改變可以自動傳遞給 View,即所謂的數據雙向綁定。
          Vue.js 是一個提供了 MVVM 風格的雙向數據綁定的 Javascript 庫,專注于View 層。它的核心是 MVVM 中的 VM,也就是 ViewModel。 ViewModel負責連接 View 和 Model,保證視圖和數據的一致性,這種輕量級的架構讓前端開發更加高效、便捷。

          Vue中的Mvvm實現原理

          Vue.js的實現方式,對數據(Model)進行劫持,當數據變動時,數據會出發劫持時綁定的方法,對視圖進行更新。

          這里有兩個方向: 

          1、數據流向視圖:數據變動時,能自動更新Dom節點的內容。此功能是通過數據劫持實現的,對數據(Model)進行劫持,當數據變動時,會調用劫持時綁定的方法,對視圖進行更新。

          2、視圖流向數據:如輸入框input內容發生變動時,input對應的數據也會發生變動。此功能是通過監聽Dom事件實現的。當用戶在輸入框中輸入文字(即inputkeyup事件發生時),vue會監聽到這個事件,找到對應的數據模型變量,修改變量值。

          vue中雙向數據綁定的示例

          
          
          1. <div id="app-6">
          2. <p>{{ message }}</p>
          3. <input v-model="message">
          4. </div>
          
          
          1. var app6 = new Vue({
          2. el: '#app-6',
          3. data: {
          4. message: 'Hello Vue!'
          5. }
          6. })

          自己實現雙向數據綁定的示例

          
          
          1. <!DOCTYPE html>
          2. <html lang="en">
          3. <head>
          4. <title>雙向綁定demoo</title>
          5. <meta charset="UTF-8">
          6. </head>
          7. <body>
          8. <div id="app">
          9. <input type="text" id="txt">
          10. <p id="show-txt"></p>
          11. </div>
          12. </body>
          13. <script>
          14. var model={}
          15. Object.defineProperty(model,'txt',{
          16. _txt: "",
          17. get:function(){
          18. return _txt
          19. },
          20. set:function(newValue){
          21. _txt = newValue
          22. document.getElementById('txt').value = newValue
          23. document.getElementById('show-txt').innerHTML = newValue
          24. }
          25. })
          26. document.addEventListener('keyup',function(e){
          27. model.txt = e.target.value
          28. })
          29. </script>
          30. </html>

          這里要講到一個關鍵函數

          Object.defineProperty 

          Object.defineProperty 需要三個參數(object , propName , descriptor)

          1 object 對象 => 給誰加
          2 propName 屬性名 => 要加的屬性的名字 【類型:String】
          3 descriptor 屬性描述 => 加的這個屬性有什么樣的特性【類型:Object】

          descriptor 屬性描述

          get一個給屬性提供getter的方法,如果沒有getter則為undefined。該方法返回值被用作屬性值。默認為undefined
          set一個給屬性提供setter的方法,如果沒有setter則為undefined。該方法將接受唯一參數,并將該參數的新值分配給該屬性。默認值為undefined。

          Vue與模板引Thymeleaf擎對比

          顯示變量值(Vue)

          
          
          1. <div id="app">
          2. {{ message }}
          3. </div>

           顯示變量值(Thymeleaf)

          
          
          1. <div id="app" th:text="${message}">
          2. </div>

          替換Html(Vue)

          
          
          1. <div id="app" v-html="content">
          2. </div>

          替換Html(Thymeleaf)

          
          
          1. <div id="app" th:html="${content}">
          2. </div>

          綁定屬性(Vue)

          <img :src="imgUrl" :id="newId"/>

          綁定屬性(Thymeleaf)

          <img th:attr="id=${newId},src=${imgUrl}"/>

          隱藏顯示區塊(Vue)

          
          
          1. <div id="app" v-if="show">
          2. 這是一個區塊
          3. </div>

          隱藏顯示區塊(Thymeleaf)

          
          
          1. <div id="app" th:if="${show}">
          2. 這是一個區塊
          3. </div>

          遍歷列表數據-帶索引(Vue)

          
          
          1. <ul id="app">
          2. <li v-for="(item, index) in dataList">
          3. {{ index }} - {{ item.message }}
          4. </li>
          5. </ul>

           遍歷列表數據-帶索引(Thymeleaf)

          
          
          1. <ul id="app">
          2. <li th:each="item, stat: ${dataList}">
          3. {{ stat.index }} - {{ item.message }}
          4. </li>
          5. </ul>

          引入其他文件內容(vue)

          在vue中,可復用的單元塊被稱為組件,定義組件

          
          
          1. <template>
          2. <button v-on:click="count++">You clicked me {{ count }} times.</button>
          3. </template>
          4. <script>
          5. export default {
          6. name: "button-counter"
          7. data(){
          8. count: 0
          9. }
          10. }
          11. </script>

           引入組件

          
          
          1. <div id="components-demo">
          2. <button-counter></button-counter>
          3. </div>

          引入其他文件內容(Thymeleaf)

          被導入模塊index.html:

          
          
          1. <div th:fragment="head">
          2. 這是網頁頭
          3. </div>

          在其它頁面導入index.html中的head模塊:

          <div th:include="index::head"></div>

          由此可見在Html層面上來講,vue和后臺的模板引擎,整個設計方向是一樣。都是使用特定屬性標簽,來描述如何把數據映射到視圖上。

          Vue的頁面定義基石-Options API

          Options API,即大家常說的選項API,即以vue為后綴的文件,通過定義methods,computed,watch,data等屬性與方法,共同處理頁面邏輯

          可以看到Options代碼編寫方式,如果是組件狀態,則寫在data屬性上,如果是方法,則寫在methods屬性上...

          這種形式的頁面定義類似一個配置文件,定義了頁面的數據模型和行為

          Vue中的代理運用

          代理服務器:所謂代理服務器就是位于發起請求的客戶端與原始服務器端之間的一臺跳板服務器,是以正向代理可以隱藏客戶端,反向代理可以隱藏原始服務器。

          代理分為正向代理和反向代理,下面就以我們實際使用中的示例講解下這兩種代理方式的區別。

          nginx反向代理

          這樣對于瀏覽器而言,瀏覽器只需要訪問代理服務器,就可以達到同時訪問兩個網站的目的

           

          我們看下實際場景下的nginx的配置 

          
          
          1. server {
          2. listen 4503;
          3. server_name vue.izkml.com;
          4. access_log "pipe:rollback logs/gov-manage-new-vue/access_log interval=1d baknum=7 maxsize=2G" main;
          5. # 接口代理
          6. location /api {
          7. #去除 /api前綴
          8. rewrite ^.+api/?(.*)$ /$1 break;
          9. # 轉發到 117.71.53.199:50020端口上
          10. proxy_pass http://117.71.53.199:50020;
          11. proxy_buffering off;
          12. }
          13. # 頁面文件代理
          14. location / {
          15. # 直接去本地文件讀取文件路徑
          16. root html/gov-task-supervison;
          17. index index.html index.htm;
          18. if (!-e $request_filename) {
          19. rewrite ^/(.*) /index.html last;
          20. break;
          21. }
          22. }
          23. }

          其中可以看到,主要分為接口代理和頁面代理兩部分
          1. 如果是/api前綴的請求,則去除/api前綴,轉發到后臺網關端口上
          2. 其他情況下,請求的為頁面內容,在html/gov-task-supervison文件夾中讀取文件內容

          vue代理(正向代理)

           

          
          
          1. devServer: { // 支持webPack-dev-server的所有選項
          2. port: 8888, // 端口號
          3. host: '0.0.0.0',
          4. https: false,
          5. open: true, //配置自動啟動瀏覽器
          6. proxy: {
          7. '/api': {
          8. // 轉發地址
          9. target: 'http://117.71.53.199:50020', //測試環境
          10. changeOrigin: true,
          11. ws: true,
          12. // 去除/api前綴
          13. pathRewrite: {
          14. '^/api': ''
          15. }
          16. }
          17. }
          18. }

          這里主要看的是proxy字段,其中定義了規則

          1. 如果是/api前綴的請求,則去除/api前綴,轉發到后臺網關端口上
          2. 其他情況下,請求的為頁面內容,直接讀取本地項目路徑下面的頁面內容 **(隱式包含)**

          Vue特性能力-filter

          Vue.js 允許你自定義過濾器,可被用于一些常見的文本格式化

          應用場景: 前端常量翻譯

          
          
          1. <el-tag v-if="scope.row.status" class="round" size="small" >
          2. {{scope.row.status | CodeMaster('TASK_STATUS')}}
          3. </el-tag>
          
          
          1. Vue.filter('CodeMaster', function (value, type) {
          2. return Vue.prototype.$codeMaster.getCodeValue(type, value);
          3. })

          在上面的代碼中,我們在模板html中,添加了filter的調用,并傳入了一個參數。
          在vue進行html生成的過程中,會調用相應的filter,根據自定義的規則,完成文本格式化操作。




          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          轉自:csdn
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          JavaScript防抖與節流,深入淺出,一本正經講透徹

          前端達人

          目錄

          一、函數防抖(debounce)

          1. 什么是防抖?

          二.、函數節流

          2.1 定時器實現

          2.2 時間戳實現

          2.3 時間戳+定時器

          最后 


          一、函數防抖(debounce)

          1. 什么是防抖?

          函數防抖在頻繁觸發某一個事件時,一段時間內不再觸發該事件后才會去調用對應的回調函數,在設定間隔時間內如果下一次事件被觸發, 那么就重新開始定時器,直到事件觸發結束。

          規定時間內沒有繼續觸發事件的前提下,再去調用事件處理函數;

          具體如下面的例子所示:

          
          
          1. /*定義防抖函數
          2. * func:傳入一個函數,事件不再持續觸發時會調用該函數
          3. * delay:定義持續多久后執行傳入的回調函數
          4. * */
          5. function debounce(func,delay) {
          6. let timer = null // 用于保存定時器
          7. return function (...args) {
          8. // 如果定時器存在,清除定時器,隨后重新設置timer
          9. if(timer !== null) clearTimeout(timer)
          10. timer = setTimeout(func, delay) // 超過delay為接收到事件會調用這里的func 必要的額時候可以修改func的this指向 由于timer對外部存在引用,因此不會被銷毀
          11. }
          12. }
          13. /*事件處理函數*/
          14. function testDeBounce(){
          15. console.log('你看我執行了幾次??')
          16. }
          17. // 接收debounce返回的函數
          18. const temp = debounce(testDeBounce(),1000)
          19. /*綁定事件,測試防抖函數*/
          20. window.addEventListener('scroll',()=>{
          21. temp()
          22. }); // 這樣寫最少調用一次事件處理函數,最多也不會多余下面的寫法執行的次數
          23. window.addEventListener('scroll', testDeBounce); // 如果這樣寫的話,每當頁面滾動就會調用事件處理函數
          • 總結一下思路

            1.定義一個節流函數

            2.函數內部使用一個變量保存定時器

            3.返回一個函數,函數內部定義:如果定時器已經存在就清除定時器,重新設置定時器

            4.定義一個變量來接收debounce返回的函數

            5.在事件的回調函數中直接調用上一步的變量接收的方法


          二.、函數節流

          函數節流在事件持續觸發的前提下,保證一定時間段內只調用一次事件處理函數,就是函數節流;

          函數節流實現的方式定時器、時間戳、定時器+時間戳;

          2.1 定時器實現

          思路

          1.定義節流函數throttle

          2.定義timer保存定時器

          3.返回一個函數。函數內部定義:如果定時器不存在,設置定時器,間隔某一時間后將timer設置為null,如果在這之前事件再次觸發,則定時器中的回調無效

          <button>這是一個孤獨的按鈕</button> 
          
          
          1. /*
          2. * 定義定時器節流函數
          3. * func:傳入事件處理函數
          4. * delay:在delay指定的時間內定時器回調無效
          5. * */
          6. function throttle(func,delay) {
          7. let timer = null
          8. const context = this
          9. return function(...args){
          10. // 如果定時器不存在
          11. if(!timer){
          12. timer = setTimeout(()=>{
          13. func.apply(context,args) // 考慮返回的函數調用的環境,因此這里不直接使用this
          14. timer = null // delay之后清除定時器
          15. },delay)
          16. }
          17. }
          18. }
          19. function test() {
          20. console.log('啊啊啊!')
          21. }
          22. const temp = throttle(test,1000)
          23. document.querySelector('button').addEventListener('click',()=>{
          24. temp()
          25. })

          2.2 時間戳實現

          
          
          1. var throttle = function(func, delay) {
          2. var prev = Date.now();
          3. return function() {
          4. var context = this;
          5. var args = arguments;
          6. var now = Date.now();
          7. if (now - prev >= delay) {
          8. func.apply(context, args);
          9. prev = Date.now();
          10. }
          11. }
          12. }
          13. function handle() {
          14. console.log(Math.random());
          15. }
          16. window.addEventListener('scroll', throttle(handle, 1000));

          2.3 時間戳+定時器

          
          
          1. // 節流throttle代碼(時間戳+定時器):
          2. var throttle = function(func, delay) {
          3. var timer = null;
          4. var startTime = Date.now();
          5. return function() {
          6. var curTime = Date.now();
          7. var remaining = delay - (curTime - startTime);
          8. var context = this;
          9. var args = arguments;
          10. clearTimeout(timer);
          11. if (remaining <= 0) {
          12. func.apply(context, args);
          13. startTime = Date.now();
          14. } else {
          15. timer = setTimeout(func, remaining);
          16. }
          17. }
          18. }
          19. function handle() {
          20. console.log(Math.random());
          21. }
          22. window.addEventListener('scroll', throttle(handle, 1000));

          最后 

          想跟博主交朋友的可以查找,公_號?:前端老實人,跟博主一起探討學習哦?


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          轉自:csdn
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合