js代码 | 易学教程

js-其他跨域技术(JSONP`Comet)

阅读更多关于 js-其他跨域技术(JSONP`Comet)

###1. JSONP 　　JSONP由两部分组成：回调函数和数据　　JSONP是通过动态<script>元素来使用的，使用时可以为src属性指定一个跨域URL 　　　　eg：　　　　　　function handelResponse(response){ 　　　　　　　　alert('''......') 　　　　　　} 　　　　　　var script = document.createElement("script"); 　　　　　　script.src = "http://..../json/?handelResponse" ; 　　　　　　document.body.insertBefore(script,document.body.firstChild); 　　缺点：JSONP是从其他域中加载代码执行要确定JSONP请求是否失败并不容易 ###2. Comet(“服务器推送”) 　　Comet 是一种服务器向页面推送数据的技术，它本含两种方法：长轮询和流　　　　1.）长轮询/短轮询，两者最大的区别在于服务器如何发送数据。短轮询是服务器立即发送响应，无论数据是否有效，而长轮询是等待发送响应。　　　　　　无论是长轮询或短轮询，浏览器都要在接收数据前先发起对服务器的链接，且服务器在浏览器打开状态下一直保持连接打开　　　　2.）HTTP流　　　　　

Fis3前端工程化之项目实战

阅读更多关于 Fis3前端工程化之项目实战

Fis3项目项目目录结构: E:. │ .gitignore │ fis-conf.js │ index.html │ package.json │ README.md │ ├─material │ └─resource ├─css ├─images └─js ├─lab │ │ │ └─until └─ui 项目要求: 1.雪碧图 2.代码模块化 3.预处理 4.md5戳 5.压缩资源雪碧图启用雪碧图插件,fis3已内置 fis.match('::package', { spriter: fis.plugin('csssprites') }) 设置雪碧图的合并格式 fis.config.set('settings.spriter.csssprites', { margin: 10, //图之间的边距 layout: 'matrix' //使用矩阵排列方式，默认为线性`linear` }); 预处理因为使用的是less，所以需要预处理less文件通过 fis-parser-less 插件可以处理安装 npm install -g fis-parser-less fis.match('*.less', { parser: fis.plugin('less'), rExt: '.css' }) 代码模块化 Mod.js 我这里使用的 Mode.js

漂亮的JS日历控件

阅读更多关于漂亮的JS日历控件

代码如下: <script> /* alin */ /* Email:caoailin111@sohu.com */ /* QQ:38062022 */ /* Creation date: 2004-6-13 */ var myC_x,myC_y; var myC_timeset=null,myC_timeset1=null; var divObj=null; var inputName; function myCalendar() //构建对象 { var myDate = new Date(); this.year = myDate.getFullYear(); this.month = myDate.getMonth()+1; this.date = myDate.getDate(); this.format="yyyy-mm-dd"; this.style = myStyle(1);　 this.show = createCalendar; this.input = createInput; } function myStyle(num) //设置样式 { if(!num||isNaN(num)){alert('参数不对,采用默认样式！');num=1;} 　var style = new Array(); style[1]=".week{background-color:

React

阅读更多关于 React

　　React 是由 Facebook 发明及维护，当前最流行的框架，生态链完善　　使用 script 来引入有关 React 的 js 文件　　主要进入的文件是 react.development.js　　　　// react 的文件依赖　　　　　　　　　　 react-dom.development.js　　// react 的 dom 操作依赖　　　　　　　　　　 babel.min.js　　　// react 采用了 jsx 的写法，所以要依赖此文件　　　　　如果觉得在 React 的官网上不好找 js 文件的话，我们可以通过 https://www.bootcdn.cn/ 来进行查找，并且可以通过网址搜索 js 的内容，将其拷贝走；　　案例：　　　　　　当我们成功的将 React 的 js 文件引入进入后，我们就可以开发 React 的项目了　　第一步，一个简单的 demo ，体验简单的 React 的渲染页面　　　　　　这上面说了 React 中，最基本的将内容渲染到页面的方法　　　　但是我们还是有一些注意事项：　　　　　　1. script 的类型，不再是 javascript ，而是 text/babel ，因为 jsx 和 js 格式有冲突，所以我们的 js 类型只能是 text/babel 　　　　　　2. 注意 React 中的

js 异步加载

阅读更多关于 js 异步加载

一、为什么要JS异步加载？因为同步加载存在问题！ JS在默认情况下是以同步模式（又称阻塞模式）加载的，这里“加载”的意思是“解释、执行”。在最新版本的浏览器中，浏览器对于代码请求的资源都是瀑布式的加载，而不是阻塞式的，但是JS的执行总是阻塞的。这会引起什么问题呢？如果在页面中加载一些JS，但其中某个请求迟迟得不到响应，位于此JS后面的JS将无法执行，同时页面渲染也不能继续，用户看到的就是白屏（此时JS在 <head> 标签之后引入）。 <head> <meta charset="UTF-8"> <title>test</title> <script type="text/javascript" src='http://china-addthis.googlecode.com/svn/trunk/addthis.js'></script> <script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script> </head> <body> <p>我是小仙女</p> </body> 这是一个简单的html文件，页面的主体是简单地文本段落，但是代码执行后迟迟都是空白。为什么呢？因为第一个请求的JS迟迟无法加载，于是阻塞了后面代码的执行，页面得不到渲染。

js的异步加载及promise的三种状态

阅读更多关于 js的异步加载及promise的三种状态

---恢复内容开始--- js异步加载同步加载 <script src="http://baidu.com/script.js"></script> ---> 我们平时经常使用的就是这种同步加载的形式同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。 js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为，所以默认同步执行才是安全的。以前的一般建议是把<script>放在页面末尾</body>之前，这样尽可能减少这种阻塞行为，而先让页面展示出来。异步加载异步加载有几种方式，现在介绍以下两种常用的 async ： async的定义和用法(是HTML5的属性) async 属性规定一旦脚本可用，则会异步执行。示例： <script type="text/javascript" src="demo_async.js" async="async"></script> 注：async 属性仅适用于外部脚本（只有在使用 src 属性时）注：有多种执行外部脚本的方法：如果不使用 async 且 defer="defer"：脚本将在页面完成解析时执行如果 async="async"：脚本相对于页面的其余部分异步地执行（当页面继续进行解析时，脚本将被执行）如果既不使用

Grunt + Bower + Requirejs + Angular

阅读更多关于 Grunt + Bower + Requirejs + Angular

http://www.tuicool.com/articles/ENbI7j3 时间 2014-07-27 22:08:46 Freewind.me 原文 http://freewind.me/blog/20140727/2739.html 现在web开发的趋势是前后端分离。前端采用某些js框架，后端采用某些语言提供restful API，两者以json格式进行数据交互。如果后端采用node.js，则前后端可以使用同一种语言，共享某些可重用的Js代码，并共享构建工具。但很多时候我们可能采用别的语言，如ruby/java/scala等，此时前后端代码基本上是完全独立的。虽然大家都在同一个项目中，但可以分成互相独立的两块，并且前后端通常使用不同的构建工具。比如当后端使用Scala时，我们会使用sbt进行项目构建，对scala代码进行编译、测试、打包等。它的专长是处理与scala相关的任务，但对于前端的支持比较弱。前端一些常见的任务，如js库的下载和管理、css文件的转换、js文件合并压缩、js测试的执行等，很难在sbt中找到好用的插件，而利用js世界里的工具来做反而更加方便一些。我们项目组这几天正在讨论是否在项目中引入一些前端框架，还是直接用原生Javascript写。经过反复讨论和调研，最终决定引入AngularJs。但AngularJs的引入并不是单一的任务

JS 中的require 和 import 区别

阅读更多关于 JS 中的require 和 import 区别

在研究react和webpack的时候，经常看到在js文件中出现require，还有import，这两个都是为了JS模块化编程使用。CSS的是 @import 1.ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。 Require是CommonJS的语法，CommonJS的模块是对象，输入时必须查找对象属性。 // CommonJS模块 let { stat, exists, readFile } = require('fs'); // 等同于 let _fs = require('fs'); let stat = _fs.stat; let exists = _fs.exists; let readfile = _fs.readfile; above：整体加载fs模块（即加载fs所有方法），生成一个对象"_fs"，然后再从这个对象上读取三个方法，这叫“运行时加载”，因为只有运行时才能得到这个对象，不能在编译时做到静态化。 ES6模块不是对象，而是通过export命令显示指定输出代码，再通过import输入。 import { stat, exists, readFile } from 'fs'; above：从fs加载“stat, exists, readFile” 三个方法，其他方法不加载， 2.ES6模块默认使用严格模式

前端优化（原创）

阅读更多关于前端优化（原创）

前端优化只要在两方面进行，一是加载速度优化，二是渲染速度优化。在进行优化前，先掌握好2个基本理论知识理论知识（一）：浏览器的完整加载渲染过程 ①输入url，发送请求 ②加载(即下载)整个.html文件 ③加载完后解析(即运行)html，并在解析的过程中构建DOM树 ·JavaScript是单线程的。浏览器是多线程的：有的线程负责加载资源，有的线程负责执行脚本，有的线程负责渲染界面。 ·浏览器按从上之下(深度遍历)的原则解析各个html标签 ·解析标签的过程就是构建DOM树的过程 ·解析遇到link、script、img标签时，浏览器会向服务器发送请求资源。 script加载时不影响其他资源加载，但由于不知道js中的执行内容，所以需要等JS加载并执行完后才会继续解析和渲染。 script的执行会阻塞html解析、其他下载线程以及渲染线程。 link加载完css后会解析为CSSOM(层叠样式表对象模型,一棵仅含有样式信息的树)。css的加载和解析不会阻塞html的解析，但会阻塞渲染。 img的加载不会阻塞html的解析，但img加载后并不渲染，它需要等待Render Tree生成完后才和Render Tree一起渲染出来。未下载完的图片需等下载完后才渲染。 ④当css解析为CSSOM后，html解析为DOM后，两者将会结合在一起生成Render Tree(渲染树)。 ⑤Layout

H5前端性能测试快速入门

阅读更多关于 H5前端性能测试快速入门

说到H5测试，对于做WEB测试的同学来说再熟悉不过了，它包括页H5功能测试，前端性能测试，浏览器兼容性能测试，以及服务端性能测试。那本文谈到的则是H5前端性能测试，并希望通过阅读本文后，能够知道：H5前端性能测试什么？如何发现问题以及相应的优化规则。一、浏览器渲染引擎浏览器是Html解析和页面最终展示的工具，所以测试H5前理解浏览器的工作原理是必不可少的，具体可参考《浏览器工作原理》。浏览器的主要功能浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。在浏览器组成部分中，渲染引擎是用户直接相关，呈现用户所需页面的部分。所以从渲染引擎入手，了解HTML解析与页面展示。渲染引擎工作流 dom树构建：从html标签的解析开始，将各种标签解析为dom树中的各个节点，标签和dom树的中的节点是一一对应关系。渲染树构建：将CSS和style标签中的样式信息解析为渲染树，渲染树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。渲染树布局和绘制：渲染树确定各个dom节点在屏幕中单确切位置，根据渲染树中的颜色等信息绘制出网页。值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上

订阅 js代码