筆記 開始學前端,記一些概念

2022-09-14 10:24:10 字數 2776 閱讀 3906

node.js

基於 chrome v8 引擎的 j**ascript 執行環境

使用了乙個事件驅動、非阻塞式 i/o 的模型,使其輕量又高效

類似於 j**a 中的 jvm

// server.js

// 執行:node server.js

npm node 的包管理工具

npm package 檔案

指定依賴包,會在 npm install 的時候安裝

指定 npm start, npm build 等命令執行時要執行的腳步

指定 main 檔案

etc.

如果 package 沒有定義 start 屬性,那麼 npm start 預設執行 node server.js 命令

cross-env

跨平台設定環境變數,通常在 package 的 scripts 屬性和 webpack 配合使用

webpack

編譯打包 j**ascript 模組

webpack --config webpack.config.js

webpack-dev-server

webpack 官方提供的乙個小型 express 伺服器。使用它可以為 webpack 打包生成的資源檔案提供 web 服務

express

基於 node.js 平台,快速、開放、極簡的 web 開發框架

上面 node 舉的例子用的是原生 http 模組,express 底層用的也是 http 模組

react

前端框架,用於建立 ui,實現 ui 的元件化,模組化

和 express 區別:express 實現 web 服務,react 實現 ui 框架,類似於 python 中的 gunicorn 和 flash

react dom

react 的 ui 實際上是虛擬 dom,需要 react dom 將其渲染成真正的 dom

dom - 文件物件模型 (document object model) - 就是用於組織管理 html

react native

使 react 可以在移動端跨平台使用 (android, ios)

可以理解為電腦端是 react + react dom,移動端是 react + react native

redux

用於儲存資料

只能通過 action 改變資料

需要定義 action 及相應的 handler,比如 increase 及相應函式,當 redux 收到 increase 時呼叫相應函式

react-redux

是 react 操作 redux 的介面

將 react ui 和 redux 資料關聯起來

redux 資料的變化,可以觸發 react ui 的重新渲染

react ui 可以出發 action 改變 redux 的資料

import export require

import 是 es6 語法標準,require 是 commonjs 在沒有 import 語法時定下的規範

import 是編譯時載入,效能較高,require 是執行時載入,效能較低

import 必須放在頂部,require 可以放在任何位置

import 匯入的物件指向同一記憶體物件,require 匯入的基本資料型別是複製,複雜資料型別則是淺拷貝

匯入時,會把被匯入的**執行一遍

匯入後會被快取,重新匯入直接到快取拿,不會重新執行被匯入**

import 通過 export 匯出的值可以改變,require 通過 module.exports 匯出的值就不能再變化

require

const fs = require('fs')

console(fs)

console(fs.add)

exports.fs = fs

module.exports = fs

module.exports.fs = fs

module.exports =

export // node

import

import fs from 'fs'

import from 'fs'

import * as fs from 'fs'

import from 'fs'

import from 'fs'

import from 'fs'

import fs, from 'fs'

export default fs

export const fs

export function readfile

export

export * from 'fs'

生產和開發環境

開發環境下,可以用 node,npm,webpack-dev-server 執行除錯

然後用 webpack 打包編譯,生成靜態 js 檔案,發布

生產環境下,可以用 nginx,直接返回這些靜態 js 檔案給前端即可

chrome tools

react developer tools

redux devtools

SVN的一些基本概念 學前了解

一 主幹 主幹是乙個純淨的版本,可以隨時執行部署和上線。任何時候都需要保證主幹的正常執行!一般需要拉乙個主幹到本地,但不要修改,主要用於合併操作。二 分支 分支是我們平時開發用的版本,只有當開發告乙個段落,且執行沒有問題才會和主幹進行合併。為了保持主幹的乾淨,可以多建立分支。每建立乙個分支我們都需要...

新手自學前端的一些建議與總結

關於技術棧學習,網上總會有各種討論,在此我就不詳述了,感興趣的話可以看看github上的乙份前端學習大綱 2016年前端知識學習大綱,這個基本能覆蓋絕大部分新手需要學習和掌握的內容,後面我更想聊聊自己對技術學習上的經驗歸結。前端是門不斷借鑑的工作,這裡說的借鑑其實並不等於抄襲,而是指不斷在站在巨人的...

自己前端的一些筆記

彈性盒 移動端布局 1.父元素的屬性 display flex 我是乙個彈性盒 子元素水平排列 flex direction column 子元素垂直排列 justify content center 子元素水平對齊方式 align items center 子元素垂直對齊方式 2.子元素的屬性 f...