玩转前端JavaScript
玩转前端JavaScript
小牛itbull
这个作者很懒,什么都没留下…
展开
-
【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 · 476 阅读 · 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 · 223 阅读 · 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 · 165 阅读 · 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 · 1218 阅读 · 0 评论 -
【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 · 1104 阅读 · 0 评论 -
【Vue高级知识】如何使用Vue CLI-3.0脚手架工具分别配置项目的开发环境和部署环境下的环境变量
1. cli-3.0总共提供了四种方式来制定环境变量:在根目录添加.env文件,配置所有情况下都会用到的配置(不知道这个存在的意义,所有的都需要的也就不需要配置了吧)。 在根目录添加.env.local文件,配置所有情况下都会用到的配置,与.env的区别是只会在本地,该文件不会被git跟踪。 在根目录添加.env.[mode]文件,配置对应某个模式下的配置,比如:.env.develo...原创 2019-05-21 12:45:54 · 1163 阅读 · 1 评论 -
【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 · 2041 阅读 · 0 评论 -
【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 · 358 阅读 · 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 · 1297 阅读 · 1 评论 -
【JavaScript游戏开发】JavaScript+HTML5封装的苏拉卡尔塔游戏(包含源码)
/** 苏拉克尔塔游戏 * 思路: * 1.棋盘设置:使用HTML5的canvas标签绘制整个棋盘 * 2.点击事件:当页面被点击时,获取点击的x,y像素点,根据此像素点进行判断,再在合适位置绘制黑红棋子,棋子均是使用canvas绘制的 * 3.保存落子记录:将数据存入一个二维数组,x和y表是落子坐标,1为白棋,2为黑棋,0代表此处无棋子,只有没有棋子的才能落子 * 4.判断输赢:每次...原创 2018-08-23 12:35:33 · 2190 阅读 · 5 评论 -
【JavaScript】不使用正则表达式和字符串的方式来解析浏览器的URl地址信息
1.比如我们要获取的网站URl地址是:https://music.163.com/#/playlist?id=2384581760一般我们能够想到的方式是直接使用正则表达式获取使用字符串直接解析的方式来一步步解析,但是如何有没有能够更高效率的方法呢?答案是有的。第一步:创建一个a标签对象(动态创建)var a = document.createElement('a')第二步:...原创 2018-09-08 19:38:24 · 511 阅读 · 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 · 9992 阅读 · 3 评论 -
【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析
这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果,可以在线预览效果:https://vip.52tech.tech/目前项目代码已经全部开源:项目地址:https://github.com/xiugangzhang/vip.github.io 下面就来介绍一些实现思路吧: //首页轮播图效果开始----------------------...原创 2018-09-11 12:41:56 · 1626 阅读 · 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 · 1469 阅读 · 1 评论 -
【JavaScript游戏开发】使用HTML5+Canvas+JavaScript 封装的一个超级马里奥游戏(包含源码)
这个游戏基本上是建立在JavaScript模块化的开发基础上进行封装的,对游戏里面需要使用到的游戏场景进行了封装,分别实现了Game,Sprite,enemy,player, base,Animation 等游戏类,后续代码还可以继续优化,最终实现的效果如下:其他的所有核心代码已经开源:https://github.com/xiugangzhang/SuperMarioGame在线预览...原创 2018-08-22 12:19:01 · 3289 阅读 · 1 评论 -
【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享(单文件版本)
整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但也只是对JQuery的里面的知识点了解了大概,后续希望能更深层次的理解JQuery里面涉及的知识点,从而写出高质量的代码,特此记录一下这一段时间学习的点滴。/** @Author: 我爱科技论...原创 2018-07-22 16:58:50 · 775 阅读 · 0 评论 -
【JavaScript框架封装】使用原生js封装的类似于JQuery的框架及核心源码分享(多文件版本)
这个版本的JQuery是对上一个版本的JQuery,使用了require.js进行了二次封装,基本上把前面的每一个框架封装成为一个单独的模块,最终的目录结构如下:由于代码量和目录比较多,这个封装好的代码和目录已经全部上传到GitHub上面,需要的同学可以前往下载哈。https://github.com/xiugangzhang/JavaScript-Xframe【main.js】这...原创 2018-07-22 17:42:38 · 2324 阅读 · 0 评论 -
【JavaScript框架封装】在实现一个自己定义类似于JQuery的append()函数的时候遇到的问题及解决方案
主要问题:在刚开始创建了这个函数之后,使用的时候,总是会出现一个问题,就是按照正常步骤给一个ID选择器添加子节点的时候正常,但是到了给一个class选择器的元素添加的时候始终只能添加一个。下面是我自己定义的Append()函数:/** * 向现有的元素节点中添加dom节点(对使用选择器获取的一系列元素都添加孩子节点child) * @param c...原创 2018-07-17 20:09:53 · 760 阅读 · 0 评论 -
【JavaScript框架封装】JavaScript中的文本字符串的转义和反转义的实现
如果是想把本地的一个字符串串存到服务器,再次取出来的还是文本的话,就需要这个文本字符串的转义; /** * 对一个字符串的转义 * @param str * @return {*} */ function escapeHTML(str) { return str.replace(/$/g, '&amp;') //...原创 2018-07-18 21:50:52 · 1072 阅读 · 0 评论 -
【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装
// 事件框架(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 实现一个浏览器的基本事件的绑定 * @param type * @param fn * @return {on}...原创 2018-07-19 22:13:58 · 720 阅读 · 0 评论 -
【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装
// CSS 样式框架(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)【只要是需要使用到this获取到的元素集合这个变量的时候,这里就是需要进行链式访问的】 xframe.extend({ /** * 给DOM元素设置/取值CSS样式 * @return {...原创 2018-07-19 22:16:14 · 625 阅读 · 0 评论 -
【JavaScript框架封装】实现一个类似于JQuery的选择框架的封装
// 选择框架(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 xframe.extend(xframe, { /** * ID选择器 * @param context ...原创 2018-07-19 22:17:21 · 445 阅读 · 0 评论 -
【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装
// 属性框架(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 获取/设置某一个元素的属性信息 * @return {*} */ attr: function () { ...原创 2018-07-19 22:18:13 · 324 阅读 · 0 评论 -
【JavaScript框架封装】实现一个类似于JQuery的内容框架的封装
// 内容框架(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * .html()用为读取和修改元素的HTML标签 对应js中的innerHTML * @return {html} */ ...原创 2018-07-19 22:19:06 · 434 阅读 · 0 评论 -
【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装
// DOM框架(选择器框架)(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现有的元素集合中添加元素节点(修改this的内容) * @param dom * @return {add} ...原创 2018-07-19 22:19:59 · 354 阅读 · 0 评论 -
【JavaScript框架封装】实现一个类似于JQuery的动画框架的封装
// 动画框架(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 xframe.extend(xframe, {}); // 实现动画框架的封装 xframe.Animate = (function (xfr...原创 2018-07-19 22:20:58 · 435 阅读 · 0 评论 -
【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 · 350 阅读 · 0 评论 -
【JavaScript框架封装】公共框架的封装
/** @Author: 我爱科技论坛* @Time: 20180706* @Desc: 实现一个类似于JQuery功能的框架// 公共框架// 种子模块:命名空间、对象扩展、数组化、类型的判定、domReady机制,无冲突处理(function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend...原创 2018-07-15 19:28:02 · 658 阅读 · 0 评论 -
【JavaScript框架封装】使用Prototype给Array,String,Function对象的方法扩充
/** @Author: 我爱科技论坛* @Time: 20180705* @Desc: 实现一个类似于JQuery功能的框架* V 1.0: 实现了基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架的搭建* V 2.0:实现了框架的进一步优化,具有良好的扩展性, 可以支持链式访问* V 3.0:种子模块:命名空间、对象扩展、数组化、类型的判定、domReady,无冲突处理...原创 2018-07-15 19:25:27 · 521 阅读 · 0 评论 -
【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建
/** @Author: 我爱科技论坛* @Time: 20180715* @Desc: 实现一个类似于JQuery功能的框架* V 1.0: 实现了基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架的搭建* V 2.0:实现了框架的进一步优化,具有良好的扩展性, 可以支持链式访问* */ / 主框架: 只做一件事,就是用于获取所有的元素集合(functi...原创 2018-07-15 19:23:42 · 529 阅读 · 1 评论 -
【JavaScript框架封装】数据类型检测模块功能封装
数据类型检测封装后的最终模块代码如下:/*数据类型检验*/ xframe.extend(xframe, { // 鸭子类型(duck typing)如果它走起路来像鸭子,叫起来也是鸭子,那么它就是鸭子。 // 只关注对象的行为,不关注对象本身面向接口编型 ,而不是面向实现编程,是设计模式中最重要的思想。 // 【理解】:一个对象有效的语义,不...原创 2018-07-10 13:23:07 · 303 阅读 · 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 · 296 阅读 · 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 · 346 阅读 · 0 评论 -
JavaScript进阶【三】JavaScript面向对象的基础知识复习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JavaScript面向对象知识复习</title></head><body>原创 2018-03-13 21:48:40 · 378 阅读 · 0 评论 -
JavaScript进阶【二】JavaScript 严格模式(use strict)的使用
/*** *使用严格模式的原因: * ①:消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为; ②:消除代码运行的一些不安全之处,保证代码运行的安全; ③:提高编译器效率,增加运行速度; ④:为未来新版本的Javascript做好铺垫。 *///不允许使用未声明的变量:"use strict";z = 3.14; // 报错原创 2018-02-03 20:45:59 · 391 阅读 · 0 评论 -
JavaScript进阶【一】JavaScript模块化开发的基础知识
//模块化的最初写法//1.最初写法//下面的m1和m2就组成了一个模块//缺点:"污染"了全局变量,无法保证不与其他模块发生变量名冲突,而且模块成员之间看不出直接关系。function m1() { //---}function m2() { //---}//2.对象的写法//可以把模块写成一个对象,所有的模块成员都放到这个对象里面。var module原创 2018-02-03 19:54:13 · 337 阅读 · 0 评论