随笔分类 - 前端-JavaScript
自己封装的js库中某方法的详细案例
摘要：webpack webpack 前言 网页中常见静态资源 静态资源很多会有什么问题 如何解决上述两个问题 webpack 什么是webpack 如何完美实现上述的两种解决方案 使用 安装 基本使用 基本的配置文件 webpack-dev-server插件 html-webpack-plugin插件
阅读全文
摘要：异步加载脚本 说明 两种异步形式 速度对比 同步方式： 异步方式async="defer"： 异步方式async="async"： 流行的两种异步加载库 script.js 加载单个脚本 加载多个脚本 按指定顺序加载多个脚本 load.js 说明 通常我们写页面的时候都是将一些需要引入的js包都放到
阅读全文
摘要：JavaScript模板语言 1. artTemplate 1.1 快速入门 1.2 语法 1.2.1 原始与标准 1.2.2 输出 1.2.3 条件 1.2.3 循环 1.2.3 设置变量 1.2.4 模板继承 1.2.5 子模板 1.2.6 过滤器 1.2.7 调试 1.2.8 模板变量 1.2
阅读全文
摘要：Node.js Node.js不是JS文件，也不是一个JS框架，而是Server side JavaScript runtime，服务器的一个JS运行时 Node.js是一个基于Chrome v8 引擎的JavaScript运行环境 Node.js使用了一个事件驱动、非阻塞式的I/O模型，使其轻量又
阅读全文
摘要：gulp gulp简介【版本4】 安装gulp 简单使用gulp 实用场景 gulp简介【版本4】 -当下最流行的自动化工具 什么是自动化构建工具？ 就是把在构建项目中的常用操作给简化。自动完成一系列重复操作： less -> css coffeescript -> js css压缩 js混淆 ht
阅读全文
摘要：jsonp原理 推荐技术站： https://segmentfault.com/a/1190000015597029 Content-Type和Accept的关系： https://www.jianshu.com/p/2283ed2751d9 跨域【jsonp】 跨域请求的概念 Ajax跨域问题 跨
阅读全文
摘要：JavaScript继承 0污染 模块化 实现继承的方式 原型链继承 构造继承 实例继承 拷贝继承（不推荐） 组合继承 寄生组合继承 0污染 什么是污染？ 当你使用一个全局变量时，就要考虑污染问题，因为一旦你占用了这个名称，其他人在想使用这个名称就会和你发生冲突，这就是污染。 解决污染的方案： 使用
阅读全文
摘要：ECMAScrip 6 学习推荐：http://johnhax.net/2014/es6-js-future/ 教程推荐【必读】：http://es6.ruanyifeng.com/#docs/destructuring ECMAScrip 6 const与let 1.使用var: 2.使用cons
阅读全文
摘要：const、var、let const var let const 作用：定义不可修改的且必须初始化的变量 作用范围：块级作用域 <script> window.onload = function() { // const 定义常量类型 //const a; // 编译器报错：must be ini
阅读全文
摘要：分页核心： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>分页</title> </head> <body> <script> (function () { /*当前页*/ var current = 4;
阅读全文
摘要：【教学视频】获取/清除选中 案例： 兼容性检测： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> window.onload = function
阅读全文
摘要：【只有子标签和父标签有相同的事件A时，子标签使用阻止冒泡,父盒子的事件A才会失效】 【教学视频】阻止冒泡案例： 理解什么是冒泡：如果一个大盒子box包裹着一个小盒子small，small里在包裹一个button,如果我给与大盒子box 一个事件，那么点击small或者button都会触发大盒子事件，
阅读全文
摘要：【教学视频】封装检测屏幕宽度【可视区】案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>检测发现1:所有浏览器都支持怪异模式了，所以没必要
阅读全文
摘要：【教学视频】封装自己的scroll案例： 测试： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { height:5500px; } </style>
阅读全文
摘要：【教学视频】网页特效_水平拖拽滚动条案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>由于8的不适用复杂嵌套的盒子，如果父盒子太多且都定位的话，8不在适用，不利于后期封装</title> <style>
阅读全文
摘要：【教学视频】网页特效_垂直拖拽滚动条案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直拖动条==有bug:来回上下多次，发现拉倒底部或拉倒顶部时 文字不能完全显示</title> <style> .
阅读全文
摘要：【教学视频】网页特效_拖拽案例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;padding:0;} #screen { display:
阅读全文
摘要：js实现倒计时 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时</title> <script> window.onload = function () { var future = new Date
阅读全文
浙公网安备 33010602011771号