# JavaScript
# Flag
Vanilla JS 就是指JavaScript
- Ecma 国际,技术委员会 https://github.com/tc39 (opens new window)
- ECMAScript支持度检测 https://github.com/ruanyf/es-checker (opens new window)
- 检查JS文件中的ES版本 https://github.com/dollarshaveclub/es-check (opens new window)
- ES6支持情况 https://kangax.github.io/compat-table/es6 (opens new window)
- JS刷新当前页面的几种方法总结 (opens new window)
- js keyup、keypress和keydown事件 详解 (opens new window)
- js中keyup-keypress-keydown以及oninput四个事件 (opens new window)
- keydown,keypress,keyup三者之间的区别 (opens new window)
- 前端三大框架与 YUI 以及 EXT.js 这类组件化框架最大的区别是什么? (opens new window)
- ECMAscript和Javascript的区别 (opens new window)
- KeyboardEvent.keyCode已弃用,MDN已经提供了一个解决方案 (opens new window)
Polyfill (opens new window) 是一块代码(通常是 Web 上的 JavaScript) ,用来为旧浏览器提供它没有原生支持的较新的功能 https://github.com/financial-times/polyfill-service (opens new window) https://github.com/taylorhakes/promise-polyfill (opens new window)
- 恶意软件分析 https://github.com/HynekPetrak/malware-jail (opens new window)
- 物联网的超轻量级JavaScript引擎 https://github.com/jerryscript-project/jerryscript (opens new window)
# 学习
- https://github.com/wangdoc/javascript-tutorial (opens new window)
- https://github.com/ruanyf/jstutorial (opens new window)
- ECMAScript 6入门 https://github.com/ruanyf/es6tutorial (opens new window)
- 现代JavaScript教程 https://github.com/javascript-tutorial/zh.javascript.info (opens new window)
- 浏览器脚本教程 https://www.w3school.com.cn/b.asp (opens new window)
- 参考手册 https://www.w3school.com.cn/r.asp (opens new window)
- 文档对象模型 (DOM) https://developer.mozilla.org/zh-CN/docs/Glossary/DOM (opens new window)
- https://github.com/Asabeneh/30-Days-Of-JavaScript (opens new window)
- https://github.com/wesbos/JavaScript30 (opens new window)
- https://github.com/30-seconds/30-seconds-of-code (opens new window)
- JavaScript算法和数据结构 https://github.com/trekhleb/javascript-algorithms (opens new window)
- 答题 https://github.com/lydiahallie/javascript-questions (opens new window)
- 可读性的代码写法 https://github.com/ryanmcdermott/clean-code-javascript (opens new window)
- https://github.com/felipefialho/frontend-challenges (opens new window)
- https://github.com/coffe1891/frontend-hard-mode-interview (opens new window)
- https://github.com/icepy/Front-End-Develop-Guide (opens new window)
模块规范
- https://github.com/umdjs/umd (opens new window)
- https://github.com/amdjs (opens new window)
- https://github.com/cmdjs (opens new window)
- https://github.com/seajs (opens new window)
- http://www.commonjs.org (opens new window)
- CommonJS规范 -- JavaScript 标准参考教程(alpha) (opens new window)
- Module 的语法 - ECMAScript 6入门 (opens new window)
/**
* CommonJS 主要是NodeJs使用
* 在一个node执行一个文件时,会给这个文件内生成一个 exports和module对象,而module有一个exports属性。
* exports = module.exports = {};
*/
module.exports.x = x; // 导出模块
module.exports = {};
// 为了方便,Node为每个模块提供一个exports变量,指向module.exports
// 注意,不能直接将exports变量指向一个值,因为这样等于切断了exports与module.exports的联系
//exports.x = x;
var example = require('./example.js'); // 导入模块
/**
* AMD(Asynchronous Module Defination,浏览器端js模块化) 主要是RequireJS使用
*/
//定义模块myModule.js
define(['dependency'],function(){
var name = 'Bily';
function printName(){
console.log(name);
}
return {
printName: printName
}
});
//加载模块
require(['myModule'],function(my){
my.printName();
});
/**
* CMD(Common Module Definition,通用模块定义)
*/
// cmd1.js
define(function(require,exports,module){
// ...
module.exports={
// ...
}
});
// cmd2.js
define(function(require,exports,module){
var cmd2 = require('./cmd1')
// cmd2.xxx 依赖就近书写
module.exports={
// ...
}
});
/**
* ECMAScript6
* export与export default均可用于导出常量、函数、文件、模块等
* 在一个文件或模块中,export、import可以有多个,export default仅有一个
* 通过export方式导出,在导入时要加{ },export default则不需要
* export能直接导出变量表达式,export default不行。
*/
export x = x; // 导出模块
export default {} // 为模块指定默认输出
import { stat, exists, readFile } from 'fs'; // 导入模块
var express = require('express');
Uncaught SyntaxError: Cannot use import statement outside a module
在报错是说无法在模块外部使用
import
语句,因为Module
的加载实现的是es6
语法, 所以在浏览器加载html
文件时,需要在script
标签中加入type="module"
属性。
<script type="module" src="/static/js/index.js"></script>
# 第三方库
- https://github.com/CreateJS (opens new window)
- https://github.com/ReactiveX/rxjs (opens new window)
- https://github.com/jashkenas/coffeescript (opens new window)
- https://github.com/observablehq (opens new window)
- https://github.com/documentcloud (opens new window)
- 模板语言 https://github.com/handlebars-lang/handlebars.js (opens new window)
- 当前设备 https://github.com/matthewhudson/current-device (opens new window)
- 转换编译器 https://github.com/babel (opens new window)
- 使浏览器支持require https://github.com/browserify (opens new window)
- 拷贝文字 https://github.com/zenorocha/clipboard.js (opens new window)
- https://github.com/zeroclipboard/zeroclipboard (opens new window)
- 绑定按键 https://github.com/jamiebuilds/tinykeys (opens new window)
- 语法高亮 https://github.com/PrismJS (opens new window)
- https://github.com/validatorjs/validator.js (opens new window)
- https://github.com/zTree/zTree_v3 (opens new window)
- 文件上传 https://github.com/fex-team/webuploader (opens new window)
- https://github.com/lovefc/fcup2 (opens new window)
- 图片懒加载 https://github.com/tuupola/lazyload (opens new window)
- Metro风兼瀑布流布局 https://github.com/desandro/masonry (opens new window)
- 图片查看 https://github.com/fengyuanchen/viewerjs (opens new window)
- https://github.com/dimsemenov/PhotoSwipe (opens new window)
- 响应式导航 https://github.com/VPenkov/okayNav (opens new window)
- 拖曳 https://github.com/desandro/draggabilly (opens new window)
- 拖放 https://github.com/bevacqua/dragula (opens new window)
- 图像缩放 https://github.com/kingdido999/zooming (opens new window)
- 国际化 https://github.com/i18next/i18next (opens new window)
- 图像中提取颜色 https://github.com/briangonzalez/rgbaster.js (opens new window)
- 模拟数据生成 https://github.com/nuysoft/Mock (opens new window)
- SVG渲染图像占位符 https://github.com/imsky/holder (opens new window)
- 动画引擎 https://github.com/julianshapiro/velocity (opens new window)
- https://github.com/dankogai/js-base64 (opens new window)
- 交互式医学图像 https://github.com/cornerstonejs/cornerstone (opens new window)
- 选色器 https://github.com/bgrins/spectrum (opens new window)
- https://github.com/ant-design/ant-design (opens new window)
- 手势交互 https://github.com/hammerjs/hammer.js (opens new window)
- https://github.com/material-motion/material-motion-js (opens new window)
- 自动执行 https://github.com/gruntjs (opens new window)
- velocity模板语法的JS实现 https://github.com/shepherdwind/velocity.js (opens new window)
- https://github.com/Rob--W/cors-anywhere (opens new window)
- https://github.com/HTMLElements (opens new window)
数据表格
- https://github.com/topics/data-table (opens new window)
- https://github.com/topics/grid (opens new window)
- https://github.com/topics/table (opens new window)
- https://github.com/topics/datatable (opens new window)
- https://github.com/frappe/datatable (opens new window)
- https://github.com/fiduswriter/Simple-DataTables (opens new window)
- https://github.com/baukh789/GridManager (opens new window)
- https://github.com/ag-grid/ag-grid (opens new window)
- https://github.com/future-architect/cheetah-grid (opens new window)
弹窗/提示框
- https://github.com/topics/dialog (opens new window)
- https://github.com/topics/popup (opens new window)
- https://github.com/topics/confirm (opens new window)
- https://github.com/topics/alert (opens new window)
- https://github.com/topics/ajax (opens new window)
- https://github.com/sentsin/layui (opens new window)
- https://github.com/sentsin/layer (opens new window)
- https://github.com/sweetalert2/sweetalert2 (opens new window)
- 提示和弹出框 https://github.com/popperjs/popper-core (opens new window)
- alert()和confirm()包装 https://github.com/makeusabrew/bootbox (opens new window)
存储/缓存
- https://github.com/topics/storage (opens new window)
- https://github.com/topics/localstorage (opens new window)
- https://github.com/topics/indexeddb (opens new window)
- https://github.com/ustbhuangyi/storage (opens new window)
- https://github.com/jaywcjlove/store.js (opens new window)
- https://github.com/localForage/localForage (opens new window)
- https://github.com/typicode/lowdb (opens new window)
- https://github.com/marcuswestin/store.js (opens new window)
编辑器
- https://github.com/notadd/neditor (opens new window)
- https://github.com/mycolorway/simditor (opens new window)
- https://github.com/summernote/summernote (opens new window)
- https://github.com/yabwe/medium-editor (opens new window)
- https://github.com/wangeditor-team/wangEditor (opens new window)
- https://github.com/ckeditor/ckeditor5 (opens new window)
- https://github.com/kindsoft/kindeditor (opens new window)
- https://github.com/ianstormtaylor/slate (opens new window)
- https://github.com/quilljs/quill (opens new window)
- https://github.com/alibaba/GGEditor (opens new window)
工具
- https://github.com/topics/workers (opens new window)
- https://github.com/topics/web-worker (opens new window)
- http://github.com/mootools (opens new window)
- https://github.com/liriliri/licia (opens new window)
- https://github.com/lodash/lodash (opens new window)
- [https://github.com/jashkenas
- debounce(防抖)、throttle(节流/限频) https://github.com/jashkenas/underscore (opens new window)
- https://underscorejs.net (opens new window)
- https://github.com/ramda/ramda (opens new window)
- https://github.com/proYang/outils (opens new window)
- https://github.com/30-seconds/30-seconds-of-code (opens new window)
- 工具库 https://github.com/tnfe/bbo (opens new window)
- 代码格式化 https://github.com/prettier/prettier (opens new window)
- https://github.com/standard/standard (opens new window)
- 转换HTML/XML https://github.com/posthtml/posthtml (opens new window)
- 幻灯片 https://github.com/webslides/webslides (opens new window)
- https://github.com/gnab/remark (opens new window)
- 正则表达式 https://github.com/slevithan/XRegExp (opens new window)
文档
- https://github.com/MrRio/jsPDF (opens new window)
- https://github.com/mozilla/pdf.js (opens new window)
- 电子表格数据工具包 https://github.com/SheetJS (opens new window)
- 压缩或编码解码库 https://github.com/photopea (opens new window)
- 压缩 https://github.com/photopea (opens new window)
- https://github.com/Stuk/jszip (opens new window)
- https://gitlab.pagedmedia.org/tools/pagedjs (opens new window)
日期时间
- 日期处理类库 https://github.com/moment (opens new window)
- https://github.com/iamkun/dayjs (opens new window)
- https://github.com/js-joda (opens new window)
- https://github.com/date-fns (opens new window)
- https://github.com/hustcc/timeago.js (opens new window)
HTTP
- https://github.com/wendux/fly (opens new window)
- https://github.com/github/fetch (opens new window)
- https://github.com/axios/axios (opens new window)
- https://github.com/umijs/umi-request (opens new window)
- https://github.com/seanmonstar/reqwest (opens new window)
导出
- TableExport (opens new window)
- tableExport.jquery.plugin (opens new window)
- excellentexport (opens new window)
流程图
- https://github.com/topics/diagram (opens new window)
- https://github.com/topics/flowchart (opens new window)
- 图表库 https://github.com/NorthwoodsSoftware/GoJS (opens new window)
- https://github.com/jsplumb (opens new window)
- https://github.com/antvis (opens new window)
- https://github.com/noflo (opens new window)
- https://github.com/fex-team (opens new window)
- https://github.com/bpmn-io (opens new window)
- https://github.com/dagrejs (opens new window)
- https://github.com/jgrap (opens new window)
- https://github.com/fabricjs (opens new window)
- https://github.com/cytoscape (opens new window)
- https://github.com/paperjs (opens new window)
- https://github.com/d3 (opens new window)
- https://github.com/freegroup/draw2d (opens new window)
- https://github.com/projectstorm/react-diagrams (opens new window)
- https://github.com/auto-workflow/AWorkflow (opens new window)
- https://github.com/mermaidjs/mermaid-live-editor (opens new window)
- 实体建模 https://github.com/jscad (opens new window)
- https://github.com/adrai (opens new window)
- https://github.com/socketio (opens new window)
- https://www.jointjs.com (opens new window)
- https://github.com/jwilber/roughViz (opens new window)
- 图表库 https://github.com/highcharts (opens new window)
- https://github.com/apache/incubator-echarts (opens new window)
- https://github.com/imgcook/imove (opens new window)
- https://github.com/antvis/X6 (opens new window)
动画
- https://github.com/animate-css/animate.css (opens new window)
- https://github.com/juliangarnier/anime (opens new window)
- 3D库 https://github.com/mrdoob/three.js (opens new window)
- 2D渲染器 https://github.com/pixijs/pixi.js (opens new window)
- 用于缩放图像 https://github.com/francoischalifour/medium-zoom (opens new window)
- SVG绘图编辑器 https://github.com/SVG-Edit (opens new window)
- 图标字体自定义 https://github.com/uuware/icons-font-customization (opens new window)
- https://github.com/IanLunn/Hover (opens new window)
- https://github.com/matthieua/WOW (opens new window)
- https://github.com/jlmakes/scrollreveal (opens new window)
- https://github.com/miniMAC/magic (opens new window)
- https://github.com/fians/Waves (opens new window)
- https://github.com/visionmedia/move.js (opens new window)
- https://github.com/julianshapiro/velocity (opens new window)
- https://github.com/ustbhuangyi/better-scroll (opens new window)
- https://github.com/mescroll/mescroll (opens new window)
- https://github.com/tweenjs/tween.js (opens new window)
- https://github.com/d3/d3 (opens new window)
Player
- https://github.com/topics/html5-video (opens new window)
- https://github.com/topics/video-player (opens new window)
- https://github.com/MoePlayer (opens new window)
- https://github.com/sampotts/plyr (opens new window)
- https://github.com/Chimeejs/chimee (opens new window)
- https://github.com/bilibili/flv.js (opens new window)
- https://github.com/google/shaka-player (opens new window)
- https://gitee.com/niandeng/ckplayer (opens new window)
- https://github.com/Aaaaaaaty/Blog/tree/master/html5player (opens new window)
- https://github.com/chiruom/DanmuPlayer (opens new window)
- 字体滚动 https://github.com/chenjianfang/scroxt (opens new window)
反爬虫
- https://github.com/antoinevastel/fpscanner (opens new window)
- https://github.com/ta7sudan/secan (opens new window)
- 前端如何检测Chrome-Headless不被爬虫虐 (opens new window)
# 相关链接
- Bootstrap中文网 https://www.bootcss.com (opens new window)
- React https://reactjs.bootcss.com (opens new window)
- Next.js https://www.nextjs.cn (opens new window)
- Docusaurus https://www.docusaurus.cn (opens new window)
- Blitz https://www.blitzjs.cn (opens new window)
- Gatsby https://www.gatsbyjs.cn (opens new window)
- Recoil https://www.recoiljs.cn (opens new window)
- Redux https://www.reduxjs.cn (opens new window)
- MDX https://www.mdxjs.cn (opens new window)
- Markdown https://www.markdown.xyz (opens new window)
- Vue.js https://vuejs.bootcss.com (opens new window)
- VuePress https://www.vuepress.cn (opens new window)
- Nuxt.js https://www.nuxtjs.cn (opens new window)
- Gridsome https://www.gridsome.cn (opens new window)
- Preact https://www.preactjs.com.cn (opens new window)
- Svelte https://www.sveltejs.cn (opens new window)
- Sapper https://www.sapperjs.com (opens new window)
- Webpack https://www.webpackjs.com (opens new window)
- Rollup.js https://www.rollupjs.com (opens new window)
- Parcel https://www.parceljs.cn (opens new window)
- NPM https://www.npmjs.cn (opens new window)
- Yarn https://www.yarnpkg.com.cn (opens new window)
- Gulp https://www.gulpjs.com.cn (opens new window)
- jQuery https://www.jquery123.com (opens new window)
- SASS https://www.sasscss.com (opens new window)
- TailwindCSS https://www.tailwindcss.cn (opens new window)
- PurgeCSS https://www.purgecss.cn (opens new window)
- cssnano https://www.cssnano.cn (opens new window)
- PostCSS https://www.postcss.com.cn (opens new window)
- Jest https://www.jestjs.cn (opens new window)
- WebAssembly https://www.wasm.com.cn (opens new window)
- Deno https://www.denojs.cn (opens new window)
← HTML JavaScript框架 →