前端知識點小結

時間 2019-11-16

標籤前端知識小結简体版

原文原文鏈接

一.HTML,CSS (兼容性)

1. animationphp

animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：css

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

註釋：請始終規定 animation-duration 屬性，不然時長爲 0，就不會播放動畫了。html

默認值：	none 0 ease 0 1 normal
繼承性：	no
版本：	CSS3
JavaScript 語法：	object.style.animation="mymove 5s infinite"

語法

animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	規定須要綁定到選擇器的 keyframe 名稱。。
animation-duration	規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規定動畫的速度曲線。
animation-delay	規定在動畫開始以前的延遲。
animation-iteration-count	規定動畫應該播放的次數。
animation-direction	規定是否應該輪流反向播放動畫。

2.transition (animate.css)前端

transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：vue

transition-property
transition-duration
transition-timing-function
transition-delay

註釋：請始終設置 transition-duration 屬性，不然時長爲 0，就不會產生過渡效果。node

默認值：	all 0 ease 0
繼承性：	no
版本：	CSS3
JavaScript 語法：	object.style.transition="width 2s"

語法

transition: property duration timing-function delay;

值	描述
transition-property	規定設置過渡效果的 CSS 屬性的名稱。
transition-duration	規定完成過渡效果須要多少秒或毫秒。
transition-timing-function	規定速度效果的速度曲線。
transition-delay	定義過渡效果什麼時候開始。

2. 彈性盒佈局(兼容性),mysql

display:box;
display:box-flex;
display:flex;react

響應式佈局,百分比佈局,rem佈局jquery

具體參考：https://www.cnblogs.com/lijiapeng/p/9923934.html
3. 字體圖標android

二.JS (兼容性)
1.ES5(map,filter,Object.create())
2.面向對象，構造函數，原型(prototype,__proto__)，原型鏈，繼承(call,apply)，閉包, bind
3.ES6(let,const,class,promise,箭頭函數,數組去重,模塊化)

(q.js實現了promise的思想，用同步來表現異步流程，解決了回調地獄的問題.promie 中三種狀態， pending, reslove,reject, pending->reslove, pending-reject)

(1)commonJs規範（cmd的規範）
nodejs
webpack

module.exports= { } exports.**方法或者屬性
require("");

(2)amd 規範(require.js) define

(3) export default {} export {name,getName,age}

import * from "" import {name,getName,age} from ""

4.cookie,sessionStorage,localStorage,websql,indexeddb--https://segmentfault.com/a/1190000005927232

5. 基於xhr的Ajax&Fetch(非標準)&Jsonp&axios

三.代碼管理工具
1.svn
2.git
http://www.jianshu.com/p/bfec042349ca

四.css預處理器
1.sass （gulp-sass, sass-loader, 考拉）

$name:10px;

ul{
li{
$name:20px
a{
width:$name+20
}
}
}

@function px2rem(){
@return
}
2.less
@name:10px;
ul{
li{
@name:20px
a{
width:@name+20
}
}
}
3.stylus
五.前端構建工具,前端工程化工具
1.gulp
2.webpack
3.grunt
4.ant
六.後端開發
1.php-laravel-mysql
2.nodejs-express-mongodb <% %>
3.Java-structs-oracal,mysql,db2 ,jsp
4. asp, .net
3. 先後端開發方式->(1)先後端分離(2)後端嵌套模板 ssr

xml&json

七.框架
1.前web時代
jquery(js庫),zepto（tap）, touch.js手勢庫,swiper,echarts3（圖表，數據可視化）

2.後web時代
angular1.6 版本->mvc,mvvm

(1)angular 中ng-if 和 ng-show/hide 區別
(2)內置的filter 有哪些?如何自定義filter
angular.module("app",[])
.filter()
.directives
.service
.factory("kerwinservice",function(){
return {

}
})

angualr.module("app",[])
.controller("main",function($scope,kerwinservice){

})
angualr.module("app",[])
.controller("child",function($scope,kerwinservice){

})
(3)自定義服務？（服務是單例）
(4)angular 數據綁定採用什麼機制？髒數據檢查機制
$scope.$apply();
經過 $watch 來監聽 dom上綁定的每個數據的變化，而後$digest 來遍歷循環全部的 $watch
隊列，發現與原來不一樣的值，也就是髒值則進行修改，最後經過$apply ，$apply會
進入 angular context的執行環境，通知瀏覽器拿回控制權，修改相應的dom節點。

$scope.name="kerwin";

$scope.name="xiaoming"

ng-click ,$timeout $interval,$http請求，

(5)在angular 開發中，兩個平級的兄弟，如何共享數據？

a. factory服務，將數據保存在服務以內，而後在b中調用服務
b. 掛在 $rootScope之上進行共享
c. 也能夠用本地存儲來存儲數據，實現數據共享。
(6)一個angular 應用應當如何分層？
css
js
controllers
models （比較複雜的model 放在models裏面，而後$scope.info = info）
services
filters
templates

/home home.html home.js
/list list.html list.js
(7)angular 路由庫（ngRoute, ui-router）

(8)兩我的開發angular 項目時，進行代碼整合，可能會遇到哪些問題,如何解決？
angular.module('myApp.moduleA', [])
.factory('serviceA', function(){
...
})
angular.module('myApp.moduleB', [])
.factory('serviceA', function(){
...
})
angular.module('myApp', ['myApp.moduleA', 'myApp.moduleB'])
會致使兩個 module 下面的 serviceA 發生了覆蓋。

//沒有太好的解決方案，只能約定命名規範
(9)angular 缺點

a.選擇器比較弱，
b.學習成本較高，對前端不友好。但遵照 AngularJS 的約定時，生產力會很
高，對 Java 程序員友好
c.由於全部內容都是動態獲取並渲染生成的，搜索引擎無法爬取 {{name}}
(10)使用ng-repeat出錯，Error:[ngRepeat:dues](迭代數組，數組兩個值相同)
item in items track by $index

(11)使用第三插件或者原生js 修改angular 中model的值，界面並不會變化，感受上綁定失效了。爲何？怎麼辦？
要手動髒檢。
$scope.$apply()或者將
操做的代碼放在$scope.$apply(function(){//
操做的代碼...})

(12) 在依賴注入服務時，須要注意的?
防止被壓縮改寫成["$scope","kerwinservice",function($scope,kerwinservie){

}]

angular4
=>

1. Typescript (ES6 的超集) 和 typescript 解析器 ==>js 標準代碼
2. angular ,router
3. angular-cli腳手架

react->flux,redux

(1)生命週期
(2)性能優化在哪一個周期函數？ shouldComponentUpdate
(3)虛擬dom？爲啥能提升性能?
虛擬dom至關於在js和真實dom 中間加了一個緩存，利用diff 算法避免了沒有必要的dom操做。
a. 用js對象表示dom 結構，而後用這個虛擬的對象樹，真正建立一個dom樹，插入到文檔中。
b. 當狀態變動，從新造一顆新的對象樹，將新的對象樹，與舊的對象樹進行對比，記錄兩棵樹的差別。
c. 將差別的地方應用到真正的dom 樹，視圖就更新。

(4)diff算法？
a. 把樹按照層級進行分解，只比較同級元素
b. 給列表加上key 值，惟一不重複
c. 只匹配相同組件名字的component
d. setState() 將其標記爲dirty 並非立刻執行，等一個事件循環（生命週期）結束，react 會檢查全部dirty的組件並從新繪製。

e.選擇性子樹渲染，shouldComponentUpdate
(5)flux 思想和redux 思想

vue->vuex

(1)vue slot 是什麼？
假如父組件須要在子組件內放一些dom，那麼這些dom是顯示仍是不顯示，在哪顯示，就須要用slot分發負責了。

(2)vue.use(插件)

(3)vue 與react 對比
a. 都有虛擬dom 和組件化思想，有配套的路由與負責全局狀態的管理的庫。
b. 性能方面vue 是優於react的
c. 開發架構
react:ES6+Webpack+React+React-router+Redux
vue：ES6+Webpack+vue+vue-router+單文件組件+vuex
d. 若是你想同時適用於web端和原生app開發，請選擇用react（react native）,
若是你的應用小而快(模板開發)，用vue
八.地圖
1.百度地圖
2.高德地圖

九.混合開發：
1.phonegap
2.h5+

十.微信開發：
1.微信webapp開發
2.微信js-sdk開發
3.微信後臺開發
4.微信小程序開發
wx:for, bindtap , setData,wx.request

十一.常見UI框架
1.jquery:
PC: bootstrap(12 柵格 ),jquery UI,easy UI
移動端:mui,sui mobile

<ul class="row">
<li class="col-sm-3"></li>
<li class="col-sm-3"></li>
<li class="col-sm-3"></li>
<li class="col-sm-3"></li>
<li class="col-sm-3"></li>
</ul>
2.React:
PC: react-boostrap
移動端：
(1)amazeUI-react,
(2)yo組件-http://ued.qunar.com/hy2/yo/component-Scroller.html
(3)material UI

3.餓了麼UED團隊推出的vue 前端框架：
(1)PC框架：
http://element.eleme.io/#/
https://github.com/ElemeFE/element
(2)移動端框架：
http://mint-ui.github.io/#!/zh-cn
https://github.com/ElemeFE/mint-ui

十二.擴展
1.懶加載的原理：
目的：主要做爲服務器前端的優化，延遲請求數。
原理:先加載一部分數據，當觸發某個條件時，利用異步加載剩餘的數據。
2. 輪播原理, 放大鏡原理

2. 移動端開發平時在什麼瀏覽器測試？
chrome,safari,微信x5,,UC

3.移動端如何調試？
(1)chrome 模擬手機調試
(2)android真機+chrome inspect
(3)iphone真機 +safari

4. 優化頁面，加快頁面加載速度
(1)優化圖片資源格式和大小
(2)開啓網絡壓縮
(3)使用cdn存儲靜態資源
(4)壓縮js css
(5)瀏覽器緩存(cache)

5. xss(跨站腳本攻擊),避免？
(1)前端轉義-正則表達式
(2)後端轉義處理（轉成html實體再存入到數據庫）
(3)cookie加上httponly 屬性，保護cookie

6. websocket,
node服務端(ws,socket.io)

var ws= new Websocket() ws.onopen ws.onmessage ws.send() ws.onerror ws.onclose