sea.js视频教程写的脚本要怎么转化成普通用的JS脚本

存为书签来使用的JS代码应该如何写入油猴脚本里使其自动加载?_chrome吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名:今日本吧第个签到,本吧因你更精彩,明天继续来努力!
本吧签到人数:0成为超级会员,使用一键签到本月漏签0次!成为超级会员,赠送8张补签卡连续签到:天&&累计签到:天超级会员单次开通12个月以上,赠送连续签到卡3张
关注:145,416贴子:
存为书签来使用的JS代码应该如何写入油猴脚本里使其自动加载?收藏
存为书签来使用的JS代码应该如何写入油猴脚本里使其自动加载?新建油猴脚本,去掉javascript:eval后直接把JS代码复制进去,好像并没有运行,查看油猴脚本提示了几个“缺少分号,多余的分号”,更改后好像还是不行,是不是哪里弄错了?
缺牙要及时修复,揭秘种植牙如何做到几十年不掉?
你確定圖中的是你的書籤js?
两个错误都无关紧要。1,多余分号2,不要使用eval
es5 默认模板而已,大可以去掉它们
有人能告知chrome插件 就是打开书签都是新的标签页而不是在当前页打开的那种拓展插件 谢谢!!
楼主可以先尝试将代码解密
登录百度帐号推荐应用
为兴趣而生,贴吧更懂你。或如何为UltraEdit自身编写javascript脚本_百度文库
两大类热门资源免费畅读
续费一年阅读会员,立省24元!
如何为UltraEdit自身编写javascript脚本
上传于|0|0|文档简介
&&为UltraEdit自身编写javascript脚本的说明文档
阅读已结束,如果下载本文需要使用2下载券
想免费下载本文?
定制HR最喜欢的简历
下载文档到电脑,查找使用更方便
还剩16页未读,继续阅读
定制HR最喜欢的简历
你可能喜欢> 博客详情
一步步学会使用SeaJS 2.0
本文分为以下8步,熟悉之后就能够熟练使用SeaJS,从此之后你的生活会变得更加轻松愉悦!
1、SeaJS是什么?
2、下载并检阅SeaJS
3、建立工程和各种目录
4、引入SeaJS库
5、编写自己的代码
6、引入自己的代码
7、压缩合并
8、总结展望
--------------------------------------------------
1、SeaJS是什么?
你一定听过前端模块化开发吧?神马,你没听过?我只能说你out了……
你应该知道Java的import吧?神马,你又不知道?那你应该知道CSS中的import吧……
在这里我不想展开说前端模块化的含义和价值,因为这里有一篇好文(
),详细说明了前端模块化。
我知道你看到那么长的文章肯定会望而却步,也许你是希望能够快速开始敲代码(程序员的通病……)。没关系,如果实在读不下去,只要记住模块化要解决的问题即可:命名冲突、文件依赖关系。
这两个闹心的问题应该遇到过吧,如果没遇到过……我只能说你太牛X了
好了,前端模块化就扯到这里,写过前端的人应该基本都知道JavaScript自身是不支持模块化开发的,所以就有了SeaJS这款神器,为前端从业者提供了一个强大易用的模块化开发工具。
2、下载并检阅SeaJS
SeaJS现在已经是2.0版本啦,到这里下载:
解压后会看到下列目录:
dist&——&压缩好的、用于浏览器端的SeaJS代码
docs&——&文档
src&——&源代码
package.json&+&Gruntfile.js&——&Grunt构建工具所需要的文件,这个在第七步压缩合并会介绍到
其他目录或文件可以暂且不管
3、建立工程和各种目录
准备工作已经完成,我们终于可以开始进行开发啦!来,跟我走:
a.&建立工程
用你最喜欢的IDE建立工程,名字为HelloSeaJS
b.&准备各种目录
在这里把JavaScript、Image、CSS都放在统一的资源文件(assets)中,建好之后的目录如下:
(我使用了Sublime2.0,在这里强烈推荐)
c.&把刚刚下好的seajs/dist中的文件都放在scripts/seajs目录下
注意:SeaJS会根据自身的URI来决定URL&base,而SeaJS在加载其他模块的时候会根据这个URL&base来计算路径。SeaJS会忽略掉seajs、seajs/2.0.0/seajs这两种目录,照上述的目录结构,此处的URL&base就是HelloSeaJS/assets/scripts,这样其他模块就可以与seajs目录并行存放。
至此,工程和文件都已准备完成。
4、引入SeaJS库
与引入其他js库并无太大区别:
&script&src="assets/scripts/seajs/sea.js"&id="seajsnode"&&/script&
你可能注意到,这里加上了id="seajsnode",原因如下:
a.&SeaJS加载自身的script标签的其他属性(如data-config、data-main)等来实现不同的功能
b.&SeaJS内部通过document.getElementById("seajsnode")来获取这个script标签(其实SeaJS内部还有一种方式,不过另一种方式的效率比较低,所以不推荐,如果有兴趣,可以看一下源码)
5、编写自己的代码
这里作为示范,只做了一个非常简单的效果,点击查看:
在编写自己代码的时候,要时刻记住”模块化“,而操作起来也非常简单,因为在SeaJS中一个文件就是一个模块。
下面是代码逻辑的模块application.js:
define(function(require,exports,module){
&&&&&var&util&=&{};
&&&&&var&colorRange&=&['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
&&&&&util.randomColor&=&function(){
&&&&&&&&&&return&'#'&+
&&&&&&&&&&&&&&&colorRange[Math.floor(Math.random()&*&16)]&+
&&&&&&&&&&&&&&&colorRange[Math.floor(Math.random()&*&16)]&+
&&&&&&&&&&&&&&&colorRange[Math.floor(Math.random()&*&16)]&+
&&&&&&&&&&&&&&&colorRange[Math.floor(Math.random()&*&16)]&+
&&&&&&&&&&&&&&&colorRange[Math.floor(Math.random()&*&16)]&+
&&&&&&&&&&&&&&&colorRange[Math.floor(Math.random()&*&16)];
&&&&&var&helloSeaJS&=&document.getElementById('hello-seajs');
&&&&&helloSeaJS.style.color&=&util.randomColor();
&&&&&window.setInterval(function(){
&&&&&&&&&&helloSeaJS.style.color&=&util.randomColor();
&&&&&},1500);
我们看到,所有代码都放在define(function(require,exports,module){});函数体里面。
define是SeaJS定义的一个全局函数,用来定义一个模块。
至于require,exports,module都是什么,可以暂且不管,到此,我们的代码已经完成,很简单吧。嗯,花个几十秒钟,看一下代码。
看完之后,你会说,这算什么啊!这就完了么?
不要怪我,为了简单易懂,我们就按照”一步步“的节奏慢慢来。
随着代码的增多,你肯定会遇到util越来越多的情况。很好,这样看来,我们就有了两个模块:util模块和application模块。SeaJS中,文件即模块,所以当然要将其分为两个文件。先看util.js:
define(function(require,exports,module){
&&&&&var&util&=&{};
&&&&&var&colorRange&=&['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
&&&&&util.randomColor&=&function(){
&&&&&&&&&&return&'#'&+
&&&&&&&&&&&&&&&colorRange[Math.floor(Math.random()&*&16)]&+
&&&&&&&&&&&&&&&colorRange[Math.floor(Math.random()&*&16)]&+
&&&&&&&&&&&&&&&colorRange[Math.floor(Math.random()&*&16)]&+
&&&&&&&&&&&&&&&colorRange[Math.floor(Math.random()&*&16)]&+
&&&&&&&&&&&&&&&colorRange[Math.floor(Math.random()&*&16)]&+
&&&&&&&&&&&&&&&colorRange[Math.floor(Math.random()&*&16)];
&&&&&module.exports&=&
除了define之外,我们看到module.exports&=&这一句比较特殊。这句是在说,我util模块向外暴露的接口就这些,其他所有的东西都是我内部用的,尔等就无需担心了,我会照顾好的。
再看application.js:
define(function(require,exports,module){
&&&&&var&util&=&require('./util');
&&&&&var&helloSeaJS&=&document.getElementById('hello-seajs');
&&&&&helloSeaJS.style.color&=&util.randomColor();
&&&&&window.setInterval(function(){
&&&&&&&&&&helloSeaJS.style.color&=&util.randomColor();
&&&&&},1500);
我们看到var&util&=&require('./util');这句比较特殊。这句就是在说,我application模块由于业务需要,想请util模块来帮忙,所以把util给require进来。
至此,我们经历了一个模块到两个模块的转变,在日后漫长的日子中,我们的模块也许会越来越多,不过不用担心,有了SeaJS提供的define、require、module.exports,我们都可以方便的应对。
6、引入自己的代码
你看到这个小标题,你可能会极力的鄙视我,这等工作还需要你来示范?于是,你啪啪啪啪,在引入SeaJS的script标签后引入了util.js和application.js:
&script&src="assets/scripts/application/util.js"&&/script&
&script&src="assets/scripts/application/application.js"&&/script&
然后你不停的F5……
你看不到效果吧?这就是这个小节存在的理由。
SeaJS提供了模块化的能力,前面我们已经看到了SeaJS定义模块、引用模块的方法,而这里就要用到SeaJS加载并启动模块的两种方式:
a、使用data-main
为&script&src="assets/scripts/seajs/sea.js"&id="seajsnode"&&/script&添加data-main="application/application"属性即可:
&script&src="assets/scripts/seajs/sea.js"&id="seajsnode"&data-main="application/application"&&/script&
SeaJS会根据data-main指定的模块来作为整个应用的入口模块。SeaJS找到这个模块之后,就会加载执行这个模块对应的文件。
那么,SeaJS又是怎么找到这个文件呢?也就是说,这个模块对应的加载路径是多少?
“算法”是:SeaJS_URL_base&+&data-main
如上文,该例子的SeaJS_URL_base是HelloSeaJS/assets/scripts/
那么,加载路径就是HelloSeaJS/assets/scripts/application/application.js(SeaJS会自动加上.js后缀)
b、使用seajs.use
在&script&src="assets/scripts/seajs/sea.js"&id="seajsnode"&后面加上:
&script& seajs.use("application/application"); &/script&
其实这两种效果在这个例子中是一样的,data-main通常用在只有一个入口的情况,use可以用在多个入口的情况,具体用法,看这里:
如果你对你的程序有完全的控制权,建议使用data-main的方式,这样整个页面就只有一段script标签!作为一名前端开发人员,我不得不惊叹:干净、完美!
无论使用哪种方式,跟着我一起F5一下!
在打开Chrome的debug工具,查看Network这个tab:
我们看到,SeaJS已经帮我们加载好了application.js和util.js,舒服吧~
嗯,我第一次试用SeaJS的时候,到这里也感到了无比的舒心
7、压缩合并
正当我伸伸懒腰,打算上个厕所的时候,突然想到一件事情:如果模块越来越多,那么多文件都要分开加载?那岂不严重影响性能!?(啥,你不知道为啥?)
要压缩合并JavaScript呀!于是,我强忍住那股液体,开始用YUICompressor来压缩,并手动合并了两个文件。
这里就不展示结果了,因为很蛋疼,完全对不住我刚才忍住液体的勇气!结果当然是,失败。
为什么会失败呢?自己想了想,同时打开压缩后的代码一看,才发现原因:
压缩后之后,require变量变成了a变量。SeaJS是通过require字面来判断模块之间的依赖关系的,所以,require变量不能被简化。
嗯,SeaJS已经替我们想到了这个问题,于是我们就采用SeaJS提供的方式来合并压缩吧(当然你也可以自己用别的方式压缩)。
SeaJS在2.0之前,是采用SPM作为压缩合并工具的,到了2.0,改为Grunt.js,SPM变为包管理工具,类似NPM(不知道NPM?Google一下吧)
自动化不仅是科技带给社会的便利,也是Grunt带给前端的瑞士军刀。使用Grunt,可以很方便的定制各种任务,如压缩、合并等。使用Grunt之前,需要安装node环境和grunt工具,Google一下,十分钟后回来。
Grunt最核心的就两个部分,package.json、Gruntfile.js。
a.&package.json
&&&&Grunt把一个项目/目录视为一个npm模块,package.json就是用来描述这个模块的信息,包括name、version、author等等。
这里强调一下,Grunt既然将该目录视为一个模块,那么该模块当然可以依赖其他模块。
我们看本示例的:
&&&&&"name"&:&"HelloSeaJS",
&&&&&"version"&:&"1.0.0",
&&&&&"author"&:&"Qifeng&Liu",
&&&&&"devDependencies"&:&{
&&&&&&&&&&"grunt"&:&"0.4.1",
&&&&&&&&&&"grunt-cmd-transport"&:&"0.1.1",
&&&&&&&&&&"grunt-cmd-concat"&:&"0.1.0",
&&&&&&&&&&"grunt-contrib-uglify"&:&"0.2.0",
&&&&&&&&&&"grunt-contrib-clean"&:&"0.4.0"
devDependencies就是用来描述自身所依赖的模块
grunt模块用来跑Gruntfile.js中定义的任务
grunt-cmd-transport模块用来对SeaJS定义的模块进行依赖提取等任务
grunt-cmd-concat模块用来对文件进行合并
grunt-contrib-uglify模块用来压缩JavaScript
grunt-contrib-clean模块用来清除临时目录
b.&Gruntfile.js
module.exports&=&function(grunt){
&&&&&grunt.initConfig({
&&&&&&&&&&transport&:&{
&&&&&&&&&&&&&&&options&:&{
&&&&&&&&&&&&&&&&&&&&format&:&'application/dist/{{filename}}'&&//生成的id的格式
&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&application&:&{
&&&&&&&&&&&&&&&&&&&&files&:&{
&&&&&&&&&&&&&&&&&&&&&&&&&'.build'&:&['application.js','util.js']&&&//将application.js、util.js合并且提取依赖,生成id,之后放在.build目录下
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&}
&&&&&&&&&&},
&&&&&&&&&&concat&:&{
&&&&&&&&&&&&&&&main&:&{
&&&&&&&&&&&&&&&&&&&&options&:&{
&&&&&&&&&&&&&&&&&&&&&&&&&relative&:&true
&&&&&&&&&&&&&&&&&&&&},
&&&&&&&&&&&&&&&&&&&&files&:&{
&&&&&&&&&&&&&&&&&&&&&&&&&'dist/application.js'&:&['.build/application.js'],&&//&合并.build/application.js文件到dist/application.js中
&&&&&&&&&&&&&&&&&&&&&&&&&'dist/application-debug.js'&:&['.build/application-debug.js']
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&}
&&&&&&&&&&},
&&&&&&&&&&uglify&:&{
&&&&&&&&&&&&&&&main&:&{
&&&&&&&&&&&&&&&&&&&&files&:&{
&&&&&&&&&&&&&&&&&&&&&&&&&'dist/application.js'&:&['dist/application.js']&//对dist/application.js进行压缩,之后存入dist/application.js文件
&&&&&&&&&&&&&&&&&&&&}
&&&&&&&&&&&&&&&}
&&&&&&&&&&},
&&&&&&&&&&clean&:&{
&&&&&&&&&&&&&&&build&:&['.build']&//清除.build文件
&&&&&&&&&&}
&&&&&grunt.loadNpmTasks('grunt-cmd-transport');
&&&&&grunt.loadNpmTasks('grunt-cmd-concat');
&&&&&grunt.loadNpmTasks('grunt-contrib-uglify');
&&&&&grunt.loadNpmTasks('grunt-contrib-clean');
&&&&&grunt.registerTask('build',['transport','concat','uglify','clean'])
定义好两个文件之后,就可以进入到application目录下,首先运行:
npm&install
该命令会下载好package.json中依赖的模块
grunt&build
该命令会运行grunt.registerTask方法中指定的任务
不出差错的话,会在application目录下生成一个dist目录,里面包含了合并但没压缩的application-debug.js和合并且压缩好的application.js。
修改index.html的
&script&src="assets/scripts/seajs/sea.js"&id="seajsnode"&data-main="application/application"&&/script&
&script&src="assets/scripts/seajs/sea.js"&id="seajsnode"&data-main="application/dist/application"&&/script&
大功告成!
8、总结展望
SeaJS秉着简单实用的原则,API设计职责单一,使用起来得心应手。
SeaJS为前端提供了模块化能力,可以简单优雅的解决命名冲突、依赖关系等常见且棘手的问题。通过使用SeaJS,我的生活质量一下次上升好几个档次。
当然,除了本文介绍的,SeaJS还有一些其他功能,相信只要你入了门,肯定能够迅速掌握,这里给个链接
其实,许多语言自身已经有了模块化的功能,如Java的import,C++的#include等,但是由于各种原因,JavaScript自身并没有这个功能。虽然借助于SeaJS可以很方便的进行模块化开发了,但总觉得这个能力应该是语言自身的。好在,下个版本的JavaScript貌似在计划引入模块化的概念,让我们拭目以待吧!
最后,感谢SeaJS作者玉伯。
PS,本文参考了SeaJS提供的使用范例
人打赏支持
参与源创会
领取时间:
“”在线下联结了各位 OSCer,推广开源项目和理念,很荣幸有你的参与~
领取条件:参与过开源中国“源创会”的 OSCer 可以领取
码字总数 17470
支付宝支付
微信扫码支付
打赏金额: ¥
已支付成功
打赏金额: ¥
& 开源中国(OSChina.NET) |
开源中国社区(OSChina.net)是工信部
指定的官方社区查看: 19277|回复: 15
易语言怎么使用JS脚本?
阅读权限120
在线时间 小时
签到天数:15 天结帖率: (1/3)
function defaultPuguang(sOp,iTy){
& & var userUin = &&;
& & if(QQ.Cookie.get(&o_cookie&)){
& && &&&userUin = Number(QQ.Cookie.get(&o_cookie&));
& & var defaultPuguangImage = new Image(1,1);
& & defaultPuguangImage.src=&/collect?sIp=&iQQ=& + userUin + &&sBiz=&sOp=& + sOp + &&iSta=&iTy=& + iTy + &&iFlow=&district=&ran=& + Math.random();
上面是qq.com的JS脚本其中一段函数
看了之乎者也的教程到现在都没搞懂JS脚本的使用
说一下问题,我想从qq.com这个页面获取到已经登录的QQ号码,
然后发现QQ号码是从JS脚本里面调用的,于是找到了上面那段函数
该函数有个变量就是userUin,这个变量就是获取QQ号码的,
但是不知道该怎么在易语言里面使用这个脚本函数,也不知道怎么获取到userUin的值
回答提醒:如果本帖被关闭无法回复,您有更好的答案帮助楼主解决,请发表至
可获得加分喔。友情提醒:本版被采纳的主题可在
帖子申请荣誉值,获得 1点 荣誉值,荣誉值可兑换终身vip用户组哦。快捷通道: →
阅读权限165
在线时间 小时
签到天数: 5 天结帖率: (2/2)
你这个直接放在易语言里是不能用的,需要改装一下
易语言使用JS的方法: 脚本组件
您可以选择打赏方式支持他
阅读权限120
在线时间 小时
签到天数: 15 天结帖率: (1/3)
你这个直接放在易语言里是不能用的,需要改装一下
易语言使用JS的方法: 脚本组件
怎么个改法?
脚本组件不会用呀
您可以选择打赏方式支持他
阅读权限165
在线时间 小时
签到天数: 5 天结帖率: (2/2)
&&对象对象&&对象.创建 (“ScriptControl”, )对象.写属性 (“Language”, “JScript”)对象.方法 (“AddCode”, “JS代码”)输出调试文本 (对象.通用方法 (“Run”, “s”).取文本 ()).版本 2
.局部变量 对象, 对象
对象.创建 (“ScriptControl”, )
对象.写属性 (“Language”, “JScript”)
对象.方法 (“AddCode”, “JS代码”)
输出调试文本 (对象.通用方法 (“Run”, “s”).取文本 ())
好厉害的样子 JS在哪学的&
您可以选择打赏方式支持他
阅读权限165
在线时间 小时
签到天数: 5 天结帖率: (2/2)
这就是 对象
精易模块的脚本类就是用的这个方法
您可以选择打赏方式支持他
阅读权限120
在线时间 小时
签到天数: 15 天结帖率: (1/3)
[e=1].版本 2
.局部变量 对象, 对象
看不懂唉,能解释一下每段代码的意思么?
还有JS代码放在“JS代码”这个变量里面么?
您可以选择打赏方式支持他
阅读权限165
在线时间 小时
签到天数: 5 天结帖率: (2/2)
看不懂唉,能解释一下每段代码的意思么?
还有JS代码放在“JS代码”这个变量里面么?
是的& &你直接用精易模块的脚本类吧
您可以选择打赏方式支持他
阅读权限165
在线时间 小时
签到天数: 5 天结帖率: (2/2)
&&脚本类_脚本组件&&脚本.执行 ( #脚本常量 )输出调试文本 (脚本.运行 (“函数名称”, “参数”)).版本 2
.局部变量 脚本, 类_脚本组件
脚本.执行 (#脚本常量)
输出调试文本 (脚本.运行 (“函数名称”, “参数”))
您可以选择打赏方式支持他
阅读权限120
在线时间 小时
签到天数: 15 天结帖率: (1/3)
[e=1].版本 2
.局部变量 脚本, 类_脚本组件
参数是指什么??
您可以选择打赏方式支持他
阅读权限165
在线时间 小时
签到天数: 5 天结帖率: (2/2)
参数是指什么??
也就是运行一个JS函数要带的参数,没有就不要填
您可以选择打赏方式支持他
精易论坛 - 有你更精彩 /2
【8周年活动】活动完美收官
若快,云速,滴滴。大家快乐兑换呀。
拒绝任何人以任何形式在本论坛发表与中华人民共和国法律相抵触的言论,本站内容均为会员发表,并不代表精易立场!
揭阳精易科技有限公司申明:我公司所有的培训课程版权归精易所有,任何人以任何方式翻录、盗版、破解本站培训课程,我们必将通过法律途径解决!
公司简介:揭阳市揭东区精易科技有限公司致力于易语言教学培训/易语言学习交流社区的建设与软件开发,多年来为中小企业编写过许许多多各式软件,并把多年积累的开发经验逐步录制成视频课程供学员学习,让学员全面系统化学习易语言编程,少走弯路,减少对相关技术的研究与摸索时间,从而加快了学习进度!
防范网络诈骗,远离网络犯罪
违法和不良信息举报电话,企业QQ: ,邮箱:@
Powered by
粤公网安备 25}

我要回帖

更多关于 sea.js官网 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信