js简易写法】的更多相关文章

我写JavaScript代码已经很久了,都记不起是什么年代开始的了.对于JavaScript这种语言近几年所取得的成就,我感到非常的兴奋:我很幸运也是这些成就的获益者.我写了不少的文章,章节,还有一本专门讨论它的书,然而,我现在依然能发现一些关于这种语言的新知识.下面的描述的就是过去让我不由得发出“啊!”的感叹的编程技巧,这些技巧你应该现在就试试,而不是等着未来的某个时候偶然的发现它们. 简洁写法 JavaScript里我最喜欢的一种东西就是生成对象和数组的简写方法.在过去,如果你想创建一个对象…
marked.js简易手册 本文介绍的是marked.js.秉持"来之即用"的原则,对它进行简要的翻译和归纳, 安装 在网上引用或者是引用本地文件即可.要么就用命令行: npm install marked --save 最简单用法 var rendererMD = new marked.Renderer(); marked.setOptions({ renderer: rendererMD, gfm: true, tables: true, breaks: false, pedant…
js简易日历中设计的知识点:选项卡切换   数组    innerHTML  连接符 与选项卡的区别:div的个数不同 连接符中需要注意的:(优先级) "abc"+12+3+"def"               结果:abc123def "abc"+(12+3)+"def"            结果:abc15def html代码: <body> <div class="contain"…
 js文件写法.规范 // 定义全局变量 var num = 0;//这个是用来记数的. // 页面加载完成 window.onload = funtion(){ intVar();//初始化变量 scrollFun();//滚动监听 .... } // 定义方法 funtion initVar(){} funtion scrollFun(){} dom操作 dom  操作页面上的标签 js的组成:ECMAscript(核心语法) BOM  浏览器对象模型 windows  窗口 locatio…
错误示例: <a href="javascript:waterLineEdit(${goods.goods_id})" >修改 </a> <!-- 浏览器中会实际是下面的那样 --> <a href="javascript:waterLineEdit(20151333)" >修改 </a> 本来数字是20151333,点击修改应该获取20151333这个才对.但是传到后台却不是这个数字.很郁闷.然后百度了一…
记录下工作中碰到的JS特殊写法 (function(index) { $('#' + id).on("change", function() { me.onChange(this, index); }) })(i); 等同于 var fnName= function( index ){ $('#' + id).on("change", function() { me.onChange(this, index); }) } fnName(i);…
var str = "今天是星期" + "日一二三四五六".charAt(new Date().getDay()); mark在此,方便日后复制 原文https://blog.csdn.net/fture_bird/article/details/80915668…
前言: 现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累.而目前版本的 JavaScript 并未提供一种原生的.语言级别的模块化组织模式,而是将模块化的方法交由开发者来实现.因此,出现了很多种 JavaScript 模块化的实现方式, 以 AMD 为例,该规范使用 define 函数来定义模块. define(factory(){ //模块化 }); 模块模式: 模块模式使用了 JavaScript 的一个特性,即闭包(Closures).现今流行的…
IIFE 博客分类: 前端开发   介绍IIFE IIFE的性能 使用IIFE的好处 IIFE最佳实践 jQuery优化 在Bootstrap源码(具体请看<Bootstrap源码解析>)和其他jQuery插件经常看到如下的写法: +function ($) { }(window.jQuery); 这种写法称为: IIFE (Imdiately Invoked Function Expression 立即执行的函数表达式). 一步步来分析这段代码. 先弄清函数表达式(function expr…
模块化 模块就是实现特定功能的一组方法.只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. 下述两种写法等价 exports 对象是当前模块的导出对象,用于导出模块公有方法和属性.别的模块通过require函数使用当前模块时得到的就是当前模块的exports对象 //声明一个函数 var math = function(a, b) { return a+b; } /* * exports对象是当前模块的导出对象,用于导出模块公有方法和属性. * 别的模块通过require函数…
screenX clientX pageX的区别 screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动. pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动 JS原生事件的写法 ① document.onclick = function(){ alert(1); //只要是点击页面的任何一个地方,…
遍历数组 ES5 写法 arr.forEach(function(value,index){ console.log(index+'--'+value); }) 遍历数组  ES6 写法 for( let i of arr){ console.log(i); } 判断字符串str是否以1开头 str.indexOf('1') == 0 从集合中过滤符合条件的元素 var _ = require('lodash'); var users = [ { 'user': 'barney', 'age':…
目标 实现简易的js弹出框.为了简单灵活的在小项目中使用. 实现思路 研究bootstrap的弹出框效果后,认为层级示意图如下: 层说明 弹出层分为三层.最底层的遮罩层,覆盖在浏览器视口上.它之上是弹出层父级,这个层完全透明,并且与遮罩层重合.最上层是弹出层,它的活动范围在其父层的范围内. 弹出时,隐藏body的滚动条 遮罩层位于body直属,固定定位,大小与视口相等.不必有dom,在每次弹出时,由js直接生成. 弹出层父级位于body直属,透明隐藏,大小同遮罩层,自动垂直滚动条.位于遮罩层与弹…
今天厚着脸皮来推荐下鄙人写的一个小插件吧.看过我博客的应该都熟悉这个插件了,其实就是这货. 这东西是我去年写的,当时水平也不怎么样,不过好歹还是实现了简单功能.我先简单介绍下这东西什么用吧. 因为在 论坛,博客 里写东西的时候,非常希望有个运行功能,当然目前大部分的功能都是 open 实现的.而且在 IE6-7 下没有 console 可供调试,所以当时脑子一热就写了这东西.可能你会说 Firebug Lite 不是很方便么,而且兼容 IE6 呢..确实,不过我的出发点不一样,只是写一个可供输出…
很早知道这种写法,由于基础面向对象不够扎实一直在回避,但是面对整站这种方法还是有必要会 <div id="div1">111</div> <div id="div2">现实</div> <div id="div3">层</div> <div class="tab"> <ul class="tab_nav clearfix&quo…
子模块的写法: function SVN(){ console.log('svn initialized'); return this; } function getInstance() { console.log('getInstance'); return new SVN(); } module.exports = SVN; module.exports.getInstance = getInstance; 这里定义了一个模块叫SVN,可以通过两种方式把这个模块的方法公开给外界调用. 一个是…
前端开发主要涉及到html, css(less/sass), javascript这几个方面的知识.真正的快速有效开发,必须实现所谓所见即所得.在构建生产时,可能需要使用gulp/grunt等task runner来将前端所有的任务串联起来,但是在一个简易开发环境中,有以下两种模式快速构建本地静态页面(html+css+js)开发环境. browsersync 命令行方式启动server去serve静态页 1. nodejs安装: 2. npm 安装 npm install -g browser…
这里我们将用原生js实现简易的日历,原理和之前的原生js选项卡差不多,不过也有些区别: 首先html代码: <div class="container"> <div class="container_cont"> <ul id="cont_ul"> <li class="active"> <span>1</span> <p>jan</p&…
名称 一般写法 优化 取整(不四舍五入) parseInt(a,10); //Before Math.floor(a); //Before a>>0; //Before ~~a; //After a|0; //After 取整(四舍五入) Math.round(a); //Beforenum.toFixed(0) a+.5|0; //After 未定义 undefined; //Before void 0; //After, 快0[0]; //After, 略慢 布尔值短写法 true; //…
用JS实现简易计算器 首先创建结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl…
前言: 现在javascript库特别多,其写法各式各样,总结几种我们经常见到的,作为自己知识的积累.而目前版本的 JavaScript 并未提供一种原生的.语言级别的模块化组织模式,而是将模块化的方法交由开发者来实现.因此,出现了很多种 JavaScript 模块化的实现方式, 以 AMD 为例,该规范使用 define 函数来定义模块. define(factory(){ //模块化 }); 模块模式: 模块模式使用了 JavaScript 的一个特性,即闭包(Closures).现今流行的…
前言 我现在总结一下我之前敲代码犯的错误,清除DOM元素,我们开始写代码吧! HTML <h1 style="font-size: 18px;font-weight: bold;color:rgba(255,128,128,1)">测试</h1> <div id="JiJi"> </div> <input type="button" value="创建邮箱" id=&quo…
jq:var top_icon = $('.top_icon')[0]; id写法$('#id'),类写法$('.class'),标签写法$('div') 如:join=document.getElementById("box1").offsetHeight; 修改后:join=$("#box1").outerHeight(); jquery的outerHeight()方法就是原生JS的offsetHeight://获取元素高度 js:var top_icon =…
前端模块化 关注前端技术发展的各位亲们,肯定对模块化开发这个名词不陌生.随着前端工程越来越复杂,代码越来越多,模块化成了必不可免的趋势. 各种标准 由于javascript本身并没有制定相关标准(当然es6已经有了import和export),所以在模块化方面诞生了各种不同的规范.主要有AMD规范(随requirejs诞生而普及),CMD规范(随seajs的出现而普及),commonjs(主要用于node,并不适合前端).至于以上几种规范的异同,无耻的我在这里就不多费口水了,请还不了解的亲们自行…
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="/js/angular.min.js"></script> <link href="/js/bootstrap-3.3.5-dist/c…
1.自己引入jquery插件,我的demo是引入的自己本地的query <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { padding: 0; margin: 0; font-family: "微软雅黑"; } li…
如果你不想用浏览器的js性能测试工具,可以用下面这个简单的函数测试一下(1毫秒一下的就测不出来了) function testFn(fn,param){ var start = new Date().getTime(); fn(param); var end = new Date().getTime(); console.log(fn.name+"耗时:"+(end - start)+"毫秒"); //IE不支持fn.name } 下面就来测试一下 var arr…
参考:js验证输入是否是小数 我的方法是: //check the number is decimal number function checkDecimal(number){ if(!isNaN(number)){ var reg=/^[0-9]{1}\.\d+$/; return reg.test(number); } return false; } 用法示范: 1. checkDecimal("0.67"); 2. checkDecimal(1.33); 3. checkDec…
1.添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 element.addEventListener(type, handler, false); }else if (element.attachEvent){//检测是否为IE级方法 element.attachEvent("on" + type, handler); } else {//检测是否…
/* 模块化写法*/ var Person=function(){ var name='Jone', age='24', sex='male'; function createIdea(){ //{....} } function handleIdea(){ //{....} } return{ create:createIdea, handel:handleIdea } } // Person.create(); 调用 // Person.handle(); 调用…