Javascript的封装

2016/11/17 周四 <javascript的封装简单示例>

这是一个简单的javascript代码封装的示例以及封装后的调用方法: var ticker={ n:0, add:function() { this.n++; }, show:function() { alert(this.n); } } ticker.add(); ticker.add(); ticker.show(); 以下是案例中的代码封装方法,解决了一定的安全问题与代码冗余问题: <!DOCTYPE html> <html> <head> <meta c…

第一百三十五节，JavaScript，封装库--拖拽

JavaScript,封装库--拖拽封装库新增1个拖拽方法 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:一般需要在css文件将元素里的某一个区块光标设置成提示可以拖拽,如:cursor: move; * 无参 **/ feng_zhuang_ku.prototype.tuo_zhuai = function () { if (this.jie_dian.length == 1) { var yan_su = null; for (var i = 0; i < th…

第一百三十四节，JavaScript，封装库--遮罩锁屏

JavaScript,封装库--遮罩锁屏封装库新增1个方法 /** zhe_zhao_suo_ping()方法,将一个区块元素设置成遮罩锁屏区块 * 注意:一般需要在css文件将元素设置成隐藏 **/ feng_zhuang_ku.prototype.zhe_zhao_suo_ping = function () { if (this.jie_dian.length == 1) { var yan_su = null; for (var i = 0; i < this.jie_dian.len…

第一百三十三节，JavaScript，封装库--弹出登录框

JavaScript,封装库--弹出登录框封装库,增加了两个方法 yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面,chuang_kou_shi_jian()方法,浏览器窗口事件,当窗口的大小变化时触发函数 /** yuan_su_ju_zhong()方法,将获取到的区块元素居中到页面, * 注意:使用此方法时,首先要在css里将目标区块设置成(绝对定位,position: absolute;) **/ feng_zhuang_ku.prototype.yuan_su_j…

第一百三十二节，JavaScript，封装库--下拉菜单

JavaScript,封装库--下拉菜单封装库,增加了3个方法 shu_biao_yi_ru_yi_chu()方法,给元素设置鼠标移入移出事件,接收两个参数,参数是移入和移出时的执行函数(包含代码) xian_shi()方法,设置元素显示,无参 yin_cang()方法,设置元素隐藏,无参 /** *feng_zhuang_ku_1.0版本,js封装库,2016/12/29日:林贵秀 **/ /** 前台调用 * 每次调用$()创建库对象,使其每次调用都是独立的对象 * $()创建库对象,有一…

第一百三十一节，JavaScript，封装库--CSS

JavaScript,封装库--CSS 将封装库里的方法,改成了原型添加方法增加4个方法 tian_jia_class()方法,给获取到的元素添加class属性,参数是class属性值,可以连缀1 yi_chu_class()方法,给获取到的元素移除class属性,参数是要移除的class属性值,可以连缀2 she_zhi_link_css()方法,设置link连接.或style内嵌.中的CSS样式3 yi_chu_link_css()方法,移除link连接.或style内嵌.中的CSS样式4…

第一百三十节，JavaScript，封装库--连缀

JavaScript,封装库--连缀学习要点: 1.连缀介绍 2.改写库对象本章我们重点来介绍,在调用库的时候,我们需要能够在前台调用的时候可以同时设置多个操作,比如设置CSS,设置innerHTML,设置click事件等等.那么本节课来讨论这个问题. 一．连缀介绍所谓连缀,最简单的理解就是一句话同时设置一个或多个节点两个或两个以上的操作.比如: $().getId('box').css('color', 'red').html('标题').click(function () {alert…

Openlayer3之C++接口在javaScript的封装使用

0.写在前面: 1)涉及的关键词定义: 传入:JavaScript向CAPI传值传出:CAPI向JavaScript传值 2)关于类和结构体的封装,需要严格执行内存对齐,以防止读取越界,但是避免不了经常会遇到长度不定的数组.字符串等,比较麻烦.所以我们采用的技术方案是将类打平成CAPI的方式进行封装,如下示例: 示例类: 打平成CAPI: 在.Net.Java.JavaScript等封装中再还原成类 1.基础类型在参数传入.返回值传出时,两边可以直接对应.类似的有指针.int.double等…

第一百四十二节，JavaScript，封装库--运动动画和透明度动画

JavaScript,封装库--运动动画和透明度动画 /** yi_dong_tou_ming()方法,说明 * * yi_dong_tou_ming()方法,将一个元素,进行一下动画操作 * 1,x将元素横向左移动或者右移动 * 2, y将元素竖向上移动或者下移动 * 3,w将元素动画增加或者减少宽度 * 4,h将元素动画增加或者减少高度 * 5,o将元素动画增加或者减少透明度 * ************************************* * x将元素横向左移动或者右移动,首…

第一百四十一节，JavaScript，封装库--DOM加载

JavaScript,封装库--DOM加载 DOM加载,跨浏览器封装DOM加载,当网页文档结构加载完毕后执行函数,不等待图片音频视频等文件加载完毕 /** dom_jia_zai()函数,DOM页面加载函数,等待页面结构加载完毕后就执行函数,不需要等待页面音频视频等文件加载完毕,提高加载速度 * 参数是页面结构加载完毕后要执行的函数 * 一般前写前台js文件时,使用此方法加载DOM页面后执行代码,提高速度 **/ function dom_jia_zai(fn){ var isReady = f…

第一百四十节，JavaScript，封装库--浏览器检测

JavaScript,封装库--浏览器检测在函数库编写一个,浏览器检测对象 /** sys浏览器检测对象,对象下有两个属性,liu_lan_qi属性和xi_tong属性 * liu_lan_qi属性,检测浏览器名称和版本号,如:alert(sys.liu_lan_qi); * xi_tong属性,检测浏览器运行环境,如:alert(sys.xi_tong); **/ (function () { //闭包,自我执行 window.sys = {}; //全局变量对象,保存浏览器信息 var u…

第一百三十九节，JavaScript，封装库--CSS选择器

JavaScript,封装库--修改元素选择器就是将构造库函数修改成元素选择器,像css那样,输入#xxx .xxx xxx (获取指定id下的指定class下的指定标签元素) 修改后的基础库 /** *feng_zhuang_ku_1.0版本,js封装库,2016/12/29日:林贵秀 **/ /** 前台调用 * 每次调用$()创建库对象,使其每次调用都是独立的对象 * $()创建库对象,有一个可选参数,参数有两种方式,1是传入的this,2是传入的字符串 * 可选参数说明: * 传入的…

第一百三十八节，JavaScript，封装库--插件

JavaScript,封装库--插件库主要是用来封装一般JavaScript的常规操作代码,而拖拽这种特效代码属于功能性代码,并不是必须的,所以这种类型的代码,我们建议另外封装,在需要的时候作为插件形式引入到库中,作为扩展. 在基础库设置一个extend()方法,来扩展插件 /** 插件入口,简单的理解就是通过extend()方法,向此基础库添加一个原型方法 * 此extend()方法,一般是给插件文件使用的,插件就是通过extend()方法,将插件方法添加到基础库原型的 * 接收两个参数 *…

第一百三十七节，JavaScript，封装库---修缮拖拽

JavaScript,封装库---修缮拖拽修缮拖拽 /** tuo_zhuai()方法,将一个弹窗元素实现拖拽功能 * 注意:有参设置拖拽点区块,只有弹窗的这个拖拽点区块才能拖拽,无参整个弹窗可以拖拽 * 注意:一般需要在css文件将弹窗元素里的某一个区块光标设置成提示可以拖拽,如:cursor: move; (设置拖拽点) * 有一个参数,参数是弹窗元素里的拖拽点区块的字符串class值(设置拖拽点的class值)设置后弹窗元素里的这个拖拽点区块才能拖拽 **/ feng_zhuang_ku…

第一百三十六节，JavaScript，封装库--事件绑定

JavaScript,封装库--事件绑定在函数库添加两个函数添加事件绑定函数删除事件绑定函数添加事件绑定函数 /** addEvent()函数库函数,跨浏览器添加事件绑定,注意:传入事件名称时不要on * 接收3个参数 * 参数1要绑定事件的元素对象, * 参数2事件名称,也就是什么事件,注意:传入事件名称时不要on * 参数3接收的事件执行函数 * 注意:一个元素对象,执行了多个相同的事件函数时只执行一次,其他的会被忽略,注意是相同的事件函数 * 说明: * 事件函数里的this,代表…

Javascript作业—封装type函数，返回较详细的数据类型

Javascript作业—封装type函数,返回较详细的数据类型思路: 1 取typeof的值,如果是数字.函数等非对象类型,直接取类型 2 如果是object类型,则调用Object.prototype.toString <script> //返回较详细的数据类型;数字number,数组-array,对象-object等 function type(arg){ var tp = typeof(arg) ; var tostr=Object.prototype.toString; retur…

JavaScript的封装和继承

提到JavaScript"面向对象编程",主要就是封装和继承,这里主要依据阮一峰及其他博客的系列文章做个总结. 继承机制的设计思想所有实例对象需要共享的属性和方法,都放在这个对象里面:那些不需要共享的属性和方法,就放在构造函数里面. 由于所有的实例对象共享同一个prototype对象,那么从外界看起来,prototype对象就好像是实例对象的原型,而实例对象则好像"继承"了prototype对象一样. 封装主要介绍了如何"封装"数据和方法,以…

JavaScript 模块封装

JavaScript 模块封装前言介绍在最早的时候JavaScript这门语言其实是并没有模块这一概念,但是随着时间的推移与技术的发展将一些复用性较强的代码封装成模块变成了必要的趋势. 在这篇文章中主要介绍原生的 JavaScript封装的几种手段以及新增的 ES6 Module的语法,来实现模块封装. 并且会简单的使用Webpack让Es6代码向后兼容. 引入问题以下有两个Js文件,如果不采取任何封装手段直接导入会导致window环境污染. 并且,如果文件中有相同名字的变量或函数会发生命…

JavaScript使用封装

基本封装方法请看下面的例子: var Person = function(name,age){ this.name = name; this.age = age || "未填写"; this.hobbys = []; } Person.prototype = { sayName:function(){ console.log(this.name); }, sayAge:function(){ console.log(this.age); }, addHobby:function(ho…

Javascript面向对象(封装、继承)

Javascript 面向对象编程(一):封装作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果我们要把"属性"(property)和"方法"(method),封装成一个对象,甚至要从原型对象生成一个实例对象,我们应该怎么做呢? 一. 生成实例对象的原始模式假定我们把猫看成一个对象,它有"名…

javascript的封装实例

StringBuffer方法的js自定义封装: <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""&g…

js的封装分为以下几种模式: 工厂模式,代码如下: <!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content="">…

javascript 之封装技巧

技术--- 闭包 javascript中的对象属性都是公开的,外界都可访问到,例: function cat(){ this.name = '猫'; this.climb = function(){ alert('我会爬树!'); } } var boshi = new cat(); alert(boshi.name); boshi.climb(); cat对象中被实例化,name属性和climb方法都能被直接调用,没有被私有,但是我们可以用闭包模拟封装 function cat(){ var…

2、.net NVelocity中原生javascript ajax封装使用

在页面上,我们经常会遇到局部刷新的例子,这个时候,就需要用到ajax, 因为很多代码都是公用的,所以我们想到了,将代码封装,简化了使用,减少了冗余 javascript ajax代码如下: var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性 xmlhttp.open("POST", "AJ…

Javascript 进阶封装

js中处处是对象,面向对象的第一步当然就是封装了,由于Js中没有类的概念,所以封装起来也比较麻烦,下面介绍两种js的封装. 1.使用约定优先的原则,将所有的私有变量以_开头 <script type="text/javascript"> /** * 使用约定优先的原则,把所有的私有变量都使用_开头 */ var Person = function (no, name, age) { this.setNo(no); this.setName(name); this.setAg…

【JavaScript】封装实用方法【持续积累】

介绍主要记录一些平时积累或者常用方法或者小技巧的集合.以便在以后用到还要重复写或者忘记. 还有就是如果遇到好的方法封装值得收藏进行收藏.这里主要是记录一些包含JavaScript的一些积累.没有什么样式和页面的操作. 可能会存在一些你认为不是很好或者用不到的.如果你有更好的请指正.交流分享,方便大家,一起进步. 1.根据文件名切换附件显示图片 /** *@method *@param {name} 文件全称 *@returns 返回该文件类型对应的图片地址 */ VerTypeToImage:…

javascript之封装（引用网络）

一. 例:事件监听封装 jQuery 中的事件监听,完全可以用 addEventListener/attachEvent 模拟,分别对应于现代浏览器和 IE ,可以把两个方法封装一下,但是为了方便,这里把其他事件相关处理,如移除事件监听.阻止默认事件等方法统一写在一个对象中,方便调用,具体代码如下: // 事件处理对象 var EventUtil = { // 添加事件监听 add: function(element, type, callback){ if(element.addEventLi…

javascript如何封装函数

通常写js组件开发的,都会用到匿名函数的写法去封装一个对象,与外界形成一个闭包的作用域.封装,全天下漫天遍野的封装,JQuery,EXT和Prototype.js封装的是javascript,jQuery uI和jQuery mobile封装着jQuery,java中的JDBC在spirng,Hibernate等框架封装着. <!doctype html> <html lang="en"> <head> <meta charset="…

javaScript函数封装

本篇封装了一些常用的函数,兼容IE8及以下的浏览器,怪异模式. 按需加载loadScript().绑定事件处理函数addEvet().查看滚动尺寸getScrollOffset().查看可视区窗口尺寸getViewportOffset().返回计算样式getStyle().获取事件源对象getEventScr(e).判断类型type().取消冒泡stopBubble().深度克隆deepClone().阻止默认事件cancelHandler().字节长度排序retBytes().拖拽方块drag…

『JavaScript』封装

封装可以被定义为对对象的内部数据表现形式和实现细节进行隐藏.通过封装可以强制实施信息隐藏. 在JavaScript中,并没有显示的声明私有成员的关键字等.所以要想实现封装/信息隐藏就需要从另外的思路出发.我们可以使用闭包的概念来创建只允许从对象内部访问的方法和属性,来达到封装的要求. 基本方式一般来说,我们学用的有三种方法来达到封装的目的. 使用this.XXX来声明一个变量,然后再声明getXXX.setXXX等取值.赋值的方法. 使用this._XXX来声明一个变量,然后再声明getXXX…

【Javascript的封装】的更多相关文章