JavaScript学习
小牛itbull
这个作者很懒,什么都没留下…
展开
-
【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 阅读 · 0 评论 -
【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 · 196 阅读 · 0 评论 -
【JavaScript知识总结二】全方位从5个方面深入理解JS中的原型和原型链
1. 所有的引用类型(数组,对象,函数),都是具有对象特性的,即可以自由扩展属性(除了null以外) // 1.引用类型可以扩展属性 var obj = {}; obj.a = 100; // 对象属性的扩展 var arr = []; arr.a = 100; // 数组属性的扩展 function fn() {...原创 2019-01-03 21:54:29 · 149 阅读 · 0 评论 -
【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 · 433 阅读 · 0 评论 -
【WebGL高级】一些WebGL学习笔记和资料分享(包括WebGL+OpenGL+计算机图形学相关)
学习笔记首先是自己的一些WebGL学习笔记分享吧,这是对于原生WEBGL的学习点滴记录,主要针对WebGL编程指南,WebGL高级编程,以及NeHeWebGL这三个教程学习。由于web3D技术看似很炫酷,但是涉及到的知识也是非常多的,包括JS基础知识,计算机图形学知识,线性代数知识等,学习曲线也是比较陡的。以下就是记录了自己在学习webgl过程中的的代码笔记和学习点滴记录,也算是个总结吧,基本...原创 2018-12-01 21:10:57 · 1296 阅读 · 0 评论 -
【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 · 738 阅读 · 0 评论 -
【JavaScript】通过封装自己的JSONP解决浏览器的跨域问题(Ajax跨域)
问题引出:要发送Ajax请求,就必须使用HTTP请求?什么是跨域问题?什么是跨域问题:如果两个页面中的协议、域名、端口、子域名任意有一项不同,两者之间所进行的访问行动就是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。如何解决呢?1. 使用创建DOM元素的方式创建img对象, audio, video, link 这几个对象都支持跨域请求,。var...原创 2018-09-14 12:42:32 · 443 阅读 · 0 评论 -
【VIP视频网站项目三】项目框架搭建、项目路由配置、数据库表结构设计
一、项目路由的设计目前项目代码已经全部开源:项目地址:https://github.com/xiugangzhang/vip.github.io 视频网站前台页面路由设计 路由 请求方法 模板 作用 / GET Index.html ...原创 2018-09-18 22:15:21 · 2358 阅读 · 0 评论 -
【VIP视频网站项目一】搭建视频网站的前台页面(导航栏+轮播图+电影列表+底部友情链接)
首先来直接看一下最终的效果吧:项目地址:https://github.com/xiugangzhang/vip.github.io在线预览地址:https://xiugangzhang.github.io/vip.github.io/index.html目前视频网站已经实现了前台页面所有数据从后台数据库的读取,由于Github上面只能查看到静态的页面,对于动态网站还是不支持的,这个等待...原创 2018-09-09 12:31:01 · 9868 阅读 · 3 评论 -
【JavaScript】不使用正则表达式和字符串的方式来解析浏览器的URl地址信息
1.比如我们要获取的网站URl地址是:https://music.163.com/#/playlist?id=2384581760一般我们能够想到的方式是直接使用正则表达式获取使用字符串直接解析的方式来一步步解析,但是如何有没有能够更高效率的方法呢?答案是有的。第一步:创建一个a标签对象(动态创建)var a = document.createElement('a')第二步:...原创 2018-09-08 19:38:24 · 463 阅读 · 0 评论 -
【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 · 1196 阅读 · 0 评论 -
【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 · 1994 阅读 · 0 评论 -
【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 · 564 阅读 · 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 阅读 · 0 评论 -
【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 · 316 阅读 · 0 评论 -
【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 阅读 · 0 评论 -
【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 阅读 · 0 评论 -
【Javascript高级】如何获取浏览器请求数据的整个过程花费的所有时间详细信息(性能分析量化)
浏览器请求数据的整个过程花费的所有时间都包括哪些部分?我们可以在Chrome Network Timing中可以查看一个请求在各个阶段所花费的时间:1、Queueing请求文件顺序的的排序什么东西?浏览器有线程限制的,发请求也不能所有的请求同时发送,所以,队列喽。从添加到待处理队列到实际开始处理的时间间隔标示2、Stalled是浏览器得到要发出这个请求的指令到请求可以发出的等待时...原创 2019-06-23 22:52:43 · 5269 阅读 · 1 评论 -
【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 · 1050 阅读 · 0 评论 -
【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 · 344 阅读 · 0 评论 -
【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析
这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果,可以在线预览效果:https://vip.52tech.tech/目前项目代码已经全部开源:项目地址:https://github.com/xiugangzhang/vip.github.io 下面就来介绍一些实现思路吧: //首页轮播图效果开始----------------------...原创 2018-09-11 12:41:56 · 1580 阅读 · 0 评论 -
【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 · 1385 阅读 · 1 评论 -
【JavaScript游戏开发】JavaScript+HTML5封装的苏拉卡尔塔游戏(包含源码)
/** 苏拉克尔塔游戏 * 思路: * 1.棋盘设置:使用HTML5的canvas标签绘制整个棋盘 * 2.点击事件:当页面被点击时,获取点击的x,y像素点,根据此像素点进行判断,再在合适位置绘制黑红棋子,棋子均是使用canvas绘制的 * 3.保存落子记录:将数据存入一个二维数组,x和y表是落子坐标,1为白棋,2为黑棋,0代表此处无棋子,只有没有棋子的才能落子 * 4.判断输赢:每次...原创 2018-08-23 12:35:33 · 2017 阅读 · 5 评论 -
【JavaScript框架封装】实现一个类似于JQuery的选择框架的封装
// 选择框架(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 xframe.extend(xframe, { /** * ID选择器 * @param context ...原创 2018-07-19 22:17:21 · 431 阅读 · 0 评论 -
【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装
// CSS 样式框架(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)【只要是需要使用到this获取到的元素集合这个变量的时候,这里就是需要进行链式访问的】 xframe.extend({ /** * 给DOM元素设置/取值CSS样式 * @return {...原创 2018-07-19 22:16:14 · 610 阅读 · 0 评论 -
【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装
// 事件框架(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 实现一个浏览器的基本事件的绑定 * @param type * @param fn * @return {on}...原创 2018-07-19 22:13:58 · 683 阅读 · 0 评论 -
【JavaScript框架封装】JavaScript中的文本字符串的转义和反转义的实现
如果是想把本地的一个字符串串存到服务器,再次取出来的还是文本的话,就需要这个文本字符串的转义; /** * 对一个字符串的转义 * @param str * @return {*} */ function escapeHTML(str) { return str.replace(/$/g, '&amp;') //...原创 2018-07-18 21:50:52 · 1049 阅读 · 0 评论 -
【JavaScript框架封装】在实现一个自己定义类似于JQuery的append()函数的时候遇到的问题及解决方案
主要问题:在刚开始创建了这个函数之后,使用的时候,总是会出现一个问题,就是按照正常步骤给一个ID选择器添加子节点的时候正常,但是到了给一个class选择器的元素添加的时候始终只能添加一个。下面是我自己定义的Append()函数:/** * 向现有的元素节点中添加dom节点(对使用选择器获取的一系列元素都添加孩子节点child) * @param c...原创 2018-07-17 20:09:53 · 740 阅读 · 0 评论 -
【JavaScript框架封装】数据类型检测模块功能封装
数据类型检测封装后的最终模块代码如下:/*数据类型检验*/ xframe.extend(xframe, { // 鸭子类型(duck typing)如果它走起路来像鸭子,叫起来也是鸭子,那么它就是鸭子。 // 只关注对象的行为,不关注对象本身面向接口编型 ,而不是面向实现编程,是设计模式中最重要的思想。 // 【理解】:一个对象有效的语义,不...原创 2018-07-10 13:23:07 · 288 阅读 · 0 评论 -
JavaScript进阶【四】JavaScript中的this,apply,call的深入剖析
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--this的使原创 2018-03-21 21:22:41 · 319 阅读 · 0 评论 -
JavaScript进阶【三】JavaScript面向对象的基础知识复习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript面向对象知识复习</title></head><body>原创 2018-03-13 21:48:40 · 364 阅读 · 0 评论 -
JavaScript进阶【五】利用JavaScript实现动画的基本思路
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div { width:原创 2018-03-22 20:22:12 · 275 阅读 · 0 评论 -
JavaScript进阶【一】JavaScript模块化开发的基础知识
//模块化的最初写法//1.最初写法//下面的m1和m2就组成了一个模块//缺点:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。function m1() { //---}function m2() { //---}//2.对象的写法//可以把模块写成一个对象,所有的模块成员都放到这个对象里面。var module原创 2018-02-03 19:54:13 · 321 阅读 · 0 评论 -
【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装
// 属性框架(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 获取/设置某一个元素的属性信息 * @return {*} */ attr: function () { ...原创 2018-07-19 22:18:13 · 310 阅读 · 0 评论 -
【JavaScript框架封装】实现一个类似于JQuery的内容框架的封装
// 内容框架(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * .html()用为读取和修改元素的HTML标签 对应js中的innerHTML * @return {html} */ ...原创 2018-07-19 22:19:06 · 405 阅读 · 0 评论 -
【JavaScript游戏开发】使用HTML5+Canvas+JavaScript 封装的一个超级马里奥游戏(包含源码)
这个游戏基本上是建立在JavaScript模块化的开发基础上进行封装的,对游戏里面需要使用到的游戏场景进行了封装,分别实现了Game,Sprite,enemy,player, base,Animation 等游戏类,后续代码还可以继续优化,最终实现的效果如下:其他的所有核心代码已经开源:https://github.com/xiugangzhang/SuperMarioGame在线预览...原创 2018-08-22 12:19:01 · 3207 阅读 · 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 · 264 阅读 · 0 评论 -
【JavaScript框架封装】使用原生js封装的类似于JQuery的框架及核心源码分享(多文件版本)
这个版本的JQuery是对上一个版本的JQuery,使用了require.js进行了二次封装,基本上把前面的每一个框架封装成为一个单独的模块,最终的目录结构如下:由于代码量和目录比较多,这个封装好的代码和目录已经全部上传到GitHub上面,需要的同学可以前往下载哈。https://github.com/xiugangzhang/JavaScript-Xframe【main.js】这...原创 2018-07-22 17:42:38 · 2292 阅读 · 0 评论