js封装与 js高级用法问题集合

用require.js封装原生js轮播图

index.html页面: <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>require.js封装轮播图</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } #banner{ width: 830px; hei…

1. 什么是自执行的匿名函数? 它是指形如这样的函数: (function {// code})(); 2. 疑问为什么(function {// code})();可以被执行, 而function {// code}();却会报错? 3. 分析 (1). 首先, 要清楚两者的区别: (function {// code})是表达式, function {// code}是函数声明. (2). 其次, js"预编译"的特点: js在"预编译"阶段, 会解释函数声明…

【转】Vue.js中 watch 的高级用法

假设有如下代码: <div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p> </div> new Vue({ el: '#root', data: { firstName: 'Dawei', lastName: 'Lou', fullName: '' },…

Vue.js中 watch 的高级用法

js中“||”和“&&”的高级用法

例1:用于赋值&&:从左往右依次判断,当当前值为true则继续,为false则返回此值(是返回未转换为布尔值时的原值哦)|| : 从左往右依次判断,当当前值为false则继续,为true则返回此值(是返回未转换为布尔值时的原值哦) var attr = attr || “”;这个运算经常用来判断一个变量是否已定义,如果没有定义就给他一个初始值,这在给函数的参数定义一个默认值的时候比较有用.因为js不像php可以直接在型参数上定义func($attr=5).再次提醒你记住上面的原则:如果实参…

原生JS封装 toast 弹层，自动关闭

由于公司业务需求,要一个公共toast ,下面是自己封装的一个. css: .toast { text-align: center; min-height: 70px; width: 220px; color: #e6e6e6; border-radius: 4px; background: rgba(0, 0, 0, 0.7); position: fixed; left: 43%; top: 40%; } .toast-icon { padding-top: 10px; padding-bo…

JS封装动画框架,网易轮播图,旋转轮播图

JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架添加回调函数 function animate(obj,json,fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { var flag = true; // 用来判断是否停止定时器一定写到遍历的外面 for(var attr in json){ // attr 属性 json[attr] 值 //开始遍历 json //…

JsQuick--个人封装的Js库

JsQuick 该库为本人封装的Js库,尚未进行浏览器兼容 /** * 快速框架版本:1.0.0 * 日期:2015.02.26 * 作者:简楚恩 */ /** * 快速获取控件类 */ var $={ /** * 根据ID获取对象 $.id("对象名称"); * @param {Object} id 对象名称 */ id:function(id){//根据ID获取对象 return "string" == typeof id ? document.getElem…

【JavaScript框架封装】使用原生js封装的类似于JQuery的框架及核心源码分享（多文件版本）

这个版本的JQuery是对上一个版本的JQuery,使用了require.js进行了二次封装,基本上把前面的每一个框架封装成为一个单独的模块,最终的目录结构如下: 由于代码量和目录比较多,这个封装好的代码和目录已经全部上传到GitHub上面,需要的同学可以前往下载哈. https://github.com/xiugangzhang/JavaScript-Xframe [main.js]这个是模块文件的主入口函数 /** * @Desc : 主要的功能模块展示 * @Author : xiugan…

原生JS封装Ajax插件(同域&&jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.…

使用NW.js封装微信公众号菜单编辑器为桌面应用

开发微信公众号的朋友都会遇到一个常见的需求就是修改自定义菜单,如果每个人都去开发这个不经常使用的功能确实有点浪费时间.前段时间在github上找到一个仿企业号的菜单编辑界面,结合微信的C# SDK开发了自定义菜单的编辑发布功能,源码.做为程序员我们经常想追求完美,于是打算做成桌面版,搜索了cef.webkit.net.nw.js等方案后,决定使用nw.js尝试一下........经过几天的摸索后终于完成了,这篇博客也是保存了N次草稿.先上个截图: 准备工作事情开始之前先看看别人是怎么做的,有个…

用jQuery基于原生js封装的轮播

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址的数组,图片宽度,上一页,下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间.功能:实现了轮播的自动轮播,可以点击上一页,下一页进行切换. 下面是html中的代码,只需要把存放的容器写好,引入jquery即可: <!DOCTYPE px;"> </…

原生JS封装简单动画效果

原生JS封装简单动画效果一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(obj.timer) { //判断定时器是否存在,决定是否清空 clearInterval(obj.timer); } obj.timer = setInterval(function() { var leader = obj.offsetLeft; var step = num;//num为你移动一步…

使用原生JS封装Ajax

使用原生的JS封装 Ajax,实现仿JQuery的Ajax,post,get三种异步请求方式: var MAjax = { //根据浏览器创建异步对象 createXhr: function () { //经测试:IE7.0及以上版本的IE,两种异步创建的两种方式都支持 //如果XMLHttpRequest存在,则是IE7.0及其它内核,则直接创建异步对象(!==非全等于, === 全等于) if (typeof XMLHttpRequest !== 'undefined') { //相当!…

JS里设定延时:js中SetInterval与setTimeout用法

js中SetInterval与setTimeout用法 JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function",time) 设置一个超时对象 setInterval("function",time) 设置一个超时对象 SetInterval为自动重复,setTimeout不会重复. clearTimeout(对象) 清除已设置的s…

封装常用的js（Base.js）——【01】理解库，获取节点，连缀，

封装常用的js(Base.js)——[01]理解库,获取节点,连缀, youjobit07 2014-10-10 15:32:59 前言: 现如今有太多优秀的开源javascript库,比如jQuery,Prototype,Dojo等等,这些javascript库已经把最常用的代码进行了有效的封装,以便我们开发,从而提高效率.现在我这里探讨的是自己创建一个javascript库,自己创建的肯定没有那些开源javascript库功能强大,目的主要是为了提升自己的原生javascrip…

js封装的方法

1.JS封装就是尽量把使用的方式简单化,内部逻辑和使用解耦.通俗的说就是使用的时候只需要知道参数和返回值,其他条件尽量不要使用人员进行设置. 2.JS封装的方法有函数方式.对象的方式.闭包的方式. 举例 1)函数方式 function kk(a,b){ 内部对a,b怎么处理就不需要关心了 } 2)对象方式 function kk(a,b){ this.x = a; this.y = b; } var k = new kk(1,2);//通过面向对象的方式 alert(k.x…

jQuery Ajax通用js封装

第一步:引入jQuery库 <script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script> 第二步:开发Ajax封装类,已测试通过,可以直接调用,直接贴代码,讲解就省了 /***************************************************************** jQuery Ajax封装…

JS封装cookie操作函数实例(设置、读取、删除)

本文实例讲述了JS封装cookie操作函数.分享给大家供大家参考,具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 /*设置cookie*/ function setCookie(name, value, iDay) { var oDate=new Date(); oDate.setDate(oDate.getDate()+iDay); document.cook…

关于js封装框架类库之选择器引擎（二）

在上篇介绍了选择器的获取标签.id.类名的方法,现在我们在上篇基础上继续升级 1.问题描述:上篇get('选择器')已经实现,如果get方法里是一个选择器的父元素,父元素是DOM对象,那么如何获取元素思路:1.首先想到的是标签.id.类名的三个方法 2.假设是body节点,那么方法中的document改成body 3.传入的参数如何判断是否为DOM 注意:在获取id方法中全局也只有一个id,所以其中的doument无须修改修改如下 // 注释: 对获取DOM对象方法的封装 var getT…

原生Js封装的弹出框-弹出窗口-页面居中-多状态可选

原生Js封装的弹出框-弹出窗口-页面居中-多状态可选实现了一下功能: 1.title可自定义可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出框里的html 5.确定取消按钮可选调用方法: 1 Prompt.add();//生成遮罩和弹出div 2 3 4 5 Prompt.init({ //修改参数 6 title : "我是个alert弹出框", 7 shade : true, 8 opacity : 20, 9 wid…

原生JS封装创建多级菜单函数

手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构废话不多说,展示代码.先展示数据代码,注意,使用此封装函数需要满足此数据结构. var data = [{ id: 1, address: "安徽", parent_id: 0 }, { id: 2, address: "江苏", parent_id: 0 }, { id: 3, addre…

Js封装的动画函数实现轮播图

---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示项目目录结构用到的js封装的animate()动画 function animate(element, target) { clearInterval(element.timeId); //定时器的id值存储到对象的一个属性中 element.timeId = setInterval(function () { //获取元素的当前的位置,数字类型 var curre…

sencha touch/Ext Js 6 + 自定义扩展的用法

app.js中加入以下代码 //指定ux起调目录 Ext.Loader.setPath({ 'ux': 'app/ux' }); 在app目录中创建一个ux文件夹假如我们使用这个扩展,扩展地址:http://www.cnblogs.com/mlzs/p/4151504.html 新建一个名为BMap.js的文件,把扩展代码放进去就可以用了,使用时注意requires:['ux.BMap']: 如果自定义扩展类名是ux.xx.xx这种,例如http://www.cnblogs.com/mlzs/…

js replace 与replaceall实例用法详解

这篇文章介绍了js replace 与replaceall实例用法详解,有需要的朋友可以参考一下stringObj.replace(rgExp, replaceText) 参数 stringObj 必选项.要执行该替换的 String 对象或字符串文字.该字符串不会被 replace 方法修改. rgExp 必选项.为包含正则表达式模式或可用标志的正则表达式对象.也可以是 String 对象或文字.如果 rgExp 不是正则表达式对象,它将被转换为字符串,并进行精确的查找;不要尝试将字符串转化为…

JSON用法之将PHP数组转JS数组，JS如何接收PHP数组

先看php文件,当我们获取到$arr这个数组后 foreach ($arr as $value) { $json .= json_encode($value) . ','; } echo '[' . substr($json,0,strlen($json) - 1) . ']'; json_encode()是将$arr的每一个值进行json编码,然后我们想输出一个json的数组,所以我们将每个编译后的值后面加一个逗号并且最后在所有值外面加上'[]',这是json数组的格式,注意因为我们在将每一个…