angular組件開發
隨着前端框架的誕生，也會隨之出現一些組件庫，方便日常業務開發。今天就聊聊 angular4 組件庫開發流程。 下圖是 button 組件的基礎文件。 nk-button.component.ts 為該組件的核心文件，看看代碼： import {Component, Renderer2, ElementRef, AfterContentInit, ViewEncapsulation, Input}
昵称 Robin
@Javascript
贡献者374
粉丝0
贡献者
@Javascript
动态 列表
ES5 繼承
首先要明白兩點： 一、非方法屬性每個子類實例需要獨立 二、方法屬性每個子類實例需要共享 為什麼？ 如果非方法屬性為引用類型，且非方法屬性共享，在一個實例中改變，其他實例中就會做出改變，這樣每個實例就會相互影響，而方法屬性一般是不需要進行改變的，只是對方法調用。 方法跟屬性分別可以定義在構造函數內部跟prototype上。 繼承的目的是子類繼承父類的方法跟屬性,換句話説一些類
昵称 assassin_cike
利用 XState(有限狀態機) 編寫易於變更的代碼
目前來説，無論是 to c 業務,還是 to b 業務，對於前端開發者的要求越來越高，各種絢麗的視覺效果，複雜的業務邏輯層出不窮。針對於業務邏輯而言，貫穿後端業務和前端交互都有一個關鍵點 —— 狀態轉換。 當然了，這種代碼實現本身並不複雜，真正的難點在於如何快速的進行代碼的修改。 在實際開發項目的過程中，ETC 原則，即 Easier To Change，易於變更是非常重要的。為什麼解耦很好？ 為
昵称 jump__jump
【進階篇】koa+Mysql的全棧之旅
背景 繼續上一篇【easy篇】前端到全棧從這裏開始完成對雲服務器的初步瞭解，以及nginx的配置，接下來是MySQL安裝，建表操作以及使用Node.js框架Koa進行簡單的數據增刪改查功能。過程比較長，但是按照下面步驟來就比較輕鬆了。 MySQL安裝 登錄雲服務器，進入linux控制枱，安裝執行以下命令行即可 //1.下載安裝 wget http://repo.mysql.com/
昵称 阿秋_在路上
完整版移動端滑動事件封裝
touchEvent 基於Jquery擴展在移動端產生的事件，包含，單次觸摸事件，兩次觸摸事件，長按事件，滑屏事件，向上滑動事件，向下滑動事件，向左滑動事件，向右滑動事件 預覽 地址預覽 https://hangjob.github.io/touchEvent/index.html 事件類型 單次觸摸事件 $(el).tap tap: function(element, fn) {
昵称 羊先生
手寫Koa.js源碼
用Node.js寫一個web服務器，我前面已經寫過兩篇文章了： 第一篇是不使用任何框架也能搭建一個web服務器，主要是熟悉Node.js原生API的使用：使用Node.js原生API寫一個web服務器 第二篇文章是看了Express的基本用法，更主要的是看了下他的源碼：手寫Express.js源碼 Express的源碼還是比較複雜的，自帶了路由處理和靜態資源支持等等功能，功能比較全面。與之
昵称 蔣鵬飛
微前端是什麼，可以帶來什麼收益
轉自掘金原文《微前端究竟是什麼，可以帶來什麼收益》 本文將講解微前端誕生的背景，詳細解説微前端概念的緣由以及其深入理解，讀完本文，相信你對微前端有一個比較全面的認知，明白它可以解決您團隊以及整個企業什麼問題，帶來怎麼樣的收益。 一.背景 現在很多企業，基本在物理上進行了應用代碼隔離，實行單個應用單個庫，閉環部署更新測試環境、預發佈環境和正式環境。於是，我們的探討的是，基於不同應用不同庫並獨立部署的
昵称 吉古力
使用Workbox創建PWA應用
前言 最近公司項目迭代逐漸放緩，下班時間逐漸變早，所以本着漸進增加的理念，在下班後，將公司項目進行了一下PWA改造 為何要改造成PWA 用户需求。我們的用户有許多電腦小白，不想記網址，又不會使用瀏覽器的收藏功能。以前使用的同類軟件都有桌面版，有一種覺得桌面版比網頁版可靠，使用簡單的錯覺，曾多次在釘釘售後羣裏反映，如何將網頁保存至桌面，方便他下次直接在桌面打開 PWA是漸進式的，如果用户的瀏覽
昵称 悖論BeilunYang
postMessage 還能這樣玩
在日常工作中，消息通信是一個很常見的場景。比如大家熟悉 B/S 結構，在該結構下，瀏覽器與服務器之間是基於 HTTP 協議進行消息通信： 然而除了 HTTP 協議之外，在一些對數據實時性要求較高的場景下，我們會使用 WebSocket 協議來完成消息通信： 對於這兩種場景，相信大家都不會陌生。接下來，阿寶哥將介紹消息通信的另外一種場景，即父頁面與 iframe 加載的子頁面之間，如何進行消息通
昵称 阿寶哥
[譯] 如何使用 useRef 修復 React 性能問題
原文地址：How to useRef to Fix React Performance Issues 原文作者：Sidney Alcantara 譯文出自：掘金翻譯計劃 本文永久鏈接：https://github.com/xitu/gold-miner/blob/master/article/2020/how-to-useref-to-fix-react-performanc
昵称 彈鐵蛋同學
使用babel把es6語法轉換成es5
Babel 是什麼 Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換為向後兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。 Babel能用在哪裏 NodeJs 使用 npm 初始化項目 $ mkdir es6-to-es5 $ npm init -y 安裝Babel $ npm install --save-dev @ba
昵称 xx小枱燈
【譯】繼承與原型鏈（Inheritance and the prototype chain）
前言 原文來自MDN JavaScript主題的高階教程部分，一共5篇。分別涉及繼承與原型、嚴格模式、類型數組、內存管理、併發模型和事件循環。本篇是第一部分，關於繼承和原型。 原文鏈接請點我 下面是正文部分： 對於熟悉基於類的編程語言（例如 Java 和 C++）的開發者來説，JavaScript 會讓他們感到困惑，因為 JS 的動態性以及其本身並不提供class的實現（ES2015 中提出的c
昵称 小志Chris
手寫koa-static源碼，深入理解靜態服務器原理
這篇文章繼續前面的Koa源碼系列，這個系列已經有兩篇文章了： 第一篇講解了Koa的核心架構和源碼：手寫Koa.js源碼 第二篇講解了@koa/router的架構和源碼：手寫@koa/router源碼 本文會接着講一個常用的中間件----koa-static，這個中間件是用來搭建靜態服務器的。 其實在我之前使用Node.js原生API寫一個web服務器已經講過怎麼返回一個靜態文件了，代碼雖然
昵称 蔣鵬飛
寫了個網頁版的五筆跟打器：玫楓跟打器
玫楓跟打器 Roseo Maple Type Pad 線上地址 https://kylebing.cn/tools/typepad/ 截圖 前言 自己是個五筆愛好者，也一直在使用五筆，從 Windows 轉到 Mac 之後，也沒有有可用的跟打器，每回想練練打字了都需要打開 Windows 模擬器來打字。 一直一直想有個能在 macOS 上運行的跟打器。 最初是想自己用 swift
昵称 KyleBing
2020 年 Chrome 開發者峯會的亮點
2020 年的Chrome 開發者峯會和往年有所不同，今年是在線上召開的，每次談話大約十分鐘，討論規模更大。雖然我沒有在第一時間觀看會議的直播，但是看回放也不會錯過這些亮點。 所有的回放在這裏：https://developer.chrome.com/... 通過“Core Web Vitals”簡化了性能指標 我們都知道 Chrome 有大量的性能指標，可以用它們來跟蹤關於網站性能的所有內容。儘
昵称 瘋狂的技術宅
2021 前端開發手冊
簡介 這是一份 2021 年前端開發手冊，列舉前端開發相關技術，提供相關技術的學習資源。下面的項目不用全部學習，可以選其中一些學習。 歡迎補充！項目地址：2021-frontend-handbook 目錄 HTML CSS JavaScript 前端框架 前端工程化 服務端渲染 SSR 靜態站點生成器 SSG TypeScript 用 JS 去做服務器端 桌面應用程序 El
昵称 StephenTian
聊聊不可變數據結構
三年前，我接觸了 Immutable 庫，體會到了不可變數據結構的利好。 Immutable 庫具有兩個最大的優勢: 不可修改以及結構共享。 不可修改(容易回溯，易於觀察。減少錯誤的發生) let obj = { a: 1 }; handleChange(obj); // 由於上面有 handleChange，無法確認 obj 此時的狀態 console.log(obj) 結構共享(
昵称 jump__jump
「一起造輪子」從1.9k的jsonp庫出發🏗一起實現jsonp
1. 什麼是jsonp？ 下方是維基百科對JSON的解釋 從這個解釋中，我們可以知道，完成jsonp需要的步驟主要有以下兩點： 向頁面中插入一個帶有請求鏈接的script標籤 通過回調函數，獲取需要的JSON數據 2. jsonp庫是如何實現的？ jsonp是一個star數1.9k的倉庫，實現了一個簡單的jsonp方法 jsonp倉庫傳送門 2.1 傳入參數 url 傳入的u
昵称 修仙大橙子
數組並集/交集/差集
underscore 官網 _.union([2,1,2]); // [2,1] lodash 官網 _.uniq([2,1,2]); [2,1] 不產生新數組 使用indexOf判斷和splice刪除。 const removeDuplicates = (nums) = { let len = nums.length - 1 for(let i = len; i=0; i--
昵称 洋仔
移動端click事件300ms延時解決方案
問題描述 移動端由於屏幕雙擊會縮放頁面，因此移動端click事件會有300ms延時情況的產生 解決方案 方法一：全局禁止縮放 在html頁面頭部的meta標籤中加上content="user-scalable=no" meta content="user-scalable=no" 該方法會讓瀏覽器禁用默認的雙擊行為並且去掉300ms點擊延時 適用場景：需要對整個頁面進行禁用雙擊行為。但
昵称 chen
理解prototype和__proto__（繼承與原型鏈）
從關係圖中可以看出來，ECMAScript中創建一個對象是通過new構造函數實現的，而本質上來説這個對象其實是以構造函數的屬性prototype指向的對象為基本模板的，因此新對象的__proto__屬性表明了自己來源於誰。 prototype 該屬性用來指向創建一個對象的基本模板，默認指向new構造函數，也可以修改，或者通過改屬性為新對象添加屬性。 需要注意的是，該屬性只有函數才有。 //構造函
昵称 你好2007
vue 使用computed報錯 .. was assigned to but it has no setter.
問題： a-radio @change="chooseOther" v-model="tempReadio"其他/a-radio computed: { tempReadio() { if (this.reasonValue == 7) { return true; } else { return false; }
昵称 那年
使用原生ES5封裝 call, apply, bind 等方法
直接上代碼，大家一看就明瞭 !DOCTYPEhtml htmllang="en" head metacharset="UTF-8" metahttp-equiv="X-UA-Compatible"content="IE=edge" metaname="viewport"content="width=device-width,initial-scale=1.0" titleDocument/
昵称 ox1dp6ei
Koa1技術分享
寫在前面 Koa使用了ES6規範的generator和異步編程是一個更輕量級Web開發的框架，Koa 的先天優勢在於 generator。由於是我個人的分享交流，所以Node基礎、ES6標準、Web開發基礎以及Koa的"Hello World"程序都不在討論，希望各位小夥伴提出意見和指導。 PS：Koa 內核中沒有捆綁任何中間件，但不用擔心，Koa 擁有極其強悍的拓展性，正文所有中間
昵称 小磊