JS & TS & Node.js | Me.ZhuoYue.Me

2020-07-232020-07-28

export import default of ES(JS)

The Asynchronous Module Definition (AMD) format is used in browsers and uses a define function to define modules.
The CommonJS (CJS) format is used in Node.js and uses require and module.exports to define dependencies and modules. The npm ecosystem is built upon this format.
The ES Module (ESM) format. As of ES6 (ES2015), JavaScript supports a native module format. It uses an export keyword to export a module’s public API and an import keyword to import it.
The System.register format was designed to support ES6 modules within ES5.
The Universal Module Definition (UMD) format can be used both in the browser and in Node.js. It’s useful when a module needs to be imported by a number of different module loaders.

A background on modules

JavaScript programs started off pretty small — most of its usage in the early days was to do isolated scripting tasks, providing a bit of interactivity to your web pages where needed, so large scripts were generally not needed. Fast forward a few years and we now have complete applications being run in browsers with a lot of JavaScript, as well as JavaScript being used in other contexts (Node.js, for example).

It has therefore made sense in recent years to start thinking about providing mechanisms for splitting JavaScript programs up into separate modules that can be imported when needed. Node.js has had this ability for a long time, and there are a number of JavaScript libraries and frameworks that enable module usage (for example, other CommonJS and AMD-based module systems like RequireJS, and more recently Webpack and Babel).

The good news is that modern browsers have started to support module functionality natively, and this is what this article is all about. This can only be a good thing — browsers can optimize loading of modules, making it more efficient than having to use a library and do all of that extra client-side processing and extra round trips.

Introducing an example

To demonstrate usage of modules, we’ve created a simple set of examples that you can find on GitHub. These examples demonstrate a simple set of modules that create a <canvas> element on a webpage, and then draw (and report information about) different shapes on the canvas.

These are fairly trivial, but have been kept deliberately simple to demonstrate modules clearly.

Note: If you want to download the examples and run them locally, you’ll need to run them through a local web server.

Continue reading “export import default of ES(JS)”

2015-09-162021-11-30

install gulp

1. Install gulp globally:

$ npm install --global gulp

2. Install gulp in your project devDependencies:

$ npm install --save-dev gulp

3. Create a `gulpfile.js` at the root of your project:

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

4. Run gulp:

$ gulp

The default task will run and do nothing.

To run individual tasks, use gulp <task> <othertask>.
在项目的根目录新建gulpfile.js，require需要的module

var gulp = require('gulp'),

    minifycss = require('gulp-minify-css'),

    concat = require('gulp-concat'),

    uglify = require('gulp-uglify'),

    rename = require('gulp-rename'),

    del = require('del');

压缩css

gulp.task('minifycss', function() {

    return gulp.src('src/*.css')      //压缩的文件

        .pipe(gulp.dest('minified/css'))   //输出文件夹

        .pipe(minifycss());   //执行压缩

});

压缩js

gulp.task('minifyjs', function() {

return gulp.src('src/*.js')

.pipe(concat('main.js'))    //合并所有js到main.js

.pipe(gulp.dest('minified/js'))    //输出main.js到文件夹

.pipe(rename({suffix: '.min'}))   //rename压缩后的文件名

.pipe(uglify())    //压缩

.pipe(gulp.dest('minified/js'));  //输出

});

执行压缩前，先删除文件夹里的内容

gulp.task('clean', function(cb) {

del(['minified/css', 'minified/js'], cb)

});

默认命令，在cmd中输入gulp后，执行的就是这个命令

gulp.task('default', ['clean'], function() {

gulp.start('minifycss', 'minifyjs');

});

2015-07-292020-12-08

正则表达式快速参考

字符转义

正则表达式中的反斜杠字符 (\) 指示其后跟的字符是特殊字符（如下表所示），或应按原义解释该字符。有关详细信息，请参阅正则表达式中的字符转义。

转义字符	描述	模式	匹配
\a	与报警 (bell) 符 \u0007 匹配。	\a	“Error!”+“\u0007”中的“\u0007”
\b	在字符类中，与退格键 \u0008 匹配。	[\b]{3,}	“\b\b\b\b”中的“\b\b\b\b”
\t	与制表符 \u0009 匹配。	(\w+)\t	“item1\titem2\t”中的“item1\t”和“item2\t”
\r	与回车符 \u000D 匹配。（\r 与换行符 \n 不是等效的。）	\r\n(\w+)	“\r\nThese are\ntwo lines.”中的“\r\nThese”
\v	与垂直制表符 \u000B 匹配。	[\v]{2,}	“\v\v\v”中的“\v\v\v”
\f	与换页符 \u000C 匹配。	[\f]{2,}	“\f\f\f”中的“\f\f\f”
\n	与换行符 \u000A 匹配。	\r\n(\w+)	“\r\nThese are\ntwo lines.”中的“\r\nThese”
\e	与转义符 \u001B 匹配。	\e	“\x001B”中的“\x001B”
\nnn	使用八进制表示形式指定字符（nnn 由二位或三位数字组成）。	\w\040\w	“a bc d”中的 “a b”和“c d”
\xnn	使用十六进制表示形式指定字符（nn 恰好由两位数字组成）。	\w\x20\w	“a bc d”中的 “a b”和“c d”
\c X \c x	匹配 X 或 x 指定的 ASCII 控件字符，其中 X 或 x 是控件字符的字母。	\cC	“\x0003”中的“\x0003”(Ctrl-C)
\unnnn	使用十六进制表示形式匹配 Unicode 字符（由 nnnn 正确表示的四位数）。	\w\u0020\w	“a bc d”中的 “a b”和“c d”
\	在后面带有不识别为本主题的此表和其他表中的转义符的字符时，与该字符匹配。例如，\* 与 \x2A 相同，而 \. 与 \x2E 相同。这允许正则表达式引擎区分语言元素（如 * 或 ?）和字符（用 \* 或 \? 表示）。	\d+[\+-x\]\d+\d+[\+-x\\d+	“(2+2) * 39”中的“2+2”和“39”

字符类

字符类与一组字符中的任何一个字符匹配。字符类包括下表中列出的语言元素。有关详细信息，请参阅正则表达式中的字符类。

字符类	描述	模式	匹配
[ character_group ]	匹配 character_group 中的任何单个字符。默认情况下，匹配区分大小写。	[ae]	“gray”中的“a” “lane”中的“a”和“e”
[^ character_group ]	求反：与不在 character_group 中的任何单个字符匹配。默认情况下，character_group 中的字符区分大小写。	[^aei]	“reign”中的“r”、“g”和“n”
[ 第一个 – 最后一个 ]	字符范围：与从第一个到最后一个的范围中的任何单个字符匹配。	[A-Z]	“AB123”中的“A”和“B”
.	通配符：与除 \n 之外的任何单个字符匹配。若要匹配文本句点字符（. 或 \u002E），你必须在该字符前面加上转义符 (\.)。	a.e	“nave”中的“ave” “water”中的“ate”
\p{ 名称 }	与 name 指定的 Unicode 通用类别或命名块中的任何单个字符匹配。	\p{Lu} \p{IsCyrillic}	“City Lights”中的“C”和“L” “ДЖem”中的“Д”和“Ж”
\P{ 名称 }	与不在 name 指定的 Unicode 通用类别或命名块中的任何单个字符匹配。	\P{Lu} \P{IsCyrillic}	“City”中的“i”、“t”和“y” “ДЖem”中的“e”和“m”
\w	与任何单词字符匹配。	\w	“ID A1.3”中的“I”、“D”、“A”、“1”和“3”
\W	与任何非单词字符匹配。	\W	“ID A1.3”中的“ ”、“.”
\s	与任何空白字符匹配。	\w\s	“ID A1.3”中的“D”
\S	与任何非空白字符匹配。	\s\S	” _” in “int __ctr”
\d	与任何十进制数字匹配。	\d	“4 = IV”中的“4”
\D	匹配不是十进制数的任意字符。	\D	“4 = IV”中的“ ”、“=”、“ ”、“I”和“V”

定位点

定位点或原子零宽度断言会使匹配成功或失败，具体取决于字符串中的当前位置，但它们不会使引擎在字符串中前进或使用字符。下表中列出的元字符是定位点。有关详细信息，请参阅正则表达式中的定位点。

断言	描述	模式	匹配
^	匹配必须从字符串或一行的开头开始。	^\d{3}	“901” “901-”
$	匹配必须出现在字符串的末尾或出现在行或字符串末尾的 \n 之前。	-\d{3}$	“-333” “-333”
\A	匹配必须出现在字符串的开头。	\A\d{3}	“901” “901-”
\Z	匹配必须出现在字符串的末尾或出现在字符串末尾的 \n 之前。	-\d{3}\Z	“-333” “-333”
\z	匹配必须出现在字符串的末尾。	-\d{3}\z	“-333” “-333”
\G	匹配必须出现在上一个匹配结束的地方。	\G$\d$	“(1)(3)(5)[7](9)”中的“(1)”、“(3)”、“(5)”
\b	匹配必须出现在 \w（字母数字）和 \W（非字母数字）字符之间的边界上。	\b\w+\s\w+\b	“them theme them them”中的“them theme”、“them them”
\B	匹配不得出现在 \b 边界上。	\Bend\w*\b	“end sends endure lender”中的“ends”和“ender”

分组构造

分组构造描述了正则表达式的子表达式，通常用于捕获输入字符串的子字符串。分组构造包括下表中列出的语言元素。有关详细信息，请参阅正则表达式中的分组构造。

分组构造	描述	模式	匹配
( 子表达式 )	捕获匹配的子表达式并将其分配到一个从 1 开始的序号中。	(\w)\1	“deep”中的“ee”
(?< 名称 > 子表达式 )	将匹配的子表达式捕获到一个命名组中。	(?<double>\w)\k<double>	“deep”中的“ee”
(?< 名称 1 – 名称 2 > 子表达式 )	定义平衡组定义。有关详细信息，请参阅正则表达式中的分组构造中的“平衡组定义”部分。	(((?’Open’$)[^\($])+((?’Close-Open’\))[^])+)*(?(Open)(?!))$	“3+2^((1-3)(3-1))”中的“((1-3)(3-1))”
(?: 子表达式 )	定义非捕获组。	Write(?:Line)?	“Console.WriteLine()”中的“WriteLine” “Console.Write(value)”中的“Write”
(?imnsx-imnsx: 子表达式 )	应用或禁用子表达式中指定的选项。有关详细信息，请参阅正则表达式选项。	A\d{2}(?i:\w+)\b	“A12xl A12XL a12xl”中的“A12xl”和“A12XL”
(?= 子表达式 )	零宽度正预测先行断言。	\w+(?=\.)	“He is. The dog ran. The sun is out.”中的“is”、“ran”和“out”
(?! 子表达式 )	零宽度负预测先行断言。	\b(?!un)\w+\b	“unsure sure unity used”中的“sure”和“used”
(?<= 子表达式 )	零宽度正回顾后发断言。	(?<=19)\d{2}\b	“1851 1999 1950 1905 2003”中的“99”、“50”和“05”
(?<! 子表达式 )	零宽度负回顾后发断言。	(?<!19)\d{2}\b	“1851 1999 1950 1905 2003”中的“51”和“03”
(?> 子表达式 )	非回溯（也称为“贪婪”）子表达式。	[13579](?>A+B+)	“1ABB 3ABBC 5AB 5AC”中的“1ABB”、“3ABB”和“5AB”

数量词

限定符指定在输入字符串中必须存在上一个元素（可以是字符、组或字符类）的多少个实例才能出现匹配项。限定符包括下表中列出的语言元素。有关详细信息，请参阅正则表达式中的限定符。

限定符	描述	模式	匹配
*	匹配上一个元素零次或多次。	\d*\. \d	“.0”，“19.9”和“219.9”
+	匹配上一个元素一次或多次。	“be+”	“been”中的“bee”，“bent”中的“be”
?	匹配上一个元素零次或一次。	“rai? n”	“ran”和“rain”
{ n }	匹配上一个元素恰好 n 次。	“,\d{3}”	“1,043.6”中的“,043”，“9,876,543,210”中的“,876”、“,543”和“,210”
{ n ,}	匹配上一个元素至少 n 次。	“\d{2,}”	“166”，“29”和“1930”
{ n , m }	匹配上一个元素至少 n 次，但不多于 m 次。	“\d{3,5}”	“166”、“17668” “193024”中的“19302”
*?	匹配上一个元素零次或多次，但次数尽可能少。	\d*? \. \d	“.0”，“19.9”和“219.9”
+?	匹配上一个元素一次或多次，但次数尽可能少。	“be+?”	“been”中的“be”，“bent”中的“be”
??	匹配上一个元素零次或一次，但次数尽可能少。	“rai?? n”	“ran”和“rain”
{ n }?	匹配前面的元素恰好 n 次。	“,\d{3}?”	“1,043.6”中的“,043”，“9,876,543,210”中的“,876”、“,543”和“,210”
{ n ,}?	匹配上一个元素至少 n 次，但次数尽可能少。	“\d{2,}?”	“166”，“29”和“1930”
{ n , m }?	匹配上一个元素的次数介于 n 和 m 之间，但次数尽可能少。	“\d{3,5}?”	“166”、“17668” “193024”中的“193”、“024”

反向引用构造

反向引用允许在同一正则表达式中随后标识以前匹配的子表达式。下表列出了 .NET Framework 的正则表达式支持的反向引用构造。有关详细信息，请参阅正则表达式中的反向引用构造。

反向引用构造	描述	模式	匹配
\ number	后向引用。匹配编号子表达式的值。	(\w)\1	“seek”中的“ee”
\k< 名称 >	命名后向引用。匹配命名表达式的值。	(?<char>\w)\k<char>	“seek”中的“ee”

替换构造

替换构造用于修改正则表达式以启用 either/or 匹配。这些构造包括下表中列出的语言元素。有关详细信息，请参阅正则表达式中的备用构造。

替换构造	描述	模式	匹配
\|	匹配以竖线 (\|) 字符分隔的任何一个元素。	th(e\|is\|at)	“this is the day.”中的“the”和“this”
(?( expression ) yes\| no )	如果正则表达式模式由 expression 匹配指定，则匹配 yes；否则，匹配可选 no 部分。expression 被解释为零宽度断言。	(?(A)A\d{2}\b\|\b\d{3}\b)	“A10 C103 910”中的“A10”和“910”
(?( name ) yes \| no)	如果 name（已命名或已编号的捕获组）具有匹配，则匹配 yes；否则，匹配可选 no。	(?<quoted>”)?(?(quoted).+?”\|\S+\s)	“Dogs.jpg “Yiska playing.jpg””中的 Dogs.jpg 和 “Yiska playing.jpg”

替代

替换是替换模式中支持的正则表达式语言元素。有关详细信息，请参阅正则表达式中的替代。下表中列出的元字符是原子零宽度断言。

字符	描述	模式	替换模式	输入字符串	结果字符串
$ number	替换按组 number 匹配的子字符串。	\b(\w+)(\s)(\w+)\b	$3$2$1	“one two”	“two one”
${ 名称 }	替换按命名组 name 匹配的子字符串。	\b(?<word1>\w+)(\s)(?<word2>\w+)\b	${word2} ${word1}	“one two”	“two one”
$$	替换字符“$”。	\b(\d+)\s?USD	$$$1	“103 USD”	“$103”
$&	替换整个匹配项的一个副本。	\$? \d*\.? \d+	$&	“$1.30”	“$1.30”
$`	替换匹配前的输入字符串的所有文本。	B+	$`	“AABBCC”	“AAAACC”
$’	替换匹配后的输入字符串的所有文本。	B+	$’	“AABBCC”	“AACCCC”
$+	替换最后捕获的组。	B+(C+)	$+	“AABBCCDD”	AACCDD
$_	替换整个输入字符串。	B+	$_	“AABBCC”	“AAAABBCCCC”

正则表达式选项

可以指定控制正则表达式引擎如何解释正则表达式模式的选项。其中的许多选项可以指定为内联（在正则表达式模式中）或指定为一个或多个 RegexOptions 常量。本快速参考仅列出内联选项。有关内联和RegexOptions 选项的详细信息，请参阅文章正则表达式选项。

可通过两种方式指定内联选项：

通过使用杂项构造(?imnsx-imnsx)，可以用选项或选项组前的减号 (-) 关闭这些选项。例如，(?i-mn) 启用不区分大小写的匹配 (i)，关闭多行模式 (m) 并关闭未命名的组捕获 (n)。该选项自定义选项的点开始应用于此正则表达式，且持续有效直到模式结束或者到另一构造反转此选项的点。
通过使用分组构造(?imnsx-imnsx:子表达式)（只定义指定组的选项）。

.NET Framework 正则表达式引擎支持以下内联选项。

选项	描述	模式	匹配
i	使用不区分大小写的匹配。	\b(?i)a(?-i)a\w+\b	“aardvark”, “aaaAuto” in “aardvark AAAuto aaaAuto Adam breakfast”
m	使用多行模式。 ^ 和 $ 匹配行的开头和结尾，但不匹配字符串的开头和结尾。	有关示例，请参阅正则表达式选项中的“多行模式”部分。
n	不捕获未命名的组。	有关示例，请参阅正则表达式选项中的“仅显式捕获”部分。
s	使用单行模式。	有关示例，请参阅正则表达式选项中的“单行模式”部分。
x	忽略正则表达式模式中的非转义空白。	\b(?x) \d+ \s \w+	“1 aardvark 2 cats IV centurions”中的“1 aardvark”、“2 cats”

其他构造

其他构造可修改某个正则表达式模式或提供有关该模式的信息。下表列出了 .NET Framework 支持的其他构造。有关详细信息，请参阅正则表达式中的其他构造。

构造	定义	示例
(?imnsx-imnsx)	在模式中间对诸如不区分大小写这样的选项进行设置或禁用。有关详细信息，请参阅正则表达式选项。	\bA(?i)b\w+\b 匹配“ABA Able Act”中的“ABA”和“Able”
(?# comment )	内联注释。该注释在第一个右括号处终止。	\bA(?#Matches words starting with A)\w+\b
# [至行尾]	X 模式注释。该注释以非转义的 # 开头，并继续到行的结尾。	(?x)\bA\w+\b#Matches words starting with A

2011-11-302020-12-08

自己写的1个简单但易懂实用的广告幻灯片切换代码

代码比较简单，可操作性较强，可以自己组合。主要使用的是jquery的自有功能实现，我把代码贴出来，有空的可以参考1下：

<!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-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>

<style>
* {font-family: "Lucida Grande" , "微软雅黑" , "宋体" , "黑体" , "幼圆" , "隶书" , "华文行楷", Verdana, Lucida, Arial, Helvetica, sans-serif;}
body {
    font-size:12px;
    border:0px;
    font-variant: normal;
    color: #bcbcbc;
    text-decoration: none;
    margin: 0px;
    padding: 0px;
    background-color: #fff;
    width:100%;
}
ul,li,ol,dl,dt,dd,form{padding:0px;margin:0px;}
li{ list-style:none}
form,img { border:none;}
.left{ float:left;}
.right{ float:right}
.clear{ clear:both}
.buttons li a {width:100px;height:50px; background:#069; display:block}
.buttons li a:hover{ background:#CCC}
.buttons li a.mouseover{background:#CCC}  /* 定义鼠标移上的效果*/
</style>

<script type="text/javascript">
//焦点图功能
$(function(){
    var ad_img = $("#imgs"); //定义幻灯图片组的id，可以根据实际情况修改
    var ad_button = $("#buttons"); //定义幻灯按钮组的id，可以根据实际情况修改
    var ad_imgs = ad_img.find("li");  //图片组的li集合
    var ad_buttons = ad_button.find("li") //按钮组的li集合
    var ad_mouseoverCls="mouseover" //定义鼠标移上的class的名称，可以根据实际情况修改
    ad_imgs.hide() //默认将图片组隐藏
    ad_imgs.eq(0).show() //默认将第1张图片显示
    var ad_i = 1; //计数器，默认从第2张图片开始淡入
    ad_buttons.mouseover(function(){
        ad_i = ad_buttons.index(this); //鼠标移上的是第几个
        ad_imgs.hide()
        ieFilter(ad_imgs[ad_i]); //执行滤镜
        ad_imgs.eq(ad_i).show(); //将对应的图片显示
        ad_buttons.find("a").removeClass(ad_mouseoverCls);
        ad_buttons.eq(ad_i).find("a").addClass(ad_mouseoverCls);
        })

    //如果是ie浏览器则执行滤镜
    var ieFilter = function(o){
        if($.browser.msie){
            $(o).css("filter","progid:DXImageTransform.Microsoft.RevealTrans(Duration=1, Transition=23)") //设置滤镜
            o.filters[0].apply();
            o.filters[0].    transition=23; //每次出现不同样式
            o.filters[0].play();
            }
        }
    var ad_autoMarquee = function(){
        if(ad_i<ad_imgs.length){
            ad_imgs.hide()
            ieFilter(ad_imgs[ad_i]); //执行滤镜
            ad_imgs.eq(ad_i).show(); //将对应的图片显示
            ad_buttons.find("a").removeClass(ad_mouseoverCls);
            ad_buttons.eq(ad_i).find("a").addClass(ad_mouseoverCls);
            ad_i++; //将计数器增1
            }else{
                ad_i=0; //重置计数器
                }
        }
    var focusAd = setInterval(ad_autoMarquee,3000)
    })    
</script>
</head>

<body>
<div >
<div id="imgs">
    <ul>
    <li><img src="Chrysanthemum.jpg" /></li>
    <li><img src="Desert.jpg" /></li>
    <li><img src="Hydrangeas.jpg" /></li>
    </ul>
</div>
<div     class="right buttons" id="buttons">
    <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    </ul>
</div>
</div>
<div     class="clear"></div>
<h1><a href="http://zhuoyue.me">卓越.Me</a></h1>
</body>
</html>

你也可以看1下在线演示的效果：http://demo.zhuoyue.me/js/Ad/zi-ji-bian-xie-de-jian-dan-yi-dong-de-huan-deng/
当然你可以把源代码和图片下载下来：自己编写的简单易懂实用的广告幻灯代码

2011-11-022020-12-08

不错的Jquery幻灯插件KinSlideshow

今天同事在做某个项目的前端代码的时候，由于页面自身有多处幻灯效果需要展现，从网络某处找到1款叫KinSlideShow的Jquery幻灯插件，出于兴趣爱好我自己也测试了1下，感觉不错，遂收藏。
应用该插件最简单的代码：

$(function(){
    $("#KinSlideshow").KinSlideshow();
})

更多的方法和属性可以查看演示：http://demo.zhuoyue.me/js/KinSlideshow/
此处下载完整源代码KinSlideshow源代码包，下载之前，请对我的分享表示支持，评论1下哈。

Download Now