分类 JavaScript 下的文章
-
ThreeJS学习笔记(三)——三维空间用户交互与动画
拾取器raycaster ThreeJS提供了一个 raycaster的API用于返回用户光标所在位置的所有3维元素，它的实现原理是在屏幕上某个二维坐标点与相机位置和视角形成的向量方向上投射一条射线，返回与射线相交的所有三维物体的集合，集合的第一个物体为距离相机最近的物体，最后一个则为离相机最远的。 当使用拾取器去获取用户点击的物体时，需要事先将所有可参与用户交互的三维物体放到一个集合里。在创建拾取器后获取两个集合的交集，即当前用户在屏幕点击的位置上所有被设置为可被选择的物体，第一个即可视为用户直接点击的物体。 拾取器示例 以下代码段实现当用户鼠标移动到object1和object......
-
ES6学习笔记——类
在 ES6 之前，我们通过构造函数来创造一个类，并且通过原型来扩展属性： function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; } Person.prototype.incrementAge = function () { return this.age += 1; }; 然后可以这样继承类： function Personal(name, age, gender, occupation, hobby) {......
-
如何实现异步代码用同步方式写(Web端)？
前端写JavaScript的时候，经常需要使用两个异步回调的方法：$.ajax和setTimeout，这两个都是需要异步方式执行回调($.ajax可以设置为同步，但会卡住浏览器，不推荐这么使用)，当有好多个$.ajax的时候，就会出现好多个回调，写起来很麻烦，甚至会出现传说中的回调金字塔，就像叠罗汉那样，Javascript有办法像Java、C#后台语言那样用同步方式写代码么？很抱歉，原生是不支持的(ES6、7会支持Promise同步调用，但需要非常高级的浏览器才支持，即使Node也不完全支持) 一般怎么写？ var start = new Date(); //......
-
ES6学习笔记——参数
在 ES5 中，在函数中我们需要各种操作去处理 默认参数、不定参数 和 重命名参数 等需求，在 ES6 中我们可以使用更简洁的语法完成这些需求。 默认参数 function addTwoNumbers(x, y) { x = x || 0; y = y || 0; return x + y; } ES6 中，函数的参数可以支持设置默认值： function addTwoNumbers(x=0, y=0) { return x + y; } addTwoNumbers(2, 4); // 6 addTwoNumbers(2); // 2 addTwo......
-
深入了解DOM对象
DOM是文档对象模型(Document Object Model)是基于浏览器编程的一套API接口，W3C出台的标准，每个浏览器都有一些细微的差别，其中以Mozilla的浏览器与标准最接近。 通过 DOM，您可访问 HTML 文档中的每个节点。 查找元素 1、直接查找 getElementById(id) //获取有指定惟一ID属性值文档中的元素 getElementsByTagName(name) //获取带有指定标签名的对象的集合 getElementsByClassName //获取所有指定类名的元素 getA......
-
ES6实战——字符串
在 ES6 中，标准库升级了很多，在这些变化中有许多新的对于字符串的函数，比如 .includes() 和 .repeat()。 .includes( ) var string = 'food'; var substring = 'foo'; console.log(string.indexOf(substring) > -1); // true 之前我们使用 indexOf() 函数的返回值是否 >-1 来判断字符串是否包含某些字符串，现在我们更简单地使用 .includes() 来返回一个布尔值来判断： const string = 'food'; const ......
-
#ThreeJS学习笔记( 二)——导入外部模型
外部模型格式 Threejs支持了许多格式的3D模型导入，包括*.obj、 *.sea、*.3mf 、*.amf、*.sea、*.pmd、*.json等。 这里主要讲解一下obj模型的导入，及将obj文件转成文件更小的json格式导入。 导入obj模型 3Dmax格式转换成obj格式 美术提供的一般为3Dmax项目文件夹，里面包含了.max文件以及贴图图片等资源，用3DMAX打开.max文件可以看到3D模型 如图： 点击菜单里的导出,选择obj格式,点击保存后出现选项 导出比例：几何体选项里的输出比例，默认是1.0，我们根据模型的分辨率，以及需要在网页上呈现的分辨率设置一......
-
图册组件优化之路（一）
根据六马系统需要，写了一个图册组件，方便给编辑器添加图册显示使用。 效果可以参考这里：http://game.163.com/2016/chinajoy/2016/07/29/22769_632281.html 匆忙发布了第一个版本出去，发现编辑们流行图册都发一两百张图上去的，由于没有做加载优化，导致问题很明显，一开始需要请求双倍的图片总数请求，页面存在多个图册，打开就会加载得很慢才出来，好多菊花满屏转 一、代码按需加载 图册兼容PC和移动两个web端，一般情况下，都是代码写一块，根据参数或者终端类型判断，来运行对应的代码 这样方式存在以下问题： 一个页面基本是不会存......
-
学习笔记：编写高效的javascript（老司机请绕道）
偶尔写得很挫的代码会被鄙视，甚至会影响到用户的每一次操作，所以开始思考如何让自己码下的代码能在所有浏览器中最高效地执行。 下面是我最近在读的一本名叫《高性能网站建设进阶指南》的书的一些笔记，做下简单的分享。 一、学会管理作用域 当执行JavaScript代码时，JavaScript引擎会创建一个执行上下文，每个执行上下文都有一个与之关联的作用域链。JavaScript引擎会在页面加载后创建一个全局的执行上下文，然后每执行一个函数都会创建一个对应的执行上下文，同时会创建一个活动对象，并在初始化时给this、arguments、命名参数和该函数的所有局部变量赋值。 JavaScri......
-
关于ajax异步获取服务器信息乱码情况
1、当客户端页面编码必须为gb2312时，ajax获取的信息显示为乱码 有时候有些项目需要include新闻发布系统某站点数据时，新闻发布系统该站点配置为gb2312编码的站点，此时，页面设置的编码必须为gb2312。但ajax异步获取的utf-8信息需要写入页面，与页面编码不一致，显示为乱码。（比如xy2某项目，同时需要include新闻数据，与接口返回的直播信息） 解决方法：添加ajax参数：scriptCharset:'utf-8'，使返回值以scriptCharset指定编码显示而不是默认以页面编码显示 js 代码： $.ajax({ url :......
-
React学习笔记
学习React的过程中，领悟到了一些基础要点，决定记录下来，以便以后阅读查看。 组件： 组件类首字母必须大写 var Hello = React.createClass({ render: function(){ return <h1>Hello ,{this.props.name}</h1> } }) ReactDOM.render( <Hello name="cxs" />, document.body ) this.props.children this.props对象......
-
写个简单的基于jq的轮播图插件
感觉自己一向都挺依赖插件的，基础也比较差，很少自己尝试写点什么，于是这次就写了这个，逻辑比较简单，功能比较单一，还有待改进~ 查看demo>> 1、首先写个面向过程的程序，后面再逐步改写成面向对象程序 css .slide{width: 582px;height: 248px;position: relative;margin:20px auto 0;overflow: hidden;} .slide .banner{overflow: hidden;position: absolute;width: 582px;height: 248px;left: 0;} .s......
-
JavaScript观察者模式的运用
观察者模式，是设计模式中的一种，具体含义和说明，这里就不写了，可以执行百度，这里主要讲解如何使用？如何改善现有的代码逻辑？如何解耦？等问题 一、最简单的例子 $("#test").on("click",function(e){ alert("hi"); }); 这是jQuery中的监听元素的点击事件，然后做出响应；其实这就是观察者模式的运用；监听某个事件，让其它模块来响应你，可能光这么说，感受不出它的好处，看下面的实例。 二、常规的模块间调用 用一个比较直接的例子说明，每个游戏中，都有生命值这个概念，当生命......
-
逐帧还是视频，如何选择
前言 最近在做一个游戏技能展示的效果，效果一般都有3s左右，鉴于效果复杂度只能通过逐帧或视频来实现展示。既然有两种实现方式，如何选择呢？先来简单分析下： 逐帧 所谓逐帧，就是把动画帧导出为图片，然后再用代码把没一帧的图片按照一定的频率进行切换，达到动画重组的播放效果。以3s的动画，每秒26帧的速度来计算，需要72张图片才能实现。同理如果帧数要求越高，需要的图片就越多。难度主要涉及到图片素材处理、图片资源加载、逐帧播放不掉帧等等 视频 视频这个没什么好说的，关键是看怎么播放。因为要达到的效果是看起来像一个页面动画而不是视频播放，所以要求是表面上看不出是视频播放即可。最大的难点也在于此......
-
window.location.hash使用总结
最近做项目经常与window.location.hash打交道，在这总结梳理下。 location.hash可以用来获取或设置页面的标签值，比如http://space.163.com/m/#about的location.hash="#about"。通过window.location.hash = hash 这个语句可以调整地址栏的地址，使得浏览器里边的“前进”、“后退”按钮能正常使用，然后根据hash值的不同来显示不同的模块。 var hash; hash = (!window.location.hash) ? "#about" : win......
