js | 易学教程

js阻止事件冒泡

阅读更多关于 js阻止事件冒泡

<body>　　<form id="form1" runat="server">　　　　<div id="divOne" onclick="alert('我是最外层');">　　　　　　<div id="divTwo" onclick="alert('我是中间层！')">　　　　　　　　<a id="hr_three" href="http://www.baidu.com" mce_href="http://www.baidu.com"onclick="alert('我是最里层！')">点击我</a>　　　　　　</div>　　　　</div>　　</form></body> 比如上面这个页面，分为三层：divOne是第外层，divTwo中间层，hr_three是最里层; 他们都有各自的click事件，最里层a标签还有href属性。运行页面，点击“点击我”,会依次弹出：我是最里层---->我是中间层---->我是最外层 ---->然后再链接到百度. 这就是事件冒泡，本来我只点击ID为hr_three的标签，但是确执行了三个alert操作。事件冒泡过程（以标签ID表示）：hr_three----> divTwo----> divOne 。从最里层冒泡到最外层。如何来阻止? 1.event.stopPropagation(); <script type="text

JS中5种经典继承方式

阅读更多关于 JS中5种经典继承方式

继承 JS中继承的概念：通过【某种方式】让一个对象可以访问到另一个对象中的属性和方法，我们把这种方式称之为继承并不是所谓的xxx extends yyy 为什么要使用继承？有些对象会有方法(动作、行为)，而这些方法都是函数，如果把这些方法和函数都放在构造函数中声明就会导致内存的浪费 function Person(){ this.say=function(){ console.log("你好") } } var p1=new Person(); var p2=new Person(); console.log(p1.say === p2.say); //false 继承的第一种方式：原型链继承1 Person.prototype.say=function(){ console.log("你好") } 缺点：添加1、2个方法无所谓，但是如果方法很多会导致过多的代码冗余继承的第二种方式：原型链继承2 Person.prototype = { //切记不能忘记 constructor:Person, say:function(){ console.log("你好"); }, run:function(){ console.log("正在进行百米冲刺"); } } 注意点： a、一般情况下，应该先改变原型对象，再创建对象 b、一般情况下，对于新原型

JS模拟实现封装的三种方法

阅读更多关于 JS模拟实现封装的三种方法

前言　继承是使用一个子类继承另一个父类，那么子类可以自动拥有父类中的所有属性和方法，这个过程叫做继承！ JS中有很多实现继承的方法，今天我给大家介绍其中的三种吧。 1.在 Object类上增加一个扩展方法 //声明一个父类 function Person(name,age){ this.name=name; this.age=age; this.say=function(){ alert("我叫"+this.name); } } //声明一个子类 function Student(no){ this.no=no; this.study=function(){ alert("我在学习！"); } } // 通过循坏，将父类对象的所有属性和方法，全部赋给子类对象 Object.prototype.extend=function(parent){ for(var i in parent){ this[i].parent[i]; } } var p=new Person("张三",12); var s=new Student("1234567"); //子类对象调用这个扩展方法 s.extend() console.log(s); 上述实现继承的原理：通过循坏，将父类对象的所有属性和方法，全部赋给子类对象。关键点在于for-in循坏，即使不扩展Object

js创建对象

阅读更多关于 js创建对象

说到创建对象，我刚开始想到的就是构造函数创建和对象字面量创建，但今天看了书之后，发现创建对象不止这么简单，以下是我的看书后的理解和一些疑惑，在此纪录： //构造函数 var obj1=new Object(); //对象字面量 var obj={ name:"ellen", age:"21" } 构造函数和对象字面量是常用的方法，但缺点是“使用同一个接口创建很多对象，会产生大量重复代码”（这句话感觉没理解清楚，现在理解为如果要创建几个相似对象，他们都有name,age,job,如果用这两种方法，会一直写name,age,job，100个对象就要写100次...）。工厂模式抽象了创建具体对象的过程，用函数来封装以特定接口创建对象 function createPerson(name,age,job) { var o=new Object(); o.name=name; o.age=age; o.job=job; o.sayName=function(){ alert(this.name); } return o; } var person1=createPerson("kun",33,"老师"); 这样创建一个对象时，就已经带有name,age,job属性和sayName方法了。解决了之前会造成对个相似对象问题。但没有“解决识别问构造函数模式除了像Object

JS迭代

阅读更多关于 JS迭代

for each...in 使用一个变量迭代一个对象的所有属性值。对于每一个属性值，有一个指定的语句块被执行。作为ECMA-357(E4X)标准的一部分，for each...in语句已被废弃，E4X中的大部分特性已被删除，但考虑到向后兼容，for each...in只会被禁用而不会被删除，可以使用ES6中新的for...of语句来代替。大部分非Mozilla浏览器都没有实现该标准，E4X并不是 ECMAScript 标准的一部分。语法 for each (variable in object) { statement } 参数 variable 用来遍历属性值的变量，前面的var关键字是可选的。该变量是函数的局部变量而不是语句块的局部变量。 object 该对象的属性值会被遍历。 statement 遍历属性值时执行的语句。如果想要执行多条语句，请用({ ... }) 将多条语句括住。警告永远不要使用for each...in语句遍历数组，仅用来遍历常规对象。一些对象的内置属性是无法被遍历到的,包括所有的内置方法，例如String对象的indexOf方法。不过，大部分的用户自定义属性都是可遍历的。 for...in for...in语句以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。语法 for (variable in object) {

OC与JS的交互（iOS与H5混编）

阅读更多关于 OC与JS的交互（iOS与H5混编）

大神总结WKWebView的坑： https://mp.weixin.qq.com/s/rhYKLIbXOsUJC_n6dt9UfA 在开发过程中，经常会出现需要iOS移动端与H5混编的使用场景。 iOS中加载html网页，可以使用UIWebView或WKWebView. 本篇博客将介绍两种控件使用过程中如何实现OC与JS的交互。 UIWebView delegate 协议方法 //网页即将开始加载 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType; //网页开始加载 - (void)webViewDidStartLoad:(UIWebView *)webView; //网页加载完成 - (void)webViewDidFinishLoad:(UIWebView *)webView; //网页加载失败 - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error; //UIWebView自带了一个方法, 可以直接调用JS代码(转化为string类型的js代码)

Android之WebView学习

阅读更多关于 Android之WebView学习

WebView常用方法 WebSettings 在使用WebView前我们都要进行相关的配置，常见的操作如下： WebSettings settings = mWebView.getSettings(); settings.setJavaScriptEnabled(true); //支持javascript settings.setUseWideViewPort(true); //设置webview推荐使用的窗口，使html界面自适应屏幕 settings.setLoadWithOverviewMode(true); //缩放至屏幕的大小 settings.setAllowFileAccess(true); //设置可以访问文件 // settings.setDefaultZoom(WebSettings.ZoomDensity.MEDIUM); //设置中等像素密度，medium=160dpi settings.setSupportZoom(true); //设置支持缩放 settings.setLoadsImagesAutomatically(true); //设置自动加载图片 // settings.setBlockNetworkImage(true); //设置网页在加载的时候暂时不加载图片 // settings.setAppCachePath(""); //设置缓存路径

JS设计模式（14）适配器模式

阅读更多关于 JS设计模式（14）适配器模式

什么是适配器模式？定义：将一个类的接口转换成客户希望的另外一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。主要解决：主要解决在软件系统中，常常要将一些"现存的对象"放到新的环境中，而新环境要求的接口是现对象不能满足的。何时使用： 1、系统需要使用现有的类，而此类的接口不符合系统的需要。 2、想要建立一个可以重复使用的类，用于与一些彼此之间没有太大关联的一些类，包括一些可能在将来引进的类一起工作，这些源类不一定有一致的接口。 3、通过接口转换，将一个类插入另一个类系中。（比如老虎和飞禽，现在多了一个飞虎，在不增加实体的需求下，增加一个适配器，在里面包容一个虎对象，实现飞的接口。）如何解决：继承或依赖（推荐）。关键代码：适配器继承或依赖已有的对象，实现想要的目标接口。应用实例： 1、美国电器 110V，中国 220V，就要有一个适配器将 110V 转化为 220V。 2、JAVA JDK 1.1 提供了 Enumeration 接口，而在 1.2 中提供了 Iterator 接口，想要使用 1.2 的 JDK，则要将以前系统的 Enumeration 接口转化为 Iterator 接口，这时就需要适配器模式。 3、在 LINUX 上运行 WINDOWS 程序。 4、JAVA 中的 jdbc。优点： 1

android js 互相调用

阅读更多关于 android js 互相调用

代码地址如下： http://www.demodashi.com/demo/13107.html android js 互相调用第二版支持js匿名函数接收支持js json对象接收支持js函数返回值获取通过注解注入js方法优化第一版的反射注入方式，采用注解处理器编译时生成注入代码,提高运行效率加入简单的 webview 预加载功能实现原理通过注解处理器实现js代码自动生成创建WebViewChromeClient重写 onProgress方法当进度大于30%的时候执行js代码注入,js代码必须注入成功才能调用 js代码生成逻辑 /** * 注解处理器 */ @AutoService(Processor.class) public class InjectProcessor extends AbstractProcessor { /** * 文件相关的辅助类 */ private Filer mFiler; /** * 元素相关的辅助类 */ private Elements mElementUtils; /** * 日志相关的辅助类 */ private Messager mMessager; //返回注解处理器可处理的注解操作 //@Override public Set<String> getSupportedOptions() { // return

Android-webview和js互相调用

阅读更多关于 Android-webview和js互相调用

Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛。市面上很多App都是使用Android开发的，但使用Android来开发一些比较复杂附属类，提示性的页面是得不偿失的。而H5具有开发速度快，更新不用依赖于App的更新，只需要服务端更新相应的页面即可，所以，App和H5页面相结合就显得尤为重要。而android和H5都不可能每次都是独立存在的，而是相互影响也相互的调用，获取信息等，例如，H5页面要获取App中的用户的基本信息，或者App端要操作H5页面等，下面来看看这两是怎么交互的。先来看一下项目的整体架构（Android studio中的项目）整个项目的结构就是这样的，里面最主要的就是assets下面的js_webView.html文件和代码中的WebViewJsActivity，其中项目里面的MainActivity只是做了个跳转而已，跳转到WebViewJsActivity。就这样。下面上代码：(js_webView.html) html里面的代码也比较简单，整个html中就一个Button，点击这个Button的时候去执行javascript中的 jsCallAndroid() 方法。网页中有关 javascript 的代码也比较简单，整个 js 就2个方法，一个是 jsCallAndroid() ，一个是

订阅 js