Ⅰ 前端開發的基本方法
CSS部分
盒子邊傾斜
clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
禁止點擊事件/滑鼠事件「穿透」
div * { pointer-events: none; /*鏈接啊，點擊事件啊，都沒有效果了*/ }
用來控制元素在移動設備上使用滾動回彈效果
.main{
-webkit-overflow-scrolling: touch;
}
可解決在IOS中使用overflow:auto 形成的滾動條，滾動不流暢的情況
文字漸變效果
.text-gradient{ background-image: linear-gradient(135deg, deeppink, deepskyblue);
-webkit-background-clip: text; color: transparent;
}
css三角形
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;
}
實現圓弧
clip-path: ellipse(80%60% at50%40%);
JS部分
JavaScript中檢測數組的方法
(1)、typeof操作符
這種方法對一些常用的類型檢查沒有問題，但對array和null 都判斷為object
(2)、instanceof操作符
這個操作符是檢測對象的原型鏈是否指向構造函數的prototype對象的
(3)、對象的constructor屬性
const arr = []
console.log(arr.constructor === Array) // true
(4)、Object.prototype.toString
constarr=[]console.log(Object.prototype.toString.call(arr)==='[objectArray]')//true
(5)、Array.isArray()
常用的字元串操作
字元串轉化toString()
字元串分隔split()
字元串替換replace()
獲取長度length
查詢子字元串 indexOf
返回指定位置的字元串或字元串編碼 charAt charCodeAt
字元串匹配 match
字元串拼接concat
字元串的切割或提取slice() substring() substr()
字元串大小寫轉化 toLowerCase toUpperCase
字元串去空格 trim() 用來刪除字元串前後的空格
- const str = '11122223333'const uniqueStr = [...new Set(str)].join('')
- arr.rece(callback,[initialValue])
- 跳過第一個索引。如果提供initialValue，從索引0開始。
- const arr = [1, 2, 3, 1, 2, 3]const uniqueArr = [...new Set(arr)]
- var a = {};Object.defineProperty(a, 'name', { value : 'kong', enumerable : true //該屬性是否可枚舉})
- function a(){}
- var b = new a();console.log(a.prototype.isPrototypeOf(b));//true
- if (/Android/gi.test(navigator.userAgent)) { window.addEventListener('resize', function () { if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') { window.setTimeout(function () { document.activeElement.scrollIntoViewIfNeeded();
- }, 0);
- }
- });
- };
- /**
- * 向URL追加參數
- * @function stringifyUrlArgs
- * @param {string} url - URL路徑
- * @param {object} params - 參數對象
- * @return {string}
- const stringifyUrlArgs = (url, params) => {
- url += (/?/).test(url) ? '&' : '?'
- url += Object.keys(params).map(key => `${key}=${params[key]}`).join('&') return url
- }
- /**
- * 解析URL參數
- * @function parseUrlArgs
- * @param {string} url - 字元串
- * @return {object}export const parseUrlArgs = url => { const arr = url.match(/([^?=&]+)(=([^&]*))/g) || [] const args = arr.rece((a, v) => {
- a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1) return a
- }, {}) return args
- }
- NP.strip(num) // strip a number to nearest right numberNP.plus(num1, num2, num3, ...) // addition, num + num2 + num3, two numbers is required at least.NP.minus(num1, num2, num3, ...) // subtraction, num1 - num2 - num3NP.times(num1, num2, num3, ...) // multiplication, num1 * num2 * num3NP.divide(num1, num2, num3, ...) // division, num1 / num2 / num3NP.round(num, ratio) // round a number based on ratio
其中第9中三者的區別如下：
（1）slice(), 參數可以是負數，負數表示從字元串最後一個位置開始切割到對應結束位置
（2）substring()，參數不可為負數，切割第一個位置到第二個位置的字元串
（3）substr()， 參數可以是負數，第一個參數是開始位置，第二個參數為切割的長度
字元串去重
常用的數組操作
1、Array.map()
此方法是將數組中的每個元素調用一個提供的函數，結果作為一個新的數組返回，並沒有改變原來的數組
2、Array.forEach()
此方法是將數組中的每個元素執行傳進提供的函數，沒有返回值，注意和map方法區分
3、Array.filter()
此方法是將滿足條件的元素作為一個新數組返回
4、Array.every()
此方法將數組所有元素進行判斷返回一個布爾值，如果所有元素都符合判斷條件，則返回true，否則返回false
5、Array.some()
此方法將數組所有元素進行判斷返回一個布爾值,如果有一個元素滿足判斷條件，則返回true，所有元素都不滿足則返回false
6、Array.rece()
此方法為所有元素調用返回函數
7、Array.push()
在數組最後面添加新元素
8、Array.shift()
刪除數組第一個元素
9、Array.pop()
刪除數組最後一個元素
10、Array.unshift()
在數組最前面增加元素
11、Array.isArray()
判斷是否為一個數組
12、Array.concat()
數組拼接
13、Array.toString()
數組轉化為字元串
14、Array.join()
數組轉化為字元串，並用第一個參數作為連接符
15、Array.splice(開始位置，刪除個數，元素)
其中rece使用方法為：
callback （執行數組中每個值的函數，包含四個參數）
1、previousValue （上一次調用回調返回的值，或者是提供的初始值（initialValue））
2、currentValue （數組中當前被處理的元素）
3、index （當前元素在數組中的索引）
4、array （調用 rece 的數組） initialValue （作為第一次調用 callback 的第一個參數。）
如果沒有提供initialValue，rece 會從索引1的地方開始執行 callback 方法，
數組去重：
常用對象方法
1、Object.assign()
用於克隆，兩個參數，將第二個對象分配到第一個中
2、Object.is()
用於判斷兩個值是否相同
//注意，該函數與==運算符不同，不會強制轉換任何類型， 應該更加類似於===，但值得注意的是它會將+0和-0視作不同值
3、Object.keys()
用於返回對象可枚舉的屬性和方法的名稱，返回一個屬性或方法名稱的字元串數組。
4、Object.defineProperty()
劫持變數的set和get方法,將屬性添加到對象，或修改現有屬性的特性
5、Object.defineProperties()
可添加多個屬性,與Object.defineProperty()對應,
6、isPrototypeOf
安卓監聽可視區域變化，讓輸入框移動至可視區域
vue中平滑滾動到某個位置
this.$refs.rule.scrollIntoView({ block: 'start', behavior: 'smooth' })
向URL追加參數
解析URL參數
好用的JavaSrcipt庫與模塊（包）
日期時間處理庫
1、monent.js
2、day.js
day相對於monent要輕量許多
高精度數學運算
number-precision
實用工具庫
Lodash
lodash 是一個 JavaScript 實用工具庫，提供一致性，及模塊化、性能和配件等功能。
Lodash 消除了處理數組的麻煩，從而簡化了 JavaScript、 數字、對象、字元串等
Ⅱ h5支持的外部存儲是哪個
1、cookie
這個存儲用了很久了，而且也是以前大多網站十分喜歡的存儲站點。但是也很容易被清除。同時cookie會在每一次通信過程中傳向服務端。同時cookie有一個很好的地方就是，它本身有一個過期時間屬性，可以用來標注一個變數的有效期。而cookie一旦過期就會被自動刪除掉。
2、localStorage、sessionStorage
·localStorage: 持久存儲，只要用戶不主動刪除就會一直存在。
·sessionStorage：面向session的瀏覽器存儲，因此只存在於一個頁面的生命周期內，關閉即清除兩者均採用鍵值對的形式存儲數據。
3、indexedDB
內嵌在瀏覽器端的非關系型資料庫，數據以鍵值對的形式存儲，兼容性良好indexDB直接操作的存儲對象是ObjectStore，這有點類似其他資料庫中table概念。
4、websql
內嵌在瀏覽器的關系型資料庫，前端可以像在使用mysql、Oracle一樣的寫sql語句， 並存儲信息。兼容性良好。存儲後可在瀏覽器resource中查看。
5、window變數
生命周期有限，一般大家也不會去使用。但是對於全局變數的臨時存儲來說，還是一個不可多得的好地方。
6、flash cookie
flash cookie現在用的地方比較多。
Ⅲ 如何評價 React 實現的前端 UI 庫 material-ui
做一些功能為主，不需要過多品牌調性的 WebApp
只需要前端+交互就可以快速構建做出非常不錯的產品
（icon還是有點點難度，有設計比較專業的人員跟著做產品的質量會更加「產品級」一些）
框架用了很多 MD 的視覺元素，但是還是只是「看著像」，交互，動畫世界觀之類的實現距離最理想的 MD 還是有差距，不過基本感覺可以忽略不計。
非要挑刺的話，就是 Menu 部分的動畫設計感覺有點粗糙，做得不夠好（MD 的世界觀，所有東西的誕生都是「擴散」出來，而不是「縮放」出來的，還有就是先「慢_快」的緩動做得還是差一點點。
Ⅳ 前端數據存儲方式有哪些
為你總結了四種數據存儲方式，希望可以幫到你：
1、Cookie
cookie 用於存儲web頁面的用戶信息。
cookie 是一些數據，存儲在你電腦上的文本文件中。當web伺服器向瀏覽器發送web頁面時，在連接關閉後，服務端不會記錄用戶的信息。Cookie的作用就是用於解決如何記錄客戶端的用戶信息。
2、localStorage
允許在瀏覽器中存儲key/value對的數據。
用於長期保存整個網站的數據，保存的數據沒有過期時間，直到手動去刪除。
屬性是只讀的。
如果你想瀏覽器窗口關閉後還保留數據，可以使用localStorage；如果你只想將數據保存在當前會話中，可以使用sessionStorage.
3、sessionStorage
允許在瀏覽器中存儲key/value對的數據。
數據對象臨時保存同一窗口（或標簽頁）的數據，在關閉窗口或標簽頁之後也將刪除這些數據。
4、indexedDB
索引資料庫（indexDB）API（作為HTML5 的一部分）對創建具有吩咐本地存儲數據的數據密集型的離線HTML5 Web 應用程序很有用。
同時它還有助於本地緩存數據，使傳統再現Web應用程序（比如移動 Web 應用程序）能夠更快的運行和響應。
想要了解或者學習更多前端知識，推薦北京尚學堂，雄厚的師資力量帶給你高效的學習體驗。
Ⅳ Web 前端怎樣入門
方法：
第一：理清Web前端的知識結構。要想高效學習Web前端知識，首先應該搞清楚Web前端都包括哪些技術結構。Web前端開發雖然技術難度並不高，但是技術細節卻比較多，內容也比較雜。Web前端的基礎包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是學習的重點，也是難點。另外，vue等框架也是需要熟練掌握的。
第二：緊跟技術發展趨勢。目前Web前端的技術發展趨勢有三個，其一是前端開發數據化;其二是前端開發高效化;其三是前端開發全棧化。前端開發數據化主要是大數據發展的影響，在大數據的推動下，Web前端逐漸涉及到了大量的數據展示任務。前端開發高效化主要體現在Web前端正在進行獨立部署，前端與後端的溝通主要通過資源介面的方式來進行。前端開發全棧化也是一個比較明顯的趨勢，比如Nodejs的應用。
第三：注重動手實踐能力的培養。學習前端開發一定要注重動手實踐能力的培養，因為前端開發的細節比較多，所以只有多操作才能逐漸熟悉。
前端開發目前被稱為「大前端」，整個前端開發也被賦予了更多的含義，包括Web前端開發、移動端開發、大數據呈現端開發以及部分後端開發任務等等。所以，想要在前端行業中走的更遠，一定要注重知識結構的豐富性。
與其他編程語言相比，前端是公認的入行門檻較低的一門語言，但依然有很多人在學習之前會問零基礎學習web前端難不難，要多久才能學會。學習的難易和時間當然是取決於學習的方式。
前端入門簡單，但是深入學習之後，還是有一定學習難度的。如果你是零基礎自學web前端的話，那麼所花費的時間與精力是不可估計的。 如果系統學習5個月的時間可以幫助你快速成長為合格的web前端工程師。
至於視頻教程，我這里有很多前端的全套教程，如果你需要的話，可以加一下我的學習交流裙裙，找我要就行了！
Ⅵ 前端未來的趨勢是怎麼樣的
未來前端在已經趨向成熟的技術方向上面將會慢慢穩定下來，並進入技術迭代優化階段，例如語言標准、前端框架等。但這並不代表前端領域技術就此穩定了，因為新的技術方向已經出現，並在等待著下一個風口的到來。
關於未來，我們不妨一起來預判一下前端可能會有哪些發展，不一定對，僅供參考。
1.新標準的進化與穩定
前端新標准和草案在不斷更新，HTML、CSS、Javascript標准也在漸漸完善，盡管這些新的規范最終會淘汰舊標準的使用，新的項目也會以最新的標准作為開發依據，但要完全廢棄舊標准，需要一段時間。
經過大版本的更新穩定，目前前端三層結構實現已經形成了HTML5、CSS3、Ecmascript 6+標准規范結合的階段，後面標準的新變化也會越來越小，這都顯示出，目前前端項目實踐規范將會相對穩定一段較長的時間，後面的修改不會像之前一樣具有顛覆性，這也是技術標准發展到一定成熟階段會發生的事情。
2.應用開發技術趨於穩定
從前端應用開發框架上來看，先後經歷了DOM API、MVC、MVP、MVVM、Virtual DOM、MNV*階段，逐步解決了前端開發效率、設計模式、DOM交互性能的問題。 這些問題處理完成後，相關的框架也會進入穩定發展、版本有序迭代的時期。
也就是說前端的交互框架不會像以前那樣變化頻繁，相對於之前前端框架的頻繁更換到現在主流框架的穩定升級。
3.技術工具的探索
前端技術效率和性能的提升當然不是僅靠前端框架都能解決的，還需要其他各方面輔助工具的支持，例如高效的調試工具、構建自動化工具、自動發布部署工具等。
所以未來前端發展過程中各種高效工具的探索仍會不斷地出現，來解決特定場景下的問題，最後進行一個優勝劣汰的過程。
4.瀏覽器的新特性
就瀏覽器端應用而言，以Chrome為代表的瀏覽器版本和特性發展迭代極其迅速，經過多版本的迭代，瀏覽器上已經可以實現較多的增強和實用特性，例如Web Component、Service Worker、IndexDB、WebAssembly、WebRTC、Ecmascript 6+的支持等等。
但由於瀏覽器的種類和版本的多樣性，我們還不能在業務中直接推廣使用這些新的特性，但這些卻仍然給了我們很多未來技術實現的可能，並且未來較多技術也會在這些新特性