Проект с открытым исходным кодом для начинающих JS — изучайте программирование на GitHub

GitHub JavaScript
Проект с открытым исходным кодом для начинающих JS — изучайте программирование на GitHub

Автор: HelloGitHub - Вяленая рыба

Это последняя статья из серии HelloGitHub «Проекты с открытым исходным кодом на GitHub для начинающих», серии статей:

  1. C++ статьи
  2. статьи о Python
  3. Перейти статьи
  4. Java-статьи
  5. JavaScript-статьи

В главе о Java Лао Сюнь сказал:当今互联网份额最大的编程语言是 Java, как юниор, я не возражаю против этого утверждения. Однако какой самый популярный и живой язык программирования в отечественном интернете? Не должно быть никаких возражений против выбора JavaScript. Можно сказать, что по сравнению со старыми предшественниками, такими как C++ и Java, у JS низкий порог, и даже Python уступает. Итак, какие шаги я должен предпринять как новичок, чтобы систематически изучать JS?

  • Шаг 1: Откройте браузер и введите URL-адрес:https://hellogithub.com/
  • Шаг 2. Выберите проект JavaScript
  • Шаг 3: Учитесь один за другим

[Ручная собачья голова] Есть ли более быстрый способ? имеют! В этой статье вы узнаете об основных движениях, поймете основные понятия, такие как HTML, CSS, JS и т. д., попрактикуетесь в создании игры Pac-Man, затем начнете путешествие по настройке производительности и, наконец, выйдете на арену внешнего интерфейса.

Иди, иди вперед 🚗

Первая форма становления богом: закладка прочного фундамента

1.1 Путь к фронтенд-росту: Интернет

HG #vol.036Web — это вводное графическое руководство по интерфейсу, в котором записан авторский процесс изучения интерфейса с 0 по 1. В качестве вводного графического руководства Web следует принципу «нет мелких деталей». Node.js также немного представлены. Стоит упомянуть плюсы и минусы, комментарии к коду во всех его примерах четко обозначают моменты, на которые нужно обратить внимание при использовании слишком интимной функции.

Тем не менее, веб-проекту немного не хватает базового и расширенного слоев контента JS.Обнаружится, что в 16 категориях много дублированного контента, а несколько вопросов внешнего интерфейса, изначально относившихся к расширенной классификации внешнего интерфейса, были выделены в отдельный классификация. Включено большое количество вопросов для интервью и личных встреч пользователей сети, но недостатки не скрыты. Этот репозиторий, безусловно, является практическим руководством для начинающих.

Поскольку автор не представил карту мозга содержания классификации и содержания под классификацией, Сяоюйцзянь нарисовал здесь свою карту мозга / структуру каталогов, и некоторые из тех же тем были свернуты.

.
|── 前端工具
|   ├──VS Code 的使用
|   ├──Git 使用
|   ├──Mac 安装和 iTerm2 配置
|   ├──Sublime Text 的使用
|   ├──WebStorm 的使用
|   ├──Atom 的使用
|   ├──GitHub 的使用
|   ├──VS Code 的使用累积
|   ├──Chrome 浏览器
|   ├──Emmet in VS Code
|   ├──iTerm2 + OhMyZsh + agnoster 搭建
|   ├──iconMoon
|   └──whistle 网络抓包
|──HTML
|   ├──认识 Web 和 Web 标准
|   ├──浏览器的介绍
|   ├──初识 HTML
|   ├──HTML 标签：排版标签
|   ├──HMTL 标签：字体标签和超链接
|   ├──HTML 标签：图片标签
|   ├──HTML 标签：图文详解
|   ├──HTML5 详解
|   ├──HTML5 举例：简单的视频播放器
|   ├──HTML 详解（二）
|   ├──HTML 详解（三）
|   └──HTML 基础回顾
|──CSS 基础
|   ├──CSS 属性：字体属性和文本属性
|   ├──CSS 属性：背景属性
|   ├──CSS 样式表和选择器
|   ├──CSS 选择器：伪类
|   ├──CSS 样式表的继承性和层叠性
|   ├──CSS 盒模型详解
|   ├──浮动
|   ├──CSS 属性：定位属性
|   ├──CSS 案例讲解：博雅互动
|   ├──CSS3 选择器详解
|   ├──CSS3 属性详解（一）
|   ├──CSS3 属性详解：动画详解
|   ├──CSS3 属性：Flex 布局图文详解
|   ├──CSS3 属性：Web 字体
|   ├──SaaS 入门
|   ├──浏览器的兼容性问题
|   └──CSS3 的常见边框汇总
|──CSS 进阶
|   ├──准备
|   ├──CSS 中的非布局样式
|   ├──CSS 布局
|   ├──网页开发和设计中的字体常识
|   ├──如何让一个元素水平居中
|   ├──CSS 开发累积
|   ├──CSS 文章推荐
|   ├──CSS 的一些小知识
|   └──CSS 面试题
|──JS 基础
|   ├──编程语言
|   ├──JS 简介
|   ├──变量
|   ├──变量的数据类型：基本数据类型和引用数据类型
|   ├──基本数据类型
|   ├──typeof 和数据类型转换
|   ├──运算符
|   ├──流程控制语句
|   ├──对象简介
|   ├──基础包装类型
|   ├──内置对象
|   ├──数组
|   ├──函数
|   ├──作用域和变量提升
|   ├──预编译
|   ├──this 指向
|   ├──call、apply 和 bind
|   ├──高阶函数
|   ├──闭包
|   ├──对象
|   ├──深浅拷贝
|   ├──原型链和原型继承
|   ├──类和构造继承
|   ├──正则表达
|   ├──事件
|   └──jQuery
|──JS 之 ES6 语法
|   ├──ES6 介绍和环境配置
|   ├──ES5 中的严格模式
|   ├──ES5 中的一些扩展
|   ├──ES6：变量 let、const 和块级作用域
|   ├──变量的解构赋值
|   ├──箭头函数
|   ├──剩余参数和扩展运算符
|   ├──字符串、数据和对象的扩展
|   ├──内置对象扩展：Set 数据解构
|   ├──Promise 入门详解
|   ├──ES7：async 函数详解
|   └──ES6：Symbol
|──JS 进阶
|   ├──var、let、const 的区别
|   ├──数据的赋值
|   ├──JS 开发累积
|   ├──call、apply、bind 的区别
|   ├──this
|   ├──作用域与闭包
|   └──创建对象和继承
|──前端基本功
|   ├──CSS 基础练习
|   └──DOM 操作练习
|──Ajax
|   ├──服务器分类及 PHP 入门
|   ├──Ajax 入门和发送 http 请求
|   ├──函数封装
|   ├──同源和跨域
|   └──模版引擎
|──移动 Web 开发
|   ├──Bootstrap 入门
|   ├──Bootstrap 使用
|   └──Less 详解
|──Node.js 和数据库
|   ├──Node.js 介绍
|   ├──Node.js 的特点
|   ├──Node.js 开发环境安装
|   ├──Node.js 模块化规范
|   ├──Node.js 内置模块
|   ├──Node.js 操作 MySQL 数据库
|   ├──CommonJS
|   ├──ES6
|   ├──JS 模块化：AMD
|   ├──JS 模块化：CMD
|   ├──JS 模块化：ES6
|   ├──KOA2
|   ├──Node.js 代码举例
|   ├──WebSocket
|   └──事件驱动和非阻塞机制
|──Vue 基础
|   ├──指令系统
|   ├──v-on 事件修饰符
|   ├──系统指令（二）
|   ├──举例：列表功能
|   ├──自定义过滤器
|   ├──自定义按键修饰符 & 自定义指令
|   ├──Vue 实例的生命周期函数
|   ├──Vue 中的 Ajax 请求
|   ├──Vue 动画
|   ├──Vue 组件的定义和注册
|   ├──Vue 组件之间的传值
|   ├──Vue-router 路由
|   ├──Vue.js 在开发中的常见写法累积
|   ├──Vue 开发累积
|   └──Vue 组件
|──React 基础
|   ├──React 介绍
|   ├──JSX 语法介绍
|   ├──React 组件：生命周期
|   ├──React 组件：常见属性和函数
|   ├──React 中绑定 this 并给函数传参的方法
|   ├──React  单向数据绑定
|   ├──React 路由的使用
|   ├──Ant Design 的基本使用
|   ├──AntD 框架的踩坑记录
|   ├──AntD 框架 upload 组件自定义
|   └──React Native 初识
|──前端面试
|   ├──面试必看
|   ├──面试题累积
|   └──网友面经
|──前端进阶
|   ├──代码规范
|   ├──常见专有名词
|   ├──数组的常见操作
|   ├──前端监控技术
|   ├──lazyload & 防抖动和节流阀
|   ├──Vue 开发累积
|   └──前端的几道题目
|──前端综合
|   ├──2019 Web 前端入门自学路线
|   ├──前端学习分享
|   ├──Express
|   ├──2018 前端日记
|   ├──2019 前端日记
|   ├──2020 前端日记
|   ├──CSS 开发总结
|   ├──Ajax 相关
|   ├──HTML 相关
|   ├──Json 字符串的解析和遍历
|   ├──Json 相关
|   ├──前端博客推荐
|   ├──前端开发累积
|   ├──前端语录
|   └──网络抓包和代理工具：Whistle
└──扩展阅读
    ├──2020 Web 前端最新导航
    ├──GitHub 项目推荐
    ├──网站推荐
    ├──前端文章推荐
    ├──上海有哪些互联网大厂
    ├──北京有哪些互联网大厂
    └──深圳有哪些互联网大厂

Адрес GitHub→GitHub.com/Древний…

1.2 Учи и развлекайся: Pacman

HG #vol.029Pacman — это игра Pac-Man, основанная на HTML5. Основной код состоит всего из двух файлов, в основной программе всего 1000 строк кода, и код аккуратно прокомментирован. Это хороший практический проект для новичков, к тому же он может привить вам привычку читать чужой код.

Адрес GitHub→GitHub.com/Mumuyi/PACcode…

1.3 Уровень новичка: 33-js-концепции

HG #vol.03133-js-concepts — это известный JS-проект в зарубежных странах, который, как последний порог фундамента, помогает вам проверить и заполнить пробелы, чтобы вы могли запомнить 33 концепции, которые должен знать каждый разработчик Javascript, и перейти к следующему этапу прогресса.

Адрес GitHub→GitHub.com/Леонардо мс О…

Вторая форма становления богом: смена ходов

2.1 Глубина — основа широты: веб-серия

HG #vol.028Web-Series — бывший инженер Ali, которого очень любит Сяоюган: веб-разработка с полным стеком, инженерная архитектура и настройка производительности, написанные Wangxia Yaoxiong. После того, как вы ознакомитесь с основными понятиями внешнего интерфейса и создадите простые игры, такие как Pac-Man, пришло время узнать о расширенной настройке производительности и проблемах инженерной архитектуры на следующем этаже. В качестве фронтенд-инженера с более чем десятилетним опытом разработки в серии Web-Series Ван Ся предлагает Юэсюн посвятить себя изучению того, как эффективно повысить эффективность команды НИОКР, чтобы быть своевременным и надежным во всем. Жизненный цикл итерации продукта Завершите доставку; в то же время он может контролировать общую сложность системы и постоянно и непрерывно оптимизировать производительность и опыт системы. Можно сказать, что продвижения по службе и повышения зарплаты не хватает на этот трюк [ручная собачья голова]

Адрес GitHub→GitHub.com/я думаю - Cheval IE…

2.2 Упростить процесс работы: D3.js

HG #vol.031Полное название D3.js — (Data-Driven Documents). Библиотека предоставляет множество простых и удобных в использовании функций, которые значительно упрощают работу с данными в JavaScript. Использование этой библиотеки является обязательным методом визуализации данных.

Самым важным моментом является то, что сам проект D3.js предоставляет чрезвычайно богатую демонстрацию для непосредственного использования.Вы можете стать «инженером параметров», чтобы рисовать различные классные карты сил и представлять различные визуальные данные, такие как: персонажи Dream диаграммы группы взаимоотношений красных особняков. После того, как вы изучите основы использования в демонстрации, вы можете привязать любые данные к DOM в соответствии с вашими собственными бизнес-требованиями или напрямую управлять DOM для выполнения операций, связанных с W3C DOM API.Единственное, что может ограничить возможности D3. js это ваше воображение.

Адрес GitHub→github.com/d3/d3

2.3 Все включено: x-сборка

HG #vol.040x-build — это инструмент для создания шаблонов для небольших проектов, инициализирующий каталог проекта за считанные секунды с помощью команд терминала. Библиотека объединяет часто используемые интерфейсные инструменты, такие как Webpack, Babel и ESLint. Благодаря этому проекту вы сможете понять процесс разработки скаффолдинга и ознакомиться с тем, как интегрировать Webpack в инструмент, что очень полезно для разработки настраиваемых скаффолдингов.

Адрес GitHub→GitHub.com/code-shirt/small-no…

Третья форма становления богом: стремление к боевым искусствам

3.1 Наслаждайтесь тем же дизайном: далее

HG #vol.054Одним из противников фронтенд-инженеров являются дизайнеры, и восстановление на уровне пикселей заблокировало продвижение многих фронтенд-инженеров. Далее ваш меч, решение пользовательского интерфейса среднего и внутреннего уровня предприятия с открытым исходным кодом от Alibaba, предназначенное для решения проблем совместной работы, согласованности продуктов и эффективности разработки между дизайнерами и внешними интерфейсами. То есть после того, как дизайнер изменит такие элементы, как цвета, может быть сгенерирован пакет темы NPM, а внешний интерфейс может напрямую восстановить дизайн дизайнера, получив этот пакет. Далее Потрясающе 🏄‍♂️

Адрес GitHub→GitHub.com/alibaba-radiation…

3.2 Тот, кто выиграет Chrome, выиграет мир: chrome-extensions-searchReplace

HG #vol.052chrome-extensions-searchReplace — это плагин Google для поиска и замены текста, а также отличная практика разработки плагинов.

Адрес GitHub→GitHub.com/summer-Энди…

наконец

Заключительная глава этой статьи "Проекты с открытым исходным кодом для новичков на GitHub", нашли ли вы подходящее продвинутое направление или интересующий проект из этой серии? Если у вас есть какие-либо другие сериалы, которые вы хотите посмотреть, вы можете оставить сообщение и рассказать нам, или вы можете поговорить о том, что вы хотите сказать HG!

Категории