- 博客(73)
- 资源 (11)
- 收藏
- 关注
RSS订阅
原创 【VIP视频网站项目一】搭建视频网站的前台页面（导航栏+轮播图+电影列表+底部友情链接）
首先来直接看一下最终的效果吧：项目地址：https://github.com/xiugangzhang/vip.github.io在线预览地址：https://xiugangzhang.github.io/vip.github.io/index.html目前视频网站已经实现了前台页面所有数据从后台数据库的读取，由于Github上面只能查看到静态的页面，对于动态网站还是不支持的，这个等待...
2018-09-09 12:31:01
9880
3
原创 【JavaScript游戏开发】使用HTML5 canvas开发的网页版中国象棋项目
//V1.0 : 实现棋子的布局，画布及游戏场景的初始化//V2.0 : 实现棋子的颜色改变//V3.0 ：实现所有象棋的走棋规则//V4.0 : 实现所有棋子的吃子功能完整的项目源码已经开源：https://github.com/xiugangzhang/ChineseChess项目在线预览地址：http://htmlpreview.github.io/?https://gi...
2018-08-21 12:41:10
1391
1
原创 【JavaScript框架封装】使用原生js封装的类似于JQuery的框架及核心源码分享（多文件版本）
这个版本的JQuery是对上一个版本的JQuery，使用了require.js进行了二次封装，基本上把前面的每一个框架封装成为一个单独的模块，最终的目录结构如下：由于代码量和目录比较多，这个封装好的代码和目录已经全部上传到GitHub上面，需要的同学可以前往下载哈。https://github.com/xiugangzhang/JavaScript-Xframe【main.js】这...
2018-07-22 17:42:38
2294
原创 WEBGL学习【十】运动模型
<!DOCTYPE HTML><html lang="en"><head> <title>LWEBGL6.2, Animated WebGL Scene with Key Input.</title> <script src="./lib/webgl-debug.js"></script> ...
2017-11-12 17:07:10
1700
1
原创 《前端工程师面试宝典》系列专题总结
前端工程师面试宝典前端面试宝典，收集于全网最新、最全面的面试资料，帮助各位求职面试者斩获理想Offer。本书整理了前端工程师在求职面试过程中的前端知识和面经资料，希望各位网友们在学习交流过程中也可以不断丰富完善本书。本书结构本书一共分为八大部分。第一部分：前端知识体系本章从HTML、CSS、JavaScript、流向框架、Nodejs、性能优化、前端工程化、错误监控、Web安全共九...
2019-11-10 17:20:57
447
原创 【前端工具】使用JS实现一个Excel报表导出工具包，支持导出大数据量（5种方法总结）
方法一：ActiveXObject的导出方式//第一种方法function method1(tableid) { var curTbl = document.getElementById(tableid); var oXL = new ActiveXObject("Excel.Application"); var oWB = oXL.Workbooks.Add();...
2019-08-18 15:59:53
1384
1
原创 【Javascript高级知识】使用ES6实现私有变量的四种实现方式总结
ES6 实现私有变量方式总结需求如下实现一个Person类，设计下面的类name : publicage : privatesex : private1. 使用闭包的方式来实现const Person = (function() { let _sex = ''; let _age = 0; class Person { constructor(name, ...
2019-07-21 20:28:56
474
转载 【Javascript专题一】函数防抖Debounce工具封装及应用场景总结
函数防抖和节流总结环境初始化<!DOCTYPE html><html lang="zh-cmn-Hans"><head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1"> <t...
2019-06-30 17:18:23
567
1
原创 【Javascript高级知识】深刻理解原型链之继承的多种实现方式和优缺点
Javascript 之继承的多种实现方式和优缺点一、 原型链继承 function Parent() { this.name = 'zhangsan'; this.children = ['A', 'B', 'C']; } Parent.prototype.getName = function() { console.log(this...
2019-06-29 20:47:47
800
原创 【Javascript高级】创建JS对象的7种方式优缺点总结
创建JS对象的多种方式总结一、工厂模式 /** * 工厂模式创建对象 * @param name * @return {Object} */ function createPerson(name){ var o = new Object(); o.name = name; o.getName = ...
2019-06-28 14:56:04
317
原创 【Javascript高级知识】JS中的arguments参数的使用及注意要点总结
Arguments参数的使用？如何对类数组直接调用数组的方法呢？ var arrLike = { 0: 'name', 1: 'age', 2: 'sex', length: 3 } Array.prototype.join.call(arrLike, '&'); Array.prototyp...
2019-06-27 20:46:37
199
原创 【Javascript高级知识】深入剖析JS中New一个对象的过程（实现原理）
new一个对象的原理是怎样的呢？用new Object() 的方式新建了一个对象 obj取出第一个参数，就是我们要传入的构造函数。此外因为 shift 会修改原数组，所以 arguments 会被去除第一个参数将 obj 的原型指向构造函数，这样 obj 就可以访问到构造函数原型中的属性使用 apply，改变构造函数 this 的指向到新建的对象，这样 obj...
2019-06-27 17:37:07
4327
1
原创 【Javascript高级知识】封装实现一个自己的call, apply, bind函数（原生版+ES6版）
call, apply, bind的模拟实现call的模拟实现 // 使用原生的ES3语法实现的call Function.prototype._call = function() { var context = context || window; context.fn = this; var args = []; ...
2019-06-27 17:09:25
700
原创 【Javascript高级】如何获取浏览器请求数据的整个过程花费的所有时间详细信息(性能分析量化)
浏览器请求数据的整个过程花费的所有时间都包括哪些部分？我们可以在Chrome Network Timing中可以查看一个请求在各个阶段所花费的时间：1、Queueing请求文件顺序的的排序什么东西？浏览器有线程限制的，发请求也不能所有的请求同时发送，所以，队列喽。从添加到待处理队列到实际开始处理的时间间隔标示2、Stalled是浏览器得到要发出这个请求的指令到请求可以发出的等待时...
2019-06-23 22:52:43
5276
1
原创 【Vue高级知识】如何使用Vue劫持对象或数组的属性
Vue创建一个实例 <div id="app">{{msg}}</div> <script src="node_modules/vue/dist/vue.js"></script> <script> let vm = new Vue({ el:'#app',...
2019-06-22 11:09:16
1283
1
原创 【Vue高级知识】梳理Vue源码的整个实现流程
Vue的整个实现流程源码解读？？？（总结点）解析模板成render函数 <template></template> --->>> render 函数with函数的使用模板中的所有信息都被render函数包含模板中用到的data中的属性，都变成了JS变量模板中的v-model v-for v-on都变成了JS逻辑render函数返回v...
2019-06-22 10:45:28
346
原创 【Vue高级知识】细谈Vue 中三要素（响应式+模板+render函数）
Vue 中三要素的是什么？响应式： // 如何让实现响应式的呢？ let obj = {}; let name = 'zhangsan'; Object.defineProperties(obj, name, {get : function() { console.log('name' , name) }, set : function() {...
2019-06-22 10:33:05
1997
原创 【Javascript高级】使用HTML5中的Web Woker来处理大数据量下主线程（UI线程）阻塞问题
具体的测试代码如下，包括index.html(UI线程), worker.js（子线程）和一个script1.js文件（可以在worker中导入的js文件）。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Worker使用&l...
2019-06-18 11:09:54
1054
原创 【Vue高级知识】如何使用Vue CLI-3.0脚手架工具分别配置项目的开发环境和部署环境下的环境变量
1. cli-3.0总共提供了四种方式来制定环境变量：在根目录添加.env文件，配置所有情况下都会用到的配置（不知道这个存在的意义，所有的都需要的也就不需要配置了吧）。 在根目录添加.env.local文件，配置所有情况下都会用到的配置，与.env的区别是只会在本地，该文件不会被git跟踪。 在根目录添加.env.[mode]文件，配置对应某个模式下的配置,比如：.env.develo...
2019-05-21 12:45:54
1144
1
原创 【JavaScript进阶】parseInt()和Math.floor()两个函数的区分
测试一个二分搜索算法中，用到这个parseInt，发现结果计算也是正确的。// 在一个有n个元素的arr数组里面，寻找target的值对应的数组下标function binarySearch(arr, n, target){ // 1. 设置初始的边界范围 var l = 0, r = n - 1; // 在数组的[l, r]区间范围内寻找target // 2. 开始进...
2019-02-21 21:44:17
1200
原创 【JavaScript知识总结二】全方位从5个方面深入理解JS中的原型和原型链
1. 所有的引用类型（数组，对象，函数），都是具有对象特性的，即可以自由扩展属性（除了null以外） // 1.引用类型可以扩展属性 var obj = {}; obj.a = 100; // 对象属性的扩展 var arr = []; arr.a = 100; // 数组属性的扩展 function fn() {...
2019-01-03 21:54:29
151
原创 【JavaScript知识总结一】JS中的变量类型、变量计算和内置函数的使用及注意点总结
1.JS中的变量类型 var a = 100; // 值类型不会因为赋值而相互干预 var b = a; a = 200; console.log(b); // 100// 注意点：不仅仅是js对象{} 可以由自己的属性，JS中的数组和函数也都是可以有自己的属性的 var a = {age: 20}; var b...
2019-01-03 12:55:36
198
原创 【JavaScript高级】ES6中需要深入理解掌握的18个关键点总结笔记
1. let关键字<body><button>测试1</button><br><button>测试2</button><br><button>测试3</button><br><!--***le
2018-12-01 21:29:47
437
原创 【WebGL高级】一些WebGL学习笔记和资料分享（包括WebGL+OpenGL+计算机图形学相关）
学习笔记首先是自己的一些WebGL学习笔记分享吧，这是对于原生WEBGL的学习点滴记录，主要针对WebGL编程指南，WebGL高级编程，以及NeHeWebGL这三个教程学习。由于web3D技术看似很炫酷，但是涉及到的知识也是非常多的，包括JS基础知识，计算机图形学知识，线性代数知识等，学习曲线也是比较陡的。以下就是记录了自己在学习webgl过程中的的代码笔记和学习点滴记录，也算是个总结吧，基本...
2018-12-01 21:10:57
1299
转载 【webpack插件使用】在开发中快速掌握并使用Webpack构建web应用程序
1.webpack-dev-server插件的基本使用入门程序 const path = require('path');// 导出一个Webpack的配置对象（通过node中的模块操作，向外暴露了一个配置对象）module.exports = { // 需要在这里手动指定入口 和 出口 entry : path.join(__dirname, './src...
2018-10-20 16:16:45
740
原创 【VIP视频网站项目三】项目框架搭建、项目路由配置、数据库表结构设计
一、项目路由的设计目前项目代码已经全部开源：项目地址：https://github.com/xiugangzhang/vip.github.io 视频网站前台页面路由设计 路由 请求方法 模板 作用 / GET Index.html ...
2018-09-18 22:15:21
2360
原创 【JavaScript】通过封装自己的JSONP解决浏览器的跨域问题（Ajax跨域）
问题引出：要发送Ajax请求，就必须使用HTTP请求？什么是跨域问题？什么是跨域问题：如果两个页面中的协议、域名、端口、子域名任意有一项不同，两者之间所进行的访问行动就是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。如何解决呢？1. 使用创建DOM元素的方式创建img对象, audio, video, link 这几个对象都支持跨域请求，。var...
2018-09-14 12:42:32
445
原创 【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析
这个是实现的效果，基本上轮播效果和主流网站的一致，但是我也在上面优化了一些效果，可以在线预览效果：https://vip.52tech.tech/目前项目代码已经全部开源：项目地址：https://github.com/xiugangzhang/vip.github.io 下面就来介绍一些实现思路吧： //首页轮播图效果开始----------------------...
2018-09-11 12:41:56
1584
原创 【JavaScript】不使用正则表达式和字符串的方式来解析浏览器的URl地址信息
1.比如我们要获取的网站URl地址是：https://music.163.com/#/playlist?id=2384581760一般我们能够想到的方式是直接使用正则表达式获取使用字符串直接解析的方式来一步步解析，但是如何有没有能够更高效率的方法呢？答案是有的。第一步：创建一个a标签对象（动态创建）var a = document.createElement('a')第二步：...
2018-09-08 19:38:24
468
原创 【JavaScript游戏开发】JavaScript+HTML5封装的苏拉卡尔塔游戏（包含源码）
/** 苏拉克尔塔游戏 * 思路： * 1.棋盘设置：使用HTML5的canvas标签绘制整个棋盘 * 2.点击事件：当页面被点击时，获取点击的x,y像素点,根据此像素点进行判断，再在合适位置绘制黑红棋子，棋子均是使用canvas绘制的 * 3.保存落子记录：将数据存入一个二维数组，x和y表是落子坐标，1为白棋，2为黑棋，0代表此处无棋子，只有没有棋子的才能落子 * 4.判断输赢：每次...
2018-08-23 12:35:33
2022
5
原创 【JavaScript游戏开发】使用HTML5+Canvas+JavaScript 封装的一个超级马里奥游戏（包含源码）
这个游戏基本上是建立在JavaScript模块化的开发基础上进行封装的，对游戏里面需要使用到的游戏场景进行了封装，分别实现了Game,Sprite,enemy,player, base,Animation 等游戏类，后续代码还可以继续优化，最终实现的效果如下：其他的所有核心代码已经开源：https://github.com/xiugangzhang/SuperMarioGame在线预览...
2018-08-22 12:19:01
3209
1
原创 【JavaScript高级进阶】JavaScript变量/函数提升的细节总结
// 测试1console.log('----------test1--------------');console.log(global); // undefinedvar global = 'hahaha';console.log(global); // hahahafunction fn(){console.log(a); // undefinedvar a...
2018-08-07 11:26:41
265
原创 【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享（单文件版本）
整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧，最终实现了一个大概30%的JQuery功能的框架版本，但是里面涉及的知识点也是非常多的，总共的代码加上相关的注释大概在3000行左右吧，但也只是对JQuery的里面的知识点了解了大概，后续希望能更深层次的理解JQuery里面涉及的知识点，从而写出高质量的代码，特此记录一下这一段时间学习的点滴。/** @Author: 我爱科技论...
2018-07-22 16:58:50
754
原创 【JavaScript框架封装】实现一个类似于JQuery的缓存框架的封装
// 缓存框架(function (xframe) { /** * 实现了缓存框架的临时存储功能（内存存储） * @type {{data: Array, get: (function(*): *), add: xframe.cache.add, delete: (function(*): boolean), update: (function(*, *): bo...
2018-07-19 22:21:49
340
原创 【JavaScript框架封装】实现一个类似于JQuery的动画框架的封装
// 动画框架(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 xframe.extend(xframe, {}); // 实现动画框架的封装 xframe.Animate = (function (xfr...
2018-07-19 22:20:58
421
原创 【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装
// DOM框架（选择器框架）(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现有的元素集合中添加元素节点（修改this的内容） * @param dom * @return {add} ...
2018-07-19 22:19:59
340
原创 【JavaScript框架封装】实现一个类似于JQuery的内容框架的封装
// 内容框架(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * .html()用为读取和修改元素的HTML标签 对应js中的innerHTML * @return {html} */ ...
2018-07-19 22:19:06
406
原创 【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装
// 属性框架(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 获取/设置某一个元素的属性信息 * @return {*} */ attr: function () { ...
2018-07-19 22:18:13
312
原创 【JavaScript框架封装】实现一个类似于JQuery的选择框架的封装
// 选择框架(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 xframe.extend(xframe, { /** * ID选择器 * @param context ...
2018-07-19 22:17:21
433
原创 【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装
// CSS 样式框架(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)【只要是需要使用到this获取到的元素集合这个变量的时候，这里就是需要进行链式访问的】 xframe.extend({ /** * 给DOM元素设置/取值CSS样式 * @return {...
2018-07-19 22:16:14
611
2018慕课网精品视频教程【数据结构+算法+项目实战】
2018-09-20
2018最新Linux+NGINX服务器编程全套最新视频教程【代码+文档+视频】
2018-09-01
2018最新MySql+oracle+mongodb数据库调优全套视频教程
2018-09-01
《HTML5+Canvas核心技术图形动画与游戏开发》.((美)David+Geary).pdf
2018-04-06
webgl视频教程+学习资料
2018-03-22
2018JavaScript最新高级编程完整版
2018-03-21
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人