Всем привет, я ваш кошачий брат, супер кот, который не любит есть рыбу и мяукать~
предисловие
Brother Cat — кошачья звезда, который был на GitHub круглый год, поэтому он нашел много хороших проектов с открытым исходным кодом и общих навыков, и я поделюсь ими с вами здесь.
публика:Внешний интерфейс GitHub, сосредоточившись на поиске отличных проектов с открытым исходным кодом на GitHub и рекомендуя их в виде тем.В каждой теме около 10 хороших проектов, и каждую неделю будет публиковаться от одной до трех элитных статей.
уже рекомендовано面试项目,css奇技淫巧项目,代码规范项目,数据结构与算法项目,管理后台模板,前端必备在线工具На эту тему насчитывается около 100 выдающихся проектов.
О том, как обычно находить хорошие проекты с открытым исходным кодом, вы можете прочитать в этой статье:Волшебные советы по майнингу на GitHub — как найти отличные проекты с открытым исходным кодом
Ниже приводится суть 12-го выпуска [Front-end GitHub].
1. 30-seconds-of-code
Этот проект посвящен кратким фрагментам кода, которые отвечают всем вашим потребностям в разработке. Есть некоторые часто используемые и очень классические коды, которые очень стоит изучить!
Например, модули JavaScript разделены на все, массив, браузер, дата, функция, математика, узел, объект и строка для облегчения изучения.
Например:4 метода работы с массивами в JavaScript, которые вы должны знать
Array.prototype.map()
const arr = [1, 2, 3];
const double = x => x * 2;
arr.map(double); // [2, 4, 6]
Array.prototype.filter()
const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.filter(isOdd); // [1, 3]
Array.prototype.reduce()
const arr = [1, 2, 3];
const sum = (x, y) => x + y;
arr.reduce(sum, 0); // 6
const increment = (x, y) => [...x, x[x.length - 1] + y];
arr.reduce(increment, [0]); // [0, 1, 3, 6]
Array.prototype.find()
const arr = [1, 2, 3];
const isOdd = x => x % 2 === 1;
arr.find(isOdd); // 1
Другой пример:Как реализовать функцию сна в JavaScript?
Синхронизировать версию
const sleepSync = (ms) => {
const end = new Date().getTime() + ms;
while (new Date().getTime() < end) { /* do nothing */ }
}
const printNums = () => {
console.log(1);
sleepSync(500);
console.log(2);
console.log(3);
};
printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)
Асинхронная версия
const sleep = (ms) =>
new Promise(resolve => setTimeout(resolve, ms));
const printNums = async() => {
console.log(1);
await sleep(500);
console.log(2);
console.log(3);
};
printNums(); // Logs: 1, 2, 3 (2 and 3 log after 500ms)
На самом деле в упомянутых выше примерах также даны пояснения к API и методам, которые удобны для понимания читателями, поэтому здесь они писаться не будут.
Если вы хотите узнать больше классических фрагментов кода js, см. следующий репозиторий
2. 33-js-concepts
33 понятия, которые должны знать разработчики JavaScript
Этот проект был создан, чтобы помочь разработчикам понять концепции JavaScript. Это не обязательно, но может быть использовано в качестве руководства при дальнейшем обучении (JavaScript).
содержание
调用堆栈
原始类型
值类型和引用类型
隐式, 显式, 名义和鸭子类型
== 与 ===, typeof 与 instanceof
this, call, apply 和 bind
函数作用域, 块级作用域和词法作用域
闭包
map, reduce, filter 等高阶函数
表达式和语句
变量提升
Promise
立即执行函数, 模块化, 命名空间
递归
算法
数据结构
消息队列和事件循环
setTimeout, setInterval 和 requestAnimationFrame
继承, 多态和代码复用
按位操作符, 类数组对象和类型化数组
DOM 树和渲染过程
new 与构造函数, instanceof 与实例
原型继承与原型链
Object.create 和 Object.assign
工厂函数和类
设计模式
Memoization
纯函数, 函数副作用和状态变化
耗性能操作和时间复杂度
JavaScript 引擎
二进制, 十进制, 十六进制, 科学记数法
偏函数, 柯里化, Compose 和 Pipe
代码整洁之道
И каждая тема включает соответствующие отличные статьи и видео, идеально подходящие для обучения.
3. javascript-questions
Список сложных вопросов по JavaScript.
От базового до продвинутого: проверьте свои знания JavaScript, немного освежите свои знания или подготовьтесь к собеседованию по программированию!
Например, каким будет следующий вывод?
let a = 3
let b = new Number(3)
let c = 3
console.log(a == b)
console.log(a === b)
console.log(b === c)
- A: true false true
- B: false false true
- C: true false false
- D: false true true
Ответ: С
объяснять:
new Number()является встроенным конструктором функций. Хотя это выглядит как число, на самом деле это не число: у него есть куча дополнительных функций, и это объект.
когда мы используем==оператор, он просто проверяет, имеют ли оба одинаковыеценность. потому что их значения3, тем самым возвращаяtrue.
Затем, когда мы используем===оператор, значения обоих итипдолжно быть все одинаково.new Number()является объектом, а не числом, поэтому возвращаетfalse.
4. JavaScript 30
Завершите 30 проектов за 30 дней, используя нативный JavaScript.
Решения HTML, CSS и javascript делаются каждый день.
5. Codewars
Подобно leetcode, он также находится на платформе, чтобы решать задачи реального кода с другими людьми, чтобы улучшить свои навыки.
По сравнению с другими платформами, вопросы, заданные codewars, больше соответствуют реальной работе и жизни, и многие вопросы дают фон заголовка, который более захватывающий.
Повышение квалификации: Испытайте себя в ката, созданных сообществом, чтобы улучшить различные навыки. Овладейте своим текущим языком по выбору или расширьте свое понимание нового языка.
Чтобы присоединиться к этому сообществу, вы должны сначала доказать свои навыки, ответив на викторину.
6. Руководство по началу работы с ES6
Книги с открытым исходным кодом ES6, о которых должен знать каждый, кто работает с интерфейсом Когда Брат Кэт впервые вошел в интерфейс, он изучил контент ES6 с открытым исходным кодом, открытый г-ном Руаном Ифэном, и это практично и по сей день!
«Введение в ECMAScript 6» — это учебное пособие по языку JavaScript с открытым исходным кодом, в котором содержится всестороннее введение в новые синтаксические функции, представленные в ECMAScript 6.
Эта книга охватывает все различия между ES6 и предыдущей версией, ES5, дает подробное введение в соответствующий синтаксис и дает множество кратких и простых для понимания примеров кода.
Эта книга среднего уровня сложности, подходящая читателям, освоившим ES5, для понимания последних разработок языка, также ее можно использовать как справочник для поиска новых грамматических моментов.
Если вы новичок в языке JavaScript, рекомендуется прочитать «Введение в учебник по языку JavaScript» перед чтением этой книги.
7. Учебник по JavaScript
В этом руководстве представлено всестороннее введение в основной синтаксис JavaScript, охватывающее все, начиная со спецификаций ES5 и DOM.
Он также написан учителем Руан Ифэн, очень прост для понимания и очень подходит для начального обучения.
Я должен сказать, что технические статьи, написанные людьми с глубокими знаниями, очень легко понять.
Что касается содержания, мы начинаем с самого простого, шаг за шагом, от мелкого к глубокому, и стремимся быть ясными и понятными.
Все главы содержат большое количество примеров кода, которые легко понять и воспроизвести, и которые можно использовать в реальных проектах.
Этот учебник подходит для начинающих в качестве вводного курса по языку JavaScript.После изучения вы можете заняться реальной веб-разработкой, а также подходит в качестве справочного руководства для повседневного использования.
содержание
入门篇
数据类型
运算符
语法专题
标准库
面向对象编程
异步操作
DOM
事件
浏览器模型
附录：网页元素接口
8. Учебник по современному JavaScript
Проверено на соответствие последним стандартам JavaScript. Благодаря простому, но достаточно подробному содержанию, он научит вас базовым и продвинутым знаниям, связанным с JavaScript.
Ядро курса состоит из 2 частей, посвященных языку программирования JavaScript и поведению браузера. Также имеется серия тематических статей.
язык программирования JavaScript
Здесь мы изучим JavaScript с нуля, а также узнаем о передовых концепциях, таких как ООП.
В этом руководстве основное внимание уделяется самому языку, по умолчанию мы используем минимальную среду.
Браузер: документация, события, интерфейсы
Узнайте, как управлять страницами браузера: добавлять элементы, управлять размером и положением элементов, динамически создавать интерфейсы и взаимодействовать с посетителями.
Другие статьи
Список содержания других тем, не затронутых в первых двух частях учебника. Здесь нет четкой иерархии, вы можете читать статьи в том порядке, в котором хотите.
9. MDN
Веб-сайт MDN Web Docs предоставляет информацию об открытых веб-технологиях, включая HTML, CSS и API для веб-сайтов и прогрессивных веб-приложений.
Mozilla, Microsoft, Google, Samsung и W3C будут сотрудничать, чтобы сделать MDN лучшей документацией в Интернете.
Поэтому изучение веб-технологий на этой платформе является относительно авторитетным.
От разработчиков, разработчиков услуг.
10. clean-code-javascript
Отличная спецификация кода JS.
Например:используйте одно и то же ключевое слово для переменных одного типа
Плохой:
getUserInfo();
getClientData();
getCustomerRecord();
Хорошо:
getUser();
Другой пример:Используйте имена с возможностью поиска
Во время разработки мы тратим гораздо больше времени на чтение кода, чем на его написание, поэтому очень важно, чтобы код был удобочитаемым и доступным для поиска. Помните, не обманывайте себя.
Bad:
//525600到底啥意思？
for (var i = 0; i < 525600; i++) {
runCronJob();
}
Good:
// 声明为全局变量
var MINUTES_IN_A_YEAR = 525600;
for (var i = 0; i < MINUTES_IN_A_YEAR; i++) {
runCronJob();
}
11. Начало работы с TypeScript
Обобщите мысли с точки зрения программистов JavaScript и шаг за шагом разберитесь с TypeScript.
Этот учебник действительно самый полный, краткий и простой для понимания учебник по TypeScript, который я когда-либо видел!
"Вводное руководство по TypeScript" представляет собой всестороннее введение в мощную систему типов TypeScript. Оно полное и краткое, с богатыми примерами и легче читается, чем официальные документы. Это очень подходит в качестве первой книги для начинающих изучать TypeScript. ——Руан Ифэн
Напримервведите псевдоним: Псевдоним типа используется для присвоения типу нового имени.
Простой пример:
type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
if (typeof n === 'string') {
return n;
} else {
return n();
}
}
В приведенном выше примере мы используемtypeСоздайте псевдоним типа.
Псевдонимы типов часто используются для типов объединения.
12. w3school
Учебная платформа по веб-технологиям, которую должен знать интерфейс, хотя многие интерфейсы знают ее, необходимо упомянуть об этом.
Ведущие учебные пособия по веб-технологиям — все бесплатно.
В W3School вы можете найти все необходимые учебники по созданию веб-сайтов.
От базового HTML до CSS и даже продвинутого XML, SQL, JS.
Лучшая часть изучения внешнего интерфейса здесь заключается в том, что есть демонстрации, которые можно изучить и проверить ваш эффект или результат.
Наконец
Неосознанно я написал первый12Все кончено, это было разделено100Это хороший интерфейсный проект. Прошлые статьи можно найти на складе сокровищ ниже. Нажимать на него очень опасно, будьте осторожны!
[Внешний интерфейс GitHub]:GitHub.com/frontend git…
Как найти хорошие проекты с открытым исходным кодом обычно можно посмотреть в этих двух статьях:Как найти отличные проекты с открытым исходным кодом на GitHubиКак использовать фокус GitHub для точного поиска.
wx для супер кота:CB834301747, поиск в WeChat »Внешний интерфейс GitHub",Ответить "электронная книга" чтобы получить160Эта передовая книга сущности.
Прошлые эссе
найти его полезным? Добавьте в избранное, если вам это нравится, и, кстати, поставьте лайк Ваша поддержка - самая большая поддержка Super Cat!