你看，這裏div這娃的字體大小是1.2em。解釋來說，就是他從body爹爹那裡繼承的字體大小（這裡是14px）的1.2倍，結果就是16.8px。,這就意味着有那麼些個特別的貨，雖然平常都不怎麼會用上，但是一旦某個地方需要它們了，他們就真的是特么得合適不過來了呢。,眾所周知css技術我們雖然很熟悉，在使用的過程卻很容易被困住，這讓我們在新問題出現的時候變得很不利。隨着web繼續不斷地發展，對於新技術新解決方案的要求也會不斷增長。因此，作為網頁設計師和前端開發人員，我們別無選擇，必須熟悉我們手上的工具，做到知己知彼，這樣才能百戰不殆。,body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px },html { font-size: 14px; } div { font-size: 1.2rem; },雖然在某些地方這正是我們想要的，但是通常情況下我們還是希望就依賴單一的相對度量單位就好。這時候嘛，我們就可以使用 rem 了。 ‘r’是“root”的縮寫，意思就是1rem等於根元素的字體大小；大部分情況下，根元素就是<html>元素了。,但是，如果你用em一層一層級聯得定義嵌套元素的字體大小又會花生什麼事情呢？在下面這一小段代碼里我們應用了和上面一樣一樣的CSS，每一個div都從它上一級父元素繼承了字體大小，並且逐漸得增加。,<body> <div> Test <!– 14 * 1.2 = 16.8px –> <div> Test <!– 16.8 * 1.2 = 20.16px –> <div> Test <!– 20.16 * 1.2 = 24.192px –> </div> </div> </div> </body>,今兒，我就準備向大伙兒介紹一些你們之前可能很少見過css傢伙們。他們每個都是度量的單位，類似pixel 和 em這樣的，但是很有可能你之前從來就沒聽過這些傢伙們！就讓我們一起來交個朋友吧~,
,我們首先介紹下和我們熟悉的很相似的貨。em 被定義為相對於當前對象內文本的字體大小。炒個栗子，如果你給body小哥設置了font-size字體大小，那麼body小哥的任何子元素的1em就是等於body設置的font-size。,你看，這裏div這娃的字體大小是1.2em。解釋來說，就是他從body爹爹那裡繼承的字體大小（這裡是14px）的1.2倍，結果就是16.8px。
其實總體的思路非常簡單：項目行數 -> 包行數 -> 修改歷史 -> 引用分析。,最近，我還我的朋友們說到，她們公司的打算強制一天只能提交一次代碼。這絕對是代碼行數計算 KPI 之後的，又一個偉大地創舉式的地發明。如果我有直接頒發諾貝爾獎的權力，我一定給送給他一獎盃。,軟件開發是一個非常有意思的複製 + 粘貼活動。開發業務代碼的時候，大部分人都不會不加思索地添加代碼。畢竟，聰明的產品經理/項目經理們，天才式地想出了用代碼行數的方式來計算 KPI，又或者是通過提交次數來進行考核 —— 雖然小步提交是個好東西，但是吧，大部分人不經過練習還是掌握不會的。,─────────────────────────────────────────────────────────────────────────────── Language Files Lines Blanks Comments Code Complexity ─────────────────────────────────────────────────────────────────────────────── Java 66554 5172301 688054 512630 3971617 603221 Python 10017 424614 31629 34876 358109 22329 Kotlin 6383 602814 89130 35660 478024 51292 Plain Text 4105 635689 5799 0 629890 0 Groovy 3397 154817 23296 12364 119157 4683 XML 2549 494074 10056 3008 481010 0 html 2329 63331 2988 3623 56720 0 SVG 2124 21078 23 87 20968 0 jsON 1155 346795 352 0 346443 0 Shell 535 8295 1138 734 6423 811 Markdown 425 9660 1434 0 8226 0 Properties File 384 42069 2545 1348 38176 0 YAML 384 3264 202 55 3007 0 XML Schema 345 196649 17963 0 178686 0 JavaScript 169 30569 1562 5151 23856 3895 … ─────────────────────────────────────────────────────────────────────────────── Total 101908 8389984 898893 629497 6861594 703260 ─────────────────────────────────────────────────────────────────────────────── Estimated Cost to Develop $288,297,976 Estimated Schedule Effort 132.017220 months Estimated People Required 258.681675 ───────────────────────────────────────────────────────────────────────────────,| ENTITYNAME | REVSCOUNT | AUTHORCOUNT | |————————————————————————————————————-|———–|————-| | platform/util/resources/misc/registry.properties | 2473 | 224 | | platform/platform-impl/src/com/intellij/openapi/editor/impl/EditorImpl.java | 1211 | 149 | | platform/platform-api/resources/messages/IdeBundle.properties | 1209 | 181 | | platform/platform-resources/src/META-INF/LangExtensions.xml | 1206 | 192 | | plugins/InspectionGadgets/InspectionGadgetsAnalysis/resources/messages/InspectionGadgetsBundle.properties | 1113 | 159 | | platform/platform-resources-en/src/messages/ActionsBundle.properties | 1004 | 161 | | platform/platform-resources/src/META-INF/PlatformExtensions.xml | 937 | 162 | | platform/util//src/com/intellij/util/ui/UIUtil.java | 779 | 120 | | platform/platform-impl/src/com/intellij/openapi/application/impl/ApplicationImpl.java | 763 | 133 | | platform/platform-resources/src/META-INF/LangExtensionPoints.xml | 762 | 150 | | platform/lang-impl/src/com/intellij/util/indexing/FileBasedIndexImpl.java | 684 | 126 | | java/java-analysis-impl/src/com/intellij/codeInsight/daemon/impl/analysis/HighlightUtil.java | 675 | 117 | | platform/platform-resources/src/idea/PlatformActions.xml | 671 | 139 |,唯一麻煩的地方就是做一些自動化。所以，這些功能就被我完善到 Coca 里了，笑~。,具體來說，就是：,| LENGTH | COMPLEXITY | LOCATION | |——–|————|———————————–| | 1642 | 236 | constraintLayoutHandler.java | | 1492 | 375 | constraintComponentUtilities.java | | 1189 | 166 | CommonActions.java | | 1184 | 325 | ConstraintWidget.java | | 1169 | 129 | SingleWidgetView.java | | 1115 | 213 | ScoutArrange.java | | 1097 | 281 | ScoutWidget.java | | 1081 | 224 | 3d/Rasterize.java | | 1016 | 159 | LayoutlibSceneManager.java | | 1014 | 220 | TimeLinePanel.java |,好了，回到正題。,
,最近，剛好因為項目的關係，需要分析某一系統的代碼行數。通過一系列的複製 + 粘貼和 Excel 操作，我大致有了一套 DIY 的自動化分析方案：自上而下的代碼分析。當然了，這肯定不是我先發明的，在某處一定有論文和代碼、工具。只是我依據自己的想法和需求，完善了一下現有的方案。要知道，已經有大量地代碼分析工具了。,其實總體的思路非常簡單：項目行數 -> 包行數 -> 修改歷史 -> 引用分析。
鏈接: http://www.fly63.com/article/detial/9995,
,如何通過js獲取.less文件中的變量值呢？
我現在在.less文件里定義了一個變量@color,想通過js獲取它的值，並改變它，不知道該怎麼做 ,/創建一個文件流對象
var fso = new ActiveXObject(“Scripting.FileSystemObject”);
//文件絕對路徑
var url=”D:\\test.less”;
//讀取文件,第二個參數值表示只讀,第三個參數值表示,如果不存在則不創建文件
var file = fso.OpenTextFile(url,1,false);
if(!file.atendofstream)
{
//一次性全部讀完所有的內容
var content =file.ReadAll();
}
//關閉文件流
file.close();,代碼,不建議用js讀取，會有權限提示 ,
,鏈接: http://www.fly63.com/article/detial/9995
目前，Laravel的最新版本是2020年9月發布的V.8。同時，隨着Homestead的推出，它預包裝了Vagrant盒子，這使得Laravel的安裝變得非常容易。,與此同時，經過這麼多年的發展，業界出現了許多不同的PHP框架產品，及其解決方案。作為開發人員，您也許會問：哪一款是最常用的PHP框架?又應該如何進行選擇呢?下面，我將為您總結和梳理出開發者值得關注的9大流行PHP框架。,數十年來，php一直是全球最受歡迎的編程語言之一。php開發具有快速安全、易於維護、大量可用軟件庫、以及更少的手動編程量等特點。如今，PHP在網站中的使用量已高達79%。,於2008年12月下旬面市的Yii，是一個簡單卻高性能的、基於組件的通用編程框架。您不但可以用它來運行第三方代碼，其Gii代碼生成器還能夠快速地提供性能優越的基礎架構。,
,
,於2011年推出的Laravel是一個免費且開源的PHP框架。相比其他框架，Laravel具有平穩、快速、以及安全地處理複雜Web應用的能力，因此它是全球開發者的首選。,由於簡化了路由、緩存、授權和身份驗證之類的任務，所以它免去了開發過程中的各種手動環節。許多B2B網站的開發人員會優先使用Laravel，來輕鬆地實現电子郵件驗證、哈希處理、以及密碼重置等服務。,目前，Laravel的最新版本是2020年9月發布的V.8。同時，隨着Homestead的推出，它預包裝了Vagrant盒子，這使得Laravel的安裝變得非常容易。
其實感覺 slot 就像一個閉包，帶上了父組件的一切，棲身於子組件。,不過今天遇到這麼個情況 ——,在此之前，子組件到父組件的傳遞事件我一般還是使用 $emit 和 $on，因為這個操作理解起來並不難，代碼一般也挺清晰。,鏈接: http://www.fly63.com/article/detial/10131,
,這是一個評論組件的一部分，button-group 是回復、修改、刪除 3 個按鈕，點擊回復的話下面的 CommentInput 組件會显示。本來想着在那裡操作就在哪裡取消，但是寫完了，產品大人一看，表示不行，按鈕不能在上面，應該統一放在評論內容和輸入框的下方，不妥協。,心想又要加 $emit 和 $on 雖然麻煩，但不是難事，不過 CommentInput 本來還會復用到其他地方，只有這裏需要“取消回復”功能，這又要做一層判斷，為了代碼簡潔這個實現還要好好想想。結果靈感就來了 ——
使用 slot。,slot 本身還是很常用的，只是第一次主動意識到使用 slot 可以顯著解決事件傳遞問題。直接把取消回復按鈕用 slot 嵌入 CommentInput，直接使用父組件的 replyToggle 方法，免去重新寫 $emit 和 $on 的麻煩，順便還解決了其他地方不需要“取消回復”的問題，十分有效！,其實感覺 slot 就像一個閉包，帶上了父組件的一切，棲身於子組件。
,在Angular和vue中都有Directive的概念，我們通常講Directive 翻譯為“指令”。,
,什麼是指令（directive）,<p v-highlight=”‘yellow'”>Highlight this text bright yellow</p>,指令的使用場景,export default defineComponent({ name: “WebDesigner”, components: { Designer, }, directives: { highlight: { beforeMount(el, binding, vnode) { el.style.background = binding.value; }, }, }, });,DOM的基礎操作，當組件中的一些處理無法用現有指令實現，可以自定義指令實現。例如組件水印，自動focus。相對於用ref獲取DOM操作，封裝指令更加符合MVVM的架構，M和V不直接交互。,除了使用內置的指令，Vue同樣支持自定義指令，以下場景可以考慮通過自定義指令實現：,let app = createApp(App) app.directive(‘highlight’, { beforeMount(el, binding, vnode) { el.style.background = binding.value } }),在計算機技術中，指令是由指令集架構定義的單個的CPU操作。在更廣泛的意義上，“指令”可以是任何可執行程序的元素的表述，例如字節碼。,那麼在前端框架vue中“指令”到底是什麼，他有什麼作用呢？,在Vue開發中我們在模板中經常會使用v-model和v-show等以v-開頭的關鍵字，這些關鍵字就是Vue框架內置的指令。通過使用v-model，可以獲取實現DOM和數據的綁定；使用v-show，可以控制DOM元素显示。簡而言之通過使用這些模板上的標籤，讓框架對DOM元素進行了指定的處理，同時DOM改變后框架可以同時更新指定數據。指令是Vue MVVM的基礎之一。,
檢查元素是否在窗口內:,首先：編寫一個 util 函數 isVisible，它將僅接收一個參數，即 element。,這種方法實現起來比較簡單， 我們一步一步來。,1. 使用元素位置判斷元素是否在當前視區,export
const isVisible =
(el) => { };,2. 使用 Intersection Observer 判斷元素是否在當前視區,const vWidth =
window.innerWidth ||
document.documentElement.clientWidth;
const vHeight =
window.innerHeight ||
document.documentElement.clientHeight;,完整代碼：,邊界檢查：,const rect = el.getBoundingClientRect();,使用 getBoundingClientRect 獲取該元素的位置,將找到窗口的高度和寬度,再編寫一個函數，該函數基本上將接收 x 和 y 點，並使用elementFromPoint函數返回元素。,檢查元素是否在窗口內:
①需要轉換為特定的格式，比如將mp4文件進行轉換：,jsMpeg是js寫的視頻、音頻解碼器，能使用WebGL&Canvas2D渲染以及WebAudio聲音輸出。,在移動端使用h5自動的video標籤播放視頻，設置autoplay屬性，在android端部分不支持，全屏播放還存在層級問題，ios10以上版本支持視頻自動播放，以下版本不支視頻自動播放。,以上。,②IOS聲音問題：IOS播放時默認沒有聲音，需要用戶點擊后才能發聲（相當於獲得用戶允許后才能發聲）。解決方案就是在啟動時增加一個開始按鈕或者增加一個音量已關閉的按鈕，讓用戶點擊時解鎖聲音。, ,簡單例子,注意事項,①需要轉換為特定的格式，比如將mp4文件進行轉換：