简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  웹 프론트엔드  >  js에 대한 통찰력과 공유

js에 대한 통찰력과 공유

零下一度
零下一度원래의
2017-07-18 13:44:121605검색

JavaScript는 인터넷용 스크립트 언어입니다!

JavaScript는 수백만 개의 웹 페이지에서 디자인 개선, 양식 유효성 검사, 브라우저 감지, 쿠키 생성 등을 위해 사용됩니다.

JavaScript는 인터넷에서 가장 인기 있는 스크립트 언어입니다.

JavaScript는 사용하기 쉽습니다! 당신은 그것을 좋아할 것입니다!

js는 이제

1. 브라우저 측

2. 컴퓨터 운영 체제

에서 실행될 수 있습니다. 노드는 c/cpp로 작성된 js 실행 환경이며, 아마도 js는 c 변수로 컴파일되어 기계에 포함될 것입니다. 언어. . . 아마도

노드 컴파일
js
운영 체제 실행 가능한 기계어
일 것입니다.

패키지 설치 도구

1.npm

2.bower

3.yarn

이제 모두가 이것을 추천합니다. . . 더 빠르고 좋다고 합니다

빌드 패키징 도구(솔직히 지금은 아직도 차이를 모르겠습니다)

빌드 도구 작업 실행기

파일 압축에 도움이 되나요? 요정? 혼란 등으로 인해 수동 단순화가 필요합니까? 수작업 꿀꺽꿀꺽

패키징 도구 모듈 패키징 도구

모듈식 코드가 마침내 온라인 사용을 위해 조립 및 패키징되었으며, webpack browserify 및 seajs require는 사이트의 브라우저 측 js에 패키징되어 더 이상 권장되지 않습니다.

페이지 전통적인 js

script의 소개 방법 src

node 동적 소개

이것은 매우 마법같은 노드 도구입니다. 예를 들어, 노드 모듈에서 플러그인을 사용하는 경우 실제로 스크립트를 사용하지 않습니다. 페이지에 소개해줄래? 당분간 이해가 안가시면 상식적으로 (vue-cli) 개발을 생각하실 수 없습니다. 모든 동적 어셈블리를 하나로 패키징하는 동적 어셈블리 빌드입니다. . .

es2015==es6 =>true

jquery 속성 self-adding

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

vue에 대한 나의 현재 생각

첫 번째 모두, 데이터만 운용하고 돔을 운용할 필요가 없다는 점을 이야기해보겠습니다. a, b, b, c, a, b, b, c, a, b, b, 등등. c는 a를 할 것이고, b는 끝날 것입니다. c는 a를 할 것이고, 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를 시뮬레이션하여 텍스트 영역 리치 텍스트 편집기

<div class="simutextarea">
                    <span class="simut-fastenbegin">#youCantDeleteMe</span><span class="simut-textwrapper">
                        <span class="simut-textplaceholder">Hot or not? Tell it like it is and hashtag!</span>
                        <span class="simut-textplaceinput" contenteditable="true"> </span>
                    </span>
                </div>
하지만 몇 가지 문제가 있습니다. 커서 문제는 해결할 수 없습니다(jumping the 첫 번째 게시물), Baidu Tieba 게시물 이것을 사용하여 상자를 시뮬레이션합니다. 시간이 있을 때 어떻게 하는지 봅시다

기기에 따라 점프

세 파티가 점프할 수 있으며 모두 브라우저에서 userAgent를 얻을 수 있습니다

운영 및 유지보수 점프

  1. 프로그램 점프

  2. 프런트엔드 점프

  3. 동시에 이들 3자, 네트워크 사업자, 심지어 라우터까지 악의적인 DNS로 페이지에 악의적인 내용을 추가할 수 있습니다

    노드를 런타임 서버로 사용하는 경우도 마찬가지입니다

사진은 Center

background-position center

  1. position 절대

  2. 여러 줄 생략됨(최신 브라우저)
    3. overflow: hidden;text-overflow:ellipsis;display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
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 실행

async/await

demo( 스크립트 스니펫 #1)
//测试 async async async await//先来的 返回一个promise 完成时调用resolvevar 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는 이것이 비동기 함수이고 Wait는 이 함수에서만 사용할 수 있음을 의미합니다. .

await는 실행을 계속하기 전에 결과를 반환하겠다는 약속을 기다리는 것을 의미합니다.

await 뒤에는 promise 개체가 와야 합니다(물론 다른 반환 값은 중요하지 않으며 즉시 실행될 뿐이지만 의미가 없습니다...)

직접 말하면 현재는 비동기 콜백 지옥에 대한 궁극적인 해결책 물론 해결책은 이제 바벨을 결합하는 것입니다. 현재로서는 궁극적인

vue 구성 요소 통신

이 마음에 들지 않더라도 할당되면 사용해야 합니다. . .

구성 요소 간의 범위는 독립적이며 구성 요소 간에 데이터를 전달해야 하는 경우가 많습니다.

A는 상위 구성 요소이고 아래에는 하위 구성 요소 B와 C가 있습니다.

A의 데이터는 props를 통해 B와 C로 전달될 수 있습니다.
A는 $broadcast를 통해 B와 C의 이벤트를 호출하여 B와 C의 데이터를 조작할 수 있습니다.

B와 C는 $dispatch를 통해 A의 이벤트를 호출하여 A의 데이터를 조작할 수 있습니다.
B가 C의 데이터를 조작해야 하는 경우 먼저 A에 $dispatch를 수행한 다음 C에 $broadcast해야 합니다.


프로젝트가 상대적으로 작더라도 괜찮습니다. 프로젝트가 클수록 관련 구성요소가 점점 더 자주 통신하게 됩니다. 이때 관리는 매우 피곤하고 오류가 발생하기 쉽습니다. 이것이 Vuex의 모든 것입니다. 데이터를 별도의 레이어에 배치하고 내부 데이터의 외부 조작을 위한 방법을 제공할 수 있습니다. 좀 저속한 표현이니까 이해해 봅시다.

=== === ===업데이트: Vue 2가 출시되었으며 $dispatch 및 $broadcast가 제거되었으며 통신 이벤트 핑퐁이 더 이상 발생하지 않습니다.

통신 매체 역할을 하려면 Vue 인스턴스가 필요합니다. 공식 Vue 문서에서는 이를 이벤트 버스라고 부릅니다. 기본 new Vue() 내보내기; 구성요소 간 이벤트 통신이 필요한 경우 이 이벤트 버스에서 $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!');
    }
  }
});

이벤트 버스는 Vue 1.x에서도 사용할 수 있는 연습입니다.

대형은 작은 컨테이너의 중앙에 위치합니다

방법 1

대형: 위치 절대값 왼쪽 50%; 여백-왼쪽 -[큰 너비의 절반]...왼쪽과 동일 생략

작음 : 상대적인 위치;

法二

设置为背景图 且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);
			}
		}

正则替换 保留原始内容

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

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

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

结果是"sdjlfjslfdef"

关于vue一点新的体会

专注于操作数据，数据和视图分离，通过操作数据的方式操作视图，mvvm
而不是$().html()等等这种形式

webstorm 保存不会触发webpack watch


原来是这样啊啊啊啊啊啊

text align justify

text-align:justify 属性是全兼容的，使用它实现两端对齐，需要注意在模块之间添加[空格/换行符/制表符]才能起作用，同样，实现文本对齐也是需要在字与字之间添加[空格/换行符/制表符]才能起作用

vue validator


中文文档

关于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

 

위 내용은 js에 대한 통찰력과 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Bootstrap 썸네일에 대한 자세한 소개다음 기사：Bootstrap 썸네일에 대한 자세한 소개

관련 기사

더보기