第一章:富有表现力的JavaScript 1.1  JavaScript的灵活性 1.2  弱类型语言 1.3  函数是一等对象 1.4  对象的易变性 1.5  继承 1.6  JavaScript中的设计模式 1.7  小结 1.1 JavaScript的灵活性 JavaScript最强大的特性是其灵活性.作为JavaScript程序员,只要你愿意,可以把程序写得很简单,也可以很复杂.这种语言也支持多种不同的编程风格.你既可以采用函数式编程风格,也可以采用更复杂一点的面向对象编程风格. 1.…

1.JavaScript的灵活性 JavaScript是目前最流行.应用最广泛的语言之一,它是一种极富表现力的语言,它具有C家族语言所罕见的特性.这种语言允许我们使用各种方式来完成同一个任务或者功能,还允许我们在面向对象编程的过程使用函数式编程中的概念来丰富其实现方式.这种语言允许我们采用多种不同的编程风格进行编程,如简单一些的函数式编程,复杂一些的面向对象编程.所以我们可以在长期的编码过程中,培养专门属于自己的编程风格,下面的例子会体现出JavaScript的灵活性. 下面我们将要实现一个模拟…

1.javascript的灵活性,你可以把它写的很简单,也可以写的很复杂,简直就是随心所欲: 2.javascript是弱类型语言,定义变量的时候不用声明变量类型,不声明类型,并不是说,javascript变量没有类型,类型是根据赋值类型所定:javascript有三种原始类型:布尔类型.数值型.字符串: 数值类型不区分整数和浮点数.此外还有对象类型.函数类型.null.undefined:原始类型是按值传送,其它是按引用传送. 3.函数是一等对象,可以通过闭包设置对象的私有属性: 4.对象的易…

创建支持链式调用的类(构造函数+原型) Function.prototype.method = function(name, fn){ this.prototype[name] = fn; return this; }; //构造函数+原型 创建类 var Anim = function(){}; Anim.method('starts', function(){ console.log('starts'); }).method('ends', function(){ console.log('…

第一章 创建一个类 方法一:      var Anim = function() {           ...      };      Anim.prototype.start = function() {           ...      };      Anim.prototype.stop = function() {           ...      }; 方法二:      var Anim = function() {           ...      };    …

上一篇我向大家分享了7款效果震憾的HTML5应用组件,今天主要来分享一下CSS3网页菜单,因为在一个网站中,菜单起着举足轻重的作用,所以作为WEB开发人员,我们有必要将网站的菜单设计得尽量完美,下面向大家推荐8款极具表现力的jQuery/CSS3网页菜单,在网页应用中,也许你能够用到它们. 原创声明:转载请务必在文章正文明显处注明并保留原文完整性 来源:编程文库    原文链接:http://wiki.itivy.com/?p=513 1.CSS3带头像3D下拉菜单 这款CSS3下拉菜单设计富有…

dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化而触发一些效果,原本你要写 js 去绑定滚动事件,然后计算偏移量,然后更新元素 css,使用 dynamic-css,你只要根据语法去写好 css 表达式就可以了.对于一些原本需要复杂的 js 判断的动态 css,用 dynamic css 表达式几行代码搞定. 举两个例子: 元素跟随鼠标移动 实现…

简介 动态加载js,css在现在以及将来肯定是很重要的.目前来看前端代码编写的业务量已经远远超过后端编写的.随着对用户体验度逐渐增强,前端业务复杂,加载速度变得很慢很慢.为了解决这个问题,目前出现的两个前端模块加载器为require.js与sea.js,这两款模块加载器都不错.但是呢,有时候我仅仅需要的只是动态加载一个js,不需要把代码模块化,那我们只能自己手写一个加载函数. 简单的加载js /** * HTML动态加载js * @path {String} src地址必须带有后缀名.js *…

js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css文件,可以配置文件后辍,防止浏览器缓存 * @param {obj} config 加载资源配置 * @param {string} version 资源后辍配置 */ function jsCssLoader(config,version) { this.css = config.css; thi…

动态为页面添加CSS样式文件引用: if (document.createStyleSheet) { //IE document.createStyleSheet("./Themes/Default/MessageTip.css"); } else { //Firefox, Chrome var stylesheet = document.createElement("link"); stylesheet.href = "./Themes/Default/…

js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法   一.CSS和JS为什么带参数(形如.css?t=与.js?t=)怎样获取代码 css和js带参数(形如.css?t=与.js?t=) 使用参数有两种可能: 第一.脚本并不存在,而是服务端动态生成的,因此带了个版本号,以示区别. 即上面代码对于文件来说 等价于 但浏览器会认为他是 该文件的某个版本! 第二.客户端…

动态加载/删除css文件以及图片预加载   功能模块页面   最近,工作中遇到了一个比较奇葩的需求:要在一个页面(PC端)增加一个功能模块,但是这个页面在不久之后要重构,为了新增加的模块可以继续复用,必须做到这个模块的样式对页面其他模块不能造成影响,旧版页面使用bootstrap样式,新版模块只使用normalize.css,UI组件使用sass重写,因为重构工作量太大,公司前端只有1+1个人,所以就想将模块样式独立,最后,用动态加载link标签解决.   上图为一个页面,所有模块通过哈希控制是…

今天总结一下Stylus记一些常用的也是最基本的用法 一.  选择器 Stylus是基于缩进的这让我们可以更快捷的编写css比如 body { margin:; paddind:; font-size: 12px; background: red; } 使用stylus基于缩进的写法: body margin 0; padding 0; font-szie 12px; background red  规则级 我们常常将重复的代码写在一起这样能让我们少些很多代码, .header, .main {…

--------------------------本文来自张鑫旭大神博客------------------------------ 一.为什么我会讲Stylus,而不是SASS和LESS? SASS显然优于LESS(所以LESS你就休息去吧),SASS刚出来的时候我就在文章有有所提到,现在貌似已经被很多同行熟知,甚至有些小众项目组已经使用之. 然而,我却没有专门花功夫介绍SASS, 为何?那为何现在又花大把功夫整理和介绍Stylus?异同在何处? (以下有表述不准确之处欢迎指正) 需要的语言…

git stash 会把当前的改动暂时搁置起来, 也就是所谓的git 暂存区. 你可以执行 git stash list 来查看你所有暂存的东东. 也可以 git stash apple ** 来拿下你所暂存起来的东东. 当然,如果你觉得拿下来之后就从暂存区删掉.执行 git stash pop ** 也是可以的. 当然,聪明的git 同样可以删除你觉得没用的暂存区数据, git stash drop ** 就可以做到. 如果想要删除所有暂存区的数据,(当然,你确定要这么做么?) 可以执行git…

今天项目中需要用到动态加载 CSS 文件,经过一番折腾终于搞定,回家整理了一下,顺便融合了动态加载 JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: function(path){ ){ throw new Error('argument "path" is required !'); } ]; var link = document.createElement('link'); link.href = path; link.rel = '…

1.动态加载js function loadScript( url ){ var script = document.createElement( "script" ); script.type = "type/javascipt"; script.src = url; document.getElementsByTagName( "head" )[0].appendChild( script ); }; 2.动态加载CSS文件 function…

一.动态创建link方式 我们可以使用link的方式.如下代码所示. function addCssByLink(url){ var doc=document; var link=doc.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribute("type", "text/css"); link.setA…

最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨js,实现方法很简单引用到页面就ok了. 那么问题来了,虽然我不知道百度统计的原理是啥,我的测试服引用了百度统计,百度统计账号里面配置的域名是正式服的域名,但是却检测到了我测试服的访问量,这就尴尬了,然后就想到了动态加载js 1.动态加载js文件 我们要把这块链接加入页面 <script src="js/count.js"></script> 具体代码实现如下 function loadJs(…

function appendJQCDN() { var head = document.head || document.getElementsByTagName('head')[0]; var script = document.createElement('script'); var style = document.createElement('style'); script.setAttribute("src", "https://cdn.bootcss.com/j…

先来看jquery自带的getSrcript文件 方法 代码如下 复制代码 $.getScript(url,callback) 实例 代码如下 复制代码 var testVar = 'New JS loaded!'; alert(testVar); function newFun(dynParam) { alert('You just passed '+dynParam+ ' as parameter.'); } 动态调用方法 HTML代码 代码如下 复制代码 <script type="…

jQuery基础知识,动态添加删除CSS样式 <!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-…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

// 引入js文件 HtmlGenericControl scriptControl = new HtmlGenericControl("script"); scriptControl.Attributes.Add("type", "text/javascript"); scriptControl.Attributes.Add("language", "JavaScript"); scriptControl…

1.addClass css中: <style type="text/css">       .chColor {background: #267cb7;color:white;     }   </style> js中: $("#nm_p").addClass("chColor"); // 追加样式 $("#nm_p").removeClass("chColor"); //移除 2…

less,sass,stylus配置和应用教程及三者比较  Less 1. 定义: Less是CSS预处理语言,在css基础之上增加了诸如变量,混合(mix),继承,运算,函数等功能,LESS既可以运行在客户端(支持IE10+,firefox,Webkit),也可以借助于Node.js在服务器端运行(支持IE6+,firefox,Webkit). 什么是CSS预处理技术?CSS预处理技术,是指用一种新语言用来为CSS 增加可编程的的特性,无需考虑浏览器的兼容性问题.你可以在 CSS 中使用变量.…

Stylus介绍及特点Stylus 是一个基于Node.js的CSS的预处理框架,诞生于2010年,比较年轻,可以说是一种新型语言,其本质上做的事情与 Sass/LESS 等类似, 可以以近似脚本的方式去写CSS代码,创建健壮的.动态的.富有表现力的CSS,默认使用 .styl 的作为文件扩展名,支持多样性的CSS语法.Stylus比LESS更强大,而且基于nodejs比Sass更符合我们的思路. Stylus的特点如下 基于jsNode.js是一个Javascript运行环境(runtime)…

Stylus介绍及特点 基于Node.js的css的预处理框架,其本质上做的事情与 Sass/LESS 等类似, 可以以近似脚本的方式去写CSS代码,创建健壮的.动态的.富有表现力的CSS,默认使用 .styl 的作为文件扩展名,支持多样性的CSS语法.Stylus比LESS更强大,而且基于nodejs比Sass更符合我们的思路. Stylus的特点如下 基于js Node.js是一个Javascript运行环境(runtime),是对Google V8引擎进行了封装,V8引擎执行Javascr…

stylus介绍 是个什么鬼?对于开发来说,CSS的弱点在于静态化.我们需要一个真正能提高开发效率的工具, LESS , SASS 都在这方面做了一些贡献. Stylus 是一个CSS的预处理框架,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,所以 Stylus 是一种新型语言,可以创建健壮的.动态的.富有表现力的CSS.比较年轻,其本质上做的事情与 SASS / LESS 等类似,应该是有很多借鉴,所以近似脚本的方式去写CSS代码. Stylus 默认使用…

Stylus 是一个CSS的预处理框架,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,所以 Stylus 是一种新型语言,可以创建健壮的.动态的.富有表现力的CSS. Stylus安装 全局安装,安装之前你需要你安装 nodejs .安装node.js的一篇博客,前两步(http://www.cnblogs.com/tanyongli/p/7504603.html) $ cnpm install stylus -g 运行 $ stylus -h  可以获得相…