原创 基於vue2.0原理-自己實現MVVM框架之computed計算屬性

基於上一篇data的雙向綁定,這一篇來聊聊computed的實現原理及自己實現計算屬性。 一、先聊下Computed的用法 寫一個最簡單的小demo,展示用戶的名字和年齡,代碼如下: <body> <div id="app">

原创 vue2.0 雙向綁定原理分析及簡單實現

Vue用了有一段時間了,每當有人問到Vue雙向綁定是怎麼回事的時候,總是不能給大家解釋的很清楚,正好最近有時間把它梳理一下,讓自己理解的更清楚,下次有人問我的時候,可以侃侃而談😄。 一、首先介紹Object.defineProperty()

原创 vue2.0 雙向綁定原理及簡單實現

Vue用了有一段時間了,每當有人問到Vue雙向綁定是怎麼回事的時候,總是不能給大家解釋的很清楚,正好最近有時間把它梳理一下,讓自己理解的更清楚,下次有人問我的時候,可以侃侃而談😄。 一、首先介紹Object.defineProperty()

原创 eslint+prettier+husky+lint-staged 統一前端代碼規範

eslint+prettier+husky+lint-staged 統一前端代碼規範 遵循編碼規範和使用語法檢測,可以很好的提高代碼的可讀性,可維護性,並有效的減少一些編碼錯誤。 1、終極目標 團隊中的所有開發人員用一套代碼規範規則,並且無

原创 React Class組件生命週期

一、react組件的兩種定義方式 1、函數組件,簡單的函數組件像下面這樣,接收Props,渲染DOM,而不關注其他邏輯 function Welcome(props) { return <h1>Hello, {props.name}</

原创 使用IDEA創建一個基於maven包管理的android項目

配置android開發環境,使用了google提供的adt開發android應用,感覺很難用,各種不爽,與是在網上找到了IDEA,用着不錯。 環境介紹,JAVA SDK:1.8, 開發工具:IDEA,包管理工具:maven   1. 配置m

原创 基於webpack實現多html頁面開發框架八 html引入圖片打包和公共頁面模塊複用

一、解決什麼問題   1、html中img引入的圖片地址沒有被替換,找不到圖片   2、html公共部分複用問題,如頭部、底部、浮動層等 二、html中img引入圖片問題解決   1、在index.html插入img,引用圖片<img sr

原创 基於webpack實現多html頁面開發框架七 引入第三方庫如jquery

一、解決什麼問題   1、如何引入第三方庫,如jquery等 二、引入jquery方法   1、下載jquery.min.js放到assets/lib下面   2、安裝copy-webpack-plugin,將已經存在的單個文件或整個目錄複

原创 基於webpack實現多html頁面開發框架六 提取公共代碼

一、解決什麼問題   1、如果a.js和b.js都引用了common.js,那在打包的時候common.js會被重複打入到a.js和b.js,造成重複打包   2、單獨打包common.js對性能有幫助,瀏覽器下載一次後會緩存下來,不會重複

原创 基於webpack實現多html頁面開發框架五 開發環境配置 babel配置

一、解決什麼問題      1、開發環境js、css不壓縮,可在瀏覽器選中代碼調試      2、開發環境運行http服務指向打包後的文件夾      3、babel輸出瀏覽器兼容的js代碼 二、需要安裝的包    babel-loader

原创 基於webpack實現多html頁面開發框架四 自動寫入都入口,自動插入多個htmlWebpackPlugin插件

一、解決什麼問題      1、手寫頁面多入口,一個一個輸入太麻煩,通過代碼實現      2、手寫多個htmlWebpackPlugin插件太麻煩,通過代碼實現 二、多入口代碼實現 1 //讀取所有.js文件,動態設置多入口 2

原创 基於webpack實現多html頁面開發框架一 準備工作

     本系列主要介紹如何基於webpack實現多html頁面開發框架,這裏不講webpack的基本概念,廢話不多說,直奔主題! 前置條件: 1、安裝node環境,自己去官網下載安裝 2、新建文件夾webpack4_multi_page_

原创 基於webpack實現多html頁面開發框架二 css打包、支持scss、文件分離

本節主要介紹webpack打包的時候CSS的處理方式 一、解決什麼問題      1、CSS打包      2、CSS處理瀏覽器兼容      3、SASS支持      4、CSS分離成單獨的文件 二、創建目錄結構      創建項目目錄

原创 基於webpack實現多html頁面開發框架三 圖片等文件路徑替換、並輸出到打包目錄

一、解決什麼問題      1、圖片路徑替換、並輸出到打包目錄      2、輸出目錄清理 二、需要安裝的包   file-loader:html、css中圖片路徑替換,圖片輸出到打包目錄;命令:npm install --save-dev