参考 高性能javascript javascript高级程序设计ajax基础 ajax技术的核心是XMLHttpRequest对象(XHR),通过XHR我们就可以实现无需刷新页面就能从服务器端读取数据 var xhr = new XMLHttpRequest(); //只支持IE7以及更高的版本 xhr.onreadystatechange = function() {if(xhr.readyState == 4) {if( (xhr.status >= 200 && xhr.status < 300) || xhr.status == 304 ) {//成功} else {//失败 }} }； xhr.open("get","test....
利用JavaScript实现banner图手风琴效果 2018-01-14这一篇文章主要是利用纯JavaScript实现手风琴效果代码,希望能给您带来一定的帮助,感兴趣的小伙伴可以进行一个参考。首先我给大家先介绍一下为什么实现的效果为什么叫做手风琴吧，可能大家都见过手风琴,没错，就是这样的一个...
第一章 一些基本概念HTML（超文本标记语言），构建网页的静态结构，由一系列的DOM组成；CSS（层叠样式表），给网页各部分结构添加样式；JavaScript，通过获取DOM给静态结构加上动作，使用户能够与静态网页进行交互；DOM，一种API（应用程序接口），通过这个接口动态的访问和修改结构或样式。浏览器内核，即渲染引擎（rendering engine），造成不同浏览器之间存在兼容问题。渲染引擎负责对html和js文档进行解释并决定浏览器如何显示...
1、查找HTML元素 通常，通过 JavaScript，您需要操作HTML 元素。 为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事： 通过id找到HTML元素（本例查找 id="intro" 元素）var x=document.getElementById("intro"); 通过标签名找到HTML元素（本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素）var x=document.getElementById("main");var y=x.getElementsByTagName("p"); ...
此滚动条仅支持竖向（Y轴）一、Css 1/*这里是让用户鼠标在里面不能选中文字，避免拖动的时候出错*/ 2body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }3 4/*滚动文本及滚动条大框*/ 5.scroll_con { width: 500px; height: 500px; background-color: #5c0af7; position: relative; overflow-y...
Javascript 字符串的连接方法有多种，但效率却有很大区别。1、逐个字符串相加var arr = [‘item 1‘, ‘item 2‘, ‘item 3‘, ...];var list = ‘‘;for (var i = 0, l = arr.length; i < l; i++) { list += ‘<li>‘ + arr[i] + ‘</li>‘;} list = ‘<ul>‘ + list + ‘</ul>‘;这种最常见的，但是效率最低！代码逻辑相对来说复杂。2、逐个 push 进数组var arr = [‘item 1‘, ‘item 2‘, ‘item 3‘, ...],list = [];for ...
今天进入第二个部分：控制器。控制器和状态从以往的开发经验来看，我们都是将状态保存在服务器的session或者本地cookie中，但Javascript应用往往被限制在单页面，所以我们也可以将状态保存在客户端的内存里面。保存在内存还意味着能带来更快的界面响应。在MVC里面，状态都是保存在控制器里的，控制器相当于应用中视图和模型的纽带。当加载页面的时候，控制器将事件处理程序绑定在视图里，并适时处理回调，以及和模型必要的对接。控...
多行注释使用/**……*/，需要包含一个描述，所有参数的具体类型的值还有返回值。// bad // make() returns a new element // based on the passed in tag name // // @param {String} tag // @return {Element} element function make(tag) {// ...stuff...return element; }// good /** * make() returns a new element * based on the passed in tag name * * @param {String} tag * @return {Element} element */ function make...
测试数据： function Person(name,age){var self = this;self.name = ko.observable(name);self.age = ko.observable(age);self.isShow = ko.observable("");self.html = "<div>没有div</div>",self.isRed = true}var person = new Person("tom",18);ko.applyBindings(person); 一、text 绑定 例如div、span 等标签的文本显示，text绑定是经过html编码的。 <div data-bind="text:name"></div><span data-bind="text:...
我们通过单体模式理解了是以对象字面量的方式来创建单体模式的；比如如下的对象字面量的方式代码如下： var singleMode = {name: value,method: function(){} };模块模式的思路是为单体模式添加私有变量和私有方法能够减少全局变量的使用；如下就是一个模块模式的代码结构： var singleMode = (function(){// 创建私有变量var privateNum = 112;// 创建私有函数function privateFunc(){// 实现自己的业务逻辑代码}// 返回一个对象包...
1. 理解javascript中的策略模式 策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。 使用策略模式的优点如下： 优点： 1. 策略模式利用组合，委托等技术和思想，有效的避免很多if条件语句。 2. 策略模式提供了开放-封闭原则，使代码更容易理解和扩展。 3. 策略模式中的代码可以复用。 一：使用策略模式计算奖金； 下面的demo是我在书上看到的，但是没有关系，我们只是来理解下...
单体模式提供了一种将代码组织为一个逻辑单元的手段，这个逻辑单元中的代码可以通过单一变量进行访问。 单体模式的优点是： 可以用来划分命名空间，减少全局变量的数量。使用单体模式可以使代码组织的更为一致，使代码容易阅读和维护。可以被实例化，且实例化一次。什么是单体模式？单体模式是一个用来划分命名空间并将一批属性和方法组织在一起的对象，如果它可以被实例化，那么它只能被实例化一次。 但是并非所有的对象字面量都是...
先来理解这么一个问题，假如我们前端开发接的需求是需求方给我们需求，可能一个前端开发会和多个需求方打交道，所以会保持多个需求方的联系，那么在程序里面就意味着保持多个对象的引用，当程序的规模越大，对象会越来越多，他们之间的关系会越来越复杂，那现在假如现在有一个中介者(假如就是我们的主管)来对接多个需求方的需求，那么需求方只需要把所有的需求给我们主管就可以，主管会依次看我们的工作量来给我们分配任务，这样的...
封装和信息隐藏为对象创建私有成员是任何面向对象语言中最基本和有用的特性之一。通过将一个方法或属性声明为私用的，可以让对象的实现细节对其他对象之间的耦合程度，可以保持数据的完整性并对其修改方式加以约束。在代码有许多人参与设计的情况下，这个可以使代码更可靠、更易于调试。简而言之，封装是面向对象的设计基石。尽管JavaScript是一种面向对象的语言，它并不具备用以将成员声明为公用或私用的任何内置机制。与讲述接口...
2. 接口接口是面向对象JavaScript程序员的工具箱中最有用的工具之一。GoF在《设计模式》一书中提出的可重用面向对象设计的第一条原则就说道：“针对接口而不是实现编程”，这个概念的基本性由此可见一斑。问题在于，JavaScript中没有内置的创建或实现接口的方法。他也没有内置的方法可以用于判断一个对象是否实现了另一个对象相同的一套方法，这种对象很难互换使用。好在JavaScript有这出色的灵活性，因此添加这些特性并非难事。先...