您的位置:68399皇家赌场 > 服务器租用 > 【www.68399.com】Javascript开垦之工具总结

【www.68399.com】Javascript开垦之工具总结

发布时间:2019-05-09 19:29编辑:服务器租用浏览(181)

    DuelJS 是什么?

    DuelJS是叁个飞跃和微型的JavaScript库,能够扶持实现浏览器tab页主从涉嫌的切换。使用它可以优化你浏览器和服务器之间的通讯,以及你浏览器内部tab页之间的通讯

    对此本身来讲,笔者关注的便是它能够协理达成同域名下差异窗口(tab)之间通信,可以播放新闻。

    写在前边

    鉴于JS开拓对本身来讲是全新的技巧栈,开荒进程中碰着了形形色色的框架、工具,同时也感慨特别一下相对于.Net的框架(工具框架以及测试框架等)JS框架真的是太丰硕了、社区的力量果然庞大~~~也是透过希望本文能归纳常用的框架以及一些中坚观念,不断完善中,希望各位有经历的相爱的人能多多提意见。

    写在前头

    鉴于JS开垦对自己来讲是全新的本领栈,开采进度中遇见了多姿多彩的框架、工具,同时也感慨卓绝一下相持于.Net的框架(工具框架以及测试框架等)JS框架真的是太丰硕了、社区的力量果然庞大~~~也是透过希望本文能归纳常用的框架以及一些主干思想,不断完善中,希望各位有经历的朋友能多多提意见。

     

    作者:Nicolas
    本文为原创小说,转载请注解笔者及出处

    简言

    DuelJS中的基本元素是channel。Channel为同一个站点的不等浏览器tab之间提供了3个特有的共享空间。

    var channel = duel.channel('example'); // build your channel
    

    每一个窗口只有连个可能的景况:核心方和从属方。宗旨方窗口是指当前运动的窗口(也便是获取主旨的窗口)。

    检查实验当前窗口是还是不是是大旨方窗口的点子是:

    window.isMaster()
    

     

    您能够选用它来判别,并赢得聊天音讯,比如:

    if (window.isMaster()) {
        updateChatWindow(); // user function
    }
    

     

    1. 基础知识篇

    0. 前端框架

    二〇一八年一篇《在 2016 年学 JavaScript 是1种何等的体验?》吓坏了诸多想要入行新校友和入行很久的老车手,认为一下子前端世界已经看不懂了,做个页面要那么麻烦?当然假如你只是想要三个粗略的静态页面,这么玩儿正是杀鸡用牛刀了。但假让你图谋付出两个Web App,之后会不停的迭代,有三个舒服的付出情状是及其首要的,那么底怎么样的条件才会是兴高采烈愉悦的吧?

    更多越好

    您想要越多的职能吗?是的,大家是壹对。广播成效是系统向装有channel(窗口)广播音讯的功用,比如如下:

     1 <script type="text/javascript">
     2     var channel = duel.channel('test');
     3     document.title = 'Master '   duel.getWindowID();
     4 
     5     channel.on('demo_trigger', function (message) {
     6         console.info((new Date).getTime(), message)
     7     });
     8 
     9     setInterval(function () {
    10         document.title = (window.isMaster() ? 'Master ' : 'Slave ')   duel.getWindowID();
    11     }, 100);
    12 </script>
    13 <button onclick="channel.broadcast('demo_trigger', 'hello world')">
    14     channel.broadcast('demo_trigger', 'hello world')
    15 </button>
    

     

    Node

    Node万事俱备是Node.js是壹套javascript运转时情状,实际上是对谷歌(Google)V8引擎的3个卷入。

    Node.js官网:

    Node.js汉语社区:

    51CTO-Node.js专题:

     

    Ember.js

    Ember.js是一套javascript的框架,Ember是3个有志于的Web应用程序,消除了标准,并提供了二个正经的应用程序架构的JavaScript框架。

    越来越多请参谋《Ember.js连串小说》

    举例那样的一个条件:能源依赖能够设置并模块化引用、可以运用很酷的 ES6语法、能够行使 SASS 预管理器写 CSS、代码可实时更新而不用贰次遍的手动刷新页面,那样的支出条件你会不会以为很爽!好,大家那就来铺排2个如此的情形!

    功能

    • 单身于其余的库(比方jQuery/Underscore等等)
    • 全盘相称
    • 轻易选用
    • 安静而且经受过核算

    Ember.js

    Ember.js是一套javascript的框架,Ember是二个心胸的Web应用程序,消除了典型,并提供了二个标准的应用程序架构的JavaScript框架。

    更加多请参谋《Ember.js系列小说》

     

    Angular.js

      AngularJS是为着战胜HTML在营造利用上的欠缺而规划的。HTML是1门很好的为静态文本显示设计的表明式语言,但要创设WEB应用的话它就显示乏力了。所以笔者做了部分职业(你也得以认为是小手腕)来让浏览器做笔者想要的事。

      经常,大家是因此以下技巧来消除静态网页技能在塑造动态应用上的欠缺:

      类库 - 类库是有的函数的集纳,它能帮忙您写WEB应用。起主导成效的是您的代码,由你来决定何时使用类库。类库有:jQuery等

      框架 - 框架是壹种独特的、已经完成了的WEB应用,你只必要对它填充具体的政工逻辑。这里框架是起主导功能的,由它来依据实际的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。

    中文站:

    基本功条件

    先是,你必要2个 Node.js,然后 NPM 也会趁着 Node.js 一齐装上。

    怎么是 NPM ?一言以蔽之 NPM 是用来下载安装 Node.js 的第2方工具包的二个管理器。当然,以往也得以设置浏览器中采取的包。提到包管理器,就不得不说下 Bower,Bower 从前一向是前端库管理工具,一齐先 NPM 只可以发表和装置 Node.js 的包,所以 Bower 盛行偶尔,随着 CommonJS 的普及,以及 UMD 标准的面世,让 NPM 安装前端浏览器 js 包成为了大概,随着 NPM 生态的老道,Bower 也就稳步被人忘记了~

    Node.js 安装实现后,能够施行以下命令验证安装是或不是中标:

    $ node -v
    v6.11.0
    
    $ npm -v
    3.10.10
    

    别急,Node.js 的一对还没完,国内通过 NPM 的官方源安装依赖好像比异常慢,动不动将在等上半天,如何消除?我们得以装二个 nrm!nrm 是 npm registry 管理工科具,能够轻松切换 npm registry,然后命令行使用时依然是 npm ,国内有过多 npm 的镜像,譬如天猫商城的 cnpm ,但是无数公司都架设了温馨的私库。什么是私库?私库正是不得不在厂家内网访问,无法公布到 npm 共享平台的 npm 包,举个例子大家大集团私库的 registry 的名号就是 hnpm。不细说了,我们先装三个试试:

    $ npm install -g nrm
    

    接下来遵照官方教程我们先切三个国内的 registry,比如大天猫的:

    $ nrm use cnpm
    

    接下来用 NPM 随意安装个如何,看看速度如何?是否快捷_

    等等,Node.js 还有。有的开采信赖包是有 Node.js 版本依赖的,大家知晓 Node.js 不一致大版本的作用依旧距离异常的大的,但大家又不会三遍遍的卸载安装吧?感到好蠢!好呢,大家本来可以装三个nvm,nvm?好像和 nrm 很像!nvm 是 Node.js 的版本处理工科具,可以在八个极端切换和周转不一致的 Node.js 版本,能够到这里参照具体的安装教程。不过nvm 在 windows 下不能动用,没涉及,这里还有多少个代表工具:nvm-window,gnvm 供您选取。

    一这段日子后,大家推行下命令验证安装成果:

    $ nvm --version
    0.33.0
    

    支持Bower

    通过Bower安装

    bower install duel --save

    Ember-cli

    Ember-cli是Ember.js的1套命令行工具,方便火速的加码模板、路由、模型、视图等MVC结构,还提供有/无视图的测试框架,提升开垦效用,是开辟Ember.js不可缺少的工具。

    官网:

     

    React.js

    无数人选用React作为MVC架构的V层。 固然React并从未要是过您的任何本领栈, 但它还可以够看作3个小特征轻巧地在已有档案的次序中使用. ReactJs3大特色:UI层、VirtualDom、数据流

    中文站:

    1篇不错的入门介绍:

    品类起始化

    有了上边的工具咱们就足以初阶成立三个档案的次序了,咱们实践以下命令来开头3个体系:

    mkdir my-app
    cd my-app
    npm init
    

    执行 npm init 后您汇合到你须求输入项指标片段新闻,完毕后回车确认,然后npm会在根目录下创立1个叫 package.json 的文件,你今后通过 --save 或者 --save-dev 安装的依附包都会油不过生在那个文件里。

    先不管那么多,大家在根目录下开创1个 src 目录,然后在 src 下创建index.jswww.68399.com,、index.html……,好呢,你能够依据上面包车型地铁组织新建文件:

    .
    ├── package.json
    └── src
        ├── index.css
        ├── index.html
        └── index.js
    

    在以下文件中输入代码:

    index.js:

    var el = document.createElement('div'),
      text = document.createTextNode('My App');
    
    el.appendChild(text);
    document.body.appendChild(el);
    

    index.html:

    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>My App</title>
    </head>
    <body>
    </body>
    </html>
    

    咱俩要想艺术让那几个页面跑起来,what??? 就那样轻松?,把js引进 index.html 不就完事儿了呗?当然没那么轻便,我们只是要搞高大上的东西的呢!

    哈~跑题了,大家继续。

    第2大家要装3个叫 webpack 的事物,它是一个模块打包器,也便是我们俗称的创设工具,从前的那么些 Grunt,Gulp 也都以营造筑工程具,不过今年头流行 webpack 了!开个噱头,webpack 的可扩张性和可插件化,以及把其余公文都说是模块的概念获得了前者社区的同1重申,而且在包装效能和按需分割文件上都以其余多少个营造筑工程具无法相相比较的,当然 webpack 的配备太灵活,官方文书档案写的太太太难看懂,也促成了累累初学者不可能入手。

    接下去大家就来配下那几个美妙的工具吧。

    支持NPM

    通过NPM安装

    npm install dueljs --save

    ES6

    ECMAScript是壹种由Ecma国际(前身为亚洲Computer创立商组织,英文名称是European Computer 马努facturers Assocication)通过ECMA-26二原则的台本程序设计语言。这种语言在万维英特网行使普遍,它往往被可以称作JavaScript或JScript,但实际后两个是ECMA-262正规的实现和扩大。

    博友介绍ES陆的文章:

    阮壹峰的ES陆图书:

     

    Backbone.js

    Backbone.js为复杂性WEB应用程序提供模型(models)、集合(collections)、视图(views)的布局。在那之中模型用于绑定键值数据和自定义事件;会集附有可枚举函数的足够API; 视图可以注脚事件管理函数,并经过RES本田UR-Vful JSON接口连接到应用程序。

    合法地址:

    汉语介绍:

    机关创设

    我们先安装下 webpack:

    npm install --save-dev webpack
    

    接下来在根目录下新建一个 webpack.config.js 文件,输入以下代码:

    let path = require('path');
    
    module.exports = {
      entry: {
        app: path.resolve(__dirname, 'src', 'index.js')
      },
      output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
      }
    };
    

    但要想在浏览器中走访还得有个地面服务器,还好 webpack 都帮大家想到了,大家得以装二个webpack-dev-server:

    npm install --save-dev webpack-dev-server
    

    咱们在 package.json 中加进个 npm scripts:

    "scripts": {
      "start": "webpack-dev-server --port 3003"
    },
    

    ok!大家实行下 npm start,在浏览器中访问:http://localhost:3003。哎?好像何地不对!是的,你得告诉 webpack,你的 bundle(打包后的 js)要插入到哪个 html 模板,前边说过,webpack 是插件化的,它把过多效果开放给了第3方来落到实处,他只是来顶住拼装的,好,未来我们需求安装一个html-webpack-plugin 插件:

    npm install --save-dev html-webpack-plugin
    

    修改下 webpack-config.js:

    let HtmlWebpackPlugin = require('html-webpack-plugin'),
      path = require('path');
    
    module.exports = {
      entry: {
        ...
      },
      ...
      plugins: [
        new HtmlWebpackPlugin({
          template: path.resolve(__dirname, 'src', 'index.html')
        })
      ]
    }
    

    双重施行 npm start,页面能够健康访问了。

    而是,那样就像有一点 low,大家新扩大3个文书 utils.js,搞点es6语法:

    .
    ├── package.json
    └── src
        ├── index.css
        ├── index.html
        ├── index.js
        └── utils
            └── utils.js
    

    utils.js:

    export function wordsToSentence(...words) {
      return words.join(' ');
    }
    

    修改 index.js

      import { wordsToSentence } from './utils/utils';
    
    let el = document.createElement('div'),
    -  text = document.createTextNode('My App');
       text = document.createTextNode(
         wordsToSentence('Welcome', 'to', 'my', 'app!')
       );
    
    el.appendChild(text);
    document.body.appendChild(el);
    

    刷新页面后周边也没怎么非常(你势必用了 chrome 吧!),仔细看调整台的 source 的 app.js(你的 bundle)的代码片段:

    "use strict";
    /* harmony export (immutable) */ __webpack_exports__["a"] = wordsToSentence;
    function wordsToSentence(...words) {
      return words.join(' ');
    }
    

    值得注意的是,使用 ES陆 时须要思索那三个未有援助 ES6 的旧浏览器,即便在 chrome 或许别的高等浏览器中未有现身难点,但不可能确认保障在此外浏览器中能平常运作。为了一箭穿心,大家需求将 ES6 转变为 ES5,也正是js代码转变器,这类工具当当代界就属 Babel 最牛逼了:

    npm install --save-dev babel-loader babel-core
    

    稍等,装了 Babel 还无法用,还得搞个 presets:

    npm install --save-dev babel-preset-env
    

    在根目录下新建个 .babelrc,输入配置:

    {
      "presets": ["env"]
    }
    

    修改 webpack.config.js,增加 babel 的支持:

    ...
    module.exports = {
      ...
      module: {
        rules: [
          {
            test: /.js$/,
            loader: 'babel-loader',
            include: path.resolve(__dirname, 'src')
          }
        ]
      },
      ...
    };
    

    执行 npm start,找到调控台 source 下的 app.js 代码片段:

    "use strict";
    
    
    Object.defineProperty(exports, "__esModule", {
      value: true
    });
    exports.wordsToSentence = wordsToSentence;
    function wordsToSentence() {
      for (var _len = arguments.length, words = Array(_len), _key = 0; _key < _len; _key  ) {
        words[_key] = arguments[_key];
      }
    
      return words.join(' ');
    }
    

    早就成功调换来 ES伍 代码。不过,近期 ES6 Modules 是由 Babel 来转的,你能够对照前后 一遍的代码片段的模块输出部分。今后,webpack 贰 已经内 四 置了 ES陆 Modules 的转移,传说作用和质量比 Babel 高!_没验证过啊,我们先试试,把 Babel 的模块转换关了先:

    .babelrc

    {
      "presets": [
        ["env", {
          "modules": false
        }]
      ]
    }
    

    执行 npm start 再一次查看输出后的 app.js 的代码片段:

    -Object.defineProperty(exports, "__esModule", {
    -  value: true
    -});
    -exports.wordsToSentence = wordsToSentence;
     /* harmony export (immutable) */ __webpack_exports__["a"] = wordsToSentence;
    function wordsToSentence() {
      ...
    }
    

    模块输出格局又回去了使用 Babel 前的代码。

    js 的情状犹如早就准备稳妥,但 css 还没出场,大家来修改下 index.css:

    #app {
      color: #57af09;
    }
    

    与此同时将 css 导入 bundle 入口,并修改下 index.js:

    import './index.css';
    import { wordsToSentence } from './utils/utils';
    
    let el = document.createElement('div'),
    ...
    el.id = 'app';
    ...
    

    有了体制还十一分,webpack 还索要相应的 loader 来拍卖 css 的模块:

    npm i --save-dev style-loader css-loader
    

    修改下 webpack.config.js:

    ...
    module.exports = {
      ...
      module: {
        rules: [
          ...
          {
            test: /.css$/,
            loader: ['style-loader', 'css-loader'],
            include: path.resolve(__dirname, 'src')
          }
        ]
      },
      ...
    };
    

    执行 npm start,以后得以阅览页面已经有了体制。不过,大家说过,我们期待采纳先进的火器:SASS。大家修改下 index.css:

    $app-color: #57af09;
    
    #app {
      color: $app-color;
    }
    

    再修改下文件后缀:

    .
    ├── package.json
    └── src
    -   ├── index.css
        ├── index.scss
        ...
    

    修改 index.js 的入口:

    -import './index.css';
     import './index.scss';
    

    由于文件(模块)类型变了,大家还亟需2个 SASS 的 webpack loader:

    npm install --save-dev sass-loader node-sass
    

    再度修改 webpack.config.js:

    ...
    module.exports = {
      ...
      module: {
        rules: [
          ...
          {
    -       test: /.css$/,
            test: /.scss$/,
    -       loader: ['style-loader', 'css-loader'],
            loader: ['style-loader', 'css-loader', 'sass-loader'],
            include: path.resolve(__dirname, 'src')
          }
        ]
      },
      ...
    };
    

    执行 npm start,webpack 编写翻译未有报错,页面展现1切平常!

    ES6导入

    若是你借助babel/webpack来利用ES陆,你只供给像上边这样导入dulejs:

    import duel from 'dueljs'

    Travis CI

    Travis CI是在软件开拓领域中的二个在线的,布满式的[1]穿梭集成服务,用来创设及测试在GitHub[2]托管的代码。那一个软件的代码同时也是开源的,能够在GitHub上下载到[3],就算开荒者当前并不推荐在闭源项目中单独采用它。[4]

    它提供了多样编制程序语言的帮助,蕴涵Ruby,JavaScript,Java,Scala,PHP,Haskell和Erlang在内的各样语言。[5]洋洋资深的开源项目选拔它来在历次提交的时候实行营造测试,比如Ruby on Rails,Ruby和Node.js。[5][6]

     

    注:近些日子在Github上Travis CI比较盛行,其不止是三个不住集成的框架,而且还能够动用github上的变动“钩子”进行代码变化时自动运营测试,而且还是能将测试结果Logo用马克down的语法绑定到您自身的ReadMe.md中简易方便实用。

    Travis CI天生支持Node.js的语法不须求点名语言,所以能够同时协理二种组成语言测试,举个例子Node.js Python、Node.js Scala等,但前提是Node.js 『』的构成。

     

    官方网站:

     

    Knockout.js

    Knockout是1个轻量级的UI类库,通过选取MVVM格局使JavaScript前端UI轻松化。

    Knockout有如下4大注重概念:

    • 评释式绑定 (Declarative Bindings):采取简明易读的语法很轻易地将模型(model)数据涉嫌到DOM成分上。
    • UI分界面自动刷新 (Automatic UI Refresh):当您的模子状态(model state)改换时,您的UI分界面将自动更新。
    • 依附追踪 (Dependency Tracking):为转移和协助实行数据,在您的模子数据里面隐式营造关联。
    • 模板 (Templating):为你的模型数据快捷编写复杂的可嵌套的UI。

    简称:KO

    官网:http://knockoutjs.com

    @汤姆岳丈开垦指南: 

    代码自动更新(热更新)

    只要你品尝修改 index.scss 的样式,你有没留意到3个难点:页面会自动刷新。但不经常大家在支付3个模块,譬喻dialog,刷新会招致您需求反复的在页面上操作才具见到这几个 dialog 的体裁更新。那我们有未有艺术不刷新页面又能看出代码的更新呢?

    事实上很简短,因为 webpack-dev-server 已经停放了如此的效能,大家假若配置下 package.json的 npm scripts:

    "scripts": {
      "start": "webpack-dev-server --hot --inline --port 3003"
    },
    

    留神到下边包车型客车代码,大家增添了 --hot --inline,让开垦条件有了热更新的本领。我们再度执行 npm start,然后将你的浏览器和编辑器并排放置,然后反复修改 index.scss,你汇合到页面不会刷新,但样式在活动的推送更新,那正是风传中的热更新

    Online demo

    在线示例

    在线示例地址

    RESTful API

    RESTful架构是1种流行的网络软件架构,它结构清晰,符合标准,易于精通,扩大方便。
    REST是Representational State Transfer的缩写,翻译为“表现层状态转化”。表现层其实正是能源,由此能够清楚为“资源情况转化”。
    网络利用上的此外实体都得以当做是壹种财富,通过一个UBMWX伍I(统一财富定位符)指向它。

    老大有价值的参照他事他说加以考察资料:RESTful JSON API,理解RESTful架构

     

    sproutcore.js

     SproutCore的目的是在浏览器中提供极佳的桌面效果应用而不需求任何浏览器插件。全部这几个都不是用什么样新技艺完毕的,而是使用这几年广为应用还要又在相连进化的本事。SproutCore首要选拔了JavaScript、HTML以及CSS,这样对后端系统就没怎么范围了,分明是个优势。sproutcoreJS2.0是Ember.js前身。

    官方网站:

     

    结束语

    到那边,轻便(简陋)的、今世化的前端开垦遭逢已经有了主导的雏形,可是,本篇文章不是webpack 的使用指南,也不是 ES⑥的语法教程,就算如此,照旧盼望您通过本篇文章感受到前端开垦在工程化领域的前行带来的悲喜。

    www.68399.com 1

    www.68399.com 2

    iKcamp原创新书《移动Web前端高效开辟实战》已在亚马逊(Amazon)、京东、当当开售。

    文档

    文书档案地址dueljs.readthedocs.org

    二. 包管理工科具篇

    一. 基础知识篇

    TabNinja

    当今您能够钦定其余叁个tab作为一级大旨方tab。测试版本的插件已经得以设置,github地址是github.com/student伊凡/tabninja

    bower install tabninja --save

    Npm

    NPM的齐全部是Node Package Manager[1] ,是三个NodeJS包管理和散发工具,已经产生了不法的颁发Node模块(包)的正儿八经。

    若果您熟识ruby的gem,Python的pypi、setuptools,PHP的pear,那么你就精晓NPM的功效是哪些了。

    Nodejs自己提供了主题的模块,可是付出实际应用进程中仅仅正视那个骨干模块则还亟需较多的行事。幸运的是,Nodejs库和框架为大家提供了帮手,让我们减弱工作量。可是过多的库或然框架管理起来又很劳碌,有了NPM,能够火速的找到特定服务要使用的包,举行下载、安装以及管理已经设置的包。

    官网:

     

    Node

    Node齐全部是Node.js是一套javascript运营时景况,实际上是对Google V8)引擎的一个打包。

    Node.js官网:

    Node.js汉语社区:

    51CTO-Node.js专题:

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:【www.68399.com】Javascript开垦之工具总结

    关键词: 68399皇家赌场 JavaScript 编程开发 - JS 前端跟我学

上一篇:滚动优化

下一篇:没有了