js代码 | 易学教程

js_单例设计模式

阅读更多关于 js_单例设计模式

实现单例模式单例模式的定义：保证一个类仅有一个实例，并提供一个访问它的全局访问点。单例模式的实现：主要通过创建一个标志变量来保存第一次创建过的实例，当下一次获取该类的实例时进行判断标志变量是否已经被赋值，如果已被赋值直接返回标志位上保存的值。 //第一种 var Singleton = function ( name ) { this . name = name ; this . instance = null ; } ; Singleton . prototype . getName = function ( ) { alert ( this . name ) ; } ; Singleton . getInstance = function ( name ) { if ( ! this . instance ) { this . instance = new Singleton ( name ) ; } return this . instance ; } ; var a = Singleton . getInstance ( 'sven1' ) ; var b = Singleton . getInstance ( 'sven2' ) ; alert ( a === b ) ; // true //第二种 var Singleton = function ( name )

JS异步顺序执行

阅读更多关于 JS异步顺序执行

因为工作的需要，我要在网页端编写一段脚本，把数据通过网页批量提交到系统中去。所以我就想到了Greasemonkey插件，于是就开始动手写，发现问题解决得很顺利。但是在对脚本进行总结和整理的时候，我习惯性地问了自己一个问题：能不能再简单点？我的答案当然是“能”。首先回顾我的数据批量提交的需求：我有一批用户数据要插入到系统中，但是因为系统库表结构不是行列式的，所以无法转化为sql语句插入。要插入的数据有接近200条，就是傻呵呵地手工录入到系统，估计也要1天的时间。作为程序员，当然不会干这么傻的事情，我一定要用程序来解决。这个编程的过程耗费了我1天的时间。相比手工录入，我额外收入是这篇博文，绝对的合算！编程平台选择没花费时间，直接选定基于Greasemonkey写自己的脚本，浏览器当然是firefox了。脚本的工作过程：在脚本中预先存放要插入的数据模拟鼠标点击，打开页面中的输入窗口将数据录入到输入窗口，并模拟点击“提交”按钮，将数据提交到系统中。依次循环，直到所有数据都处理完毕。这里的技术难点在于：打开输入窗口，需要等待不定期的时间，视网络情况而定。提交数据到后台，需要等待处理完毕之后才可以循环下一个数据。如果我是菜鸟的话，我当然直接写一个类似这样的应用逻辑： for(var i = 0; i < dataArray.length; ++i) { 3:

js中去除两端逗号

阅读更多关于 js中去除两端逗号

js中去除两端逗号 1.js replace(a,b)之替换字符串中所有指定字符的方法 1 2 3 4 5 6 7 8 9 10 var str = 'abcadeacf' ; var str1 = str.replace( 'a' , 'o' ); alert(str1); // 打印结果： obcadeacf var str2 = str.replace(/a/g, 'o' ); alert(str2); //打印结果： obcodeocf, 注意：此处replace的第一个参数为正则表达式，/g是全文匹配标识。 2. JS四种方法去除字符串最后的逗号 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 <script> window.onload= function () { var obj = {name: "xxx" , age: 30, sex: "female" }; //定义一个object对象 var str = '' //定义一个空字符用来接收对象里的key或者value for ( var item in obj) { //遍历item变量里的对象的属性和元素， str += obj[item] + "," //将obj对象的值遍历出来，并且追加到str字符中。 //str +=

js中的内部属性与delete操作符

阅读更多关于 js中的内部属性与delete操作符

本文正式地址： http://www.xiabingbao.com/javascript/2015/08/03/javascript-delete-configurable 在讲解 Configurable 之前，我们首先来看一道面试题： a = 1; console.log( window.a ); // 1 console.log( delete window.a ); // true console.log( window.a ); // undefined var b = 2; console.log( window.b ); // 2 console.log( delete window.b ); // false console.log( window.b ); // 2 从上面的这道题可以看出两个的区别：在没有使用var声明变量时，使用delete关键词是可以进行删除的，再次获取时值就是undefined了；在使用var声明的变量，使用delete是不能删除的，再获取时值依然是2。 1. delete操作符使用delete删除变量或属性时，删除成功返回true，否则返回false。如上面的例子中，delete无法删除变量a时，则返回false；而delete能成功删除变量b，则返回true。除了上述的两种情况，还有其他的各种常用变量也有能被delete删除的

JS DOM创建节点

阅读更多关于 JS DOM创建节点

DOM节点操作之增删改查 document.write() 可以向文档中添加节点但是有个致命问题，会把文档原有的节点全部清空因此不推荐使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ width:100%; height:100%; } </style> <script src="DomReady.js"></script> </head> <body> 这是原有的节点哦~ <script> myReady(function(){ document.write("这是document.write创建的节点！"); }); </script> </body> </html> create系列方法： document.createElement 创建元素节点 document.createTextNode 创建文本节点 document.createComment 创建注释节点 document.createDocumentFragment 创建文档片段节点 .appendChild() 追加子元素 document.body.insertBefore(要插入的节点，插入的位置); 在指定位置前插入节点 .firstChild

腾讯前端一面总结

阅读更多关于腾讯前端一面总结

看到一片特别好的文章原文作者：广工小成 https://segmentfault.com/a/1190000013654696 前言腾讯一面，相比阿里一面来说，腾讯一面先给打电话预定时间，这也给了我们这些面试者去准备的时间。但是也正是因为这种确定性，也有在等待电话的时候的心情的忐忑。背景我是一名大三学生，大一在学校acm集训队，后来转向学习java，又去开发Android，在期间，学会怎么去解决一些编程遇到的问题以及灵活运用github。在大二寒假的时候，开始接触学习前端，如今已经一年了，一开始是做百度前端技术学院( http://ife.baidu.com/2016/task/all)的任务，学习了html和css，以及参考别人优秀的代码。 js是通过红宝石，js高级教程第三版开始入门学习的，这本书里面的基础知识很精髓，那时候我也很有耐心的去看完了，虽然说可能实践还是跟不上理论，因为后面做的项目基本都是用框架去做项目，而导致对于基础知识的实践比较少。接下来，我们进入正题吧。腾讯一面首先，接到电话的时候，由于之前心情的忐忑，情绪还是有点兴奋的，以期待的口气向面试官问好，面试官也问问好之后就开始进入面试题了。【你先简短的介绍一下自己】在这里，我就简短的介绍了自己的学校专业，应聘的岗位，以及是怎么走向学习前端的道路，也就和我写的背景差不多。【你是怎么学习前端的？】

跨域与防止表单重复提交

阅读更多关于跨域与防止表单重复提交

什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源嵌入： <link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求： js发起的ajax请求、dom和js对象的跨域操作等其实我们通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。什么是同源策略？同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制以下几种行为： 1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送常见跨域场景 URL 说明是否允许通信 http://www.domain.com/a.js http://www.domain.com/b.js 同一域名，不同文件或路径允许 http://www.domain.com/lab/c

js 字符串操作函数

阅读更多关于 js 字符串操作函数

走进前端行业已有两年之久，对于字符串的操作也是家常便饭了，但也总在查查找找，如今对于我这个强迫症患者开始爆发了。对字符串的操作做以下整理，废话不多说直接走起来。 1、字符串转换字符串转换是最基础的要求和工作，你可以将任何类型的数据都转换为字符串，你可以用下面三种方法的任何一种： var num=24; var mystr=num.toString(); //"24" 你同样可以这么做： var num=24; var mystr=String(num); //"24" 或者，在简单点儿： var num=24; var mystr="" + num; //"24" 2、字符串分割将字符串进行拆分返回一个新的数组，JavaScript就给我们提供了一个非常方便的函数： var mystr="qingchenghuwoguoxiansheng,woaishenghuo,woaiziji"; var arr1=mystr.split(","); //["qingchenghuwoguoxiansheng","woaishenghuo","woaiziji"]; var arr2=mystr.split(""); //["q","i","n","g","c","h","e","n","g","h","u","w","o","g","u","o","x","i","a","n","s"

vue数据双向绑定的原理

阅读更多关于 vue数据双向绑定的原理

一、vue的实现原理 Vue.js采用ES5提供的属性特性功能，结合发布-订阅模式，通过Object.defineOrototype()为各个定义set、get特性方法，在数据发生变化时给订阅者发布消息，触发相应的监听回调。具体步骤如下：对需要观察的数据对象进行递归遍历，包括子属性对象的属性，设置set和get特性方法。当给这个对象的某个值赋值时，会触发绑定的set特性方法，于是就能监听到数据变化。用complie解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将各个指令对应的节点绑定更新函数，添加监听数据的订阅者。一旦数据有变动，就会收到通知，并更新视图。 Watcher订阅者是Observer发布者和complie解析模板指令之间通信的桥梁，主要功能如下：在自身实例化时像属性订阅器（Dep）里面添加自己；自身必须有一个update()方法；在dep.notice()发布通知时，能调用自身的update()方法，并触发complie中绑定的回调函数。 MVVM是数据绑定的入口，整合了Watcher、Observer、Complie三者，通过Observer来监听自己的model数据变化，通过Complie来解析模板指令，最终利用Watcher搭起Observer和Complie之间的通信桥梁，达到数据变化通知视图更新的的效果。利用视图交互

js 实现图片无限横向滚动效果

阅读更多关于 js 实现图片无限横向滚动效果

门户网站好多都有产品无线滚动展现的效果：测试demo1 -- 非无缝滚动（可以看出来从头开始的效果）: css样式如下： .box{ width: 1000px; border: 1px solid #ccc; overflow: hidden; height: 110px; margin: 50px auto; white-space: nowrap; position: relative; } .con1{ width: 1000px; height: 110px; overflow: hidden; position: absolute; left: 0; } .con2{ position: absolute; overflow: hidden; opacity: 0; } html代码如下： <div class="box"> <div class="con1"> <li><img src="img/SD_1.jpg" alt=""></li> <li><img src="img/SD_2.jpg" alt=""></li> <li><img src="img/SD_3.jpg" alt=""></li> <li><img src="img/SD_4.jpg" alt=""></li> <li><img src="img/SD_5.jpg" alt=""></li>

订阅 js代码