bet体育在线require这四个是在浏览器端js现场包装,node是由c/cpp编写的js运营环境

js现在得以运作在

js未来得以运作在

1.浏览器端

一.浏览器端

二.电脑操作系统上

透过如雷贯耳的node,
node是由c/cpp编写的js运转条件,差不离是js通过编写翻译变成c变成汇编变成机器语言。。。大致

node编译

js

操作系统可进行机器语言


2.总结机操作系统上

透过远近知名的node,
node是由c/cpp编写的js运行条件,大致是js通过编译变成c变成汇编变成机器语言。。。大致

node编译

js

操作系统可进行机器语言


包安装工具

包安装工具

1.npm

1.npm

2.bower

2.bower

3.yarn

前天我们都推荐那几个。。。听别人说更快更好


3.yarn

今昔大家都推荐那一个。。。据他们说更快更好


构建打包工具(说实话这些本人明天依然分不清)

营造打包工具(说实话那么些本身今后照旧分不清)

塑造筑工程具 任务执行器

帮衬压缩文件?sprite?混淆等等需须求手工业操作的简化?手工业劳动 gulp grunt

构建筑工程具 职分执行器

扶持压缩文件?sprite?混淆等等需必要手工业操作的简化?手工业劳动 gulp grunt

装进工具 模块打包工具

模块化的代码最终组装打包上线用的,webpack browserify ,seajs
require那五个是在浏览器端js现场包装,今后壹度不引进了


包装工具 模块打包工具

模块化的代码最后组装打包上线用的,webpack browserify ,seajs
require这七个是在浏览器端js现场包装,未来曾经不推荐了


页面中的js

页面中的js

价值观引入方式 script src

古板引入格局 script src

node动态引入

这几个是个很神奇的 node的工具webpack动态的组装你的页面 比如使用node
modules里面包车型地铁插件
你并未实际用script引入到页面中那样子?暂且不了解的时候,无法用常理来设想(vue-cli)dev时是动态组装build才把装有动态组装的打包好成3个。。。


node动态引入

那么些是个很神奇的 node的工具webpack动态的组装你的页面 比如使用node
modules里面包车型地铁插件
你并未实际用script引入到页面中那规范?目前不亮堂的时候,不可能用常理来惦念(vue-cli)dev时是动态组装build才把具备动态组装的打包好成七个。。。


es2015==es6 =>true


es2015==es6 =>true


jquery 属性自加

a.css({‘property’:’+=value’})


jquery 属性自加

a.css({‘property’:’+=value’})


当前笔者对vue的感想

率先,说下优点确实某个,只操作数据并非操作dom

再者说下缺点,搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c,最终搞得极难看懂。为了变方便变得更麻烦要加更多东西


时下自作者对vue的感想

先是,说下优点确实有个别,只操作数据并非操作dom

况且下缺点,搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c搞a要搞b搞b要搞c,最终搞得很丑懂。为了变方便变得更麻烦要加更加多东西


contenteditable

div 模拟textarea 富文本编辑器

<div class="simutextarea">
                    #youCantDeleteMe

                        Hot or not? Tell it like it is and hashtag!


                </div>

不过多少难点的,化解不了光标的标题(跳首),百度贴吧的发帖框便是用这一个宪章的,有时光探望他们咋办的


contenteditable

div 模拟textarea 富文本编辑器

<div class="simutextarea">
                    #youCantDeleteMe

                        Hot or not? Tell it like it is and hashtag!


                </div>

只是多少难点的,化解不了光标的题材(跳首),百度贴吧的发帖框就是用这么些宪章的,有时光看看她们咋做的


根据设备跳转

3方得以跳转,都能够取得浏览器传来的userAgent

  1. 运营跳转
  2. 次第跳转
  3. 前端跳转

再者,那三方加上网路运行商依然路由器都得以恶意dns恶意在页面上加东西
node作为运营时服务器,也是如出一辙的


依据设备跳转

三方能够跳转,都足以收获浏览器传来的userAgent

  1. 运行跳转
  2. 先后跳转
  3. 前者跳转

再正是,这三方加上网路运营商还是路由器都得以恶意dns恶意在页面上加东西
node作为运营时服务器,也是同样的


图形位于中段

  1. background-position center
  2. position absolute

图片位于中间

  1. background-position center
  2. position absolute

多行省略(现代浏览器)

overflow: hidden;text-overflow:ellipsis;
        display: -webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;

多行省略(现代浏览器)

overflow: hidden;text-overflow:ellipsis;
        display: -webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;

cdn页面真正动态内容

页面被cdn服务器缓存后,须要刷新缓存才能当真改观,那么真正须求努力改变的内容必要js来博取(比如当前报到用户信息等等)

cdn页面真正动态内容

页面被cdn服务器缓存后,供给刷新缓存才能真正转移,那么真正必要努力改变的始末要求js来收获(比如当前报到用户消息等等)

js 正则找出富有符合的匹配

var regEx=/js_quantity[a-z]+/g;regEx.exec('js_quantityabc js_quantityminus minus disabled');regEx.exec('js_quantityabc js_quantityminus minus disabled');regEx.exec('js_quantityabc js_quantityminus minus disabled')
[0];regEx.exec('js_quantityabc js_quantityminus minus disabled').index;

连发接二连三执行exec


js 正则找出富有符合的匹配

var regEx=/js_quantity[a-z]+/g;regEx.exec('js_quantityabc js_quantityminus minus disabled');regEx.exec('js_quantityabc js_quantityminus minus disabled');regEx.exec('js_quantityabc js_quantityminus minus disabled')
[0];regEx.exec('js_quantityabc js_quantityminus minus disabled').index;

穿梭接二连三执行exec


async/await

demo(Script snippet #1)

//测试 async async async await
//先来的 返回一个promise 完成时调用resolve
var sleep=function(){
 return new Promise(function(resolve,reject){
     setTimeout(function(){
         console.log('Asettimeout has been executed, promiss has been resolved');
         resolve(['sleep1','sleep2']);
     },3000);
 });
};
//后到的 async(异步)修饰function await修饰执行先来的
var start=async function(){
 let sleepreturnarray=await sleep();
 console.log('%ceven though i do not have a time out, i still will be executed after 3 sec, after the promiss resolveed'+sleepreturnarray[1],'color:red;');
};
start();

async 表示那是1个async函数,await只可以用在那几个函数里面。

await 代表在此间守候promise再次来到结果了,再继续执行。

await
后边随着的应当是八个promise对象(当然,其他再次来到值也没涉及,只是会立时施行,也就那样就不曾意思了…)

大大说了,如今那那就是异步回调鬼世界的巅峰消除方案,当然要结合babel今后。注意,
近期, 终极


async/await

demo(Script snippet #1)

//测试 async async async await
//先来的 返回一个promise 完成时调用resolve
var sleep=function(){
 return new Promise(function(resolve,reject){
     setTimeout(function(){
         console.log('Asettimeout has been executed, promiss has been resolved');
         resolve(['sleep1','sleep2']);
     },3000);
 });
};
//后到的 async(异步)修饰function await修饰执行先来的
var start=async function(){
 let sleepreturnarray=await sleep();
 console.log('%ceven though i do not have a time out, i still will be executed after 3 sec, after the promiss resolveed'+sleepreturnarray[1],'color:red;');
};
start();

async 代表那是三个async函数,await只好用在这些函数里面。

await 表示在那边等待promise再次回到结果了,再继续执行。

await
后边跟着的应有是三个promise对象(当然,其余重临值也没涉及,只是会立时执行,不过尔尔就不曾意思了…)

大大说了,近来那那正是异步回调地狱的顶峰化解方案,当然要组成babel以往。注意,
方今, 终极


vue组件通信

不怕你不欣赏,分到你用你也得用。。。

组件之间的功效域独立,而组件之间经常又需求传递数据。
A 为父组件,上边有子组件 B 和 C。
A 的多寡足以由此 props 传递给 B 和 C。
A 能够透过 $broadcast 调用 B 和 C 的 events,从而操作 B 和 C
的数额。
B 和 C 能够经过 $dispatch 调用 A 的 events,从而操作 A 的数据。
当 B 须求操作 C 的数码就会比较麻烦,供给先 $dispatch 到 A,再
$broadcast 到 C。

如若项目相比较小的话万幸,越大的类型,涉及的机件通信就越来越多、越频繁,此时管理起来就会尤其累,而且简单失误。那正是Vuex
的意义所在。它能够将数据置于单独的一层,并提须要外部操作内部数据的章程。粗俗一点,就如此精通呢。

vue组件通信

尽管你不欣赏,分到你用你也得用。。。

组件之间的作用域独立,而组件之间平时又须要传递数据。
A 为父组件,上面有子组件 B 和 C。
A 的数量足以因而 props 传递给 B 和 C。
A 能够透过 $broadcast 调用 B 和 C 的 events,从而操作 B 和 C
的多少。
B 和 C 能够经过 $dispatch 调用 A 的 events,从而操作 A 的数量。
当 B 需求操作 C 的数额就会相比麻烦,须要先 $dispatch 到 A,再
$broadcast 到 C。

借使项目相比小的话万幸,越大的类型,涉及的机件通讯就更多、越频仍,此时管理起来就会那几个累,而且不难失误。那正是Vuex
的意义所在。它能够将数据置于单独的一层,并提供给外部操作内部数据的不贰诀要。粗俗一点,就像此敞亮呢。

=== === ===更新:Vue 二 公布了,去掉了 $dispatch 和 $broadcast,已经不会出现通讯事件 ping-pong 的意况了。

咱俩需求有一个 Vue 实例来担任通讯媒介的效益,Vue 官方文书档案里将它称作
event bus。export default new Vue();
当我们要求组件之间事件通讯的时候,只必要对这么些 event bus 使用 $emit 和
$on 就足以了。

import Bus from './bus.js';

export default Vue.extend({
  template: `
  <div>{{msg}}</div>
  `,

  data: () => ({
    msg: 'Hello World!'
  }),

  created() {
    Bus.$on('setMsg', content => {
      this.msg = content;
    });
  }
});

import Bus from './bus.js';

export default Vue.extend({
  template: `
  <div @click="sendEvent">Say Hi</div>
  `,

  methods: {
    sendEvent() {
      Bus.$emit('setMsg', 'Hi Vue!');
    }
  }
});

伊夫nt bus 是壹种实施,你也得以在 Vue 一.x 中选择它。


=== === ===更新:Vue 二 宣告了,去掉了 $dispatch 和 $broadcast,已经不会冒出通讯事件 ping-pong 的动静了。

咱俩需求有二个 Vue 实例来担任通讯媒介的效益,Vue 官方文书档案里将它叫做
event bus。export default new Vue();
当我们须求组件之间事件通信的时候,只要求对这几个 event bus 使用 $emit 和
$on 就足以了。

import Bus from './bus.js';

export default Vue.extend({
  template: `
  <div>{{msg}}</div>
  `,

  data: () => ({
    msg: 'Hello World!'
  }),

  created() {
    Bus.$on('setMsg', content => {
      this.msg = content;
    });
  }
});

import Bus from './bus.js';

export default Vue.extend({
  template: `
  <div @click="sendEvent">Say Hi</div>
  `,

  methods: {
    sendEvent() {
      Bus.$emit('setMsg', 'Hi Vue!');
    }
  }
});

伊夫nt bus 是一种实施,你也能够在 Vue 1.x 中选拔它。


大在小容器中居中

大在小容器中居中

法一

大:position absolute; left 50%;margin-left -[小幅面包车型的士二分一];
top…跟left壹样的简便

小:position relative;

法一

大:position absolute; left 50%;margin-left -[小幅度面包车型地铁二分一];
top…跟left一样的大约

小:position relative;

法二

安装为背景图 且background-position center


法二

设置为背景图 且background-position center


文本框和按钮同高对齐(less)

form{
            font-size: 0;position: relative;
            .formitem{
                height: 30px;line-height: 30px;
                font-size: 14px;vertical-align: middle;
            }
            input[type=text]{
                .formitem();
                border: 1px solid #000;
                padding: 0 5px 0 35px;
                width: 235-40px;
            }
            button{
                .formitem();
                color: #fff;background-color: #000;
                width: 135px;height: 32px;line-height: 32px;
            }
            &:before{
                content: '';display: inline-block;position: absolute;
                left: 38px;
                top: 1px;
                .sprite(@youjiandingyue_07);
            }
        }

文本框和按钮同高对齐(less)

form{
            font-size: 0;position: relative;
            .formitem{
                height: 30px;line-height: 30px;
                font-size: 14px;vertical-align: middle;
            }
            input[type=text]{
                .formitem();
                border: 1px solid #000;
                padding: 0 5px 0 35px;
                width: 235-40px;
            }
            button{
                .formitem();
                color: #fff;background-color: #000;
                width: 135px;height: 32px;line-height: 32px;
            }
            &:before{
                content: '';display: inline-block;position: absolute;
                left: 38px;
                top: 1px;
                .sprite(@youjiandingyue_07);
            }
        }

正则替换 保留原来内容

http://(\[A-Za-z0-9.-\]+).sammydress.com
https://$1.sammydress.com

$1 是代表([A-Za-z0-9.-]+)匹配到的歪曲内容
$一-$n分别表示第3个和第n个括号内匹配到的始末。

var regEx=/([A-Za-z0-9.-]+)abc/;
'sdjlfjslfabc'.replace(regEx,'$1def')

结果是”sdjlfjslfdef”


正则替换 保留原有内容

http://(\[A-Za-z0-9.-\]+).sammydress.com
https://$1.sammydress.com

$1 是代表([A-Za-z0-9.-]+)匹配到的混淆内容
$一-$n分别代表第1个和第n个括号内匹配到的始末。

var regEx=/([A-Za-z0-9.-]+)abc/;
'sdjlfjslfabc'.replace(regEx,'$1def')

结果是”sdjlfjslfdef”


有关vue一点新的体味

只顾于操作数据,数据和视图分离,通过操作数据的主意操作视图,mvvm
而不是$().html()等等这种样式


关于vue一点新的认知

只顾于操作数据,数据和视图分离,通过操作数据的法子操作视图,mvvm
而不是$().html()等等那种样式


webstorm 保存不会触发webpack watch

https://segmentfault.com/q/1010000007796140?_ea=1459577
原先是那般呀啊啊啊啊啊


webstorm 保存不会触发webpack watch

https://segmentfault.com/q/1010000007796140?_ea=1459577
原先是那般呀啊啊啊啊啊


text align justify

text-align:justify
属性是全包容的,使用它完毕两端对齐,须求专注在模块之间添加[空格/换行符/制表符]才能起功用,同样,完结公文对齐也是索要在字与字里面添加[空格/换行符/制表符]才能起效果


text align justify

text-align:justify
属性是全包容的,使用它完结两端对齐,须要留目的在于模块之间添加[空格/换行符/制表符]才能起功用,同样,达成文件对齐也是索要在字与字之间添加[空格/换行符/制表符]才能起效果


vue validator

https://segmentfault.com/a/1190000006706226
中文文书档案


vue validator

https://segmentfault.com/a/1190000006706226
普通话文书档案


至于postcss中用来不转换rem的笺注/*no*//*px*/在webpack build中不见效的消除办法

sass loader会把注释去掉 导致用于告诉postcss不用转换rem的诠释也去掉
导致边线px变成小数rem 呈现不出来的bug
sass?outputStyle=expanded 展开 带注释的?

module: {
        loaders: [
            {
                test: /\.scss$/,
                //感謝谷歌
                loader: 'style!css!postcss-loader!sass?outputStyle=expanded',
                // include: APP_PATH
            },
        ]
    },

webpack
尚可形如!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&includePaths[]=./node_modules
的布署参数后的loader


 

至于postcss中用于不转换rem的申明/*no*//*px*/在webpack build中不奏效的化解办法

sass loader会把注释去掉 导致用于告诉postcss不用转换rem的注释也去掉
导致边线px变成小数rem 突显不出去的bug
sass?outputStyle=expanded 展开 带注释的?

module: {
        loaders: [
            {
                test: /\.scss$/,
                //感謝谷歌
                loader: 'style!css!postcss-loader!sass?outputStyle=expanded',
                // include: APP_PATH
            },
        ]
    },

webpack
能够承受形如!sass?outputStyle=expanded&sourceMap=true&sourceMapContents=true&includePaths[]=./node_modules
的配置参数后的loader


 

相关文章