js | 易学教程

CommonJS和AMD/CMD

阅读更多关于 CommonJS和AMD/CMD

先回答我：为什么模块很重要？答：因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。但是，这样做有一个前提，那就是大家必须以同样的方式编写模块，否则你有你的写法，我有我的写法，岂不是乱了套！于是下面三个模块规范出来了，这篇文章也出来了（拼出来的 {捂脸笑}）。 JS中的模块规范（CommonJS，AMD，CMD），如果你听过js模块化这个东西，那么你就应该听过或CommonJS或AMD甚至是CMD这些规范咯，我也听过，但之前也真的是听听而已。现在就看看吧，这些规范到底是啥东西，干嘛的。本文包括这三个规范的来源及对应的产物的原理。一、CommonJS 1.一开始大家都认为JS是辣鸡，没什么用，官方定义的API只能构建基于浏览器的应用程序，逗我呢，这太狭隘了吧(用了个高端词，嘎嘎)，CommonJS就按耐不住了，CommonJS API定义很多普通应用程序（主要指非浏览器的应用）使用的API，从而填补了这个空白。它的终极目标是提供一个类似Python，Ruby和Java标准库。这样的话，开发者可以使用CommonJS API编写应用程序，然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中。在兼容CommonJS的系统中，你可以使用JavaScript开发以下程序： (1).服务器端JavaScript应用程序 (2)

js事件循环机制和优先级

阅读更多关于 js事件循环机制和优先级

浏览器的渲染进程是多线程，包括 GUI渲染线程 js引擎线程事件触发线程定时器触发线程异步http请求线程主执行栈和任务队列所有的任务可以分为同步任务和异步任务，同步任务，顾名思义，就是立即执行的任务，同步任务一般会直接进入到主线程中执行；而异步任务，就是异步执行的任务，比如ajax网络请求，setTimeout 定时函数等都属于异步任务，异步任务会通过任务队列( Event Queue )的机制来进行协调同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，异步的进入 Event Queue 。主线程内的任务执行完毕为空，会去 Event Queue 读取对应的任务，推入主线程执行。上述过程的不断重复就是我们说的 Event Loop (事件循环)。宏任务与微任务从任务层面，在JS引擎中，我们可以按性质把任务分为两类，macrotask（宏任务）和 microtask（微任务）。它们的执行顺序如下：在事件循环中，每进行一次循环操作称为tick，通过阅读规范可知，每一次 tick 的任务处理模型是比较复杂的，关键步骤总结如下：在此次 tick 中选择最先进入队列的任务( oldest task )，如果有则执行(一次) 检查是否存在 Microtasks ，如果存在则不停地执行，直至清空Microtask Queue 更新 render

React-native 跨平台原理

阅读更多关于 React-native 跨平台原理

1、为什么React native 可以跨平台其实通过react native的架构图就明白了，下面我们就根据架构图来理解一下为什么react native可以实现跨平台：（1）、React：不同平台上编写基于React的代码，“Learn once, write anywhere”。（2）、Virtual DOM：相对Browser环境下的DOM而言，Virtual DOM是DOM在内存中的一种轻量级表达方式（原话是lightweight representation of the document），可以通过不同的渲染引擎生成不同平台下的UI，JS和Native之间通过Bridge通信。（3）、Web/iOS/Android：上层与用户交互的UI界面。 React-Native在JavaScript中抽象操作系统原生的UI组件，代替DOM元素来渲染，使用的是Android或iOS的本地控件，所以在UI渲染上已经非常接近Native App了。尽管业务逻辑代码使用JavaScript，但由于JavaScript是即时编译的，也就是第一次使用时会将JavaScript代码编译成二进制文件，所以JavaScript得运行效率比较高。因此，React Native的运行效率要比基于HTML5、CSS等技术的PhoneGap、AppCan高很多

js清除浏览器缓存的几种方法

阅读更多关于 js清除浏览器缓存的几种方法

关于浏览器缓存浏览器缓存，有时候我们需要他，因为他可以提高网站性能和浏览器速度，提高网站性能。但是有时候我们又不得不清除缓存，因为缓存可能误事，出现一些错误的数据。像股票类网站实时更新等，这样的网站是不要缓存的，像有的网站很少更新，有缓存还是比较好的。今天主要介绍清除缓存的几种方法。清理网站缓存的几种方法 meta方法 //不缓存 <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <META HTTP-EQUIV="expires" CONTENT="0"> 清理form表单的临时缓存 <body onLoad="javascript:document.yourFormName.reset()"> 其实form表单的缓存对于我们书写还是有帮助的，一般情况不建议清理，但是有时候为了安全问题等，需要清理一下！ jquery ajax清除浏览器缓存方式一：用ajax请求服务器最新文件，并加上请求头If-Modified-Since和Cache-Control,如下: $.ajax({ url:'www.haorooms.com', dataType:'json', data:{},

原生js实现一个简单的时钟(transform属性)

阅读更多关于原生js实现一个简单的时钟(transform属性)

图片版请看我的下一篇博客 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>时钟 (调整排版)</title> <style> body { margin: 0; } .wrapper { width: 1200px; /* margin: 0 auto; */ } /* 时钟 */ .time { width: 350px; height: 350px; border: 5px solid #ccc; border-radius: 50%; position: relative; } .time > div { position: absolute; left: 50%; top: 50%; /* 设置标签的旋转中心位置 */ transform-origin: center bottom; } /* 针宽度不可以超过 175 */ .time #hour { width:10px; height: 80px; background-color

JS是什么？

阅读更多关于 JS是什么？

JavaScript:简称js 是一门脚本语言：不需要编译直接执行是一门解释性语言：在运行代码时，将程序直接翻译成机器语言是一门动态语言：？是一门基于对象的语言：？ js分3个部分： 1.ECMAScript标准 ====js基本语法 2.DOM ====document object Model 文本对象模型 3.BIM ====Browser Object Model 浏览器对象模型 js：用户和浏览器进行交互 js三种写法： 1.行内 2.内部 3.外部:新建外部js文件，通过script js注意问题：如果js中有抱错，不会执行当前script后面的代码可以写多对script标签 script中设置属性type=“text/javascript” 标准写法，默认值看见一个属性 language，设置script的类型，也支持来源： CSDN 作者： lemon_T_ 链接： https://blog.csdn.net/lemon_T_/article/details/103556669

js - 构造函数默认参数

阅读更多关于 js - 构造函数默认参数

JS学习第二课

阅读更多关于 JS学习第二课

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 window.onload=function(){ 8 var oBtn=document.getElementById('btn1') 9 var oUl=document.getElementById('ul1') 10 var oTxt=document.getElementById('text1') 11 oBtn.onclick=function(){ 12 var oLi=document.createElement('li') 13 var aLi=oUl.getElementsByTagName('li') 14 oLi.innerHTML=oTxt.value 15 if(aLi.length>0){ 16 oUl.insertBefore(oLi,aLi[0]) 17 } 18 else{ 19 oUl.appendChild(oLi) 20 } 21 } 22 } 23 </script> 24 </head> 25 <body> 26 <input type="text" id="text1" /> 27 <input type=

js 判断用户是否离开当前页面

阅读更多关于 js 判断用户是否离开当前页面

简介 VisibilityChange 事件；用于判断用户是否离开当前页面 Code // 页面的 visibility 属性可能返回三种状态 // prerender，visible 和 hidden let pageVisibility = document . visibilityState ; // 监听 visibility change 事件 document . addEventListener ( 'visibilitychange' , function ( ) { // 页面变为不可见时触发 if ( document . visibilityState == 'hidden' ) { ... } // 页面变为可见时触发 if ( document . visibilityState == 'visible' ) { ... } } ) ; 这里我仅仅判断了 hidden < script type = "text/javascript" > // 监听 visibility change 事件 document . addEventListener ( 'visibilitychange' , function ( ) { var isHidden = document . hidden ; if ( isHidden ) { document .

web前端 -- js 导航

阅读更多关于 web前端 -- js 导航

样式如下： html  <div class="nav-box"> <div class="nav-tap"> <div onclick="materials()" class="nav-tap-item red">一级</div> <div onclick="second()" class="nav-tap-item">二级</div> </div> </div>  css： .red { float: left; color: red; font-weight: bold; border-bottom: 2px solid red; } js：  <script type="text/javascript"> $('.nav-tap div').on('click', function () { $(this).addClass("red").siblings('.nav-tap div').removeClass("red") //定位到点击的标签后，为其增加css样式，同时兄弟元素删除原来的样式 }); </script>  来源： CSDN 作者： ༊྄ཻ ㎕࿐ 久链接： https://blog.csdn.net/weixin_44944193/article/details

订阅 js